/* ============================================================================= ARTISTECHAI — DESIGN TOKENS ============================================================================= This file is the single control panel for the entire visual system. Every color, font, spacing value, animation timing, and signature-motif dimension used anywhere on the site is declared here — and ONLY here. TO RESTYLE THE SITE: edit values in this file. Nothing else needs to change. Sections: 01 — Palette (color system) 02 — Typography (families, sizes, tracking) 03 — Spacing & layout rhythm 04 — The Seam (signature motif: cut angles, notches, hairlines) 05 — Motion (durations, easings) 06 — Elevation & surfaces 07 — Component-level tokens (buttons, cards, drawer, header) ========================================================================== */ :root { /* ========================================================================== 01 — PALETTE · Cinematic gallery-dark A darkened exhibition hall: warm bone light on near-black walls, signal red reserved for seams, wounds, and points of action. ======================================================================== */ /* Canvas — the gallery walls (warm-tinted near-blacks, never pure #000) */ --clr-canvas: #0B0B0D; /* page background */ --clr-canvas-deep: #060607; /* preloader, drawer scrim, hero void */ --clr-panel: #121215; /* raised section panels */ --clr-elevated: #18181C; /* cards, drawer, inputs */ --clr-elevated-2: #1F1F24; /* hover states of elevated surfaces */ /* Ink — bone white, the spotlight (never pure #FFF: keeps it cinematic) */ --clr-ink: #F4F1EA; /* primary text, headlines */ --clr-ink-dim: #A8A6A0; /* secondary text */ --clr-ink-faint: #6C6A66; /* tertiary text, disabled, captions */ /* Structure — hairlines and grids */ --clr-line: #26262C; /* default hairline */ --clr-line-strong: #3B3B44; /* emphasized hairline */ /* Signal red — the fracture. Use sparingly; when it appears, it means energy, action, or the seam itself. */ --clr-red: #E0221E; /* primary accent */ --clr-red-bright: #FF3B30; /* hover/active intensification */ --clr-red-deep: #7E100E; /* pressed states, deep seam shadow */ --clr-red-glow: rgba(224, 34, 30, 0.35); /* glows, focus rings */ --clr-red-tint: rgba(224, 34, 30, 0.08); /* faint red wash surfaces */ /* On-color text */ --clr-on-red: #0B0B0D; /* text placed on red surfaces */ /* Semantic aliases (components reference these, not raw colors above) */ --clr-bg: var(--clr-canvas); --clr-text: var(--clr-ink); --clr-text-muted: var(--clr-ink-dim); --clr-accent: var(--clr-red); --clr-focus-ring: var(--clr-red-glow); /* ========================================================================== 02 — TYPOGRAPHY Display: Clash Display — angular, engineered, high-end (Fontshare). Body: Switzer — neutral modern grotesk with warmth (Fontshare). Mono: JetBrains Mono — the "index mark" data voice (Google Fonts). To swap any face: change the family token + the font /enqueue. ======================================================================== */ --font-display: "Clash Display", "Arial Narrow", Impact, sans-serif; --font-body: "Switzer", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace; /* Fluid type scale (clamps between mobile and large desktop) */ --fs-hero: clamp(2.75rem, 8.5vw, 7.25rem); /* H1 hero tagline */ --fs-h2: clamp(2rem, 5vw, 4rem); /* section headings */ --fs-h3: clamp(1.35rem, 2.4vw, 1.9rem); /* card/step titles */ --fs-quote: clamp(1.6rem, 4vw, 3.1rem); /* editorial pull quote */ --fs-body: 1.0625rem; /* body copy */ --fs-small: 0.9375rem; /* fine print */ --fs-mono: 0.75rem; /* index marks, labels */ --fs-mono-lg: 0.875rem; /* prices, HUD */ /* Weights */ --fw-display: 600; --fw-display-heavy: 700; --fw-body: 400; --fw-body-medium: 500; --fw-body-strong: 600; /* Tracking & leading */ --ls-display: -0.02em; /* tight display headlines */ --ls-mono: 0.18em; /* wide-tracked mono labels */ --ls-button: 0.12em; /* button labels */ --lh-display: 0.96; /* compressed headline leading */ --lh-body: 1.65; /* generous editorial body leading */ /* ========================================================================== 03 — SPACING & LAYOUT RHYTHM ======================================================================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem; --space-7: 6rem; --space-8: 9rem; --section-pad-y: clamp(5rem, 12vw, 9.5rem); /* vertical section rhythm */ --content-max: 1320px; /* page content width */ --content-narrow: 820px; /* editorial column width */ --gutter: clamp(1.25rem, 4vw, 3rem); /* page side padding */ --grid-gap: clamp(1rem, 2.5vw, 2rem); /* card grid gap */ /* ========================================================================== 04 — THE SEAM · Signature motif The diagonal fracture from the logo, reused everywhere: notched corners, angled dividers, red hairline seams, blade-wipe reveals. ======================================================================== */ --cut-angle: 14deg; /* the canonical diagonal */ --notch: 18px; /* corner-cut size on cards */ --notch-sm: 10px; /* corner-cut on buttons/chips */ --seam-w: 2px; /* red seam line thickness */ --hairline: 1px; /* structural hairline width */ /* Reusable clip-path shapes (corner cut top-right / bottom-left) */ --clip-notch-tr: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); --clip-notch-btn: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm), 100% 100%, var(--notch-sm) 100%, 0 calc(100% - var(--notch-sm))); --clip-blade: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* animated end-state */ /* ========================================================================== 05 — MOTION · "Blade & settle" Elements enter like a blade wipe along the cut angle, then settle with a long deceleration. Hovers are fast; reveals are unhurried and cinematic. ======================================================================== */ --dur-fast: 160ms; /* hovers, taps */ --dur-med: 420ms; /* drawer, tabs, small reveals */ --dur-slow: 900ms; /* section blade-wipe reveals */ --dur-glacial: 1600ms; /* hero entrance, preloader */ --ease-blade: cubic-bezier(0.16, 1, 0.3, 1); /* sharp in, long settle */ --ease-cut: cubic-bezier(0.83, 0, 0.17, 1); /* symmetric slice */ --ease-linear: linear; --reveal-shift: 2.5rem; /* distance elements travel on entry */ --reveal-stagger: 90ms; /* delay between staggered siblings */ --ticker-speed: 38s; /* marquee loop duration */ /* ========================================================================== 06 — ELEVATION & SURFACES ======================================================================== */ --shadow-drawer: -24px 0 60px rgba(0, 0, 0, 0.55); --shadow-card: 0 30px 60px -30px rgba(0, 0, 0, 0.8); --vignette: radial-gradient(120% 90% at 50% 10%, transparent 40%, rgba(0, 0, 0, 0.55) 100%); --scrim: rgba(6, 6, 7, 0.72); /* ========================================================================== 07 — COMPONENT TOKENS ======================================================================== */ /* Header */ --header-h: 76px; --header-h-compact: 60px; --header-bg: rgba(11, 11, 13, 0.82); --header-blur: 14px; /* Logo slots — control rendered logo sizes without touching layout */ --logo-h-header: 34px; --logo-h-footer: 44px; --logo-h-preloader: 56px; --logo-w-hero: min(420px, 70vw); /* Buttons */ --btn-pad-y: 0.95rem; --btn-pad-x: 2rem; --btn-fs: 0.8125rem; /* Product cards */ --card-img-ratio: 4 / 5; --card-tilt-max: 6deg; /* Cart drawer */ --drawer-w: min(440px, 92vw); /* Forms */ --input-pad: 1rem 1.15rem; --input-bg: var(--clr-elevated); --input-border: var(--clr-line-strong); }