/* ============================================================ nquartic — Colors & Type foundation (Website build) Faithfully derived from the design system's colors_and_type.css. Leading colors come straight from the n^4 logo: the steel-blue "n" and the mint-green caret "4". Fonts are SELF-HOSTED (WOFF2) — no external requests (DSGVO). ============================================================ */ /* ---------- Fonts — Dosis, single brand typeface, self-hosted ---------- */ @font-face { font-family:"Dosis"; src:url("../assets/fonts/Dosis-ExtraLight.woff2") format("woff2"); font-weight:200; font-style:normal; font-display:swap; } @font-face { font-family:"Dosis"; src:url("../assets/fonts/Dosis-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:"Dosis"; src:url("../assets/fonts/Dosis-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Dosis"; src:url("../assets/fonts/Dosis-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"Dosis"; src:url("../assets/fonts/Dosis-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:"Dosis"; src:url("../assets/fonts/Dosis-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:"Dosis"; src:url("../assets/fonts/Dosis-ExtraBold.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; } /* Variable Dosis (continuous 200–800 weight axis) — used only for the proximity effect so the per-letter weight morphs smoothly instead of snapping to a cut. */ @font-face { font-family:"DosisVF"; src:url("../assets/fonts/Dosis-Variable-latin.woff2") format("woff2"); font-weight:200 800; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"DosisVF"; src:url("../assets/fonts/Dosis-Variable-latinext.woff2") format("woff2"); font-weight:200 800; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root { /* ----- Brand core (from the logo) ----- */ --nq-blue: #386890; /* the "n" — steel / depth / trust */ --nq-green: #58B8A0; /* the caret — energy / what's next */ /* ----- Blue scale ----- */ --nq-blue-900: #16242F; --nq-blue-700: #234156; --nq-blue-600: #2D5475; --nq-blue-500: #386890; /* base */ --nq-blue-400: #5B86A8; --nq-blue-300: #8FACC4; --nq-blue-200: #C3D2DF; --nq-blue-100: #E7EEF4; /* ----- Green / mint scale ----- */ --nq-green-700: #2E7A66; --nq-green-600: #429580; --nq-green-500: #58B8A0; /* base */ --nq-green-400: #7CC8B5; --nq-green-300: #A6DACE; --nq-green-200: #CFEBE4; --nq-green-100: #ECF7F4; /* ----- Ink & paper (the two grounds) ----- */ --nq-ink: #0E1318; /* near-black ground */ --nq-ink-soft: #1A222B; /* raised surface on dark */ --nq-paper: #FFFFFF; /* white ground */ --nq-paper-soft: #F4F7F9; /* raised surface on light */ /* ----- Neutral grays ----- */ --nq-gray-900: #11171D; --nq-gray-700: #3A454F; --nq-gray-500: #6B7884; --nq-gray-400: #97A2AC; --nq-gray-300: #C2CAD1; --nq-gray-200: #DDE3E8; --nq-gray-100: #EEF1F4; /* ----- Signature gradients ----- */ --nq-grad-brand: linear-gradient(120deg, var(--nq-blue-700) 0%, var(--nq-blue-500) 45%, var(--nq-green-500) 100%); --nq-grad-dark: radial-gradient(120% 90% at 78% 8%, rgba(88,184,160,0.22) 0%, rgba(56,104,144,0.18) 32%, rgba(14,19,24,0) 62%), var(--nq-ink); --nq-grad-light: radial-gradient(120% 90% at 80% 6%, rgba(88,184,160,0.20) 0%, rgba(56,104,144,0.12) 36%, rgba(255,255,255,0) 64%), var(--nq-paper); --nq-grad-line: linear-gradient(90deg, var(--nq-blue-500), var(--nq-green-500)); /* ====== SEMANTIC TOKENS — default = LIGHT ground (kept for fidelity) ====== */ --bg: var(--nq-paper); --bg-soft: var(--nq-paper-soft); --fg1: var(--nq-ink); --fg2: var(--nq-gray-700); --fg3: var(--nq-gray-500); --accent: var(--nq-green-500); --accent-deep: var(--nq-blue-500); --hilite: var(--nq-blue-600); --line: var(--nq-gray-200); --line-strong: var(--nq-gray-300); /* ----- Type families ----- */ --font-display: "Dosis", system-ui, sans-serif; --font-ui: "Dosis", system-ui, sans-serif; --font-body: "Dosis", system-ui, sans-serif; /* ----- Weights (the expressive axis) ----- */ --fw-display: 200; --fw-display-2: 300; --fw-body: 400; --fw-label: 600; --fw-highlight: 700; --fw-strong: 800; /* ----- Type scale (fluid-ish, px base) ----- */ --t-display: clamp(48px, 8vw, 112px); --t-h1: clamp(36px, 5vw, 64px); --t-h2: clamp(28px, 3.4vw, 44px); --t-h3: 24px; --t-body-lg: 20px; --t-body: 17px; --t-small: 15px; --t-caption: 13px; /* ----- Spacing (8pt base) ----- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ----- Radii — soft, rounded to echo the Dosis caret terminals ----- */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; /* ----- Elevation (kept subtle; brand favours flat + gradient) ----- */ --sh-1: 0 1px 2px rgba(14,19,24,0.06), 0 1px 1px rgba(14,19,24,0.04); --sh-2: 0 6px 18px rgba(14,19,24,0.08), 0 2px 6px rgba(14,19,24,0.05); --sh-3: 0 18px 48px rgba(14,19,24,0.14), 0 6px 16px rgba(14,19,24,0.08); --sh-glow: 0 10px 40px rgba(88,184,160,0.30); } /* ====== DARK ground — the website runs on dark throughout ====== */ .on-dark { --bg: var(--nq-ink); --bg-soft: var(--nq-ink-soft); --fg1: #FFFFFF; --fg2: #C4CDD5; --fg3: #8C97A1; --accent: var(--nq-green-500); --accent-deep: var(--nq-green-400); --hilite: var(--nq-blue-400); /* lighter steel-blue for contrast on dark */ --line: rgba(255,255,255,0.14); --line-strong: rgba(255,255,255,0.24); }