/* ========================================================================== SAS STOLARIJA — v6 · DESIGN TOKENS Dark / cinematic. Every neutral is a material he actually installs. Red sampled pixel-by-pixel from Sas.png — this is his real brand red. ========================================================================== */ /* -------------------------------------------------------------------------- ANIMATABLE GROUND (elevation brief 4.1) Custom properties are normally discrete: you cannot tween them, they snap. Registering the two ground tokens as makes them interpolatable, so the page can drift between tonal zones on scroll while every section keeps its own void/ground offset. One declaration here moves ten sections. Browsers without @property simply snap between zones instead of easing, which is a downgrade in smoothness, not in legibility. -------------------------------------------------------------------------- */ @property --ground { syntax: ''; inherits: true; initial-value: #14171A; } @property --void { syntax: ''; inherits: true; initial-value: #0E1113; } :root { /* ---- 1. COLOUR ------------------------------------------------------ Strategy: DRENCHED dark. Graphite carries the whole surface; warm window-light is the only glow; red appears ONLY on the action. */ /* His actual brand red, supplied directly. Darker and browner than the value sampled off the logo file, so the logo is re-tinted to match. It is deep enough that on the graphite ground the fill alone would not separate, hence --red-lift for hover and a ring on the primary action. White on --red measures 9.6:1, so button labels are comfortably legible. */ --red: #881816; --red-lift: #A61F1C; /* hover / focus */ --red-deep: #5E100F; /* pressed */ --red-wash: #8818161F; --void: #0E1113; /* deepest ground, behind everything */ --ground: #14171A; /* page ground */ --graphite: #22262A; /* raised surfaces */ --elevated: #2C3136; /* cards, rows */ --anthracite: #383E42; /* RAL 7016 — the joinery colour itself */ --alu: #9BA1A6; /* mill-finish aluminium */ --glass: #2F6357; /* float glass seen edge-on is green */ --pvc-white: #F2F2F0; /* RAL 9016 */ --warm: #FFC478; /* interior light spilling through a window */ --warm-deep: #C8873A; /* Text on dark, contrast-checked against --ground */ --text: #F2F2F0; /* 15.8:1 */ --text-2: #B3BBC1; /* 9.6:1, lifted 2026-08-31 for readability */ --text-3: #7E868D; /* 4.9:1 */ --line: #2A2F34; --line-2: #3A4147; --focus: #E11030; /* ---- 2. SPACING — tightened from the earlier builds ------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 22px; --s-6: 30px; --s-7: 42px; --s-8: 60px; --s-9: 88px; --s-10: 120px; --section-y: clamp(56px, 7vw, 88px); /* was 128px */ --gutter: clamp(18px, 3.4vw, 44px); --measure-max: 1440px; --header-h: 64px; /* ---- 3. TYPE -------------------------------------------------------- Alumni Sans: condensed, very tall, made to be set enormous. It is the only one of the three that holds at the scale the hero needs. Commissioner: quiet low-contrast text face underneath. */ --font-display: 'Alumni Sans', 'Arial Narrow', sans-serif; --font-body: 'Commissioner', system-ui, -apple-system, sans-serif; /* Reading sizes lifted TWICE 2026-08-31: the owner found body copy hard to read at 100% desktop zoom, then asked for more - "there's a lot of space to enlarge it". Body paragraphs now run 20px. Display stays. */ --t-2xs: 0.71875rem; --t-xs: 0.8125rem; --t-sm: 0.9063rem; --t-base: 1.0625rem; --t-md: 1.25rem; --t-lg: 1.375rem; --t-xl: 1.625rem; --t-2xl: clamp(2.25rem, 4.6vw, 3.5rem); --t-3xl: clamp(3rem, 7vw, 5rem); /* The hero runs past the usual display ceiling on purpose: Alumni Sans is condensed, so its optical size at 9rem sits near a normal face at 5rem. */ --t-hero: clamp(4rem, 15vw, 12rem); --lh-hero: 0.80; /* condensed faces close up hard */ --lh-tight: 0.92; --lh-snug: 1.1; --lh-normal: 1.6; --tr-hero: -0.03em; --tr-display:-0.02em; --tr-normal: -0.005em; --tr-wide: 0.1em; --tr-wider: 0.18em; --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; --w-black: 900; /* ---- 4. ELEVATION — on a dark ground, light shadows read as glow, so depth comes from a darker shadow plus a hairline top highlight. ------ */ --shadow-sm: 0 2px 6px rgba(0,0,0,.4); --shadow-md: 0 8px 20px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3); --shadow-lg: 0 24px 60px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.35); --shadow-action: 0 6px 20px rgba(136,24,22,.55), 0 2px 6px rgba(0,0,0,.4); --edge-top: inset 0 1px 0 rgba(255,255,255,.06); /* ---- 5. GEOMETRY ---------------------------------------------------- */ /* Softer, iOS-leaning radius scale. One system, four steps, used everywhere so nothing reads as a mixed shape language. */ --radius-sm: 9px; /* chips, small controls */ --radius-md: 14px; /* buttons, inputs, rows */ --radius-lg: 22px; /* panels, cards */ --radius-xl: 30px; /* large surfaces */ --radius-pill: 999px; --border-hair: 1px; --border-solid: 1.5px; --border-heavy: 2.5px; /* ---- GLASS ---------------------------------------------------------- A web approximation of the iOS frosted material: heavy blur, a real saturation lift so colour bleeds through, a bright specular top edge and a second inner hairline. This is backdrop-filter, not Apple's own material, which exists only on Apple platforms. */ /* Tuned for a dark page. The first version read as a flat tinted box because over --void there is almost nothing behind the panel for a blur to refract, so the material had to carry its own light. Three changes do that: the sheen now runs corner to corner and returns at the bottom edge (glass is lit twice, from the source and from the surface under it), brightness() lifts the backdrop so the warm window glow actually bleeds through, and the rim is a real specular edge rather than a hairline. */ --glass-tint: rgba(22, 26, 30, .50); --glass-sheen: linear-gradient(148deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.055) 34%, rgba(255,255,255,.015) 62%, rgba(255,255,255,.075) 100%); --glass-border: rgba(255, 255, 255, .22); --glass-blur: blur(36px) saturate(210%) brightness(1.07); --glass-edge: inset 0 1.5px 0 rgba(255,255,255,.44), inset 0 -1px 0 rgba(255,255,255,.11), inset 1px 0 0 rgba(255,255,255,.10), inset -1px 0 0 rgba(255,255,255,.10), inset 0 -16px 28px -20px rgba(0,0,0,.72); --glass-drop: 0 22px 60px rgba(0,0,0,.52); /* ---- 6. MOTION ------------------------------------------------------ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 520ms; --dur-reveal: 800ms; /* One ladder, lowest to highest. --z-overlay was referenced by the gate modal in main.css but never defined here, which made its z-index declaration invalid: the modal fell back to `auto` and the gate captions (4) and their 3D buttons (5) painted straight over the open dialog. It sits below --z-slat so the preloader still covers a reopened page. */ --z-header: 60; --z-cta: 70; --z-overlay: 800; --z-slat: 900; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast:1ms; --dur-base:1ms; --dur-slow:1ms; --dur-reveal:1ms; } }