/** * IMACTA design tokens — Liquid Glass, Sea Edition. * * Continues the glass system from the v1 homepage so v2 reads as the same product: * the two-layer gradient border (padding-box + border-box), backdrop blur with saturation, * the inset specular highlight along the top edge, and spring easing on interaction. * * What is new here is the water. The page is an ocean seen from above — light from the * surface, depth falling away below — and the glass panels float on it. The fishing * language in the product gets matching objects: soundings, waves, a compass, a net, * an anchor. All drawn as SVG, never emoji, and always structural rather than decorative. * * The rule that keeps this usable: glass is for CONTAINERS AND CHROME. Any surface that * carries a number a Captain makes a decision on uses --glass-solid, which is opaque * enough to hold contrast. A blurred backdrop behind a cost-per-customer figure is where * the style has to yield to the job. */ :root { /* ── Brand, carried over from v1 ─────────────────────────────────────────── */ --blue: #1a6bff; --blue-bright: #4d8fff; --blue-deep: #0b46b8; /* ── The sea. Surface light at the top, depth below. ─────────────────────── */ --sea-surface: #dceaf7; --sea-shallow: #9cc4e4; --sea-mid: #2f6f9e; --sea-deep: #123a5c; --sea-abyss: #071c2e; --sea-trench: #03101c; /* ── Brass. The licence, the stamps, the achievements. The only warm note. ── */ --brass: #d99b2b; --brass-light: #f2cf8a; --brass-deep: #8a5f10; /* ── Profit and loss. Never the only signal — always with a pattern and a word. */ --profit: #0f9d63; --profit-soft: #34d399; --loss: #e0483c; --loss-soft: #f78e84; --warn: #d9860b; /* ── The three bait lines ────────────────────────────────────────────────── */ /* Blue / amber / violet: separable under every common colour blindness, and none collide with the green and red of the profit zones. Each also carries its own stroke style so the chart survives greyscale. */ --line-1: #2f80ed; --line-2: #e8930c; --line-3: #9b5de5; /* ── Type ────────────────────────────────────────────────────────────────── */ --font-display: 'Outfit', system-ui, -apple-system, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 1rem; /* 16 minimum on mobile — below this iOS auto-zooms on focus */ --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.5rem; --leading-tight: 1.12; --leading-snug: 1.35; --leading-body: 1.55; /* ── Space: 4px rhythm ───────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ── Shape. Glass wants generous radii; sharp corners read as paper. ─────── */ --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 999px; /* ── Motion ──────────────────────────────────────────────────────────────── */ --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --z-base: 0; --z-sticky: 20; --z-nav: 40; --z-overlay: 100; --z-toast: 200; } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT — the sea at midday, seen from the boat. Default, because a roofer checks this on a driveway at noon. ═══════════════════════════════════════════════════════════════════════════ */ :root { --ink: #0b2033; /* 15.1:1 on glass-solid */ --ink-muted: #445d72; /* 7.6:1 */ --ink-subtle: #62798d; /* 4.6:1 — the floor for any text */ --ink-invert: #ffffff; --ring: var(--blue); /* The water itself, painted on . This has to be genuinely coloured, not near-white. Glass only reads as glass when there is something behind it — a pale page turns every white panel into a ghost with no edges. So: sky at the top, real sea below. */ --water: radial-gradient(1200px 780px at 82% -14%, rgba(26, 107, 255, 0.20), transparent 62%), radial-gradient(920px 700px at -14% 26%, rgba(45, 150, 210, 0.16), transparent 66%), linear-gradient(180deg, #e9f2fb 0%, #d2e4f4 38%, #bcd6ec 72%, #aecbe6 100%); /* Glass: translucent panels for chrome and containers. */ --glass-bg: rgba(255, 255, 255, 0.58); --glass-bg-strong: rgba(255, 255, 255, 0.80); /* Data surfaces. Opaque enough that a number never fights its own background. */ --glass-solid: rgba(255, 255, 255, 0.94); --glass-line: rgba(17, 40, 66, 0.16); --glass-hl: rgba(255, 255, 255, 0.95); /* the inset specular top edge */ --glass-edge-a: rgba(255, 255, 255, 0.92); /* gradient border, light-catching corner */ --glass-edge-b: rgba(26, 107, 255, 0.26); /* gradient border, blue-shadowed corner */ --glass-sheen: rgba(255, 255, 255, 0.55); --glass-blur: blur(22px) saturate(160%); --glass-blur-strong: blur(30px) saturate(180%); /* Shadows carry the lift. On a coloured ground they need real weight or the panels look pasted on rather than floating. */ --shadow-1: 0 2px 10px rgba(12, 44, 74, 0.08); --shadow-2: 0 14px 38px rgba(12, 44, 74, 0.16); --shadow-3: 0 28px 70px rgba(12, 44, 74, 0.22); --shadow-hover: 0 22px 54px rgba(12, 44, 74, 0.22), 0 0 26px rgba(26, 107, 255, 0.12); /* Soundings: the faint depth rules ruled across the page, like a nautical chart. */ --sounding: rgba(12, 44, 74, 0.045); } /* ═══════════════════════════════════════════════════════════════════════════ DARK — below the surface. Designed, not inverted: surfaces lift by tonal step rather than by shadow, and every data colour is lightened to hold 3:1. ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; } } :root[data-theme='dark'] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --ink: #e9f2fa; --ink-muted: #a6c0d4; --ink-subtle: #85a1b8; --ink-invert: #05131f; --ring: #7db4ec; --water: radial-gradient(1000px 680px at 84% -14%, rgba(26, 107, 255, 0.20), transparent 64%), radial-gradient(760px 600px at -10% 28%, rgba(15, 157, 99, 0.07), transparent 66%), linear-gradient(180deg, #0a2135 0%, #061a2b 52%, #03101c 100%); --glass-bg: rgba(16, 34, 52, 0.55); --glass-bg-strong: rgba(12, 28, 44, 0.78); --glass-solid: rgba(14, 32, 50, 0.94); --glass-line: rgba(255, 255, 255, 0.10); --glass-hl: rgba(255, 255, 255, 0.14); --glass-edge-a: rgba(255, 255, 255, 0.30); --glass-edge-b: rgba(26, 107, 255, 0.34); --glass-sheen: rgba(255, 255, 255, 0.10); --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.34); --shadow-2: 0 12px 36px rgba(0, 0, 0, 0.44); --shadow-3: 0 24px 68px rgba(0, 0, 0, 0.56); --shadow-hover: 0 20px 52px rgba(0, 0, 0, 0.55), 0 0 28px rgba(26, 107, 255, 0.14); --sounding: rgba(255, 255, 255, 0.045); --line-1: #6ba6f0; --line-2: #f0ab3f; --line-3: #b98cf0; --profit: #34d399; --profit-soft: #6ee7b7; --loss: #f87f73; --loss-soft: #fca5a0; --warn: #eab34a; --brass: #e8b45c; --brass-light: #f7dfae; } } :root[data-theme='dark'] { --ink: #e9f2fa; --ink-muted: #a6c0d4; --ink-subtle: #85a1b8; --ink-invert: #05131f; --ring: #7db4ec; --water: radial-gradient(1000px 680px at 84% -14%, rgba(26, 107, 255, 0.20), transparent 64%), radial-gradient(760px 600px at -10% 28%, rgba(15, 157, 99, 0.07), transparent 66%), linear-gradient(180deg, #0a2135 0%, #061a2b 52%, #03101c 100%); --glass-bg: rgba(16, 34, 52, 0.55); --glass-bg-strong: rgba(12, 28, 44, 0.78); --glass-solid: rgba(14, 32, 50, 0.94); --glass-line: rgba(255, 255, 255, 0.10); --glass-hl: rgba(255, 255, 255, 0.14); --glass-edge-a: rgba(255, 255, 255, 0.30); --glass-edge-b: rgba(26, 107, 255, 0.34); --glass-sheen: rgba(255, 255, 255, 0.10); --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.34); --shadow-2: 0 12px 36px rgba(0, 0, 0, 0.44); --shadow-3: 0 24px 68px rgba(0, 0, 0, 0.56); --shadow-hover: 0 20px 52px rgba(0, 0, 0, 0.55), 0 0 28px rgba(26, 107, 255, 0.14); --sounding: rgba(255, 255, 255, 0.045); --line-1: #6ba6f0; --line-2: #f0ab3f; --line-3: #b98cf0; --profit: #34d399; --profit-soft: #6ee7b7; --loss: #f87f73; --loss-soft: #fca5a0; --warn: #eab34a; --brass: #e8b45c; --brass-light: #f7dfae; } /* Reduced motion: kill the drift and the springs, keep everything legible. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } } /* ═══════════════════════════════════════════════════════════════════════════ The glass recipe, as reusable utilities. The two-layer background is the whole trick: a flat fill clipped to padding-box, and a gradient clipped to border-box showing through a transparent 1px border. That gradient is what reads as light catching a bevelled edge. ═══════════════════════════════════════════════════════════════════════════ */ .glass, .glass-strong, .glass-solid { border: 1px solid transparent; box-shadow: inset 0 1px 0 var(--glass-hl), var(--shadow-2); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .glass { background: linear-gradient(var(--glass-bg), var(--glass-bg)) padding-box, linear-gradient(150deg, var(--glass-edge-a), rgba(255,255,255,0.05) 38%, rgba(255,255,255,0.02) 64%, var(--glass-edge-b)) border-box; } .glass-strong { background: linear-gradient(var(--glass-bg-strong), var(--glass-bg-strong)) padding-box, linear-gradient(150deg, var(--glass-edge-a), rgba(255,255,255,0.05) 40%, var(--glass-edge-b)) border-box; -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong); } /* Data surfaces. Same edge treatment, but the fill stays opaque so contrast holds. */ .glass-solid { background: linear-gradient(var(--glass-solid), var(--glass-solid)) padding-box, linear-gradient(150deg, var(--glass-edge-a), rgba(255,255,255,0.04) 42%, var(--glass-edge-b)) border-box; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Safari and Firefox without backdrop-filter would show unreadable washed panels. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--glass-solid); } .glass-strong { background: var(--glass-solid); } }