/* ============================================================ showup_helgeland_bg.css · Helgeland-bakgrunn (ROBL) ------------------------------------------------------------ Roterende Helgeland-foto bak dashboard + booking (+ landing). Foto © Roger Grønnvold. Designet for å samarbeide med ditt tema-system: - Bakgrunnen er et fast lag (.robl-bg) bak alt innhold. - Scrim-en henter varme/mørke fra tema-tokens der de finnes, så den kler både lyse (sandstein) og mørke (hav/industri) tema. - Dine egne kort (.stat-card/.settings-card/.booking-table/ .upcoming-card) flyter allerede fint oppå via surface-alpha. Aktiveres per side ved at JS setter . ============================================================ */ :root{ --robl-scrim-top: rgba(30,24,18,.20); --robl-scrim-bot: rgba(20,16,12,.52); } /* Mørke tema → tyngre scrim så teksten fortsatt leser */ html[data-theme="hav"], html[data-theme="industri"]{ --robl-scrim-top: rgba(6,10,12,.42); --robl-scrim-bot: rgba(6,10,12,.72); } /* Bakgrunnslaget */ html[data-robl-bg] .robl-bg{ position: fixed; inset: 0; z-index: -2; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity .9s ease; animation: robl-drift 44s ease-in-out infinite alternate; will-change: transform, opacity; } html[data-robl-bg] .robl-bg.robl-ready{ opacity: 1; } html[data-robl-bg] .robl-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, var(--robl-scrim-top) 0%, rgba(24,19,14,.30) 45%, var(--robl-scrim-bot) 100%); } @keyframes robl-drift{ from{ transform: scale(1.06) translate3d(-1.1%,-.7%,0); } to { transform: scale(1.10) translate3d(1.1%, .7%,0); } } @media (prefers-reduced-motion: reduce){ html[data-robl-bg] .robl-bg{ animation: none; } } /* La tema-bakgrunnen (--page-bg / showup_theme.css sin body-bg) vike for fotoet når det er aktivt, men behold fargen som fallback. */ html[data-robl-bg] body{ background: transparent !important; } html[data-robl-bg] body > *{ position: relative; z-index: 0; } /* Dashboard (studio-tema): gi kortene litt ekstra "løft" over fotoet uten å røre standardtemaet når fotoet er av. */ html[data-robl-bg][data-theme] .stat-card, html[data-robl-bg][data-theme] .settings-card, html[data-robl-bg][data-theme] .booking-table, html[data-robl-bg][data-theme] .upcoming-card{ box-shadow: 0 18px 50px -22px rgba(15,12,9,.55), var(--shadow); -webkit-backdrop-filter: blur(max(var(--surface-blur), 6px)) saturate(1.04); backdrop-filter: blur(max(var(--surface-blur), 6px)) saturate(1.04); } /* Booking/landing (showup_theme.css): topbar og paneler leser fint. */ html[data-robl-bg] .topbar{ background: color-mix(in srgb, var(--surface, #fffaf3) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }