/* ===================================================================== tokens.css · PLAN A ArchViz Website --------------------------------------------------------------------- ★ THIS IS THE REBRAND FILE ★ Colors use the OFFICIAL Material 3 *baseline* light scheme so the site looks like Google's Material 3 out of the box. To rebrand, edit the four BRAND SEED colors below — every role token references them, so the whole site re-themes from one place. Light theme only (dark theme intentionally disabled). M3 colour roles reference: https://m3.material.io/styles/color/roles ===================================================================== */ :root { color-scheme: light; /* never auto-switch to dark form controls */ /* ------------------------------------------------------------------- 1) BRAND SEED COLORS · edit these to rebrand Defaults are a deep-green M3 scheme seeded from #013c33. ------------------------------------------------------------------- */ --brand-primary: #013c33; /* main brand color (buttons, links, accents) */ --brand-secondary: #4b635b; /* supporting accent (chips, secondary) */ --brand-tertiary: #3d6373; /* extra accent for variety */ --brand-neutral: #7d7768; /* drives warm greys: outlines & dividers */ /* ------------------------------------------------------------------- 2) M3 LIGHT THEME · semantic color roles (green tonal scheme) These pair with the seeds above; adjust the seeds first, then fine-tune here if needed. ------------------------------------------------------------------- */ --md-sys-color-primary: var(--brand-primary); --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #9ff2dc; --md-sys-color-on-primary-container: #00201a; --md-sys-color-secondary: var(--brand-secondary); --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #cde8dd; --md-sys-color-on-secondary-container: #07201a; --md-sys-color-tertiary: var(--brand-tertiary); --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #c1e9fb; --md-sys-color-on-tertiary-container: #001f29; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #410002; /* Main page background is white; cards & panels sit on warm off-white. */ --md-sys-color-background: #ffffff; --md-sys-color-on-background: #1d1c16; --md-sys-color-surface: #ffffff; --md-sys-color-on-surface: #1d1c16; --md-sys-color-surface-variant: #e7e1d2; --md-sys-color-on-surface-variant: #4d473a; /* Tonal surface containers — subtle off-white for cards/elements (50% softer warmth) */ --md-sys-color-surface-dim: #ebe8df; --md-sys-color-surface-bright: #ffffff; --md-sys-color-surface-container-lowest: #fbf9f5; --md-sys-color-surface-container-low: #f8f6f0; --md-sys-color-surface-container: #f6f3ec; --md-sys-color-surface-container-high: #f3f0e8; --md-sys-color-surface-container-highest: #f0ede4; --md-sys-color-outline: #7d7768; --md-sys-color-outline-variant: #cfc8b6; --md-sys-color-inverse-surface: #2b322e; --md-sys-color-inverse-on-surface: #ecf2ec; --md-sys-color-inverse-primary: #82d5bf; --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; /* ------------------------------------------------------------------- 3) SHAPE · M3 corner radius scale ------------------------------------------------------------------- */ --md-sys-shape-corner-none: 0; --md-sys-shape-corner-xs: 4px; /* extra-small */ --md-sys-shape-corner-sm: 8px; /* small */ --md-sys-shape-corner-md: 12px; /* medium (cards) */ --md-sys-shape-corner-lg: 16px; /* large */ --md-sys-shape-corner-xl: 28px; /* extra-large (dialogs, hero CTA band) */ --md-sys-shape-corner-full: 9999px; /* ------------------------------------------------------------------- 4) ELEVATION · M3 shadow levels (exact spec values) ------------------------------------------------------------------- */ --md-sys-elevation-0: none; --md-sys-elevation-1: 0 1px 2px 0 rgb(0 0 0 / .30), 0 1px 3px 1px rgb(0 0 0 / .15); --md-sys-elevation-2: 0 1px 2px 0 rgb(0 0 0 / .30), 0 2px 6px 2px rgb(0 0 0 / .15); --md-sys-elevation-3: 0 1px 3px 0 rgb(0 0 0 / .30), 0 4px 8px 3px rgb(0 0 0 / .15); --md-sys-elevation-4: 0 2px 3px 0 rgb(0 0 0 / .30), 0 6px 10px 4px rgb(0 0 0 / .15); --md-sys-elevation-5: 0 4px 4px 0 rgb(0 0 0 / .30), 0 8px 12px 6px rgb(0 0 0 / .15); /* ------------------------------------------------------------------- 5) MOTION · M3 easing + duration ------------------------------------------------------------------- */ --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-duration-short: 150ms; --md-sys-motion-duration-medium: 300ms; --md-sys-motion-duration-long: 500ms; /* ------------------------------------------------------------------- 6) STATE LAYER opacities (M3 hover/focus/pressed overlays) ------------------------------------------------------------------- */ --md-sys-state-hover-opacity: 0.08; --md-sys-state-focus-opacity: 0.12; --md-sys-state-pressed-opacity: 0.12; /* ------------------------------------------------------------------- 7) TYPOGRAPHY family — Noto Sans for Latin, Noto Sans Georgian picks up ქართული glyphs per-character (M3's companion family to Roboto) ------------------------------------------------------------------- */ --font-brand: "Noto Sans", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Noto Sans", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", sans-serif; /* Headings/titles multiplier — Noto Sans runs larger than Roboto, and Georgian glyphs larger still (one tall band, no descend rhythm). */ --title-scale: 0.9; /* Layout */ --layout-max-width: 1200px; --layout-gutter: clamp(16px, 4vw, 48px); /* ------------------------------------------------------------------- 8) GRADIENTS · every gradient on the site lives here Edit these to retune glows/fades in one place. Fades use color-mix against the brand/background tokens so they re-theme with the seeds above. (Non-background bits — filter, animation, blend modes — stay on the rules in base.css / components.css.) ------------------------------------------------------------------- */ /* Top-of-page aurora (the green glow under the active nav button) is the one exception that does NOT live here: it depends on --gx / --gi, which are set per-element at runtime by layout.js. A :root token referencing var(--gx) would resolve --gx in this (:root) scope — where it's unset — and bake in the 50% fallback, pinning the glow to centre. So those two gradients are defined directly on .top-glow::before / ::after in base.css instead. */ /* Dark tint over the hero video. */ --gradient-hero-overlay: linear-gradient(180deg, rgba(1,32,26,.25) 0%, rgba(1,32,26,.50) 55%, rgba(1,32,26,.72) 100%), radial-gradient(120% 80% at 20% 20%, rgba(1,32,26,.15), transparent 60%); /* Backdrop behind the hero splat viewer (the splat renders transparently over this). "Infinite studio" cyclorama: a bright white pool centred on the splat (which sits in the right portion) falling off to mid-grey at the edges — like a seamless photo backdrop lit from the front. */ --gradient-hero-splat: radial-gradient(72% 90% at 66% 46%, #ffffff 0%, #f3f4f6 30%, #e0e3e7 62%, #c6cbd1 100%); /* Hero bottom fade into the Projects section. Two soft, eased corner radials sit UNDER a dominant eased vertical base. Multi-stop alpha ramps avoid the hard banding line, and the low-contrast corners give a gentle lift instead of a "smile" seam. */ --gradient-hero-fade: radial-gradient(125% 150% at 0% 100%, color-mix(in srgb, var(--md-sys-color-background) 55%, transparent) 0%, color-mix(in srgb, var(--md-sys-color-background) 30%, transparent) 30%, color-mix(in srgb, var(--md-sys-color-background) 10%, transparent) 52%, transparent 72%), radial-gradient(125% 150% at 100% 100%, color-mix(in srgb, var(--md-sys-color-background) 55%, transparent) 0%, color-mix(in srgb, var(--md-sys-color-background) 30%, transparent) 30%, color-mix(in srgb, var(--md-sys-color-background) 10%, transparent) 52%, transparent 72%), linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--md-sys-color-background) 2%, transparent) 30%, color-mix(in srgb, var(--md-sys-color-background) 7%, transparent) 46%, color-mix(in srgb, var(--md-sys-color-background) 17%, transparent) 60%, color-mix(in srgb, var(--md-sys-color-background) 34%, transparent) 72%, color-mix(in srgb, var(--md-sys-color-background) 58%, transparent) 82%, color-mix(in srgb, var(--md-sys-color-background) 82%, transparent) 91%, var(--md-sys-color-background) 100%); /* Hero TOP fade — vertical mirror of --gradient-hero-fade, tinted BLACK. Solid black at the top easing to transparent, with the two soft corner radials moved up to the top corners. Sits behind the menu/green glow on the home page only (darkens the top so the glass menu reads clearly). */ --gradient-hero-fade-top: radial-gradient(125% 150% at 0% 0%, color-mix(in srgb, var(--md-sys-color-scrim) 55%, transparent) 0%, color-mix(in srgb, var(--md-sys-color-scrim) 30%, transparent) 30%, color-mix(in srgb, var(--md-sys-color-scrim) 10%, transparent) 52%, transparent 72%), radial-gradient(125% 150% at 100% 0%, color-mix(in srgb, var(--md-sys-color-scrim) 55%, transparent) 0%, color-mix(in srgb, var(--md-sys-color-scrim) 30%, transparent) 30%, color-mix(in srgb, var(--md-sys-color-scrim) 10%, transparent) 52%, transparent 72%), linear-gradient(180deg, var(--md-sys-color-scrim) 0%, color-mix(in srgb, var(--md-sys-color-scrim) 82%, transparent) 9%, color-mix(in srgb, var(--md-sys-color-scrim) 58%, transparent) 18%, color-mix(in srgb, var(--md-sys-color-scrim) 34%, transparent) 28%, color-mix(in srgb, var(--md-sys-color-scrim) 17%, transparent) 40%, color-mix(in srgb, var(--md-sys-color-scrim) 7%, transparent) 54%, color-mix(in srgb, var(--md-sys-color-scrim) 2%, transparent) 70%, transparent 100%); /* Scrim over the generic (image) hero — darkens for white text. */ --gradient-hero-scrim: linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-scrim) 45%, transparent), color-mix(in srgb, var(--md-sys-color-scrim) 65%, transparent)); /* Light CTA band fade. */ --gradient-cta-light: linear-gradient(180deg, var(--md-sys-color-surface-container-low) 0%, #ffffff 100%); /* Unified card surface — offwhite (top) fading to white (bottom). */ --gradient-card: linear-gradient(180deg, var(--md-sys-color-surface-container-low) 0%, #ffffff 100%); } /* Georgian locale (html lang set by i18n.js before first paint) uses the same title scale as Latin — both languages render at equal sizes. */ [lang="ka"] { --title-scale: 0.9; }