/* ============================================================ VANTIQX — CINE. The cinematic design system. Scene-based, film-first. Dark only. No light theme exists here. MODES (set on by cine.js): (none) no-JS. Stacked, fully readable document. Nothing hidden. .cine-fallback JS present but small viewport / reduced motion. Same stacked layout, plus menu + curtain chrome. .cine-armed full cinema. Document locked to one viewport, canvas film behind, copy pinned to frame edges. All armed rules live inside a media query (>=821px, motion OK) so a wrongly-armed page can never trap content on mobile or reduced motion. ============================================================ */ /* ---------- tokens ---------- */ :root { --ink: #0D0E10; --stage: #08090B; --surface: #17181A; --off: #F2F3F5; --muted: #8A8D97; --lime: #D7F25A; --lime-12: rgba(215, 242, 90, 0.12); --lime-30: rgba(215, 242, 90, 0.30); --edge: rgba(242, 243, 245, 0.14); --edge-soft: rgba(242, 243, 245, 0.07); --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); --pad-x: clamp(24px, 4.5vw, 72px); --pad-y: clamp(26px, 6vh, 72px); } /* ---------- fonts (self-hosted, real hashed paths) ---------- */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/app/assets/node_modules/@expo-google-fonts/plus-jakarta-sans/500Medium/PlusJakartaSans_500Medium.0a825b3e08f62af5a9bc9130843b12ff.ttf') format('truetype'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/app/assets/node_modules/@expo-google-fonts/plus-jakarta-sans/600SemiBold/PlusJakartaSans_600SemiBold.73de6fb49299ccb6478575127008c120.ttf') format('truetype'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/app/assets/node_modules/@expo-google-fonts/plus-jakarta-sans/700Bold/PlusJakartaSans_700Bold.bac8ecad2d6da4aa6b4200699a80a9dd.ttf') format('truetype'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/app/assets/node_modules/@expo-google-fonts/plus-jakarta-sans/800ExtraBold/PlusJakartaSans_800ExtraBold.f90855567d2c693a26e66f7184645099.ttf') format('truetype'); } /* ---------- reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--stage); color: var(--off); font-family: var(--font); font-weight: 500; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, canvas { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ol, ul { list-style: none; } ::selection { background: var(--lime); color: var(--ink); } :focus-visible { outline: 1px solid var(--lime); outline-offset: 3px; } /* ---------- shared type ---------- */ .eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lime); } .headline { font-size: clamp(1.45rem, 2vw, 2.15rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.14; color: var(--off); max-width: 15em; } .headline--big { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; } .line { font-size: 0.9rem; line-height: 1.6; color: var(--muted); max-width: 44ch; } .line strong { color: var(--off); font-weight: 600; } .fine { font-size: 0.68rem; line-height: 1.6; color: var(--muted); opacity: 0.8; max-width: 52ch; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 13px 24px; border: 1px solid var(--edge); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--off); background: rgba(8, 9, 11, 0.35); transition: border-color 0.35s var(--ease), color 0.35s var(--ease), background 0.35s var(--ease); } .btn:hover { border-color: var(--lime-30); color: var(--lime); } .btn-solid { background: var(--lime); border-color: var(--lime); color: var(--ink); } .btn-solid:hover { background: #e4fa7d; border-color: #e4fa7d; color: var(--ink); } .btn-ghost { border-color: transparent; background: none; color: var(--muted); } .btn-ghost:hover { color: var(--lime); border-color: transparent; } .tag { display: inline-block; padding: 4px 10px; border: 1px solid var(--lime-30); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime); } /* ============================================================ CHROME — brand top-left, sound + menu top-right. Present in every mode; controls hidden until JS declares a mode. ============================================================ */ .chrome { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; padding: clamp(18px, 3vh, 30px) var(--pad-x); pointer-events: none; background: linear-gradient(to bottom, rgba(8, 9, 11, 0.75), rgba(8, 9, 11, 0)); } .chrome > * { pointer-events: auto; } .brand { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.22em; color: var(--off); } .brand i { display: inline-block; width: 6px; height: 6px; margin-left: 6px; background: var(--lime); border-radius: 50%; vertical-align: baseline; } .chrome-right { display: flex; align-items: center; gap: clamp(14px, 2vw, 34px); } .sound, .nav-open { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.24em; color: var(--muted); padding: 8px 2px; transition: color 0.3s var(--ease); } .sound:hover, .nav-open:hover { color: var(--lime); } .sound[aria-pressed="true"] { color: var(--off); } .sound[aria-pressed="true"]::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px; background: var(--lime); border-radius: 50%; animation: sound-pulse 2.4s ease-in-out infinite; } @keyframes sound-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* no-JS: interactive chrome hidden until a mode is declared */ .sound, .nav-open { display: none; } .cine-armed .sound, .cine-armed .nav-open, .cine-fallback .nav-open { display: inline-block; } /* ============================================================ STACKED LAYOUT — the default. no-JS and .cine-fallback read this. Every scene is a full readable section over its still frame. ============================================================ */ .stage { position: fixed; inset: 0; z-index: 0; background: var(--stage); display: none; } .stage canvas { width: 100%; height: 100%; } .scenes { position: relative; z-index: 1; } .scene { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: calc(var(--pad-y) + 60px) var(--pad-x) var(--pad-y); background-color: var(--stage); background-image: var(--still); background-size: cover; background-position: center; overflow: hidden; } .scene::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 9, 11, 0.88) 0%, rgba(8, 9, 11, 0.25) 45%, rgba(8, 9, 11, 0.4) 100%); pointer-events: none; } .scene > * { position: relative; } .scene-copy { display: grid; gap: 14px; max-width: 620px; } .scene-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; } /* structured content zone (pricing cards, app frames, lists) */ .scene-panel { display: grid; gap: 14px; margin-top: 26px; width: 100%; max-width: 960px; } .panel-card { border: 1px solid var(--edge-soft); background: rgba(23, 24, 26, 0.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: clamp(18px, 2.2vw, 28px); } .panel-card h3 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; color: var(--off); margin-bottom: 6px; } .panel-card p { font-size: 0.8rem; line-height: 1.6; color: var(--muted); } .panel-card .price { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--off); } .panel-card .price span { font-size: 0.68rem; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; } .panel-card ul { display: grid; gap: 7px; margin-top: 12px; } .panel-card li { font-size: 0.78rem; color: var(--muted); padding-left: 16px; position: relative; } .panel-card li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 1px; background: var(--lime); } .panel-card--hot { border-color: var(--lime-30); } .phone { width: min(300px, 68vw); border: 1px solid var(--edge-soft); border-radius: 26px; overflow: hidden; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55); } .phone img { width: 100%; } /* final-scene footer */ .scene-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--edge-soft); width: 100%; } .scene-footer a, .scene-footer span { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); transition: color 0.3s var(--ease); } .scene-footer a:hover { color: var(--lime); } .scene-footer .foot-note { margin-left: auto; text-transform: none; letter-spacing: 0.02em; } /* cue / index / rail — armed-only instruments */ .scene-cue { display: none; } /* ============================================================ OVERLAYS — gate, preloader, menu, curtain, cursor. Root classes from cine.js switch them; all default to inert. ============================================================ */ /* ---------- audio gate ---------- */ .gate { position: fixed; inset: 0; z-index: 95; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 30px; text-align: center; padding: 32px; background: radial-gradient(circle at 50% 42%, rgba(23, 24, 26, 0.85), rgba(5, 6, 7, 0.98) 70%), #050607; opacity: 1; transition: opacity 0.7s var(--ease), visibility 0s 0.7s; } .cine-gate .gate { display: flex; } .gate.gate-out { opacity: 0; visibility: hidden; pointer-events: none; } .gate-geo { position: absolute; inset: 0; pointer-events: none; } .gate-geo::before, .gate-geo::after { content: ""; position: absolute; left: 50%; top: 50%; } .gate-geo::before { width: min(44vmin, 400px); height: min(44vmin, 400px); border: 1px solid var(--lime-12); transform: translate(-50%, -50%) rotate(45deg); animation: geo-spin 80s linear infinite; } .gate-geo::after { width: min(70vmin, 640px); height: min(70vmin, 640px); border: 1px solid rgba(242, 243, 245, 0.05); border-radius: 50%; transform: translate(-50%, -50%); animation: geo-breathe 9s ease-in-out infinite; } @keyframes geo-spin { to { transform: translate(-50%, -50%) rotate(405deg); } } @keyframes geo-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.5; } } .gate-brand { position: relative; font-size: 1rem; font-weight: 800; letter-spacing: 0.42em; padding-left: 0.42em; /* optically recentre tracked caps */ color: var(--off); } .gate-note { position: relative; font-size: 0.74rem; line-height: 1.7; color: var(--muted); max-width: 34ch; } .gate-actions { position: relative; display: grid; gap: 20px; justify-items: center; } .gate-silent { font-size: 0.68rem; letter-spacing: 0.08em; color: var(--muted); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } .gate-silent:hover { color: var(--off); border-color: var(--edge); } /* ---------- preloader ---------- */ .preloader { position: fixed; inset: 0; z-index: 90; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--stage); transition: opacity 0.6s var(--ease), visibility 0s 0.6s; } .cine-pre .preloader { display: flex; } .preloader.pre-out { opacity: 0; visibility: hidden; pointer-events: none; } .preloader-brand { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.42em; padding-left: 0.42em; color: var(--off); } .preloader-bar { width: 168px; height: 1px; background: var(--edge-soft); overflow: hidden; } .preloader-bar span { display: block; width: 0%; height: 100%; background: var(--lime); transition: width 0.3s linear; } .preloader-pct { font-size: 0.62rem; letter-spacing: 0.3em; color: var(--muted); font-variant-numeric: tabular-nums; } /* ---------- menu ---------- */ .menu { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; padding: 100px var(--pad-x) 60px; background: rgba(6, 7, 9, 0.9); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.55s var(--ease), visibility 0s 0.55s; } .menu-open .menu { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s, 0s; } /* chrome must ride above the open menu, or CLOSE is unreachable */ .menu-open .chrome { z-index: 75; background: none; } .menu-list { display: grid; gap: clamp(6px, 1.6vh, 16px); } .menu-list a { display: inline-flex; align-items: baseline; gap: 18px; font-size: clamp(1.5rem, 3.4vh, 2.2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--muted); transform: translateY(24px); opacity: 0; transition: color 0.3s var(--ease), transform 0.7s var(--ease), opacity 0.7s var(--ease); } .menu-open .menu-list a { transform: none; opacity: 1; } .menu-list li:nth-child(1) a { transition-delay: 0s, 0.05s, 0.05s; } .menu-list li:nth-child(2) a { transition-delay: 0s, 0.09s, 0.09s; } .menu-list li:nth-child(3) a { transition-delay: 0s, 0.13s, 0.13s; } .menu-list li:nth-child(4) a { transition-delay: 0s, 0.17s, 0.17s; } .menu-list li:nth-child(5) a { transition-delay: 0s, 0.21s, 0.21s; } .menu-list li:nth-child(6) a { transition-delay: 0s, 0.25s, 0.25s; } .menu-list li:nth-child(7) a { transition-delay: 0s, 0.29s, 0.29s; } .menu-list a:hover, .menu-list a[aria-current="page"] { color: var(--off); } .menu-list a i { font-style: normal; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; color: var(--lime); font-variant-numeric: tabular-nums; } .menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(26px, 6vh, 54px); padding-top: 24px; border-top: 1px solid var(--edge-soft); } .menu-foot .fine { max-width: none; } /* ---------- curtain ---------- */ .curtain { position: fixed; inset: 0; z-index: 80; background: var(--stage); border-top: 1px solid var(--lime-30); transform: translateY(103%); pointer-events: none; } .curtain.on { transform: translateY(0); transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1); } /* ---------- cursor ---------- */ .cursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; opacity: 0; display: none; } .cine-cursor .cursor { display: block; } .cursor.seen { opacity: 1; transition: opacity 0.4s; } .cursor-dot { position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--lime); border-radius: 50%; } .cursor-ring { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1px solid rgba(242, 243, 245, 0.3); border-radius: 50%; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease); } .cursor.hot .cursor-ring { transform: scale(1.7); border-color: var(--lime-30); } .cine-cursor, .cine-cursor a, .cine-cursor button { cursor: none; } /* ============================================================ ARMED — the film. Only possible >=821px with motion allowed. ============================================================ */ @media (min-width: 821px) and (prefers-reduced-motion: no-preference) { html.cine-armed, html.cine-armed body { height: 100%; overflow: hidden; overscroll-behavior: none; } html.cine-armed .stage { display: block; } /* vignette + film grain over the canvas */ html.cine-armed .stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.5) 100%); pointer-events: none; } html.cine-armed .stage::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.05; pointer-events: none; } /* scenes become invisible frames; only the active copy exists */ html.cine-armed .scenes { position: fixed; inset: 0; z-index: 2; } html.cine-armed .scene { position: absolute; inset: 0; min-height: 0; padding: 0; display: block; background: none; overflow: visible; pointer-events: none; } html.cine-armed .scene::before { display: none; } /* copy pinned bottom-left, small, hidden between scenes */ html.cine-armed .scene-copy { position: absolute; left: var(--pad-x); bottom: var(--pad-y); max-width: min(560px, 42vw); visibility: hidden; text-shadow: 0 1px 3px rgba(5, 6, 7, 0.6), 0 6px 30px rgba(5, 6, 7, 0.55); } /* over live film, muted grays need one step more light */ html.cine-armed .scene-copy .line { color: #A9ADB6; } html.cine-armed .scene-copy .fine { opacity: 1; } html.cine-armed .scene-copy > * { opacity: 0; transform: translateY(16px); filter: blur(9px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), filter 0.55s var(--ease); } html.cine-armed .scene[data-state="in"] .scene-copy { visibility: visible; pointer-events: auto; } html.cine-armed .scene[data-state="in"] .scene-copy > * { opacity: 1; transform: none; filter: blur(0); transition-duration: 0.85s; } html.cine-armed .scene[data-state="in"] .scene-copy > *:nth-child(1) { transition-delay: 0.05s; } html.cine-armed .scene[data-state="in"] .scene-copy > *:nth-child(2) { transition-delay: 0.14s; } html.cine-armed .scene[data-state="in"] .scene-copy > *:nth-child(3) { transition-delay: 0.24s; } html.cine-armed .scene[data-state="in"] .scene-copy > *:nth-child(4) { transition-delay: 0.34s; } html.cine-armed .scene[data-state="in"] .scene-copy > *:nth-child(5) { transition-delay: 0.42s; } html.cine-armed .scene[data-state="out"] .scene-copy { visibility: hidden; transition: visibility 0s 0.5s; } html.cine-armed .scene[data-state="out"] .scene-copy > * { opacity: 0; transform: translateY(-14px); filter: blur(8px); transition-duration: 0.45s; transition-delay: 0s; } /* panels ride the same state machine, anchored right */ html.cine-armed .scene-panel { position: absolute; right: var(--pad-x); bottom: calc(var(--pad-y) + 84px); /* clear of the cue block */ margin: 0; width: auto; max-width: min(880px, 62vw); visibility: hidden; opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease) 0.25s, transform 0.8s var(--ease) 0.25s; } html.cine-armed .scene[data-state="in"] .scene-panel { visibility: visible; opacity: 1; transform: none; pointer-events: auto; } html.cine-armed .scene[data-state="out"] .scene-panel { opacity: 0; transform: translateY(-16px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s 0.4s; } html.cine-armed .scene-panel.scene-panel--rail { display: flex; gap: 14px; } html.cine-armed .scene-panel.scene-panel--rail .panel-card { flex: 1 1 0; min-width: 0; } /* a card rail owns the lower frame — its copy yields to the top-left so the two never collide at narrower armed widths */ html.cine-armed .scene:has(.scene-panel--rail) .scene-copy { bottom: auto; top: calc(var(--pad-y) + 64px); } /* one big centred moment per page, at most */ html.cine-armed .scene--center .scene-copy { left: 50%; bottom: auto; top: 50%; transform: translate(-50%, -50%); text-align: center; justify-items: center; max-width: min(760px, 60vw); } /* soft scrim so the centre moment survives bright frames */ html.cine-armed .scene--center .scene-copy::before { content: ""; position: absolute; inset: -55% -45%; background: radial-gradient(ellipse at center, rgba(5, 6, 7, 0.85), rgba(5, 6, 7, 0.45) 45%, rgba(5, 6, 7, 0) 74%); z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.9s var(--ease); } html.cine-armed .scene--center[data-state="in"] .scene-copy::before { opacity: 1; } html.cine-armed .scene--center .line { color: #C9CCD4; } html.cine-armed .scene--center .scene-copy .headline, html.cine-armed .scene--center .scene-copy .line { margin-left: auto; margin-right: auto; } html.cine-armed .scene--center .scene-actions { justify-content: center; } /* final scene keeps its footer, pinned across the bottom. It rides the same in/out state machine as the copy — otherwise it bleeds through every other scene of the film. */ html.cine-armed .scene--last .scene-footer { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: calc(var(--pad-y) * 0.4); margin: 0; width: auto; visibility: hidden; opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease) 0.35s, transform 0.8s var(--ease) 0.35s; } html.cine-armed .scene--last[data-state="in"] .scene-footer { visibility: visible; opacity: 1; transform: none; pointer-events: auto; } html.cine-armed .scene--last[data-state="out"] .scene-footer { opacity: 0; transform: translateY(-10px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s 0.4s; } html.cine-armed .scene--last .scene-copy { bottom: calc(var(--pad-y) + 74px); } /* the cue yields the corner once the final scene has arrived */ html.cine-armed .scenes:has(.scene--last[data-state="in"]) ~ .scene-cue { opacity: 0; pointer-events: none; } /* cue block bottom-right: index, instruction, progress rail */ html.cine-armed .scene-cue { position: fixed; right: var(--pad-x); bottom: var(--pad-y); z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } html.cine-armed .scene-index { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.26em; color: var(--off); font-variant-numeric: tabular-nums; } html.cine-armed .scene-index span { color: var(--muted); } html.cine-armed .cue-text { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.3em; color: var(--muted); animation: cue-fade 3.2s ease-in-out infinite; } @keyframes cue-fade { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.3; } } html.cine-armed .rail { position: relative; width: 132px; height: 14px; cursor: pointer; } html.cine-armed .rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--edge-soft); } html.cine-armed .rail-fill { position: absolute; left: 0; top: 50%; height: 1px; width: 0%; background: var(--lime); transition: width 0.8s var(--ease); } /* chrome + cue only surface once the film begins */ html.cine-armed .chrome, html.cine-armed .scene-cue { opacity: 0; transition: opacity 1.2s var(--ease) 0.4s; } html.cine-armed.cine-live .chrome, html.cine-armed.cine-live .scene-cue { opacity: 1; } } /* ============================================================ SMALL VIEWPORT / REDUCED MOTION — stacked refinements ============================================================ */ .cine-fallback .sound { display: none; } /* no audio outside the film */ @media (max-width: 820px) { :root { --pad-x: 22px; --pad-y: 30px; } .headline { font-size: clamp(1.45rem, 6.4vw, 1.9rem); } .headline--big { font-size: clamp(1.9rem, 8.6vw, 2.6rem); } .scene { padding-top: 96px; } .scene-panel { grid-template-columns: 1fr; } .scene-footer .foot-note { margin-left: 0; width: 100%; } .menu { padding-top: 90px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }