/* Squadera design tokens Ship this file as-is. Dark is the default; light is applied by setting data-theme="light" on . ------------------------------------------------------------------ */ :root { /* Surfaces */ --bg: #08090A; /* page background */ --bg2: #0A0C0D; /* subtle raised background */ --pn: #0C0F10; /* panel */ --pn2: #101415; /* panel, second level */ /* Lines */ --bd: #232A2B; /* standard border */ --bd2: #1B2122; /* subtle border, section dividers */ --bd3: #161B1C; /* faintest border */ --st: #2C3435; /* inactive dot / muted stroke */ /* Text */ --tx: #E9EEED; /* primary */ --tc: #C9D2D0; /* body copy */ --t2: #8D9997; /* secondary */ --t3: #5F6A69; /* tertiary, mono labels */ /* Teal — functional UI only: active states, live status, links */ --ac: #22C1BB; /* accent */ --al: #138C89; /* accent, deeper */ --as: rgba(19,140,137,.12); /* accent surface */ --ab: rgba(34,193,187,.35); /* accent border */ /* Gold — proof numbers, held/governance states. Never for UI chrome. */ --gd: #C8A307; --gs: rgba(200,163,7,.06); --gb: rgba(200,163,7,.3); /* Misc */ --on: #04100F; /* text on an accent fill */ --nav: rgba(8,9,10,.9); /* sticky header background */ } [data-theme="light"] { --bg: #F6F5F1; --bg2: #EFEEE9; --pn: #FFFFFF; --pn2: #FBFAF8; --bd: #E0DED6; --bd2: #E8E6DF; --bd3: #F0EEE8; --st: #CFCCC2; --tx: #12160F; --tc: #3A4038; --t2: #6B7167; --t3: #8C9187; --ac: #0B6F6B; --al: #0E8480; --as: rgba(11,111,107,.07); --ab: rgba(11,111,107,.26); --gd: #8A6E06; --gs: rgba(154,124,8,.07); --gb: rgba(154,124,8,.26); --on: #FFFFFF; --nav: rgba(246,245,241,.86); } /* ------------------------------------------------------------------ Typography Instrument Sans 400..700 for everything except labels. IBM Plex Mono 400/500/600 for eyebrows, labels, counters, notes. Minimum size anywhere on the site is 13px. Mono labels are uppercase with .08em to .1em tracking. ------------------------------------------------------------------ */ html, body { margin: 0; width: 100%; overflow-x: clip; background: var(--bg); color: var(--tx); font-family: 'Instrument Sans', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--ac); text-decoration: none; } a:hover { opacity: .78; } ::selection { background: #138C89; color: #fff; } /* Type scale as used, all fluid. h1 hero clamp(38px, 5.4vw, 68px) / 1.03 / -.032em / 600 h1 sub-page clamp(36px, 5vw, 64px) / 1.04 / -.032em / 600 h2 section clamp(30px, 4vw, 52px) / 1.06 / -.028em / 600 h2 minor clamp(26px, 3.2vw, 42px) / 1.08 / -.024em / 600 h3 panel clamp(22px, 2.4vw, 30px) / 1.12 / -.02em / 600 lede clamp(17px, 1.5vw, 21px) / 1.5 / --tc body 16px / 1.55 / --tc small body 14.5px / 1.55 / --t2 proof figure clamp(30px, 3.4vw, 40px) / 1 / -.028em / 600 mono eyebrow 11.5px / .1em / uppercase / --ac mono label 11px / .09em / uppercase / --t3 mono micro 10.5px / .09em / uppercase All headings use text-wrap: balance. Long body copy uses text-wrap: pretty. */ /* ------------------------------------------------------------------ Spacing ------------------------------------------------------------------ */ /* Section padding, major: clamp(60px, 8vw, 110px) top and bottom Section padding, minor: clamp(50px, 6vw, 86px) Hero padding: clamp(46px, 6.5vw, 80px) top Final section bottom: clamp(70px, 9vw, 120px) Panel padding: clamp(20px, 2.6vw, 32px) Grid gap, cards: clamp(14px, 2vw, 22px) Grid gap, two-column: clamp(28px, 4vw, 56px) Section dividers are a 1px var(--bd2) top border, not margin. */ /* ------------------------------------------------------------------ Radii, shadows, borders ------------------------------------------------------------------ */ /* Radius: 6px chip/badge, 7px button, 9-10px input/row, 12-14px card, 16px panel, 100px pill. Panel shadow, dark: 0 1px 0 rgba(255,255,255,.03) inset Panel shadow, light: 0 1px 2px rgba(18,22,15,.04), 0 8px 24px -12px rgba(18,22,15,.10) Borders are always 1px unless a state needs 1.5-2.5px (dots, accent left borders, SVG strokes). */ /* ------------------------------------------------------------------ Background wash — one absolutely positioned layer per page, inset 0, pointer-events none, z-index 0, behind all content. ------------------------------------------------------------------ */ .wash { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .wash-dark { background: radial-gradient(1100px 620px at 78% -8%, rgba(34,193,187,.10), transparent 60%), radial-gradient(820px 540px at 4% 34%, rgba(200,163,7,.05), transparent 58%), radial-gradient(900px 600px at 92% 84%, rgba(19,140,137,.05), transparent 62%), radial-gradient(1300px 900px at 50% 8%, rgba(233,238,237,.045), transparent 66%), linear-gradient(180deg, rgba(233,238,237,.05), transparent 22%, transparent 74%, rgba(0,0,0,.42)); } [data-theme="light"] .wash-dark { display: none; } .wash-light { display: none; } [data-theme="light"] .wash-light { display: block; background: radial-gradient(1000px 560px at 80% -8%, rgba(11,111,107,.10), transparent 60%), radial-gradient(760px 520px at 4% 38%, rgba(154,124,8,.07), transparent 58%), linear-gradient(180deg, rgba(255,255,255,.7), transparent 26%); } /* Logos ship as white PNGs; invert them for the light theme. */ [data-theme="light"] .logo-invert { filter: invert(1) brightness(.22); } /* ------------------------------------------------------------------ Keyframes — every animation used on the site. Timings, triggers and delays are in ANIMATIONS.md. ------------------------------------------------------------------ */ @keyframes v2rise { 0% { opacity:0; transform:translateY(12px) } 100% { opacity:1; transform:translateY(0) } } @keyframes v2fade { 0% { opacity:0 } 100% { opacity:1 } } @keyframes v2grow { 0% { transform:scaleX(0) } 100% { transform:scaleX(1) } } @keyframes v2seg { 0% { width:0 } 100% { width:100% } } @keyframes v2caret { 0%,49% { opacity:1 } 50%,100% { opacity:0 } } @keyframes v2drop { 0% { opacity:0; transform:translateY(-6px) } 100% { opacity:1; transform:translateY(0) } } @keyframes v2hold { 0% { box-shadow:0 0 0 0 rgba(200,163,7,.42) } 70% { box-shadow:0 0 0 12px rgba(200,163,7,0) } 100% { box-shadow:0 0 0 0 rgba(200,163,7,0) } } @keyframes v2scan { 0% { transform:translateX(-100%) } 100% { transform:translateX(420%) } } @keyframes v2tick { 0% { transform:scaleY(0); opacity:0 } 100% { transform:scaleY(1); opacity:1 } } @keyframes v2breathe{ 0%,100% { opacity:.4 } 50% { opacity:1 } } @keyframes v2node { 0%,100% { transform:scale(.82); opacity:.5 } 50% { transform:scale(1.06); opacity:1 } } @keyframes v2edge { 0% { stroke-dashoffset:220; opacity:0 } 18% { opacity:.85 } 82% { opacity:.85 } 100% { stroke-dashoffset:-220; opacity:0 } } @keyframes v2drift { 0%,100% { transform:translate3d(0,0,0) } 33% { transform:translate3d(10px,-14px,0) } 66% { transform:translate3d(-8px,9px,0) } } @keyframes v2draw { to { stroke-dashoffset:0 } } @keyframes v2dot { 0% { transform:scale(0); opacity:0 } 100% { transform:scale(1); opacity:1 } } /* Platform "night shift" timeline. One 11s loop, pure CSS. Stage groups are offset by 1.15s each and MUST use animation-fill-mode: backwards, or they paint lit before they run. */ @keyframes nsFill { 0%{width:0} 6%{width:3%} 18.5%{width:20%} 29%{width:38%} 39%{width:55%} 50%{width:69%} 60%{width:86%} 88%{width:86%} 91%{width:86%;opacity:0} 92%{width:0;opacity:0} 100%{width:0;opacity:0} } @keyframes nsSweep { 0%{left:0;opacity:0} 5%{left:3%;opacity:1} 18.5%{left:20%} 29%{left:38%} 39%{left:55%} 50%{left:69%} 57%{left:86%;opacity:1} 62%{left:86%;opacity:0} 100%{left:86%;opacity:0} } @keyframes nsGateDot { 0%,58%{opacity:0;transform:scale(.4)} 64%{opacity:1;transform:scale(1)} 88%{opacity:1;transform:scale(1)} 93%{opacity:0;transform:scale(.4)} 100%{opacity:0;transform:scale(.4)} } @keyframes nsReveal { 0%,60%{opacity:.25} 66%{opacity:1} 88%{opacity:1} 94%{opacity:.25} 100%{opacity:.25} } @keyframes nsTime { 0%,2%{color:var(--t3)} 8%,80%{color:var(--ac)} 90%,100%{color:var(--t3)} } @keyframes nsDot { 0%,2%{background:var(--st);transform:scale(.7)} 8%,80%{background:var(--ac);transform:scale(1)} 90%,100%{background:var(--st);transform:scale(.7)} } @keyframes nsTitle { 0%,2%{color:var(--t3)} 8%,80%{color:var(--tx)} 90%,100%{color:var(--t3)} } @keyframes nsCount { 0%,2%{opacity:0} 8%,80%{opacity:1} 90%,100%{opacity:0} } /* Accessibility: always ship this. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }