/* Solar heatable — shared design tokens & base styles (from Figma) */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Host+Grotesk:ital,wght@0,400..800;1,400..800&family=Geist:wght@300..800&display=swap'); :root { --bg: #FEFFF9; /* page background (cream) */ --panel: #F5F6F0; /* soft panel background */ --ink: #111111; /* primary text */ --ink-70: rgba(17, 17, 17, 0.7); --ink-60: rgba(17, 17, 17, 0.6); --ink-08: rgba(17, 17, 17, 0.08); --accent: #E2FA5A; /* lime */ --white: #FFFFFF; --radius: 0.75rem; --radius-sm: 0.5rem; --shadow-card: 0 0 2.5rem 0 rgba(0, 0, 0, 0.08); --font-sans: 'Instrument Sans', system-ui, sans-serif; --font-display: 'Host Grotesk', system-ui, sans-serif; --font-ui: 'Geist', system-ui, sans-serif; /* Interaction motion. Figma specifies NO hover/press states anywhere in the file, so every :hover in this build is authored — these tokens keep the whole surface on one curve instead of nine ad-hoc easings. */ --ease-premium: cubic-bezier(0.22, 1, 0.36, 1); --dur-hover: 220ms; --dur-press: 110ms; /* The specular pass is its OWN duration and curve, deliberately not --dur-hover / --ease-premium. Two reasons it needed separating: - a 620ms sweep reads as a flick, not as light. 1000ms is slow enough for the eye to track the band across the pill. - --ease-premium is an expo ease-out: it fires the band across in the first third and then crawls, which is exactly the "achanak" whip. --ease-sheen is near-linear with soft ends, so the band travels at a near-constant speed and only its brightness ramps. Impact comes from the band itself (46% wide, 0.38 core) plus an opacity plateau in the keyframes, not from going faster. */ --dur-sheen: 1000ms; --ease-sheen: cubic-bezier(0.45, 0.1, 0.35, 0.95); } *, *::before, *::after { box-sizing: border-box; } /* ========================================================================== FLUID SCALE — the whole design scales proportionally above 1200px. ========================================================================== Figma's canvas is a fixed 1920. Every length in base.css / home.css / home-sections.css is authored in **rem** (Figma px / 16), so the single root font-size below is the design's scale factor: root = 100vw / 120 -> 1920 / 120 = exactly 16px -> scale 1.0 2560 / 120 = 21.333px -> scale 1.3333 1440 / 120 = 12px -> scale 0.75 1200 / 120 = 10px -> scale 0.625 768 / 120 = 6.4px -> scale 0.40 So text, images, gaps, radii, shadows, letter-spacing and crop offsets all grow and shrink together — nothing is pinned while its neighbour scales. At exactly 1920 the render is bit-identical to the approved Figma build. Below 768 the SAME mechanism runs against the MOBILE canvas, which Figma draws at 428 wide (`FRAME "Homepage - Mobile version" 7053:2`, 428x15377): root = 100vw / 26.75 -> 428 / 26.75 = exactly 16px -> scale 1.0 390 / 26.75 = 14.579px -> scale 0.911 375 / 26.75 = 14.019px -> scale 0.876 320 / 26.75 = 11.963px -> scale 0.748 So `1rem == 1 Figma px` on BOTH sides of the break — it is just a different Figma px. Every length stays `figma_px / 16` and `rem * 16` reconstructs the original bit-for-bit (dividing a double by 16 is an exponent shift). Mobile rules live in home-mobile.css, all inside `@media (max-width: 767.98px)`. 767.98px now does TWO jobs: it ends the 1920 band and starts the 428 one. Keep it a single boundary — a gap or an overlap would render one pixel of width at 0.40 scale and the next at 1.79. The two scales deliberately do NOT meet there: 768 shows the 1920 canvas at 0.40 while 767.98 shows the 428 canvas at 1.79. They are different designs, so that is a layout switch, not a discontinuity to smooth out. To cap the growth on very wide screens, add e.g. @media (min-width: 2560px) { html { font-size: 21.3333px } } To stop mobile type shrinking on very narrow phones, add e.g. @media (max-width: 359.98px) { html { font-size: 13.46px } } ========================================================================== */ html { font-size: calc(100vw / 120); } /* 1920 canvas — 768 and up */ @media (max-width: 767.98px) { html { font-size: calc(100vw / 26.75); } } /* 428 canvas */ html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; cursor: pointer; } button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; } /* Shared pill button: dark or accent arrow chip */ .btn { position: relative; overflow: hidden; /* clips the sheen sweep to the pill's radius */ isolation: isolate; /* keeps the z-index:-1 sheen inside this button */ display: inline-flex; align-items: center; gap: 0.625rem; border-radius: var(--radius); padding: 0.625rem 0.625rem 0.625rem 1rem; font-family: var(--font-ui); font-weight: 600; font-size: 1rem; letter-spacing: -0.01rem; color: var(--ink); background: var(--ink-08); transition: background var(--dur-hover) var(--ease-premium), box-shadow var(--dur-hover) var(--ease-premium), transform var(--dur-hover) var(--ease-premium); } /* One restrained specular pass. z-index:-1 + isolation on the parent puts it above the fill and below the label — see CLAUDE.md's pseudo-element trap. */ .btn::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -55%; width: 46%; opacity: 0; pointer-events: none; background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0) 100% ); transform: skewX(-18deg); } .btn:hover::before { animation: btn-sheen var(--dur-sheen) var(--ease-sheen) 80ms; } /* 380% x the band's own 46% = 174.8% of the pill, from left:-55% -> +119.8%, so the band still clears the right edge completely. The 14%..68% opacity plateau is what makes it read as a light source crossing the surface rather than a flash: it arrives, holds at full strength while it travels, then fades. */ @keyframes btn-sheen { 0% { opacity: 0; transform: skewX(-18deg) translateX(0); } 14% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; transform: skewX(-18deg) translateX(380%); } } .btn:hover { background: rgba(17, 17, 17, 0.16); transform: translateY(-0.125rem); box-shadow: 0 0.625rem 1.5rem -0.75rem rgba(17, 17, 17, 0.45), inset 0 0 0 0.0625rem rgba(17, 17, 17, 0.1); } /* press settles the lift — this is what makes the pill feel physical */ .btn:active { transform: translateY(0); box-shadow: 0 0.125rem 0.375rem -0.25rem rgba(17, 17, 17, 0.5), inset 0 0 0 0.0625rem rgba(17, 17, 17, 0.1); transition-duration: var(--dur-press); } .btn:focus-visible { outline: 0.125rem solid var(--ink); outline-offset: 0.1875rem; } .btn .chip { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); border-radius: var(--radius-sm); transition: box-shadow var(--dur-hover) var(--ease-premium); } .btn .chip img { width: 1.375rem; height: 1.375rem; transition: transform var(--dur-hover) var(--ease-premium); } /* the arrow leads the button — the signature move, shared by every arrow chip */ .btn:hover .chip { box-shadow: 0 0 0 0.1875rem rgba(226, 250, 90, 0.3); } .btn:hover .chip img { transform: translateX(0.1875rem); } .btn:active .chip img { transform: translateX(0.0625rem); } .btn-dark { background: var(--ink); color: var(--white); } .btn-dark:hover { background: #212121; box-shadow: 0 0.875rem 1.875rem -0.875rem rgba(17, 17, 17, 0.7), inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.08); } .btn-dark:active { box-shadow: 0 0.1875rem 0.5rem -0.3125rem rgba(17, 17, 17, 0.7), inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.08); } .btn-dark:focus-visible { outline-color: var(--accent); } @media (prefers-reduced-motion: reduce) { .btn, .btn .chip, .btn .chip img { transition-duration: 1ms; } .btn:hover, .btn:active { transform: none; } .btn:hover .chip img, .btn:active .chip img { transform: none; } .btn:hover::before { animation: none; } }