/* ========================================================================== PODUL — DESIGN TOKENS Extracted from the two React mockups in /design. Single source of truth. Nothing in this file selects anything except :root. No component styles, no overrides. If you need a new value, add a token here first. ========================================================================== */ :root { /* ---------------------------------------------------------------------- COLOUR — core ---------------------------------------------------------------------- */ --podul-yellow: #fff000; /* accent: hover fills, footer bg, selection */ --podul-black: #000000; /* borders and hard shadows — always pure black */ --podul-ink: #1a1a1a; /* body text — deliberately NOT pure black */ --podul-white: #ffffff; /* page background */ /* ---------------------------------------------------------------------- COLOUR — category accents The mockups disagreed on three of these (#005DBA/#005DB9, #CC2E50/#CB2E50, #FBBF24/#FABE24). Resolved by usage frequency, which picks the homepage mockup's set. See PLAN §1.3. At runtime these are FALLBACKS. The live accent for a category comes from Jannah's own per-category colour picker (cat_color), read via tie_get_category_option( 'cat_color', $term_id ). These values seed it. ---------------------------------------------------------------------- */ --podul-blue: #005DBA; /* Actualitate Internă */ --podul-crimson: #CC2E50; /* Podul Memoriei */ --podul-amber: #FBBF24; /* Podul Minciunilor */ --podul-emerald: #047857; /* was Basarabia in the design — tag, not a category yet */ --podul-indigo: #4f46e5; /* Externe */ /* Set per-element by PHP; falls back to ink for uncoloured terms. */ --podul-accent: var(--podul-ink); /* ---------------------------------------------------------------------- COLOUR — greys (Tailwind slate, the mockups' supporting scale) ---------------------------------------------------------------------- */ --podul-slate-50: #f8fafc; /* read-next band background */ --podul-slate-100: #f1f5f9; --podul-slate-200: #e2e8f0; --podul-slate-300: #cbd5e1; --podul-slate-400: #94a3b8; /* card meta text */ --podul-slate-500: #64748b; /* sidebar body copy */ --podul-slate-600: #475569; /* excerpts */ --podul-slate-800: #1e293b; /* article body copy */ /* Hairlines — the design uses black at low alpha, not a grey */ --podul-rule-faint: rgba(0, 0, 0, .05); --podul-rule-light: rgba(0, 0, 0, .10); /* ---------------------------------------------------------------------- TYPOGRAPHY — families ---------------------------------------------------------------------- */ --podul-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --podul-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --podul-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; /* ---------------------------------------------------------------------- TYPOGRAPHY — weights The design only ever uses these. 900 for display/UI, 800 for headlines, 500–700 for body. Nothing lighter than 400 appears anywhere. ---------------------------------------------------------------------- */ --podul-weight-black: 900; --podul-weight-headline: 800; --podul-weight-bold: 700; --podul-weight-semibold: 600; --podul-weight-medium: 500; --podul-weight-normal: 400; /* ---------------------------------------------------------------------- TYPOGRAPHY — letter spacing The wide trackings are the signature of the design's micro-labels. ---------------------------------------------------------------------- */ --podul-track-tighter: -0.02em; /* display-bold: logo, section titles */ --podul-track-tight: -0.015em; /* headline-sans: article headlines */ --podul-track-label: 0.2em; /* card category labels, nav items */ --podul-track-wide: 0.3em; /* buttons */ --podul-track-wider: 0.4em; /* section eyebrows, footer headings */ --podul-track-widest: 0.5em; /* mobile menu "Categorii" heading */ /* ---------------------------------------------------------------------- TYPOGRAPHY — line height ---------------------------------------------------------------------- */ /* Headings, all at 1.2 (asked for on 2 September 2026). * * These used to be 0.9 / 1.05 / 1.15 — from the mockup, where every heading * happened to fit on one line. In production they wrap: „CITEȘTE ÎN * CONTINUARE" is two lines on a phone, and at 0.9 the second line ran into * the first while Ș, Ț and Î lost their diacritics to the line above. * * The three names are kept rather than collapsed into one, because they still * mark three different jobs and any of them may need to move again — but they * hold the same value, so headings across the site cannot disagree. If a * heading looks cramped anywhere, look for a hardcoded line-height, not for * these. */ --podul-leading-display: 1.2; /* uppercase UI headings — section heads, widget titles */ --podul-leading-h1: 1.2; /* article H1 */ --podul-leading-tight: 1.2; /* headline-sans — card and post titles */ --podul-leading-snug: 1.4; --podul-leading-body: 1.6; /* article body copy */ /* ---------------------------------------------------------------------- TYPOGRAPHY — size scale The micro sizes (8–12px) carry the design's voice and are used far more than anything else — text-[10px] alone appears 30 times in the mockups. ---------------------------------------------------------------------- */ --podul-text-3xs: 8px; --podul-text-2xs: 9px; --podul-text-xs: 10px; --podul-text-sm: 11px; --podul-text-base: 12px; --podul-text-md: 15px; --podul-text-lg: 1.125rem; /* 18 */ --podul-text-xl: 1.25rem; /* 20 — sidebar card titles */ --podul-text-2xl: 1.5rem; /* 24 — card headlines */ --podul-text-3xl: 1.875rem; /* 30 — section titles (mobile) */ --podul-text-4xl: 2.25rem; /* 36 — section titles */ --podul-text-5xl: 3rem; /* 48 */ --podul-text-6xl: 3.75rem; /* 60 — article H1 md */ --podul-text-7xl: 4.5rem; /* 72 — article H1 lg */ /* ---------------------------------------------------------------------- GEOMETRY ---------------------------------------------------------------------- */ --podul-container: 1400px; --podul-gutter: 1rem; /* mobile */ --podul-gutter-lg: 2rem; /* md and up */ --podul-border-thin: 2px; /* cards, nav cells, flags */ --podul-border-card: 3px; /* article sidebar cards */ --podul-border-thick: 4px; /* hero image, section rules, header base */ --podul-border-accent: 8px; /* yellow rule beside the article excerpt */ --podul-border-quote: 16px; /* yellow rule beside blockquotes */ --podul-radius: 0; /* the design is square — only avatars and dots are round */ --podul-ratio-card: 5 / 3; /* every image in the design */ /* ---------------------------------------------------------------------- HARD SHADOWS Never blurred, never spread — always `Npx Npx 0 0 `. The rest state is black; hover swaps to an accent colour AND grows the offset by 4px. That pairing is the interaction signature of the whole design. ---------------------------------------------------------------------- */ --podul-shadow-xs: 2px 2px 0 0 var(--podul-black); --podul-shadow-sm: 3px 3px 0 0 var(--podul-black); --podul-shadow-md: 4px 4px 0 0 var(--podul-black); --podul-shadow-lg: 8px 8px 0 0 var(--podul-black); --podul-shadow-xl: 12px 12px 0 0 var(--podul-black); /* Hover counterparts — offset grows one step, colour becomes the accent. */ --podul-shadow-md-hover: 6px 6px 0 0 var(--podul-yellow); --podul-shadow-lg-hover: 12px 12px 0 0 var(--podul-yellow); --podul-shadow-xl-hover: 12px 12px 0 0 var(--podul-yellow); /* The one soft shadow in the design — under article blockquotes. */ --podul-shadow-quote: 8px 8px 0 0 rgba(0, 0, 0, .05); /* ---------------------------------------------------------------------- MOTION ---------------------------------------------------------------------- */ --podul-transition: all .3s ease; --podul-transition-slow: transform .5s ease; /* image zoom on card hover */ /* ---------------------------------------------------------------------- LAYERING ---------------------------------------------------------------------- */ --podul-z-header: 150; --podul-z-overlay: 200; /* full-screen yellow mobile menu */ } /* The design is light-only — dark mode is disabled site-wide. If Jannah's night-mode class ever lands on the document anyway, neutralise it rather than letting a half-applied dark skin through. */ [data-skin="dark"], .dark-skin { --podul-ink: #1a1a1a; --podul-white: #ffffff; }