/* FitoNova site -- hand-written, no build step, no external requests. Reset, typography, the page shell (.wrap/.skip/.eyebrow/.lead), the blueprint grammar (.reg/.bp-grid), the vines and the reveal vocabulary. One of the ordered sheets in public/css/; the load order in every page's IS the cascade, so a rule moved between files is a rule moved in the cascade. Owner's ruling 2026-08-10: no source file over 500 lines. */ /* ----------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Barlow", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } a { color: var(--acc); text-decoration: none; } a:hover { color: var(--acc2); } /* One focus ring for the whole site: 2px of --acc, never the browser default, never a rounded one -- the design system has square corners. */ :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } h1, h2, h3, h4 { font-family: "Barlow Condensed", "Barlow", "Segoe UI", system-ui, sans-serif; font-weight: 600; margin: 0; } h1 { font-size: clamp(48px, 7.6vw, 112px); line-height: 0.92; letter-spacing: -0.025em; text-wrap: balance; } h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.02; } h3 { font-size: 26px; line-height: 1.1; } p { margin: 0; text-wrap: pretty; } /* The header is sticky, so an anchor target must stop below it. */ section[id] { scroll-margin-top: 78px; } @media (prefers-reduced-motion: reduce) { section[id] { scroll-margin-top: 0; } } .wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: var(--fill); color: var(--onacc); font: 600 14px/1 "Barlow", sans-serif; } .skip:focus { left: 12px; top: 12px; color: var(--onacc); } .eyebrow { font: 600 12px/1 "Barlow", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acc2); } .lead { font: 400 17px/1.6 "Barlow", sans-serif; color: var(--mut); } /* The blueprint grammar: a hairline panel with a `+` at the corners it is registered on. The mark is text, so it inherits the hairline colour and never needs a second asset. */ .reg { position: absolute; font: 400 13px/1 "Barlow", sans-serif; color: var(--line2); pointer-events: none; } .reg-tl { left: -6px; top: -9px; } .reg-tr { right: -6px; top: -9px; } .reg-bl { left: -6px; bottom: -10px; } .reg-br { right: -6px; bottom: -10px; } /* The 64px blueprint grid, masked to a soft oval so it never reaches a section edge as a hard cut. */ .bp-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(120% 80% at 50% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 80% at 50% 30%, #000 30%, transparent 75%); } /* The vine motif is one asset tinted per theme by a filter chain rather than redrawn: `brightness(0)` flattens it to black, then the invert/hue pair walks it to the theme's steel or mint. */ .vine { position: absolute; pointer-events: none; filter: var(--vinefx); } .vine-soft { filter: var(--vinefx-soft); } .vine-flip { transform: scaleX(-1); } /* On the dark band the vines are plain low-opacity artwork: the field is already dark, so a tint would only mud it. */ .vine-band { position: absolute; pointer-events: none; opacity: 0.2; } .vine-band-faint { opacity: 0.14; } /* ------------------------------------------------------------- reveals */ /* The reveal vocabulary: .reveal (and .reveal-group for a set that comes in together) start hidden only when JS is running and motion is welcome; the observer adds .is-visible. With JS off, or under reduced motion, the rules below never apply and the page is simply complete. */ @media (prefers-reduced-motion: no-preference) { .js .reveal, .js .reveal-group > * { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.16, 0.68, 0.24, 1), transform 0.8s cubic-bezier(0.16, 0.68, 0.24, 1); } .js .rv-left { transform: translate3d(-54px, 14px, 0) rotate(-1.2deg); transition-duration: 0.8s, 1.05s; } .js .rv-right { transform: translate3d(54px, 14px, 0) rotate(1.2deg); transition-duration: 0.8s, 1.05s; } .js .rv-scale { transform: translate3d(0, 18px, 0) scale(0.92); transition-duration: 0.8s, 1.05s; } .js .rv-up { transform: translate3d(0, 44px, 0); transition-duration: 0.8s, 1.05s; } .js .rv-fade { transform: none; transition: opacity 0.9s cubic-bezier(0.16, 0.68, 0.24, 1); } .js .reveal.is-visible, .js .reveal-group.is-visible > * { opacity: 1; transform: none; } .js .rv-d1 { transition-delay: 120ms; } .js .rv-d2 { transition-delay: 180ms; } .js .rv-d3 { transition-delay: 260ms; } .js .rv-d4 { transition-delay: 340ms; } .js .rv-d5 { transition-delay: 420ms; } .js .rv-d6 { transition-delay: 500ms; } .js .rv-d7 { transition-delay: 620ms; } .js .rv-d8 { transition-delay: 680ms; } } /* ------------------------------------------------------------ responsive */ @media (max-width: 768px) { .wrap { padding: 0 20px; } } /* The header loses its button and half its padding on a phone, so an anchor that stopped 78px down now stops in a gap. */ @media (max-width: 560px) { section[id] { scroll-margin-top: 62px; } } /* The two lateral reveals slide in from 54px outside their own column. A 1240px page has that much slack in the gutter; a 375px one does not, and every un-revealed .rv-left/.rv-right below the fold widens the document until the observer fires. On a phone they rise instead, which is the same gesture without the horizontal travel. */ @media (max-width: 768px) and (prefers-reduced-motion: no-preference) { .js .rv-left, .js .rv-right { transform: translate3d(0, 26px, 0); transition-duration: 0.8s, 1.05s; } }