/* ========================================================================== ORYGIN AI — design tokens -------------------------------------------------------------------------- The single place colours, type, spacing and radii are defined. Nothing downstream may hardcode a hex value or an off-scale length. Palette rationale ----------------- Quiet ice-blue on near-black, tuned to match solar.orygin.ai: the surface ramp is almost neutral (hue ~215, chroma under 8%) so it reads as black, structure comes from one-pixel hairlines rather than from glows, and the accent appears in small doses — eyebrows, numerals, one button fill. The previous palette ran a neon hsl(201 94% 58%) across headline words, underlines, shadows and two full-viewport blooms. Everything shouted, so nothing led. The accent below is the same hue family, desaturated and lightened, and it lands on roughly a tenth as many elements. ========================================================================== */ :root { /* --------------------------------------------------------------------- Surfaces — near-neutral black ramp, darkest to lightest --------------------------------------------------------------------- */ --surface-000: hsl(210 8% 3.5%); /* page floor, behind everything */ --surface-100: hsl(210 8% 4.5%); /* default page background */ --surface-200: hsl(220 8% 5.8%); /* alternating section band */ --surface-300: hsl(220 6% 8.5%); /* card */ --surface-400: hsl(220 6% 11%); /* card hover / raised card */ --surface-500: hsl(220 6% 14%); /* input, inset well */ --surface-600: hsl(220 6% 20%); /* strongest neutral fill */ /* --------------------------------------------------------------------- Brand — soft ice blue. -400 is the only step that touches text. --------------------------------------------------------------------- */ --brand-300: hsl(197 82% 84%); --brand-400: hsl(198 74% 74%); /* accent text: eyebrows, numerals */ --brand-500: hsl(202 62% 56%); --brand-600: hsl(207 62% 41%); /* button fill, start of the gradient */ --brand-700: hsl(212 58% 31%); /* button fill, end of the gradient */ /* Translucent brand washes — for tints and rims, never for text. */ --brand-wash-08: hsl(200 70% 60% / 0.07); --brand-wash-16: hsl(200 70% 60% / 0.14); --brand-wash-28: hsl(200 70% 60% / 0.26); /* --------------------------------------------------------------------- Semantic --------------------------------------------------------------------- */ --positive-500: var(--brand-400); /* ticks read as accent, not as green */ --negative-500: hsl(215 5% 42%); /* "not for you" marks stay grey */ /* The one warm colour in the system, and it is reserved for a real form error on the checkout. Nothing decorative may use it. */ --danger-500: hsl(4 72% 66%); --danger-wash: hsl(4 72% 66% / 0.1); /* --------------------------------------------------------------------- Text — cool-tinted greys, matched to the near-neutral ramp --------------------------------------------------------------------- */ --text-primary: hsl(220 12% 98%); --text-secondary: hsl(220 6% 68%); --text-muted: hsl(220 5% 56%); /* 53% is the floor that keeps the 12px footer legal copy at WCAG AA (4.5:1) against --surface-000. Do not darken it. */ --text-faint: hsl(220 5% 53%); --text-on-brand: hsl(0 0% 100%); /* white ink on the blue fill */ /* --------------------------------------------------------------------- Borders — hairlines carry the structure now that the glows are gone, so they sit a step brighter than they used to. --------------------------------------------------------------------- */ --border-subtle: hsl(0 0% 100% / 0.07); --border-default: hsl(0 0% 100% / 0.10); --border-strong: hsl(0 0% 100% / 0.16); --border-brand: hsl(200 70% 66% / 0.30); /* --------------------------------------------------------------------- Typography — one family. Plus Jakarta Sans, same as solar.orygin.ai; the old Archivo/Inter pair existed to shout headlines in caps. --------------------------------------------------------------------- */ --font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; /* Fluid scale. Every step is clamp(min, preferred, max) so the page never needs a font-size media query. The top of the scale is deliberately shorter than it was: the old --5xl ran to 4.75rem, which is why five words of hero filled a laptop screen. Headlines now stop near 3.4rem. */ --text-2xs: 0.6875rem; /* 11px — eyebrow */ --text-xs: 0.75rem; /* 12px — legal */ --text-sm: 0.8125rem; /* 13px — caption */ --text-base: 1rem; /* 16px — body */ --text-md: clamp(1rem, 0.3vw + 0.94rem, 1.0625rem); --text-lg: clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem); --text-xl: clamp(1.1875rem, 0.7vw + 1.05rem, 1.375rem); --text-2xl: clamp(1.375rem, 1.4vw + 1.1rem, 1.875rem); --text-3xl: clamp(1.625rem, 2.4vw + 1.15rem, 2.5rem); --text-4xl: clamp(1.875rem, 3.2vw + 1.24rem, 2.875rem); --text-5xl: clamp(2rem, 3.8vw + 1.3rem, 3.375rem); /* The price is the one number allowed to outgrow the scale. */ --text-price: clamp(3rem, 11vw, 4.5rem); --leading-tight: 1.14; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.62; --tracking-tight: -0.018em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-widest: 0.15em; /* --------------------------------------------------------------------- Spacing — 4px base. Values off this scale are a bug. --------------------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Vertical rhythm between top-level sections. Roomier than before — whitespace is now doing the work the glows used to. */ --section-gap: clamp(3.25rem, 8vw, 6rem); /* Gap inside a section, between its heading block and its content. */ --block-gap: clamp(2.25rem, 4.5vw, 3.25rem); /* --------------------------------------------------------------------- Radii --------------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px; /* --------------------------------------------------------------------- Elevation — used sparingly. A hairline plus one surface step is enough to read as raised on a near-black page. --------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px hsl(220 20% 2% / 0.5); --shadow-md: 0 4px 14px -4px hsl(220 20% 2% / 0.6); --shadow-lg: 0 18px 44px -22px hsl(220 20% 2% / 0.8); --shadow-brand: 0 10px 28px -12px hsl(207 62% 41% / 0.45); --shadow-offerbar: 0 -12px 32px -18px hsl(220 20% 2% / 0.9); --inset-highlight: inset 0 1px 0 hsl(0 0% 100% / 0.05); /* Lit top edge of the filled button. */ --brand-rim: inset 0 1px 0 hsl(198 90% 88% / 0.32); --brand-rim-hover: inset 0 1px 0 hsl(198 90% 92% / 0.4); --brand-rim-active: inset 0 1px 0 hsl(198 90% 88% / 0.2); /* Sticky-bar floor. Two values: phones get the opaque one because backdrop-filter re-blurs on every scroll frame and is the single most expensive thing this page can do on a mid-range Android. */ --surface-veil: hsl(210 8% 4%); --surface-veil-blurred: hsl(210 8% 4% / 0.92); /* Android/iOS tap flash. The UA default is a blue-grey box. */ --tap-highlight: hsl(200 70% 60% / 0.2); /* --------------------------------------------------------------------- Layout — narrower than before. Solar holds its content to ~1160px and its copy to ~60ch; a wide measure is most of why the old page read as a wall of text. --------------------------------------------------------------------- */ --container-max: 72.5rem; /* 1160px — general content */ --container-narrow: 46rem; /* 736px — prose, FAQ, long copy */ --container-wide: 78rem; /* 1248px — full-bleed feature grids */ --gutter: clamp(1.25rem, 5vw, 3rem); /* Height of the fixed offer bar. body reserves this as bottom padding so the bar never covers the footer, so it MUST track the bar's real height at every breakpoint — see the .offerbar rules in sections.css. Phone default: one meta line + a full-width 48px CTA. */ --stickybar-height: 6.25rem; /* --------------------------------------------------------------------- Motion --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --duration-fast: 130ms; --duration-normal: 220ms; --duration-slow: 420ms; --z-sticky: 60; } /* -------------------------------------------------------------------------- Breakpoint overrides -------------------------------------------------------------------------- This file is mobile-first: the :root block above IS the phone. Everything below only widens things for bigger screens. -------------------------------------------------------------------------- */ /* Tablet and up: the offer bar collapses to a single row, so it gets short. */ @media (min-width: 48rem) { :root { --stickybar-height: 4.75rem; } }