/* ============================================================ Das Awesome — Studio edition (Omnera-leaning) Bold Switzer grotesque · DUAL-MODE neutral canvas · gradient reveal Light = white/cool (day) · Dark = void/black (night) Mode driven by [data-mode="light"|"dark"] on . ============================================================ */ @import url('https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700,800,900&display=swap'); :root { --sans: "Switzer", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; /* restrained signature gradient — the single chromatic pop / reveal fill */ --g1: #0E7D92; --g2: #1AA6BF; --g3: #22D3EE; --grad: linear-gradient(100deg, var(--g1), var(--g3)); /* type scale — Switzer, bold + tight */ --fs-mega: clamp(3.2rem, 15vw, 16rem); /* hero wordmark */ --fs-giant: clamp(2.6rem, 8vw, 7.5rem); /* section openers */ --fs-h1: clamp(2rem, 5vw, 4rem); --fs-h2: clamp(1.6rem, 3.2vw, 2.6rem); --fs-h3: clamp(1.2rem, 1.8vw, 1.5rem); --fs-lead: clamp(1.1rem, 1.5vw, 1.4rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-label: 0.72rem; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --section: clamp(88px, 12vh, 170px); --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --d-fast: 200ms; --d-base: 360ms; --d-slow: 700ms; --d-daybreak: 900ms; /* the mode crossfade */ /* always-dark section ink (shared by both modes) */ --night-ink: #F4F3EF; --night-ink-2:#9A9A95; } /* ---------------------------------------------------------------- LIGHT / DAY — clean cool white canvas (no warm brown) ---------------------------------------------------------------- */ :root, [data-mode="light"] { --paper: #FFFFFF; /* page */ --paper-2: #FFFFFF; /* raised card — differentiated by hairline */ --band: #F3F4F6; /* cool light-gray section band */ --band-2: #ECEEF1; /* deeper gray band */ --line: #E5E6EA; /* hairlines */ --ink: #14151A; /* primary text */ --ink-2: #5B5D66; /* body */ --ink-3: #9A9CA4; /* captions / dim reveal start */ --accent: #22D3EE; /* signal cyan — the single chromatic accent, used very sparingly */ /* always-dark sections (Services etc.) — true black tone */ --night: #0E0E11; --night-2: #17171B; --night-line:#27272D; color-scheme: light; } /* ---------------------------------------------------------------- DARK / NIGHT — void black canvas ---------------------------------------------------------------- */ [data-mode="dark"] { --paper: #000000; /* the stage */ --paper-2: #0E0E11; /* raised card */ --band: #0B0B0D; /* section band — a touch off-void */ --band-2: #121216; /* deeper band */ --line: #202026; /* hairlines */ --ink: #FAFAFA; /* primary text */ --ink-2: #A6A6AD; /* body */ --ink-3: #65656D; /* captions / dim reveal start */ --accent: #22D3EE; /* signal cyan — the single chromatic accent, used very sparingly */ /* dark-mode gradient — neutral grey (light mode keeps cyan) */ --g1: #697B8B; --g3: #B5B5BC; /* always-dark sections — lift off the void so they still read as panels */ --night: #101015; --night-2: #1A1A20; --night-line:#2C2C34; color-scheme: dark; }