/* ========================================================================== PODUL — FORCED OVERRIDES This is the ONLY file allowed to use !important or long specificity chains. Everything here exists to beat CSS we do not control: - inc/custom-styles.php, which Jannah generates from Theme Options and injects with wp_add_inline_style() attached to the LAST enqueued style handle — which is ours. It therefore always lands after our stylesheets, and enqueue priority cannot fix it. Only specificity and !important can. - assets/css/style.css from the parent theme. HOUSE RULES 1. Every block below names the exact rule it is beating. 2. Nothing goes in here that could live in podul-base.css instead. 3. Prefer `html body` chains over #id chains — they are strong enough with !important and stay readable. ========================================================================== */ /* -------------------------------------------------------------------------- [1] HEADING FONT Beats: .wf-active .logo-text, .wf-active h1 … h6, .wf-active .the-subtitle { font-family: Poppins } Source: inc/custom-styles.php (Theme Options → Typography) Note: .wf-active is set on by Jannah's Web Font Loader, so we cannot rely on it being present — these rules deliberately do not use it. ALSO WORTH DOING: set Headings to Archivo and Body to Inter in Theme Options → Typography. Jannah currently downloads Poppins n4 + n6 on every page load and nothing renders in it. These rules make the site correct; the option makes it fast. -------------------------------------------------------------------------- */ html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body .logo-text, html body .the-subtitle { font-family: var(--podul-font-display) !important; } /* -------------------------------------------------------------------------- [2] BODY FONT Beats: Jannah's body font-family from Theme Options → Typography. -------------------------------------------------------------------------- */ html body, html body #tie-container, html body .entry, html body input, html body select, html body textarea, html body button { font-family: var(--podul-font-body) !important; } /* -------------------------------------------------------------------------- [3] POST TITLES — the editorial voice Every post title on the site, in every context: archive cards, block loops, widgets, related posts, and the single-post H1. Archivo 800, tight tracking, 1.15 leading — NOT the 900/0.9 display treatment used for UI labels. -------------------------------------------------------------------------- */ html body .post-title, html body .post-title a, html body h2.post-title, html body h1.post-title, html body .entry-title, html body .posts-list-item-title { font-family: var(--podul-font-display) !important; font-weight: var(--podul-weight-headline) !important; letter-spacing: var(--podul-track-tight) !important; line-height: var(--podul-leading-tight) !important; text-transform: none !important; color: var(--podul-ink); } /* The single-post H1 is the largest type on the site. */ html body #the-post .entry-title, html body .single-post-title { line-height: var(--podul-leading-h1) !important; letter-spacing: var(--podul-track-tighter) !important; } /* -------------------------------------------------------------------------- [4] SECTION AND WIDGET TITLES — the UI voice Archivo 900, uppercase, negative tracking, tight leading. These are the "EDITORIAL" / "BASARABIA" style headings from the design. -------------------------------------------------------------------------- */ html body .widget-title, html body .widget-title h2, html body .widget-title h4, html body .mag-box-title, html body .mag-box-title h3, html body .section-title, html body .page-title, html body .archive-title-wrapper .page-title, /* The sidebars on this site use Gutenberg block widgets, not Jannah's classic widgets, so their headings come through as .wp-block-heading. */ html body .widget .wp-block-heading, html body .widget_block .wp-block-heading { font-family: var(--podul-font-display) !important; font-weight: var(--podul-weight-black) !important; letter-spacing: var(--podul-track-tighter) !important; line-height: var(--podul-leading-display) !important; text-transform: uppercase !important; } /* -------------------------------------------------------------------------- [5] BODY COPY COLOUR Beats Jannah's generated body/entry colour. The design uses #1a1a1a for UI text and slate-800 for long-form article copy. -------------------------------------------------------------------------- */ html body, html body #tie-container { color: var(--podul-ink) !important; background-color: var(--podul-white) !important; } html body .entry-content, html body .entry p { color: var(--podul-slate-800) !important; } /* -------------------------------------------------------------------------- [6] ACCENT COLOUR Beats Jannah's theme colour (#0088ff by default, set in the parent's jannah_theme_color() filter and echoed throughout custom-styles.php). Deliberately narrow: only the places the design actually tints. The design's accent is a *background* (yellow) far more often than a text colour, so a blanket link recolour would be wrong. -------------------------------------------------------------------------- */ html body a:hover, html body .post-meta a:hover { color: var(--podul-accent); } /* Category labels take their colour from the term's cat_color, exposed as --podul-accent on the element by PHP in Phase 4. */ html body .post-cat-wrap .post-cat, html body .post-cat { font-family: var(--podul-font-body) !important; font-size: var(--podul-text-2xs) !important; font-weight: var(--podul-weight-bold) !important; letter-spacing: var(--podul-track-label) !important; text-transform: uppercase !important; border-radius: var(--podul-radius) !important; } /* -------------------------------------------------------------------------- [6b] CONTAINER WIDTH Beats Jannah's .container max-width, which comes from the boxed-width theme option and is 1200px on this site. The design's container is 1400px, and the header and footer are already pinned to it — without this the article and archive columns sit 200px narrower than the masthead above them. Setting it here rather than in Theme Options keeps the value in one place with the rest of the design tokens. -------------------------------------------------------------------------- */ html body .container, html body #content.container, html body .site-content.container { max-width: var(--podul-container) !important; padding-inline: var(--podul-gutter) !important; } @media (min-width: 640px) { html body .container, html body #content.container, html body .site-content.container { padding-inline: var(--podul-gutter-lg) !important; } } /* The nav row draws its own cell borders edge to edge, so it keeps zero padding — re-assert it after the rule above. */ html body #theme-header #main-nav .container { padding-inline: 0 !important; } /* -------------------------------------------------------------------------- [7] SQUARE CORNERS The design has no rounded corners anywhere except the author avatar and the small status dots. Jannah rounds buttons, thumbnails, inputs and boxes. -------------------------------------------------------------------------- */ html body .post-thumb, html body .post-thumb img, html body .container-wrapper, html body .mag-box, html body input[type="text"], html body input[type="email"], html body input[type="search"], html body textarea, html body .button, html body button, html body #go-to-content { border-radius: var(--podul-radius) !important; } /* -------------------------------------------------------------------------- [8] KEYWORD HIGHLIGHT .exclusiv is injected into titles and content by the child theme. It has to survive inside .post-title, which sets its own colour above. -------------------------------------------------------------------------- */ html body .post-title .exclusiv, html body .entry .exclusiv, html body .exclusiv { color: var(--podul-crimson) !important; font-weight: var(--podul-weight-black) !important; } /* -------------------------------------------------------------------------- [9] DARK MODE OFF The design is light only and jannah-switcher should be deactivated. This is a belt-and-braces guard in case the dark class is ever applied anyway — without it a half-applied dark skin looks broken rather than merely wrong. -------------------------------------------------------------------------- */ html body.dark-skin, html body[data-skin="dark"], html body.dark-skin #tie-container { background-color: var(--podul-white) !important; color: var(--podul-ink) !important; } html body .change-skin, html body .mobile-component_skin { display: none !important; } body.archive #main-content-row{ margin-bottom: 100px; }