/* ================================================== */ /* FONTS (Inter, Poppins) — self-hosted local. Regulile @font-face */ /* sunt definite in css/fonts.css, incarcat separat in base.html. */ /* ================================================== */ /* ========================= RESET ========================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* ========================= DESIGN TOKENS ========================= */ :root { /* BRAND */ /* --color-primary: text/link-uri/borduri — se schimba intre teme, fiindca #6600FF nu are contrast suficient pe fundal intunecat. */ --color-primary: #6600FF; /* --color-primary-solid: fundal de buton plin — ramane constant in ambele teme (textul alb de deasupra are contrast 6.98:1). */ --color-primary-solid: #6600FF; /* Componentele R,G,B ale primary-solid, pt. efecte rgba() (glow-uri, umbre colorate) care raman aceleasi indiferent de tema. */ --color-primary-rgb: 102, 0, 255; /* --color-primary-light: capat de gradient decorativ (ex. linia sub navigatie activa) — constant, nu se schimba intre teme. */ --color-primary-light: #8b5cf6; --color-heading: #1f4e79; /* TEXT */ --color-text: #475569; --color-text-dark: #334155; --color-text-muted: #64748b; /* BACKGROUNDS */ --color-background: #ffffff; --color-surface: #ffffff; --color-light: #f7fbff; --color-alt: #EFEFEF; --color-alt-surface: #eef2f7; /* BORDERS */ --color-border: #e2e8f0; --color-selection-text: #111827; /* HEADER (efect sticla/glass) */ --header-glass-bg: rgba(255, 255, 255, 0.72); --header-glass-bg-solid: rgba(255, 255, 255, 0.92); --header-glass-border: rgba(226, 232, 240, 0.5); --header-glass-border-solid: rgba(226, 232, 240, 0.6); /* LAYOUT */ --container-width: 1280px; /* TYPOGRAPHY */ --font-body: 'Inter', sans-serif; --font-heading: 'Poppins', sans-serif; /* SPACING */ --section-padding: 120px; /* MOTION */ --transition-fast: 0.25s ease; --transition-normal: 0.35s ease; --transition-slow: 0.7s ease; /* SHADOWS */ --shadow-sm: 0 10px 25px rgba(15, 23, 42, 0.08); --shadow-md: 0 18px 45px rgba(15, 23, 42, 0.10); --shadow-lg: 0 26px 60px rgba(15, 23, 42, 0.16); --shadow-image: 0 20px 50px rgba(0, 0, 0, 0.12); --shadow-image-hover: 0 28px 70px rgba(0, 0, 0, 0.18); --header-height: 92px; } /* TEMA INTUNECATA. Activata fie automat (prefers-color-scheme: dark, daca utilizatorul nu a ales manual nimic), fie explicit prin atributul data-theme="dark" pus pe de core/static/js/theme-toggle.js (cand utilizatorul apasa butonul din header). Ordinea conteaza: blocul data-theme trebuie sa fie DUPA media query, ca sa poata suprascrie preferinta de sistem cand utilizatorul alege explicit tema opusa. Paleta e gandita separat, nu doar culori inversate: fundalul e bleumarin inchis (#0f172a), nu negru pur — acelasi ton pe care footer-ul il foloseste deja dintotdeauna — iar accentul mov de brand devine o nuanta mai deschisa (#a78bfa) doar cand e folosit ca text, fiindca originalul (#6600FF) pica testul de contrast WCAG pe fundal inchis (2.56:1, sub minimul de 4.5:1). Toate combinatiile de mai jos au fost verificate sa treaca AA (peste 4.5:1 pt. text normal). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-primary: #a78bfa; --color-heading: #f1f5f9; --color-text: #cbd5e1; --color-text-dark: #e2e8f0; --color-text-muted: #94a3b8; --color-background: #0f172a; --color-surface: #1a2436; --color-light: #16202f; --color-alt: #1e293b; --color-alt-surface: #1e293b; --color-border: #2a3749; --color-selection-text: #f1f5f9; --header-glass-bg: rgba(15, 23, 42, 0.72); --header-glass-bg-solid: rgba(15, 23, 42, 0.92); --header-glass-border: rgba(51, 65, 85, 0.5); --header-glass-border-solid: rgba(51, 65, 85, 0.6); --shadow-sm: 0 10px 25px rgba(0, 0, 0, 0.35); --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.4); --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.5); --shadow-image: 0 20px 50px rgba(0, 0, 0, 0.45); --shadow-image-hover: 0 28px 70px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { --color-primary: #a78bfa; --color-heading: #f1f5f9; --color-text: #cbd5e1; --color-text-dark: #e2e8f0; --color-text-muted: #94a3b8; --color-background: #0f172a; --color-surface: #1a2436; --color-light: #16202f; --color-alt: #1e293b; --color-alt-surface: #1e293b; --color-border: #2a3749; --color-selection-text: #f1f5f9; --header-glass-bg: rgba(15, 23, 42, 0.72); --header-glass-bg-solid: rgba(15, 23, 42, 0.92); --header-glass-border: rgba(51, 65, 85, 0.5); --header-glass-border-solid: rgba(51, 65, 85, 0.6); --shadow-sm: 0 10px 25px rgba(0, 0, 0, 0.35); --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.4); --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.5); --shadow-image: 0 20px 50px rgba(0, 0, 0, 0.45); --shadow-image-hover: 0 28px 70px rgba(0, 0, 0, 0.55); } /* ========================= DOCUMENT ========================= */ html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); color: var(--color-text); background: var(--color-background); line-height: 1.7; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================= TYPOGRAPHY SYSTEM ========================= */ h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-heading); line-height: 1.2; } h1 { font-size: 3rem; font-weight: 700; } h2 { font-size: 2.6rem; font-weight: 700; } h3 { font-size: 1.6rem; font-weight: 600; } h4 { font-size: 1.2rem; font-weight: 600; } p { line-height: 1.8; } /* ========================= LINKS ========================= */ a { color: inherit; text-decoration: none; } /* ========================= FOCUS (tastatura) ========================= */ /* Stil global de focus, pe brand, pentru toate elementele clickable din site (confirmat: doar si