/* ========================================================================== Fastkava — design tokens Dark is the default. [data-theme="light"] (set on ) overrides. Palette distilled from the Claude Design "Fastkava Landing Page" blocks. ========================================================================== */ :root { /* Type */ --fk-font-sans: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --fk-font-display: 'Playfair Display', Georgia, serif; /* Brand accent (constant across themes) */ --fk-accent: #FB5300; --fk-accent-strong: #E04B00; --fk-accent-bright: #FF7A33; --fk-accent-2: #FF6A1F; --fk-accent-soft: rgba(251, 83, 0, 0.14); --fk-accent-glow: rgba(251, 83, 0, 0.14); /* Geometry */ --fk-radius: 12px; --fk-radius-lg: 16px; --fk-radius-sm: 8px; --fk-maxw: 1280px; --fk-gutter: clamp(16px, 4vw, 60px); --fk-header-h: 76px; /* Motion */ --fk-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --fk-dur: 0.25s; /* Machine photo frame. The product shots are tall studio images, and every machine image on the site shares this frame — the B10 slider card and the B10.1 / B10.2 grid cards — so the same machine never appears in two different proportions. It shrinks with the card at the two breakpoints below; the shape stays ~0.70–0.73 throughout. Single source of truth: change it here, not in the block stylesheets. */ --fk-machine-ratio: 392 / 560; /* Vertical anchor for the same photos, which are fitted by WIDTH and so overflow the frame vertically. All 8 shots are framed alike: kiosk body between y≈146 and y≈845 of 1024, and the two cold-drink shots carry a snowflake baked into the top corner ending at y≈130 — redundant, since the theme draws its own cold badge there. These percentages put the top of the crop at y≈138 in every case: past the baked snowflake, short of the kiosk. The figure differs per breakpoint because a percentage is applied to the OVERFLOW, and the overflow grows as the frame gets relatively wider. Keep each value paired with the ratio above — changing one without the other reintroduces the snowflake sliver or clips the kiosk roof. */ --fk-machine-focus: 69%; } @media (max-width: 900px) { :root { --fk-machine-ratio: 350 / 480; --fk-machine-focus: 59%; } } @media (max-width: 640px) { :root { --fk-machine-ratio: 300 / 410; --fk-machine-focus: 58%; } } /* ---- Dark (default) ------------------------------------------------------ */ :root, :root[data-theme="dark"] { color-scheme: dark; --fk-bg: #0A0805; --fk-bg-elev: #070503; --fk-bg-hero: #050505; --fk-text: #F6EEE2; --fk-text-strong: #F7F2EA; --fk-text-muted: #9A9288; --fk-text-dim: #6E675E; --fk-heading: #F7F2EA; --fk-border: rgba(255, 255, 255, 0.10); --fk-border-strong: rgba(255, 255, 255, 0.16); --fk-surface-soft: rgba(255, 255, 255, 0.06); --fk-surface-hover: rgba(255, 255, 255, 0.12); --fk-glass: rgba(18, 15, 12, 0.18); --fk-glass-solid: rgba(12, 10, 8, 0.88); --fk-overlay: rgba(4, 3, 2, 0.5); --fk-hero-scrim: linear-gradient(90deg, rgba(5,4,3,0.72), rgba(5,4,3,0.38) 38%, rgba(5,4,3,0) 62%); --fk-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); /* One continuous surface behind every block between hero and footer (see .fk-flow). */ --fk-flow-bg: #050505; /* Shared glass fill for the header bar and the B2 pills — one place to tune how see-through they are. `-scrolled` is the slightly firmer variant the header switches to once the page moves under it. */ --fk-glass-bar: rgba(9, 7, 5, 0.46); --fk-glass-bar-scrolled: rgba(9, 7, 5, 0.62); } /* ---- Light --------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --fk-bg: #F3EDE3; --fk-bg-elev: #FFFFFF; --fk-bg-hero: #F3EDE3; --fk-text: #1A1512; --fk-text-strong: #1A1512; --fk-text-muted: #7A736A; --fk-text-dim: #9A9288; --fk-heading: #1A1512; --fk-border: rgba(26, 21, 18, 0.08); --fk-border-strong: rgba(26, 21, 18, 0.12); --fk-surface-soft: #FFFFFF; --fk-surface-hover: rgba(26, 21, 18, 0.05); --fk-glass: rgba(255, 255, 255, 0.55); --fk-glass-solid: rgba(243, 237, 227, 0.92); --fk-overlay: rgba(20, 16, 12, 0.35); --fk-hero-scrim: linear-gradient(90deg, rgba(243,237,227,0.86), rgba(243,237,227,0.4) 42%, rgba(243,237,227,0) 66%); --fk-shadow: 0 18px 40px rgba(26, 21, 18, 0.14); --fk-flow-bg: #F3EDE3; --fk-glass-bar: rgba(255, 255, 255, 0.48); --fk-glass-bar-scrolled: rgba(255, 255, 255, 0.64); }