/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 * genre: editorial · macrostructure: Marquee Hero (preserved) · theme: custom * vibe: "hârtie caldă de laborator, două teste colorate" * tokens · paper-band: light (default) · display-style: weighty-sans · accent-hue: neutral-graphite * paper light oklch(98.4% 0.004 70) · dark oklch(13% 0.018 35) * accent · in tema inchisa toate accentele stau cu 2% sub valoarea din * tema deschisa: aceeasi lightness in ambele teme citea ca aceeasi culoare * lipita peste doua fundaluri diferite * accent home oklch(30% 0.022 45) neutral · full oklch(66% 0.175 48) warm · pre-op oklch(50% 0.150 245) cool * accent-text: variantă închisă pentru text mic (full 47%, pre-op 46%) — AA pe hârtie * display Archivo (wght 400-900) · body Instrument Sans · mono JetBrains Mono * serif de accent Instrument Serif — aceeasi casa cu body-ul, potrivire din proiectare * * Două palete brute, o singură hartă: light-dark() citește `color-scheme`, * așa că butonul de temă schimbă o singură proprietate, nu 30 de tokeni. */ :root { color-scheme: light dark; /* === Paletă brută · light (implicită) ======================== */ --l-paper: oklch(98.4% 0.004 70); --l-paper-2: oklch(100% 0 0); --l-paper-3: oklch(96.2% 0.005 70); --l-paper-4: oklch(92.5% 0.006 65); --l-ink: oklch(21% 0.012 40); --l-ink-2: oklch(43% 0.010 45); --l-ink-3: oklch(52.5% 0.010 50); --l-rule: oklch(91.5% 0.005 60); --l-rule-strong: oklch(82% 0.008 60); --l-accent: oklch(30% 0.022 45); /* Rosul de eroare: inchis pe hartie, ca sa treaca contrastul pe text mic. */ --l-eroare: oklch(45% 0.145 28); --l-accent-ink: oklch(99% 0.002 70); --l-full: oklch(66% 0.175 48); --l-full-text: oklch(56% 0.168 54); --l-full-ink: oklch(20% 0.050 45); --l-preop: oklch(50% 0.150 245); --l-preop-text: oklch(46% 0.145 248); --l-preop-ink: oklch(99% 0.002 245); --l-focus: oklch(52% 0.180 250); --l-error: oklch(52% 0.200 25); --l-success: oklch(48% 0.130 150); --l-bloom-1: oklch(95% 0.008 70); --l-bloom-2: oklch(96% 0.006 45); --l-shadow: oklch(30% 0.020 45 / 0.16); --l-shadow-deep: oklch(25% 0.020 45 / 0.22); /* === Paletă brută · dark ==================================== */ --d-paper: oklch(13% 0.018 35); --d-paper-2: oklch(17% 0.020 35); --d-paper-3: oklch(22% 0.022 35); --d-paper-4: oklch(28% 0.020 35); --d-ink: oklch(95% 0.010 70); --d-ink-2: oklch(78% 0.015 60); --d-ink-3: oklch(58% 0.015 50); --d-rule: oklch(28% 0.018 40); --d-rule-strong: oklch(40% 0.025 40); --d-accent: oklch(86% 0.012 70); /* Pe hartie inchisa acelasi rosu ar fi ilizibil: urca in luminozitate. */ --d-eroare: oklch(72% 0.135 28); --d-accent-ink: oklch(16% 0.015 45); --d-full: oklch(62% 0.185 48); --d-full-text: oklch(73% 0.150 55); --d-full-ink: oklch(16% 0.040 48); --d-preop: oklch(59% 0.130 245); --d-preop-text: oklch(68% 0.120 245); --d-preop-ink: oklch(17% 0.030 245); --d-focus: oklch(82% 0.180 55); --d-error: oklch(70% 0.220 25); --d-success: oklch(74% 0.160 145); --d-bloom-1: oklch(46% 0.014 60); --d-bloom-2: oklch(38% 0.012 40); --d-shadow: oklch(0% 0 0 / 0.55); --d-shadow-deep: oklch(0% 0 0 / 0.75); /* === Harta activă ========================================== */ --color-paper: light-dark(var(--l-paper), var(--d-paper)); --color-paper-2: light-dark(var(--l-paper-2), var(--d-paper-2)); --color-paper-3: light-dark(var(--l-paper-3), var(--d-paper-3)); --color-paper-4: light-dark(var(--l-paper-4), var(--d-paper-4)); /* Pelicula benzii a doua, pentru ritmul secțiunilor. * * Nu e o culoare opacă, ci un voal: spotul care urmărește cursorul stă mai * jos (`.ambient`, `z-index: -2`) și o culoare plină l-ar acoperi — chiar * așa scrie și la `.format`, care de aceea n-are fundal propriu. Voalul lasă * ~96% din lumină să treacă, deci banda se vede ca nuanță, iar spotul rămâne * întreg dedesubt, fără să fie desenat a doua oară. * * Nu e simetric între teme, și nici nu poate fi: pe alb întunecă, pe negru * luminează — hârtia închisă e deja la 13%, iar un voal negru peste ea ar fi * noroi. Valorile dau ~9 trepte pe deschis și ~10 pe închis, măsurate pe * pixeli, cât să se vadă marginea fără să pară altă pagină. */ --film-banda: light-dark(oklch(0% 0 0 / 3.5%), oklch(100% 0 0 / 4%)); --color-ink: light-dark(var(--l-ink), var(--d-ink)); --color-ink-2: light-dark(var(--l-ink-2), var(--d-ink-2)); --color-ink-3: light-dark(var(--l-ink-3), var(--d-ink-3)); --color-rule: light-dark(var(--l-rule), var(--d-rule)); --color-rule-strong: light-dark(var(--l-rule-strong), var(--d-rule-strong)); --color-accent: light-dark(var(--l-accent), var(--d-accent)); --color-eroare: light-dark(var(--l-eroare), var(--d-eroare)); /* accent-text: pentru text mic pe hârtie, unde umplutura vie n-ar trece contrastul */ --color-accent-text: light-dark(var(--l-accent), var(--d-accent)); --color-accent-ink: light-dark(var(--l-accent-ink), var(--d-accent-ink)); --color-full: light-dark(var(--l-full), var(--d-full)); --color-full-text: light-dark(var(--l-full-text), var(--d-full-text)); --color-full-ink: light-dark(var(--l-full-ink), var(--d-full-ink)); --color-preop: light-dark(var(--l-preop), var(--d-preop)); --color-preop-text: light-dark(var(--l-preop-text), var(--d-preop-text)); --color-preop-ink: light-dark(var(--l-preop-ink), var(--d-preop-ink)); --color-focus: light-dark(var(--l-focus), var(--d-focus)); --color-error: light-dark(var(--l-error), var(--d-error)); --color-success: light-dark(var(--l-success), var(--d-success)); --color-bloom-1: light-dark(var(--l-bloom-1), var(--d-bloom-1)); --color-bloom-2: light-dark(var(--l-bloom-2), var(--d-bloom-2)); --color-shadow: light-dark(var(--l-shadow), var(--d-shadow)); --color-shadow-deep: light-dark(var(--l-shadow-deep), var(--d-shadow-deep)); /* Atmosfera se comportă altfel pe hârtie decât pe negru. * ATENȚIE: light-dark() primește DOAR culori. Pentru opacități, lungimi, * procente și cuvinte-cheie trebuie blocuri de cascadă adevărate. */ --bloom-opacity: 0.30; --grain-opacity: 0.22; --grain-blend: multiply; --glass-paper: 92%; --glass-paper-up: 97%; /* tonurile mărcii: patru trepte, ca în originalul de la care pornim */ --mark-core: oklch(38% 0.010 60); --mark-mid: oklch(52% 0.008 60); --mark-wing: oklch(62% 0.007 60); --mark-pale: oklch(78% 0.005 60); --spot-strength: 14%; --spot-size: 620px; /* Desenul spotului, scos aici ca sa fie folosit din doua locuri: stratul * `.ambient`, care il poarta peste toata pagina, si benzile pare, care si-l * pun singure fiindca fundalul lor opac l-ar acoperi. Daca ar fi scris de * doua ori, cele doua ar putea ajunge sa difere fara sa observe nimeni. */ --spot-imagine: radial-gradient( var(--spot-size) circle at var(--mx, 50%) var(--my, 38%), color-mix(in oklch, var(--color-accent) var(--spot-strength), transparent) 0%, color-mix(in oklch, var(--color-accent) calc(var(--spot-strength) * 0.55), transparent) 32%, color-mix(in oklch, var(--color-accent) calc(var(--spot-strength) * 0.2), transparent) 58%, transparent 78% ); /* === Typography ============================================== */ --font-display: "Archivo", system-ui, sans-serif; --font-body: "Instrument Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --font-accent: "Instrument Serif", "Times New Roman", Georgia, serif; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 1rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem; --text-4xl: clamp(2.5rem, 4vw + 1rem, 4.5rem); --leading-tight: 1.05; --leading-snug: 1.25; --leading-body: 1.55; /* === Spacing (4 pt) ========================================== */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem; /* === Motion ================================================== */ --ease-out: cubic-bezier(0.20, 0.80, 0.20, 1.00); --ease-in: cubic-bezier(0.40, 0.00, 1.00, 1.00); --ease-in-out: cubic-bezier(0.40, 0.00, 0.20, 1.00); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 400ms; /* 320ms era prea mult pentru un meniu: pe telefon lent foaia se deschidea * in ~475ms, adica omul apasa si asteapta. Deschiderea unui meniu trebuie * sa para imediata, nu eleganta. */ --dur-sheet: 190ms; /* === Rules / radii =========================================== */ --rule-hair: 1px; --rule-bold: 2px; --radius-xs: 3px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* miezul benzii de sclipire din navbar: luminozitatea vârfului. * pe hârtie urcă (lumină), pe fundal închis coboară (dâră) */ --sheen-core-l: 64%; /* === Layout ================================================== */ --page-gutter: clamp(1rem, 4vw, 3rem); --max-width: 80rem; --measure: 60ch; } /* Butonul de temă schimbă doar color-scheme; light-dark() face restul. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* valorile non-culoare pentru dark: o dată pentru sistem, o dată pentru buton */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bloom-opacity: 0.20; --grain-opacity: 0.5; --grain-blend: overlay; --glass-paper: 76%; --glass-paper-up: 94%; --spot-strength: 22%; --spot-size: 560px; --sheen-core-l: 52%; } } :root[data-theme="dark"] { --bloom-opacity: 0.20; --grain-opacity: 0.5; --grain-blend: overlay; --glass-paper: 76%; --glass-paper-up: 94%; --spot-strength: 22%; --spot-size: 560px; --sheen-core-l: 52%; } /* === Accent pe pagină ========================================= */ /* homepage-ul rămâne grafit: hub neutru, testele își păstrează culoarea */ :root:has(body.page--full) { --color-accent: var(--color-full); --color-accent-text: var(--color-full-text); --color-accent-ink: var(--color-full-ink); --color-bloom-1: light-dark(oklch(93% 0.060 55), var(--d-full)); --color-bloom-2: light-dark(oklch(95% 0.035 35), oklch(60% 0.220 15)); --l-paper: oklch(98.4% 0.006 70); --l-paper-3: oklch(96.2% 0.008 70); --d-paper: oklch(13% 0.018 35); } :root:has(body.page--preop) { --color-accent: var(--color-preop); --color-accent-text: var(--color-preop-text); --color-accent-ink: var(--color-preop-ink); --color-bloom-1: light-dark(oklch(94% 0.040 240), var(--d-preop)); --color-bloom-2: light-dark(oklch(96% 0.025 250), var(--d-preop)); /* hârtia și liniile trec pe rece, ca accentul */ --l-paper: oklch(98.4% 0.005 245); --l-paper-2: oklch(100% 0 0); --l-paper-3: oklch(96.2% 0.007 245); --l-paper-4: oklch(92.5% 0.009 245); --l-ink: oklch(21% 0.014 250); --l-ink-2: oklch(43% 0.012 248); --l-ink-3: oklch(52.5% 0.012 248); --l-rule: oklch(91.5% 0.007 245); --l-rule-strong: oklch(82% 0.010 245); --d-paper: oklch(13% 0.020 245); --d-paper-2: oklch(17% 0.022 245); --d-paper-3: oklch(22% 0.024 245); --d-paper-4: oklch(28% 0.024 245); --d-ink: oklch(95% 0.008 240); --d-ink-2: oklch(78% 0.014 245); --d-ink-3: oklch(58% 0.016 245); --d-rule: oklch(28% 0.020 245); --d-rule-strong: oklch(40% 0.028 245); }