/* ============================================================ PAROHIA ACOPERĂMÂNTUL MAICII DOMNULUI — CĂUȘENI 1. Fundația sistemului de design (tokens) Un singur loc pentru culori, tipografie, spațiere și mișcare. Nimic din acest fișier nu desenează ceva; totul de aici este consumat de style.css. ============================================================ */ :root { /* ---------- CULOARE ---------------------------------------- Bleumarin bizantin adânc + aur. Vechea variabilă --navy era #0087c6, un cyan aprins care se bătea cap în cap cu bleumarinul din navbar și hero. Scara de mai jos e construită dintr-un singur ton, ca titlurile și fundalurile să aparțină vizibil aceleiași familii. ---------------------------------------------------------- */ --navy-950: #070C22; /* aproape negru — footer, lightbox */ --navy-900: #0B1330; /* navbar, secțiuni întunecate */ --navy-800: #101A3D; /* fundal hero */ --navy-700: #17255A; /* gradiente */ --navy-600: #1E3070; /* accente pe întuneric */ --navy-500: #2A4090; /* stări hover pe întuneric */ /* Aurul rămâne cel din identitatea existentă. */ --gold-700: #9E7F2E; /* aur în umbră, pentru contrast pe alb */ --gold-600: #B8933D; --gold-500: #C9A84C; /* aurul principal */ --gold-400: #DDBE6C; --gold-300: #E9D49A; --gold-100: #F6EBCF; /* linii fine, borduri */ /* Accent liturgic, folosit rar și deliberat. */ --wine-600: #6E2233; --wine-500: #8B2E42; /* Fundaluri calde, de pergament — nu alb clinic. */ --paper: #FBF8F2; --paper-alt: #F4EFE4; --white: #FFFFFF; /* Text */ --ink: #14192E; /* titluri */ --ink-body: #3A4059; /* corp de text */ --ink-muted: #6C7391; /* secundar */ --ink-faint: #9AA0B8; /* etichete discrete */ /* Text pe fundal întunecat */ --on-dark: rgba(255, 255, 255, 0.94); --on-dark-body: rgba(255, 255, 255, 0.74); --on-dark-muted: rgba(255, 255, 255, 0.50); --on-dark-faint: rgba(255, 255, 255, 0.28); /* Linii */ --rule-light: rgba(20, 25, 46, 0.10); --rule-gold: rgba(201, 168, 76, 0.35); --rule-dark: rgba(255, 255, 255, 0.10); /* ---------- TIPOGRAFIE ------------------------------------- Cinzel și Cormorant erau încărcate de la Google Fonts, dar CSS-ul le anula: `h1, h2, h3 { font-family: 'Lato' }`. Se plăteau trei familii și se afișa una singură. ---------------------------------------------------------- */ --font-display: 'Cinzel', 'Times New Roman', Georgia, serif; --font-prose: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-ui: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Scară fluidă: se adaptează între telefon și desktop fără praguri bruște. */ --text-2xs: clamp(0.66rem, 0.63rem + 0.15vw, 0.72rem); --text-xs: clamp(0.74rem, 0.71rem + 0.16vw, 0.81rem); --text-sm: clamp(0.84rem, 0.81rem + 0.18vw, 0.92rem); --text-base: clamp(0.95rem, 0.91rem + 0.22vw, 1.05rem); --text-lg: clamp(1.08rem, 1.01rem + 0.34vw, 1.28rem); --text-xl: clamp(1.22rem, 1.10rem + 0.58vw, 1.55rem); --text-2xl: clamp(1.42rem, 1.22rem + 0.95vw, 2.05rem); --text-3xl: clamp(1.70rem, 1.36rem + 1.65vw, 2.85rem); --text-4xl: clamp(2.05rem, 1.48rem + 2.75vw, 4.00rem); --lead-tight: 1.18; --lead-snug: 1.35; --lead-body: 1.72; --lead-prose: 1.86; --track-tight: 0.01em; --track-normal: 0.03em; --track-wide: 0.10em; --track-wider: 0.18em; --track-widest: 0.30em; /* ---------- SPAȚIERE --------------------------------------- Scară de 4px. Valorile mari sunt fluide, ca secțiunile să nu fie sufocate pe telefon și nici pierdute pe desktop. ---------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --section-y: clamp(3.5rem, 2.2rem + 6.2vw, 7.5rem); --section-x: clamp(1.25rem, 0.6rem + 3.2vw, 3rem); --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem); /* ---------- MĂSURI ----------------------------------------- */ --width-prose: 68ch; /* lungime de rând confortabilă */ --width-text: 920px; --width-page: 1240px; --width-wide: 1440px; --nav-h: 76px; --nav-h-small: 64px; /* ---------- CONTUR ȘI UMBRĂ -------------------------------- */ --radius-none: 0; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(11, 19, 48, 0.06), 0 2px 8px rgba(11, 19, 48, 0.05); --shadow-md: 0 2px 4px rgba(11, 19, 48, 0.06), 0 8px 24px rgba(11, 19, 48, 0.09); --shadow-lg: 0 4px 8px rgba(11, 19, 48, 0.07), 0 18px 48px rgba(11, 19, 48, 0.14); --shadow-gold: 0 6px 28px rgba(201, 168, 76, 0.30); /* ---------- MIȘCARE ---------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-soft: cubic-bezier(0.34, 0.10, 0.20, 1); --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 520ms; --dur-veil: 900ms; --z-base: 1; --z-sticky: 100; --z-nav: 1000; --z-drawer: 1100; --z-lightbox: 1200; --z-skip: 2000; } /* ------------------------------------------------------------ Aliasuri pentru clasele vechi. Template-urile și CSS-ul mai vechi folosesc --navy, --gold, --text-dark etc. Le păstrăm mapate peste noua scară, ca nimic să nu se rupă în timpul tranziției. ------------------------------------------------------------ */ :root { --navy: var(--navy-800); --navy-dark: var(--navy-900); --navy-mid: var(--navy-700); --navy-light: var(--navy-600); --gold: var(--gold-500); --gold-light: var(--gold-300); --gold-pale: var(--gold-100); --off-white: var(--paper); --text-dark: var(--ink); --text-mid: var(--ink-body); --text-light: var(--ink-muted); --shadow: var(--shadow-md); }