/* curasai-website — design tokens + global utilities. Single source of truth for color / type / spacing / glass. Each module's css extends with module-scoped rules under a `.m-` namespace. */ :root { /* color tokens */ --bg-0: #07091a; --bg-1: #0d1130; --bg-2: #181c45; --fg-0: #f3f4ff; --fg-1: #c2c6e8; --fg-2: #8c92bd; --accent: #4ce3ff; /* primary cyan */ --accent-soft: #4ce3ff33; --accent-glow: #4ce3ff66; --magenta: #ff4cc0; --purple: #8b5cf6; --danger: #ff5577; /* type tokens */ --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 28px; --fs-display: 44px; /* spacing tokens */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 64px; /* radius + glass */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --glass-bg: rgba(13, 17, 48, 0.55); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: 14px; /* page horizontal padding — used by the header glass bar AND the main content paddings so the nav lines up exactly with the carousel rows. */ --page-pad-x: 24px; } @media (max-width: 720px) { :root { --page-pad-x: 12px; } } /* reset + page chrome */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } /* Match the body's deepest gradient color on too. In standalone PWA mode on macOS (Safari "Add to Dock", Chrome PWA window), the browser shows a permanent scrollbar gutter on the right. The gutter sits OUTSIDE the body's painted area — meaning the background shows through there. Without this rule is the OS default (white) and the gutter renders as a white strip against our dark theme. Setting to the same deep navy as the body's base color makes the gutter blend in invisibly. Browser tabs hide it because they use overlay scrollbars, so this only matters in standalone. */ html { background: #07091a; } body { /* Page-level brand gradient — blue (top-left) → magenta (bottom-right), tuned to match the Curasai icon palette. Fixed attachment so it doesn't scroll away. */ background: radial-gradient(1200px 800px at 5% -10%, rgba(76, 227, 255, 0.35) 0%, transparent 60%), radial-gradient(1000px 700px at 100% 110%, rgba(255, 76, 192, 0.32) 0%, transparent 60%), radial-gradient(900px 600px at 50% 50%, rgba(139, 92, 246, 0.18) 0%, transparent 70%), linear-gradient(160deg, #0a0e2a 0%, #07091a 50%, #1a0a2e 100%); background-attachment: fixed; color: var(--fg-0); font-family: var(--font-sans); font-size: var(--fs-md); line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } img { display: block; max-width: 100%; } button { font: inherit; color: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } /* layout primitives */ .glass { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--r-lg); } .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: 999px; border: 1px solid var(--glass-border); background: transparent; color: var(--fg-0); transition: background 120ms, border-color 120ms, transform 80ms; } .btn:hover { background: var(--accent-soft); border-color: var(--accent-glow); } .btn:active { transform: translateY(1px); } .btn-primary { border-color: var(--accent); color: var(--accent); } /* toast */ #toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: var(--sp-3) var(--sp-5); border-radius: 999px; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); color: var(--fg-0); font-size: var(--fs-sm); pointer-events: none; opacity: 0; transition: opacity 200ms; z-index: 1000; } #toast.show { opacity: 1; } /* the persistent top nav + bottom player frame. modules render into #view between them. */ #app-header { position: sticky; top: 0; z-index: 50; } #view { min-height: calc(100vh - 96px); padding-bottom: 8px; /* tightened — the "Browse all" CTA was carrying the rhythm gap; without it 32px felt floaty */ } /* Global footer — sits at the page bottom. */ #app-footer { text-align: center; /* Tighter vertical padding now that the page-end CTA is gone — the last carousel row's margin-bottom provides enough breathing room above the border. */ padding: var(--sp-4) var(--page-pad-x) calc(var(--sp-4) + env(safe-area-inset-bottom)); color: var(--fg-2); font-size: var(--fs-xs); line-height: 1.7; border-top: 1px solid rgba(255, 255, 255, 0.04); margin-top: 0; } #app-footer .ftr-row { display: block; } #app-footer .ftr-divider { margin: 0 var(--sp-2); opacity: 0.5; } #app-footer a { color: var(--fg-1); text-decoration: none; transition: color 120ms; } #app-footer a:hover { color: var(--accent); } #app-bottom-player { position: fixed; /* max(16px, env(...)) — in browser tab the env() is 0 so we keep the 16px aesthetic gap; on iOS standalone the notch / home-indicator pushes the player off the side / bottom. Landscape iPhone has a non-zero inset on the side facing the notch; portrait has it on the bottom (home indicator). Same rule covers both orientations. */ left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; } /* utility: only show when JS has booted */ .no-js { display: none; } /* responsive */ @media (max-width: 720px) { :root { --fs-display: 32px; --fs-xl: 22px; } #view { padding-bottom: 96px; } #app-bottom-player { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); } } /* ------------------------------------------------------------------ GLOBAL SCROLLBAR — defined ONCE for the whole site. Why centralised here instead of per-module: - WebKit pseudo-elements (::-webkit-scrollbar*) can be declared without a host selector — the bare form applies to every scrollable element in the document. - Firefox's `scrollbar-width` + `scrollbar-color` cascade through inheritance — set on `html` once and every descendant picks it up. So every chat input, textarea, modal, sidecar tab, dropdown, home- page row, etc. automatically gets the custom chrome with no per- module work and no drift across the codebase. Palette: translucent white thumb on a transparent track. Brightens on hover, brightest on active drag. Pill silhouette via inset transparent border + background-clip. Arrow buttons suppressed. ------------------------------------------------------------------ */ /* Firefox: declarative properties inherit, so setting on html cascades to every descendant scrollable element. */ html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; } /* WebKit (Chrome/Safari/Edge): the bare `::-webkit-scrollbar` form in some engine versions only targets the document scrollbar — to force the rules onto EVERY scrollable element, we use the universal-selector form `*::-webkit-scrollbar`. The `html` and `body` host selectors are also included explicitly so the page- level scrollbar gets the same chrome (the universal selector can sometimes skip the root). */ html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 8px; height: 8px; -webkit-appearance: none; /* Strip the OS default chrome rendering. */ } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, *::-webkit-scrollbar-track { background: transparent; border-radius: 4px; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.16); border-radius: 4px; /* 2px transparent inset border = pill silhouette + breathing room from the scrollable container's edge. */ border: 2px solid transparent; background-clip: padding-box; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.32); } html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active, *::-webkit-scrollbar-thumb:active { background-color: rgba(255, 255, 255, 0.45); } /* Suppress the directional arrow buttons at the track ends — they read as legacy desktop UI. */ html::-webkit-scrollbar-button, body::-webkit-scrollbar-button, *::-webkit-scrollbar-button { display: none; } /* Corner square where horizontal + vertical scrollbars meet. */ html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner, *::-webkit-scrollbar-corner { background: transparent; } /* ============================================================ */ /* PWA — iOS share-sheet walkthrough modal */ /* ============================================================ */ /* Lazily inserted by app.js's showIosInstallModal(). Safari has no native install API, so on iOS taps the share button → Add to Home Screen flow has to be taught manually. Modal stays in the DOM after first dismissal (low cost) so reopens are instant. */ .pwa-ios-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-end; justify-content: center; } .pwa-ios-modal.show { display: flex; } @media (min-width: 720px) { /* On wider screens, centre the card vertically too — desktop users who happen to be on iPadOS Safari shouldn't get the bottom-sheet mobile feel. */ .pwa-ios-modal { align-items: center; } } .pwa-ios-modal__backdrop { position: absolute; inset: 0; background: rgba(7, 9, 26, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pwa-ios-modal__card { position: relative; width: min(440px, calc(100vw - 32px)); margin: 0 16px 24px 16px; padding: 24px 22px 22px; background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); color: var(--fg-0); /* Slide-up entrance feels native-y on iOS. */ animation: pwa-ios-modal-in 220ms cubic-bezier(.2, .8, .2, 1); } @keyframes pwa-ios-modal-in { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .pwa-ios-modal__close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; padding: 0; background: transparent; border: 0; color: var(--fg-1); font: 600 24px / 1 inherit; border-radius: 999px; cursor: pointer; transition: background 120ms; } .pwa-ios-modal__close:hover { background: rgba(255, 255, 255, 0.08); color: var(--fg-0); } .pwa-ios-modal__title { margin: 0 0 16px; font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0.01em; } .pwa-ios-modal__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .pwa-ios-modal__steps li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; color: var(--fg-1); font-size: var(--fs-sm); line-height: 1.45; } .pwa-ios-modal__steps li strong { color: var(--fg-0); font-weight: 600; } .pwa-ios-modal__step-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #4ce3ff 0%, #ff4cc0 100%); color: #ffffff; font: 600 var(--fs-sm) / 1 inherit; flex: 0 0 26px; } .pwa-ios-modal__share-icon { display: inline-flex; vertical-align: middle; margin: 0 4px; padding: 3px 5px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: var(--accent); } .pwa-ios-modal__share-icon svg { display: block; } .pwa-ios-modal__note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); color: var(--fg-2); font-size: var(--fs-xs); line-height: 1.5; text-align: center; }