/* ========================================================================== U Jabka — Soda design system: TOKENS Dark system derived from the approved reference (ujabka-3D-design-soda @ 864f914); visual values now come from the Vesper transplant blueprint. MIGRATION SEAM: scoped under `html.theme-soda`; pages opt in via $htmlClass. Nothing is on :root — that would silently re-colour un-migrated pages. TWO INDEPENDENT STATE SYSTEMS, and keeping them apart is the core contract: 1. SURFACE THEME [data-theme="dark"] on is fixed at first server render. Static contrast owns surfaces, text, borders, fields and focus; old light/auto preferences and system colour changes cannot restore them. 2. PRODUCT MOOD [data-mood="iphone"|"macbook"|"watch"] on — accent identity ONLY: --accent / --accent-ink / --halo / --bg-* and their -rgb triplets, rewritten at runtime by the hero controller. Mood may NEVER carry text contrast: it appears as accents, glows, borders and fills behind non-text. It never decides dark or light. The fixed dark surface must read well with every product mood. Because contrast lives in the static layer, any mood passes WCAG. COMPONENTS CONSUME SEMANTIC NAMES, never raw palette values and never a category colour. The legacy aliases near the end keep existing CSS working. ========================================================================== */ /* Self-hosted webfonts, vendored by tools/vendor-fonts.mjs. No runtime Google Fonts request: the CSP is `font-src 'self'`, and a CDN font is also a GDPR and latency problem. General Sans is NOT subsetted — one ~23 KB file per weight already carries the full Czech diacritic set, so there is no latin/latin-ext split and nothing to preload wrongly. Licence: Fontshare Terms, not OFL; see NOTICE-GeneralSans.txt beside the fonts. */ @font-face { font-family: 'General Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('../../fonts/soda/general-sans-300.woff2') format('woff2'); } @font-face { font-family: 'General Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/soda/general-sans-400.woff2') format('woff2'); } @font-face { font-family: 'General Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../../fonts/soda/general-sans-500.woff2') format('woff2'); } html.theme-soda { /* ------------------------------------------------- structural (themeless) */ /* BLUR — 8px. Vesper blurs two surfaces only: header bar, footer bar. */ --blur-glass: 8px; --blur-lg: var(--blur-glass); --blur-md: var(--blur-glass); --blur-sm: var(--blur-glass); /* RADIUS — a restrained scale, named by ROLE rather than by size, so a component declares what it is and inherits the corner that role gets. There is no literal radius value anywhere else in the system. Vesper's own landing page is completely square. U Jabka is not Vesper: it sells physical objects with rounded corners, and absolute zero read as harsh next to them. So the geometry softens by a few pixels and stops there — hairlines, spacing, typography and the dark/light plane composition are untouched, and nothing here approaches the 20-30px card the old system used. The tiers, and what each one is for: --r-plane 12px major white planes and large editorial containers (.soda-plane / .soda-card-w / a page section's container, .soda-panel, .soda-empty) --r-card 10px product cards and product MEDIA — the objects a person clicks (.soda-card, .soda-cat-card, .soda-prod__item, .soda-catalog-card, the detail gallery stage, .soda-acc, .soda-pg-card/-step/-toc) --r-control 7px things you operate or that sit inside a card: buttons, inputs, selects, tiles, thumbnails, filter options, nav items, icon buttons --r-mark 4px marks smaller than a control — swatches, dots, status chips, glyph boxes, grade letters --r-pill 999px ONLY where the capsule shape carries the meaning: the battery gauge and its fill, and the cart count. Buttons and status chips deliberately do NOT use it --r-none 0 deliberately square, and the value every component takes when it is flattened into a plane and becomes a ruled region rather than a box The one rule that keeps this from drifting: a nested shape is never rounder than the shape containing it. */ --r-plane: 12px; --r-card: 10px; --r-control: 7px; --r-mark: 4px; --r-pill: 999px; --r-none: 0; /* VESPER GROUND — owner decision 2026-08: the reference's deep-violet void is REJECTED; the ground is premium deep black (#0b0b0c, the near-black BRAND-SPEC.md §A recommends under the mark). Still themeless on purpose: the hero and the plane the white cards float over are this ground, not a surface theme, and the product mood must never repaint them. These are the ONLY three colours the composition uses besides hairline alphas. */ --vesper-void: #0b0b0c; --vesper-chalk: #fdfdfd; --vesper-signal: #6cf3a3; /* SHADOW — none. Depth is a hairline and an opaque plane, never a cast. */ --shadow-nav: none; --shadow-card: none; /* THE FRAME — held by the viewport edge. 1440 base; vw = Figma px / 14.4. */ --gutter: 1.667vw; --container: 96.667vw; --section-gap: clamp(4.5rem, 8vw, 8rem); --gap: clamp(1rem, 1.4vw, 1.4rem); /* HEADER — fixed; content clears it via --header-band. Static, not JS-measured: layout keyed to a measurement is wrong for one frame. Geometry follows the ported Dalim navbar: .5rem top offset (mt-2), .5rem row padding each side of the 2.1rem lockup. */ --header-top: .5rem; --header-h: 3.1rem; --page-intro-space: clamp(2.2rem, 4vw, 3.4rem); --header-band: calc(var(--header-h) + var(--header-top) * 2); /* TYPE SCALE — four sizes, and that is the whole scale. */ --text-display: 5.556vw; /* 80px — every h1/h2 */ --text-stat: 2.222vw; /* 32px — stat values, prices */ /* * READABILITY FLOOR — a deliberate U Jabka deviation from Vesper. * * Vesper authors body copy at a bare 1.111vw, which is 11.4px at 1024 and * 12.8px at 1152. It gets away with that because it is a one-screen * showcase; a storefront asks people to read specs, prices and availability * at those widths. The vw term still does the artboard scaling, the px term * stops it going below readable. At 1440 both agree on exactly 16px, so the * design base is unchanged. */ --text-body: max(15px, 1.111vw); /* 16px @1440, never under 15 */ --text-small: max(14px, 0.972vw); /* 14px @1440, and never under it */ --leading-title: .90; --leading-body: 1.2; --tracking-title: -.022em; /* ONE face. Vesper sets General Sans on every title, body, header and CTA; both names are kept because the component layer reads both. */ --font-display: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-main: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* MOTION — CSS standing in for Vesper's springs (no spring lib may be imported). easeOutQuint; press/hover/reveal. Nothing overshoots. */ --ease: cubic-bezier(.23, 1, .32, 1); --ease-spring: var(--ease); --dur-fast: .09s; --dur: .18s; --dur-slow: 1s; --focus-ring: 2px; --focus-offset: 3px; /* Hero wash. Mood-driven and deliberately dark in BOTH themes: the hero is the one dramatic, full-bleed moment of the site. Everything below it calms down to the surface theme. */ --bg-inner: #0c7a63; --bg-mid: #04473a; --bg-outer: #010f0c; --bg-outer-rgb: 1, 15, 12; } /* BELOW 1024px the vw ladder stops (Vesper ADR-0029) and every vw token above is restated in real rem — see the ladder in base.css. One DOM tree, two ranges; `rem` in a media query is always the initial 16px root. */ @media (max-width: 1023.98px) { html.theme-soda { --gutter: 1.5rem; --container: calc(100% - var(--gutter) * 2); --header-top: .5rem; --header-h: 3.75rem; /* 2.75rem is Vesper's section value; the hero may raise it locally. */ --text-display: 2.75rem; --text-stat: 1.5rem; --text-body: .9375rem; --text-small: .875rem; } } @media (max-width: 640px) { html.theme-soda { --gutter: 1.25rem; --header-top: .5rem; --text-display: 2.125rem; --text-stat: 1.25rem; /* Vesper drops both to .8125rem (13px) here; we hold 14px for the same readability reason as the vw floor above. The product facts (spec, condition, battery, availability) use --text-small and are real content, not fine print, so nothing on a phone falls under 14px. */ --text-body: .875rem; --text-small: .875rem; } } /* ============================================================== DARK SURFACE */ html.theme-soda[data-theme="dark"] { color-scheme: dark; --page-bg: #05070a; --surface-1: rgba(255, 255, 255, .035); --surface-2: rgba(255, 255, 255, .07); --surface-glass: rgba(255, 255, 255, .05); --surface-nav: rgba(255, 255, 255, .075); --ink: #ffffff; --ink-muted: rgba(255, 255, 255, .66); /* 8.74:1 on --page-bg */ /* * --ink-faint is .55, not the reference's .40 — a deliberate, measured * deviation. .40 composites to #696a6c over --page-bg, which is 3.73:1 and * below the 4.5:1 AA floor. The token is not decoration-only: shared * components use it for card spec lines, notes, breadcrumbs, empty states, * hints and placeholders. .55 measures 6.26:1 and stays visibly quieter * than --ink-muted, so the three-step ink hierarchy survives. */ --ink-faint: rgba(255, 255, 255, .55); --ink-soft: rgba(255, 255, 255, .78); --line: rgba(255, 255, 255, .09); --line-hi: rgba(255, 255, 255, .16); --line-glass: rgba(255, 255, 255, .12); --line-nav: rgba(255, 255, 255, .18); --field-bg: rgba(0, 0, 0, .28); /* Native