/* MateBAC — stylesheet */ :root { --bg: #f7f5f0; --bg-card: #ffffff; --bg-soft: #f0ede4; --ink: #1b2130; --ink-soft: #55596b; --ink-faint: #8a8d9c; --border: #e6e1d6; --accent: #2455d9; --accent-dark: #17348f; --accent-soft: #e8edfb; --warm: #e3672f; --warm-soft: #fbe9de; --success: #1f9d55; --success-soft: #e7f7ed; --danger: #d64545; --danger-soft: #fbeaea; /* Text de insignă pe fundal *-soft (warm/success/danger) — separat de --warm/--success/--danger (folosite ca fundal plin sau bordură) fiindcă are nevoie de propriul contrast pe *-soft, nu pe --bg-card; vezi redefinirea lor în dark mode mai jos. */ --warm-ink: #a2481c; --success-ink: #146332; --danger-ink: #8f2b2b; /* Albastru închis fix, NU theme-aware — folosit doar pe câteva pastile/accente mereu „întunecate cu text alb" (logo-mark, subject-roman, hover-ul butoanelor primare), nu pe fundaluri mari de pagină (acelea folosesc --accent-soft, theme-aware). */ --hero-g1: #17348f; --dot-color: rgba(27, 33, 48, 0.08); --header-bg: rgba(247, 245, 240, 0.92); /* Fundal fix, aproape negru — pentru pastile/insigne decorative gândite mereu "întunecate cu text alb" (profile-slider, subject-roman, feedback-fab etc.), NU pentru --ink (rolul ei principal e text, iar în dark mode devine deschisă — folosită ca fundal acolo ar întoarce complet contrastul). */ --chip-dark: #1b2130; --radius-lg: 22px; --radius-md: 14px; --radius-sm: 9px; --shadow: 0 10px 30px rgba(27, 33, 48, 0.06); --shadow-sm: 0 4px 14px rgba(27, 33, 48, 0.05); --maxw: 1180px; /* Nu Space Grotesk — probabil cel mai reciclat font de titlu în site-uri "indie/generate cu AI" din ultimii ani, exact tell-ul vizual pe care îl scoatem din site (vezi restul schimbărilor din această sesiune). Fraunces e un serif de display cu caracter propriu (optical sizing — se îngroașă/ornamentează la corp mare), care se leagă vizual de --font-serif (deja folosit la glifele de capitol) în loc să introducă o a treia familie. */ --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif; /* Curbă comună pentru sliderele de navigație (nav-indicator, profile-slider) — aceeași formă de easing, folosită identic în ambele locuri, centralizată ca să nu se dubleze valoarea "de mână" de fiecare dată. */ --ease-standard: cubic-bezier(0.65, 0, 0.35, 1); } /* ---------- Dark mode (implicit după tema sistemului; togglu manual în header o suprapune) --- */ /* Redefinește doar tokenii semantici — restul fișierului îi consumă deja prin var(), deci nu mai e nevoie de reguli separate per componentă. Excepție deliberată care NU se redefinește aici: --hero-g1 (fix, vezi comentariul de la :root) — --accent-dark de mai jos e gândită doar pentru rolul ei de text. --accent-dark își schimbă complet rolul de la "text închis pe fundal deschis" la "text deschis pe fundal închis" — de-aia valoarea nu e doar "mai deschisă", ci o culoare nouă, aleasă pentru contrast pe --bg/--bg-card, nu o inversare mecanică. Două căi separate spre aceleași valori: media query (urmărește sistemul), suprimată explicit dacă utilizatorul a ales manual "light" din toggle (`:not([data-theme="light"])`); și atributul [data-theme="dark"], pentru cazul opus — utilizator pe sistem light care alege manual dark. `applyTheme()` din main.js pune/scoate atributul pe înainte de primul paint vizibil (rulează sincron, înainte de DOMContentLoaded — body oricum pornește opacity:0), deci nu apare niciun flash de temă greșită la încărcare. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f121a; --bg-card: #171b26; --bg-soft: #1e2432; --ink: #eceef4; --ink-soft: #b8bccc; --ink-faint: #838a9e; --border: #2b3142; --accent: #4d80ff; --accent-dark: #9fbdff; --accent-soft: #223257; --warm: #ff8f5c; --warm-soft: #3a2416; --warm-ink: #ffb37a; --success: #3ecf7e; --success-soft: #123625; --success-ink: #7be3a8; --danger: #ff6b6b; --danger-soft: #3a1a1a; --danger-ink: #ff9d9d; --dot-color: rgba(255, 255, 255, 0.05); --header-bg: rgba(15, 18, 26, 0.85); --shadow: 0 10px 30px rgba(0, 0, 0, 0.5); --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.4); } } :root[data-theme="dark"] { --bg: #0f121a; --bg-card: #171b26; --bg-soft: #1e2432; --ink: #eceef4; --ink-soft: #b8bccc; --ink-faint: #838a9e; --border: #2b3142; --accent: #4d80ff; --accent-dark: #9fbdff; --accent-soft: #223257; --warm: #ff8f5c; --warm-soft: #3a2416; --warm-ink: #ffb37a; --success: #3ecf7e; --success-soft: #123625; --success-ink: #7be3a8; --danger: #ff6b6b; --danger-soft: #3a1a1a; --danger-ink: #ff9d9d; --dot-color: rgba(255, 255, 255, 0.05); --header-bg: rgba(15, 18, 26, 0.85); --shadow: 0 10px 30px rgba(0, 0, 0, 0.5); --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.4); } /* ---------- Print ---------- */ /* Zero reguli de print existau înainte — orice Cmd/Ctrl+P scotea header/footer/widget-uri incluse și, cu dark mode pornit, o pagină aproape neagră. Cel mai vizibil pe formule.html (o "fișă de recapitulare rapidă" care chiar merită printată înainte de BAC), dar regulile de mai jos sunt generale, nu specifice unei pagini — orice conținut nou beneficiază automat. Reia paleta light din :root, indiferent de [data-theme]/prefers-color-scheme — hârtia nu are temă întunecată, iar reutilizarea tokenilor (nu un set nou de culori doar pentru print) înseamnă că orice componentă care citește deja var(--bg-card) etc. arată corect fără nicio regulă suplimentară per componentă. */ @media print { /* Nu doar :root — trebuie cel puțin la fel de specific ca :root:not([data-theme="light"]) (regula care aplică dark mode după sistem, din @media prefers-color-scheme) ȘI ca :root[data-theme="dark"] (togglul manual), altfel oricare din ele tot câștigă în interiorul acestui @media — imbricarea în print nu schimbă specificitatea. :not() contează specificitatea argumentului ei, deci :root:not([data-theme="light"]) e (0,0,2,0), nu (0,0,1,0) ca un simplu :root. Găsit direct testând cu dark mode pornit din sistem (fără toggle manual): textul din hero rămânea alb pe fundal alb, invizibil — --ink tot rezolva la valoarea din dark mode. */ :root:not([data-theme="light"]), :root[data-theme="light"] { --bg: #f7f5f0; --bg-card: #ffffff; --bg-soft: #f0ede4; --ink: #1b2130; --ink-soft: #55596b; --ink-faint: #8a8d9c; --border: #e6e1d6; --accent: #2455d9; --accent-dark: #17348f; --accent-soft: #e8edfb; --warm: #e3672f; --warm-soft: #fbe9de; --warm-ink: #a2481c; --success: #1f9d55; --success-soft: #e7f7ed; --success-ink: #146332; --danger: #d64545; --danger-soft: #fbeaea; --danger-ink: #8f2b2b; --dot-color: transparent; --shadow: none; --shadow-sm: none; } .site-header, footer, .feedback-widget, .nav-toggle, .theme-toggle, .locked-card, .locked-overlay, .formula-quicknav, .btn, .expand-btn, .hero-math-bg, .demo-card { display: none !important; } body { padding-top: 0; opacity: 1 !important; } body::before { display: none; } /* glow-ul ambiental de fundal (doar desktop) — irelevant pe hârtie */ * { box-shadow: none !important; text-shadow: none !important; } /* .hero/.page-hero folosesc deja tokeni theme-aware, deci ar printa corect oricum — scoatem totuși pata difuză de accent (irelevantă pe hârtie) și fixăm explicit culoarea, ca oricine printează cu dark mode pornit din sistem să nu depindă de cascada de mai sus. */ .hero, .page-hero { background: none !important; padding: 20px 0 !important; } .hero *, .page-hero * { color: var(--ink) !important; } .hero .eyebrow, .page-hero .eyebrow { background: var(--bg-soft) !important; } .theory-box, .formula-item, .chapter-progress-item { break-inside: avoid; } } * { box-sizing: border-box; } /* Fundal implicit pentru orice câmp de formular, indiferent de pagină — fără asta, un input/textarea nestilizat explicit rămâne pe albul implicit al browserului (corect în light mode, dar o cutie albă stridentă în dark mode, fiindcă --ink/--bg nu se moștenesc automat pe controale de formular). Regulile per-componentă mai specifice (.graph-input etc.) tot câștigă unde există. */ input, textarea, select { background: var(--bg-card); color: var(--ink); } /* NU scroll-behavior:smooth global — browserul îl aplică și la sărituri automate spre o ancoră la încărcarea paginii (ex. "index.html#atlas"), ceea ce transformă un jump instant într-un scroll animat de câteva sute de ms peste tot conținutul intermediar; combinat cu reveal-ul pe scroll (IntersectionObserver), cardurile "apar" în cascadă pe parcursul acelui scroll, dând senzația de glitch semnalată explicit. Sări instant la încărcare; scroll-ul animat pentru click-uri intenționate pe ancore e făcut explicit din JS (initPageTransitions). */ [id] { scroll-margin-top: 84px; } /* header fix (68px) + puțină respirație, pentru orice ancoră */ html { background: var(--bg); } /* Fundalul cu simboluri matematice (nu puncte în grilă — prea aproape de un tipar comun la alte site-uri din aceeași categorie, semnalat direct) e un SVG inline, nu elemente DOM: se întinde pe toată pagina, oricât de lungă, fără cost de randare suplimentar la scroll. fill="currentColor" + fill-opacity mic (nu var(--dot-color)) înseamnă că urmărește automat --ink, deci se reface corect în dark mode fără nicio regulă separată. */ body { margin: 0; padding-top: 68px; /* înălțimea .site-header, acum fixed — compensează spațiul scos din flux */ background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Ctext x='20' y='55' font-family='Georgia,serif' font-size='30' fill='currentColor' fill-opacity='0.055' transform='rotate(-10 20 55)'%3E%CF%80%3C/text%3E%3Ctext x='150' y='45' font-family='Georgia,serif' font-size='26' fill='currentColor' fill-opacity='0.05' transform='rotate(8 150 45)'%3E%E2%88%AB%3C/text%3E%3Ctext x='225' y='90' font-family='Georgia,serif' font-size='26' fill='currentColor' fill-opacity='0.055'%3E%E2%88%9A%3C/text%3E%3Ctext x='55' y='140' font-family='Georgia,serif' font-size='24' fill='currentColor' fill-opacity='0.05' transform='rotate(-6 55 140)'%3E%CE%A3%3C/text%3E%3Ctext x='185' y='160' font-family='Georgia,serif' font-size='22' fill='currentColor' fill-opacity='0.055'%3E%E2%88%9E%3C/text%3E%3Ctext x='20' y='215' font-family='Georgia,serif' font-size='20' fill='currentColor' fill-opacity='0.05' transform='rotate(6 20 215)'%3E%CE%94%3C/text%3E%3Ctext x='135' y='230' font-family='Georgia,serif' font-size='22' fill='currentColor' fill-opacity='0.055'%3E%C3%97%3C/text%3E%3Ctext x='235' y='245' font-family='Georgia,serif' font-size='20' fill='currentColor' fill-opacity='0.05'%3E%E2%88%82%3C/text%3E%3Ctext x='98' y='18' font-family='Georgia,serif' font-size='18' fill='currentColor' fill-opacity='0.05' transform='rotate(5 98 18)'%3Esin%3C/text%3E%3Ctext x='250' y='22' font-family='Georgia,serif' font-size='18' fill='currentColor' fill-opacity='0.045' transform='rotate(-4 250 22)'%3E%CE%B8%3C/text%3E%3Ctext x='8' y='100' font-family='Georgia,serif' font-size='17' fill='currentColor' fill-opacity='0.05' transform='rotate(-8 8 100)'%3Elim%3C/text%3E%3Ctext x='150' y='118' font-family='Georgia,serif' font-size='16' fill='currentColor' fill-opacity='0.045' transform='rotate(4 150 118)'%3E%C2%BD%3C/text%3E%3Ctext x='252' y='190' font-family='Georgia,serif' font-size='17' fill='currentColor' fill-opacity='0.05' transform='rotate(3 252 190)'%3Ecos%3C/text%3E%3Ctext x='95' y='270' font-family='Georgia,serif' font-size='18' fill='currentColor' fill-opacity='0.045' transform='rotate(-3 95 270)'%3E%E2%89%A4%3C/text%3E%3C/svg%3E"); background-size: 280px 280px; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; opacity: 0; transition: opacity 0.2s ease; } body.page-ready { opacity: 1; } /* Lumină albastră ambientă care "te urmărește" la scroll. Inițial parte din background-image-ul lui cu background-attachment:fixed — corect vizual, dar costisitor: fixed pe un element cu MULT conținut deasupra (tot site-ul) obligă browserul să re-deseneze acel strat la fiecare cadru de scroll, fiindcă e tot una cu restul fundalului lui body, nu un layer separat. Simțit direct ca lipsă de fluiditate la scroll, semnalat imediat după primul deploy cu paleta lărgită (140% viewport, mai mult de re-desenat decât varianta inițială de 80%). Reparat mutând gradientul într-un pseudo-element propriu, fixed, fără alt conținut — browserul îl promovează într-un layer separat pe GPU și doar îl compune la scroll, fără să-l redeseneze; vizual identic, cost aproape de zero. Doar desktop — fixed are un istoric de glitch-uri pe Safari mobil, iar pe ecrane mici efectul nu se vede oricum (viewport prea îngust). */ @media (min-width: 900px) { body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 140% 100% at 50% 0%, rgba(36, 85, 217, 0.24), transparent 92%); will-change: transform; } } @media (prefers-reduced-motion: reduce) { body { opacity: 1; transition: none; } } h1, h2, h3, .logo { font-family: var(--font-display); letter-spacing: -0.01em; } a { color: inherit; text-decoration: none; } /* Inel de focus vizibil doar la navigare cu tastatura (:focus-visible, nu :focus) — mouse-ul nu declanșează inelul, dar Tab da. Elementele cu propriul stil de focus (input-uri, mai sus în fișier) rămân neafectate, regula lor e mai specifică. */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .chapter-card:focus-visible, .topic-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); } img, svg { display: block; max-width: 100%; } /* color: inherit lipsea — spre deosebire de text obișnuit (p, span, div), un