/* ===== Shared: fonts, layout, motion ======================================= */ :root { /* Fonts — display = headings, body = paragraphs, mono = labels/meta/buttons. Loaded from Google Fonts in partials/head.php. */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Geist', 'Space Grotesk', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Layout */ --container: 1280px; /* max content width */ --gutter: clamp(20px, 4vw, 48px); /* side padding of every section */ --nav-height: 60px; /* fixed nav bar height */ /* Motion — ease-out = the "snappy settle" curve used by every hover. */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-soft: cubic-bezier(0.16, 1, 0.3, 1); /* landing halves, reveals */ --t-fast: 0.15s ease; /* colours on links/nav */ --t-color: 0.2s ease; /* card background/border */ --t-lift: 0.34s var(--ease-out); /* card hover lift */ /* Corner brackets — the four little L-shapes around buttons and cards. */ /* Shape & lift — the light side is square and flat, the dark side rounds corners, pills its buttons and lifts with a slight scale (see .theme-dark) */ --radius-card: 0px; --radius-btn: 0px; --lift-card: translateY(-5px); --lift-btn: translateY(-5px); --gradient-aurora: none; --corner-weight: 1.5px; --corner-size-btn: 12px; /* buttons: 12px corners, 7px outside the box */ --corner-size-card: 16px; /* cards: 16px corners, 6px inside the box */ /* Brand colours that are the same in both palettes */ --brand-orange: #FF7403; /* light-side landing accent */ --brand-pink: #FF8F9B; /* landing corner marks, Lenka dark accent */ --brand-orange-deep: #D45D00; /* light-theme accent */ --brand-blue: #93DAFE; /* secondary accent (CTAs, stats) */ --brand-red: #E5484D; /* "unreleased/concept" status dot (Lenka's case studies) */ --brand-blue-deep: #3E6B8C; /* "MATÚŠ" on the light landing half */ --ink-dark: #1C1814; /* warm black */ --ink-cream: #EDE8DF; /* cream */ --ink-night: #100C14; /* near-black page background (Lenka purple-black) */ --ink-paper: #FFFFFF; /* white page background */ --ink-navy: #14263A; /* the logo mark on the white landing pad */ --ink-stone: #8B8378; /* "CHOOSE YOUR PATH" — reads on both halves */ --ink-mist: #A39B8F; /* the skill list on the dark landing half */ /* Landing page — the two halves' veils over their canvases and the centre pad's borders, one per palette */ --gradient-landing-dark: radial-gradient(80% 70% at 40% 50%, rgba(16, 12, 20, 0.55), rgba(16, 12, 20, 0.9) 75%); --gradient-landing-light: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0.75)); --landing-pad-border-dark: rgba(237, 232, 223, 0.18); --landing-pad-border-light: rgba(28, 24, 20, 0.22); } /* ===== Light palette — Matúš / tech art ==================================== */ .theme-light { /* Surfaces: page, the slightly darker "alt" surface (image frames, cover placeholders), the panel/card surface and its hover tint. */ --color-bg: #FFFFFF; --color-bg-alt: #ECE9E3; --color-bg-band: rgba(28, 24, 20, 0.055); /* footer band */ --color-panel: rgba(255, 255, 255, 0.55); /* cards, steps, facts (the grid shows through faintly) */ --color-panel-solid: #FFFFFF; /* sticky bars, nav */ --color-panel-hover: rgba(212, 93, 0, 0.05); /* orange tint on hover */ --color-overlay: rgba(28, 24, 20, 0.92); /* lightbox backdrop */ /* Text: text = headings / primary, soft = lead paragraphs, dim = body copy, muted = labels & captions, nav = secondary nav links. */ --color-text: #1C1814; --color-text-soft: #40382F; --color-text-dim: #5A5045; --color-text-muted: #8A8073; --color-text-nav: #6B6156; --color-text-faint: rgba(28, 24, 20, 0.35); /* card years */ /* Accents: accent = orange (numbers, eyebrows, active nav, hover), accent-2 = blue (card CTAs, case-study stat line). */ --color-accent: #D45D00; --color-accent-2: #93DAFE; --color-on-accent: #FFFFFF; /* Solid button */ --color-btn-bg: #1C1814; --color-btn-fg: #FFFFFF; --color-btn-hover-bg: #D45D00; /* Lines — everything "UI": panels, nav, chips, buttons */ --color-line: rgba(28, 24, 20, 0.16); /* panel, nav, card borders */ --color-line-mid: rgba(28, 24, 20, 0.20); /* chips */ --color-line-strong: rgba(28, 24, 20, 0.28); /* ghost buttons, rail arrows */ --color-line-soft: rgba(28, 24, 20, 0.12); /* career row dividers, footer bar */ --color-line-track: rgba(28, 24, 20, 0.12); /* rail progress track */ /* Rules — everything "print": section heads, figure frames, hairlines */ --color-rule: rgba(28, 24, 20, 0.20); /* section head top line */ --color-rule-hair: rgba(28, 24, 20, 0.14); /* case labels, footer top */ --color-rule-tick: rgba(28, 24, 20, 0.40); /* hero corner ticks */ --color-rule-strong: rgba(28, 24, 20, 0.22); /* short divider lines (landing) */ --color-rule-mark: rgba(28, 24, 20, 0.45); /* small corner marks on covers */ --color-link-underline: rgba(212, 93, 0, 0.45); /* inline text links */ /* Canvas grid (js/grid-bg.js reads these) */ --grid-line: 28, 24, 20; /* rgb of the grid lines */ --grid-dot: 212, 93, 0; /* rgb of the warped nodes */ --grid-line-alpha: 0.055; --grid-kind: grid; /* The light side has no page veil (see the dark palette) */ --color-veil: transparent; --color-veil-strong: transparent; /* Gradients — fades over the canvas and the rail edges */ --gradient-hero-fade: linear-gradient(to top, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.28) 55%, rgba(255, 255, 255, 0) 100%); --gradient-rail-end: linear-gradient(270deg, #FFFFFF 12%, rgba(255, 255, 255, 0)); --gradient-rail-start: linear-gradient(90deg, #FFFFFF 12%, rgba(255, 255, 255, 0)); /* The logo image is dark ink on transparent: no filter needed here */ --logo-filter: none; color-scheme: light; } /* ===== Dark palette — Lenka / UI design (and the landing's left half) ====== */ .theme-dark { --color-bg: #100C14; --color-bg-alt: #171221; --color-bg-band: #100C14; --color-panel: rgba(24, 19, 33, 0.2); --color-panel-solid: #100C14; --color-panel-hover: #1E1729; --color-overlay: rgba(10, 7, 14, 0.95); --color-text: #F0EAF2; --color-text-soft: #CFC8D6; --color-text-dim: #ADA3B4; --color-text-muted: #7D7488; --color-text-nav: #ADA3B4; --color-text-faint: rgba(240, 234, 242, 0.35); --color-accent: #FF8F9B; --color-accent-2: #9CCDEB; --color-on-accent: #100C14; --color-btn-bg: #FF8F9B; --color-btn-fg: #100C14; --color-btn-hover-bg: #F0EAF2; /* the dark side's UI lines carry a pink cast; print-style rules stay neutral */ --color-line: rgba(255, 143, 155, 0.16); --color-line-mid: rgba(255, 143, 155, 0.28); --color-line-strong: rgba(255, 143, 155, 0.30); --color-line-soft: rgba(237, 244, 255, 0.09); --color-line-track: rgba(237, 244, 255, 0.14); --color-rule: rgba(237, 232, 223, 0.12); --color-rule-hair: rgba(237, 232, 223, 0.12); --color-rule-tick: rgba(237, 232, 223, 0.35); --color-rule-strong: rgba(237, 232, 223, 0.22); --color-rule-mark: rgba(237, 232, 223, 0.45); --color-link-underline: rgba(156, 205, 235, 0.50); --grid-line: 255, 232, 224; --grid-dot: 255, 143, 155; --grid-line-alpha: 0.02; --grid-kind: guides; /* The design draws the dark guides canvas at full strength and darkens it with one fixed veil over the whole page */ --color-veil: rgba(14, 10, 19, 0.66); --color-veil-strong: rgba(14, 10, 19, 0.76); /* the soft colour wash behind the canvas (.page-aurora) */ --gradient-aurora: radial-gradient(680px 520px at 12% 8%, rgba(255, 166, 180, 0.11), transparent 70%), radial-gradient(720px 560px at 88% 26%, rgba(201, 182, 255, 0.09), transparent 72%), radial-gradient(760px 600px at 30% 92%, rgba(168, 230, 213, 0.07), transparent 74%); --gradient-hero-fade: none; --gradient-rail-end: linear-gradient(270deg, #100C14 12%, rgba(16, 12, 20, 0)); --gradient-rail-start: linear-gradient(90deg, #100C14 12%, rgba(16, 12, 20, 0)); /* Lenka's side is rounded and pill-shaped; headings switch to DM Sans */ --font-display: 'DM Sans', 'Space Grotesk', sans-serif; --radius-card: 16px; --radius-btn: 999px; --lift-card: translateY(-6px) scale(1.025); --lift-btn: translateY(-6px) scale(1.04); /* The logo image is dark ink: invert it to cream on dark surfaces */ --logo-filter: brightness(0) invert(1); color-scheme: dark; }