/* ScenePilot "Night shoot" brand tokens. One file for every cloud page (site, sign-in, studio, editor). Ink = the dark. Fog = soft sage light, used as atmosphere, never as a fill for buttons. Paper = text and the primary button. Signal = the one accent (live, record, playhead, errors). Lane colours keep their editor meaning: footage, photo, graphic, sound. */ :root { color-scheme: dark; --ink-0: #07080a; --ink-1: #0c0e11; --ink-2: #121519; --ink-3: #191d22; --ink-4: #23282e; --line: rgba(214, 228, 221, .08); --line-2: rgba(214, 228, 221, .14); --line-3: rgba(214, 228, 221, .24); --paper: #f2f4f1; --paper-2: #b3bab5; --paper-3: #7c847f; --paper-4: #555b57; --fog: #c5d4cb; --fog-2: #8fa89b; --fog-rgb: 197, 212, 203; --signal: #ff4a36; --signal-rgb: 255, 74, 54; --footage: #6f9dff; --photo: #e0b45c; --graphic: #b096f0; --sound: #6fc79a; --font-display: "Funnel Display", "Segoe UI", system-ui, sans-serif; --font-body: "Funnel Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-title: "Newsreader", Georgia, "Times New Roman", serif; /* film titles only */ --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 18px; --t-h3: clamp(19px, 1.5vw, 23px); --t-h2: clamp(34px, 4.2vw, 62px); --t-h1: clamp(42px, 6.2vw, 96px); --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px; --gutter: clamp(16px, 4vw, 44px); --maxw: 1320px; --section: clamp(96px, 12vw, 168px); --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 30px -14px rgba(0, 0, 0, .7); --shadow-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 40px 90px -40px rgba(0, 0, 0, .9); --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --fast: 160ms; --mid: 320ms; --slow: 700ms; } /* Light version, chosen by theme.js (data-theme on ): follows the visitor's setting until they press the switch. Text and the primary button turn dark; lane colours deepen so they read on paper. */ :root[data-theme="light"] { color-scheme: light; --ink-0: #f5f4f1; --ink-1: #efede8; --ink-2: #ffffff; --ink-3: #e7e4de; --ink-4: #d9d5cd; --line: rgba(20, 22, 26, .08); --line-2: rgba(20, 22, 26, .13); --line-3: rgba(20, 22, 26, .24); --paper: #111214; --paper-2: #474b51; --paper-3: #6c7178; --paper-4: #9a9ea5; --fog: #5d6f66; --fog-2: #82958b; --fog-rgb: 93, 111, 102; --footage: #3f73e6; --photo: #c48a14; --graphic: #7457d6; --glass: rgba(255, 255, 255, .6); --glow-rgb: 116, 87, 214; --grain: .05; --h-o: .16; --h-o2: .12; --shadow-1: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 12px 30px -16px rgba(40, 30, 70, .22); --shadow-2: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 34px 80px -40px rgba(40, 30, 70, .3); } /* logo for each theme, and the sun/moon switch shared by the public pages */ html:not([data-theme="light"]) .for-light, html[data-theme="light"] .for-dark { display: none !important; } .theme-btn { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(128, 128, 128, .08); color: var(--paper); cursor: pointer; transition: border-color .16s, background-color .16s, transform .16s; } .theme-btn:hover { border-color: var(--line-3); } .theme-btn:active { transform: scale(.94); } .theme-btn svg { grid-area: 1 / 1; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; } .theme-btn .t-moon { fill: currentColor; stroke: none; } html:not([data-theme="light"]) .theme-btn .t-moon, html[data-theme="light"] .theme-btn .t-sun { opacity: 0; transform: rotate(-90deg) scale(.5); } html.theme-swap::view-transition-old(root), html.theme-swap::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* while the colours swap, nothing else moves: colour fades would be caught half-way and loops would jump when the swap ends */ html.theme-swap *, html.theme-swap *::before, html.theme-swap *::after { transition: none !important; animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .theme-btn svg { transition: none; } }