/* ========================================================================== GujaratiAdda — main stylesheet Native CSS only. No framework. Organized top to bottom: 1. Custom properties 2. Reset 3. Typography 4. Layout helpers 5. Buttons/forms 6. Header 7. Footer 8. Homepage sections 9. Cards 10. Single article 11. Archives/search/404 12. Sidebar 13. Gutenberg content styles 14. Responsive 15. Reduced motion ========================================================================== */ /* 1. Custom properties ---------------------------------------------------- */ :root { --color-primary: #E85D24; --color-primary-dark: #C94716; --color-accent: #F6A623; --color-text: #202124; --color-text-muted: #667085; --color-text-faint: #98A2B3; --color-bg: #FFFFFF; --color-bg-soft: #FFF8F3; --color-bg-soft-2: #FDEEDF; --color-border: #E9E4DE; --color-footer-bg: #171717; --color-footer-text: #C9C9C9; --font-gu: "Noto Sans Gujarati", "Inter", system-ui, sans-serif; --font-en: "Inter", system-ui, -apple-system, sans-serif; --content-width: 1220px; --reading-width: 760px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --shadow-sm: 0 1px 3px rgba(23, 18, 14, 0.05); --shadow-md: 0 12px 32px rgba(23, 18, 14, 0.10); --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.75rem; --space-4: clamp(3rem, 2.2rem + 3vw, 6rem); --space-5: clamp(3.5rem, 2.4rem + 4vw, 7rem); /* Per-side homepage section padding — two adjacent .section elements stack this twice, so the visible gap between them is ~2x this value: ~42-44px mobile, ~55px tablet, ~62-67px desktop (never past ~67px, keeping every transition inside the requested 55-80px editorial rhythm). Kept separate from --space-4 (still used by single-article/pagination spacing, which wasn't flagged as a problem here). */ --space-section: clamp(1.35rem, 1.05rem + 1.4vw, 2.1rem); --ease: cubic-bezier(0.22, 1, 0.36, 1); --container-pad: 16px; } @media (min-width: 480px) { :root { --container-pad: 20px; } } @media (min-width: 768px) { :root { --container-pad: 24px; } } @media (min-width: 1024px) { :root { --container-pad: 32px; } } /* 2. Reset ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x here (not just on body, below) is the actual fix for the mobile off-canvas nav overflow bug: position:fixed elements (like .primary-navigation) are positioned relative to the viewport/initial containing block, not body — so they completely escape body's own overflow-x:hidden. Once .primary-navigation is transformed off- screen (translateX(100%) off its right:0 resting position), its post-transform bounding box extends past 100vw, and only clipping at the html root actually contains that. `clip` (not just `hidden`) is what reliably keeps document.documentElement.scrollWidth from growing because of a transformed/fixed descendant in the first place, rather than merely hiding a scrollbar after the fact; hidden is kept first as a fallback for browsers without `clip` support. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-gu); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* body's own `overflow-x: hidden` was removed here — it predates the html-level `overflow-x: clip` fix above (which is the one that actually matters: per the CSS overflow-propagation rules, a non- visible overflow set on the root element is what governs the viewport's own clipping, not body's), and the off-canvas nav technique it was originally guarding against doesn't exist anymore (.primary-navigation is position:absolute now, not position:fixed). Left in place, it was pure dead weight with one real side effect: a non-`visible` overflow-x with no overflow-y set forces overflow-y to compute to `auto`, which makes body itself a CSS scroll container — and .site-header (position:sticky) is body's own direct child, so body qualifying as a scroll container is exactly the kind of ancestor condition that can make a sticky element's `top` offset resolve against the wrong scrollport instead of the real viewport. Removing it eliminates that ambiguity for the sticky header without reopening the original nav-overflow bug, since html's overflow-x still fully covers that case on its own. */ img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } p { margin: 0 0 1em; } button { font: inherit; cursor: pointer; } input, textarea, select, button { font-family: inherit; } cite { font-style: normal; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link { position: fixed; top: -60px; left: 0; z-index: 10000; background: var(--color-primary); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0; transition: top 0.15s var(--ease); } .skip-link:focus { top: 0; } /* The skip-link above targets #content (`href="#content"`) — activating it asks the browser to scroll/focus that element into view, which by default aligns its top edge with the viewport's top edge (y:0). Since .site-header is position:sticky at that same y:0 (or y:32/46 when the admin bar bumps it down), #content would otherwise land right behind it. scroll-margin-top reserves that clearance for any scroll-into- view/anchor-focus landing on #content, generously covering the tallest real combination (74px desktop header, 46px mobile admin bar) with a small buffer — it has no effect on normal layout/reading, only on where a scroll-to lands. */ #content { scroll-margin-top: 90px; } .admin-bar #content { scroll-margin-top: 122px; } @media (max-width: 782px) { .admin-bar #content { scroll-margin-top: 130px; } } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; } /* 3. Typography ----------------------------------------------------------- */ :lang(en) { font-family: var(--font-en); } h1 { font-size: clamp(1.85rem, 1.5rem + 1.6vw, 2.5rem); } h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem); } h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3125rem); } /* 4. Layout helpers -------------------------------------------------------- */ .container { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--container-pad); } .section { padding: var(--space-section) 0; } .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-3); padding: var(--space-4) var(--container-pad); } .page-layout--narrow { grid-template-columns: minmax(0, var(--reading-width)); justify-content: center; } .page-layout__main { min-width: 0; } .no-sidebar .page-layout { grid-template-columns: minmax(0, 1fr); } .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); margin-bottom: 2.25rem; } .section-header__title { color: var(--color-text); } .section-header__desc { color: var(--color-text-muted); margin: 0.5em 0 0; max-width: 58ch; font-size: 1rem; } .section-header__cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; color: var(--color-primary-dark); padding-bottom: 0.15em; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease), gap 0.2s var(--ease); } .section-header__cta:hover { border-color: currentColor; gap: 0.6em; } .section-header__cta-arrow { transition: transform 0.2s var(--ease); } .section-header__cta:hover .section-header__cta-arrow { transform: translateX(2px); } /* 5. Buttons / forms --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.75em 1.5em; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease); white-space: nowrap; } .btn--primary { background: var(--color-primary); color: #fff; } .btn--primary:hover { background: var(--color-primary-dark); } .btn--outline { background: transparent; color: var(--color-primary-dark); border-color: var(--color-border); } .btn--outline:hover { background: var(--color-bg-soft); border-color: var(--color-primary); } .search-form { display: flex; gap: 0.5rem; background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: 0.4rem; transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); } .search-form:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(232, 93, 36, 0.1); } .search-field { flex: 1; border: none; background: transparent; padding: 0.6em 0.9em; font-size: 1rem; color: var(--color-text); min-width: 0; } .search-field::placeholder { color: var(--color-text-faint); } .search-field:focus { outline: none; } .search-submit { border-radius: calc(var(--radius-md) - 4px); } /* 6. Header ------------------------------------------------------------------ */ .site-header { border-bottom: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); position: sticky; top: 0; z-index: 500; } /* Sticks to viewport top:0 — the same coordinate space WordPress's fixed admin bar occupies (32px desktop, 46px ≤782px, matching its own breakpoint). Without this, a logged-in visitor who scrolls would see the admin bar's own fixed strip overlap the top of this sticky header. Gated entirely by .admin-bar (only present when logged in), so it changes nothing for the logged-out frontend. */ .admin-bar .site-header { top: 32px; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); /* Was `padding: 0`, which — at equal specificity with .container's own `padding: 0 var(--container-pad)` and declared later in the file — silently won the cascade and zeroed the header's horizontal inset at every breakpoint. Letting .container's padding apply here (same responsive scale as every other section) is the actual source fix for the header sitting flush to the viewport edges; `justify-content: space-between` is what then keeps branding pinned left and the actions cluster pinned right once .primary-navigation stops being an in-flow `flex: 1` spacer at ≤782px (position: absolute there, see below) — a no-op on desktop, where that flex:1 nav still consumes all the free space between them either way. */ min-height: 74px; } .site-branding { display: flex; align-items: center; flex-shrink: 0; } .custom-logo { max-height: 44px; width: auto; } .site-title-link { display: flex; align-items: center; gap: 0.65rem; line-height: 1.15; } .site-logo-mark { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); color: #fff; font-weight: 700; font-size: 1.15rem; flex-shrink: 0; } .site-title-text { display: flex; flex-direction: column; } .site-title { font-weight: 800; font-size: 1.3rem; color: var(--color-text); letter-spacing: -0.01em; } .site-tagline { font-size: 0.72rem; color: var(--color-text-muted); } .primary-navigation { flex: 1; } .nav-menu { display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap; } .nav-menu > li { position: relative; } .nav-menu .nav-link { display: block; padding: 0.7em 0.95em; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; color: var(--color-text); transition: color 0.15s var(--ease), background-color 0.15s var(--ease); } .nav-menu .nav-link:hover, .nav-menu li:hover > .nav-link, .nav-menu li.current-menu-item > .nav-link { color: var(--color-primary); background: var(--color-bg-soft); } /* Submenu — stays open with a padding "bridge" so moving the pointer from the parent link into the dropdown never closes it. */ .nav-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 0.5rem; margin-top: 0.6rem; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0.15s; z-index: 50; } .nav-menu .sub-menu::before { content: ""; position: absolute; top: -0.6rem; left: 0; right: 0; height: 0.6rem; } .nav-menu li:hover > .sub-menu, .nav-menu li:focus-within > .sub-menu, .nav-menu li.submenu-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-menu .sub-menu .nav-link { padding: 0.6em 0.75em; font-weight: 500; } .nav-menu .sub-menu .sub-menu { top: 0; left: 100%; margin-top: 0; margin-left: 0.4rem; } .site-header__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .header-search-toggle { background: none; border: none; padding: 0.55rem; border-radius: 50%; color: var(--color-text); display: flex; transition: background-color 0.15s var(--ease), color 0.15s var(--ease); } .header-search-toggle:hover { background: var(--color-bg-soft); color: var(--color-primary); } .header-search-panel { border-top: 1px solid var(--color-border); background: var(--color-bg-soft); padding: 1.1rem 0; } .header-search-panel[hidden] { display: none; } .header-search-panel .search-form { max-width: 620px; margin: 0 auto; } .mobile-menu-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: none; border: none; width: 44px; height: 44px; border-radius: var(--radius-sm); } .mobile-menu-toggle:hover { background: var(--color-bg-soft); } .mobile-menu-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--color-text); transition: transform 0.18s var(--ease), opacity 0.18s var(--ease); } .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* 7. Footer -------------------------------------------------------------- */ .site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); margin-top: var(--space-5); } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; padding: 5rem var(--container-pad) 3.25rem; } .footer__brand .site-title { color: #fff; } .footer__brand .site-title-link { display: inline-flex; } /* Deliberately no background/border/padding here — the dedicated footer-logo image is expected to already be transparent-background PNG designed for this dark footer, and the fallback (Site Identity custom_logo) shouldn't gain a frame it doesn't have in the header either. width: auto (not 100%) is what keeps a narrow-but-tall logo from being stretched to the full 220px — the browser only ever scales it down from its intrinsic size, never up past max-width. No separate margin-bottom needed: .footer__description's own margin-top: 1rem below already provides the logo-to-description gap, regardless of which of the three fallback tiers rendered above it. */ .footer-brand__logo img { display: block; width: auto; max-width: 220px; height: auto; } .footer__description { color: var(--color-footer-text); margin-top: 1rem; max-width: 34ch; line-height: 1.7; font-size: 0.95rem; } .footer__social { display: flex; gap: 0.65rem; margin-top: 1.5rem; flex-wrap: wrap; } .footer__social a { border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-sm); padding: 0.5em 0.95em; font-size: 0.82rem; font-weight: 500; transition: border-color 0.15s var(--ease), color 0.15s var(--ease); } .footer__social a:hover { border-color: var(--color-accent); color: var(--color-accent); } .footer__heading { color: #fff; font-size: 0.92rem; font-weight: 700; margin-bottom: 1.25rem; letter-spacing: 0.01em; } .footer-menu li { margin-bottom: 0.75rem; } .footer-menu a { color: var(--color-footer-text); font-size: 0.93rem; transition: color 0.15s var(--ease); } .footer-menu a:hover { color: var(--color-accent); } .footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.5rem 0; } .footer__bottom p { margin: 0; font-size: 0.85rem; color: #8f8f8f; text-align: center; } /* 8. Homepage sections ------------------------------------------------------ */ /* --- Hero: warm gradient + soft CSS-only decorative blobs, no images --- */ .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--color-bg-soft) 0%, #FFFDFB 100%); padding-top: clamp(3rem, 2rem + 4vw, 5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); z-index: 0; pointer-events: none; } .hero::before { width: 420px; height: 420px; background: radial-gradient(circle, rgba(246,166,35,0.16) 0%, rgba(246,166,35,0) 70%); top: -180px; left: -120px; } .hero::after { width: 480px; height: 480px; background: radial-gradient(circle, rgba(232,93,36,0.14) 0%, rgba(232,93,36,0) 70%); bottom: -220px; right: -140px; } .hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; text-align: center; } .hero__heading { font-size: clamp(1.9rem, 1.3rem + 3vw, 2.875rem); color: var(--color-text); } .hero__description { color: var(--color-text-muted); font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem); margin: 1rem auto 0; max-width: 56ch; line-height: 1.7; } .hero__search { margin: 2.25rem auto 0; max-width: 700px; } .hero__search .search-form { box-shadow: var(--shadow-md); padding: 0.5rem; border-radius: var(--radius-lg); border-width: 1px; } .hero__search .search-field { font-size: 1.05rem; padding: 0.9em 1em; } .hero__search .search-submit { padding: 0.9em 1.7em; font-size: 1rem; border-radius: calc(var(--radius-lg) - 6px); } .hero__chips { margin-top: 1.5rem; } .chip-list { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; } .chip { display: inline-flex; align-items: center; padding: 0.5em 1.05em; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--color-border); font-size: 0.85rem; font-weight: 500; color: var(--color-text-muted); transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background-color 0.15s var(--ease); } .chip:hover { border-color: var(--color-primary); color: var(--color-primary-dark); background: var(--color-bg-soft); } /* --- Popular categories --- */ .category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .category-card { --category-accent: var(--color-primary); display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease); } .category-card:hover { border-color: var(--category-accent); box-shadow: var(--shadow-sm); transform: translateY(-3px); } .category-card__top { display: flex; align-items: center; justify-content: space-between; } .category-card__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--color-bg-soft); overflow: hidden; } .category-card__icon img { border-radius: 8px; width: 28px; height: 28px; object-fit: contain; } .category-card__icon--fallback { font-family: var(--font-gu); font-weight: 700; font-size: 1.15rem; color: var(--category-accent); background: var(--color-bg-soft-2); background: color-mix(in srgb, var(--category-accent) 12%, var(--color-bg-soft)); } .category-card__arrow { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: var(--color-text-faint); opacity: 0; transform: translate(-3px, 3px); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), color 0.18s var(--ease); } .category-card:hover .category-card__arrow { opacity: 1; transform: translate(0); color: var(--category-accent); } .category-card__name { font-weight: 700; color: var(--color-text); font-size: 1.02rem; } .category-card__desc { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.55; } .category-card__count { font-size: 0.76rem; font-weight: 600; color: var(--category-accent); margin-top: auto; padding-top: 0.35rem; } /* --- Adaptive featured grid: shared by Featured Guides & Gujarat. Layout is driven entirely by how many posts actually came back (see gujaratiadda_render_adaptive_featured()) so there is never an empty region just because fewer posts were available. --- */ .adaptive-featured { display: grid; gap: 24px; } .adaptive-featured--count-1 { grid-template-columns: 1fr; } .adaptive-featured--count-2 { grid-template-columns: 1fr 1fr; } .adaptive-featured--count-3, .adaptive-featured--count-4 { grid-template-columns: 1.4fr 1fr; align-items: start; } .adaptive-featured__secondary { display: flex; flex-direction: column; gap: 16px; } .featured-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-bg); transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); } .featured-card:hover { border-color: #ddd3c8; box-shadow: var(--shadow-sm); } /* aspect-ratio here matches the featured images' own canvas (1200×628) so object-fit: contain below needs little to no letterboxing to show the complete infographic — overflow:hidden only clips to the card's rounded corners now, never a smaller crop of the image itself, since contain never lets the image exceed this box. */ .featured-card__image-link { aspect-ratio: 1200 / 628; overflow: hidden; background: var(--color-bg-soft); } /* Homepage only (see .is-homepage in inc/template-functions.php) — the cream background above is what category-archive contexts reusing this exact class (.archive-featured .featured-card--solo) still get; left untouched there deliberately. On the homepage the surrounding card and page background are both white, so the same cream shows up as a visible tinted strip on either side of a contain-fit image that doesn't exactly match the box ratio — switching to white here makes that gap disappear into the card instead of standing out. The padding is what turns "image glued to the card's top/side edge" into a deliberately framed inset — box-sizing: border-box (the sitewide reset) means this eats into the same aspect-ratio box rather than growing the card, and the image's own width:100%/ height:100% already resolves against the padded content box automatically, so no other rule needs to change for this to stay overflow-safe. */ .is-homepage .featured-card__image-link { background: #fff; padding: 14px; } .featured-card .card-img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.35s var(--ease); } .featured-card:hover .card-img { transform: scale(1.03); } .featured-card__body { padding: 1.35rem; display: flex; flex-direction: column; gap: 0.4rem; } .featured-card__title { font-size: 1.15rem; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .featured-card__title a { transition: color 0.15s var(--ease); } .featured-card__title a:hover { color: var(--color-primary); } .featured-card__excerpt { color: var(--color-text-muted); margin-top: 0.3em; font-size: 0.95rem; line-height: 1.65; } .featured-card__date { font-size: 0.8rem; color: var(--color-text-faint); margin-top: 0.35rem; } /* solo: 1 post — horizontal split, image and content share the row. align-items: start (was stretch) is what actually matters here: grid stretch would force the image column to match the text column's height regardless of the image's own ratio — exactly the "shrink width until cover can crop the rest away" trap. start lets the image render at its own aspect-ratio-constrained height instead, with the text column simply sitting alongside it. Mirrors the same fix already used for the category-archive version of this card, see .archive-featured .featured-card--solo further down. */ .featured-card--solo { display: grid; grid-template-columns: minmax(0, 48%) 1fr; align-items: start; } .featured-card--solo .featured-card__image-link { aspect-ratio: 1200 / 628; height: auto; min-height: 0; } .featured-card--solo .featured-card__body { padding: 2rem 2.25rem; justify-content: center; gap: 0.65rem; } .featured-card--solo .featured-card__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); -webkit-line-clamp: 3; } /* large: primary story in a 3+/4+ layout */ .featured-card--large .featured-card__title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); -webkit-line-clamp: 3; } .featured-card--large .featured-card__body { padding: 1.65rem 1.75rem; } /* medium: 2-up pairs, or the two secondary stories in a 3-post layout */ .featured-card--medium .featured-card__title { font-size: 1.05rem; } .featured-card--medium .featured-card__body { padding: 1.1rem 1.25rem; } /* compact: stacked secondary rows in a 4+ layout (Featured Guides / Gujarat side cards). Widened from 128px and switched from a square 1:1 crop to a landscape ratio close to the source images' own shape — a square box left an infographic with the vast majority of its width trimmed away under the old object-fit: cover; contain in a still-square box would instead have left most of the box empty. Widening the column is the "Option A" fix (a wider thumbnail) rather than accepting heavy letterboxing in a box shaped nothing like the image ("Option B"). align-items: center is the actual fix for this task: with no align-items set, a grid item that carries its own aspect-ratio (the image-link, 1200/628) doesn't get force-stretched to fill the row's full height the way an ordinary item would — its rendered box stays at its natural, ratio-correct size, shorter than the text column next to it, and grid's default alignment then anchors that shorter box to the top of the row, leaving the leftover space below it — the exact "image sits toward the top, uneven blank space underneath" symptom. Centering it vertically in the row is what a plain "no align-items" grid was silently failing to do on its own. */ .featured-card--compact { display: grid; grid-template-columns: 150px 1fr; align-items: center; } .featured-card--compact .featured-card__image-link { aspect-ratio: 1200 / 628; } /* Smaller inset than the 14px base above — these side-card image boxes are already small (150px column), so the same padding would eat a disproportionate share of the thumbnail. */ .is-homepage .featured-card--compact .featured-card__image-link { padding: 7px; } /* Widened column, homepage-scoped (this component is already homepage-exclusive in practice — Featured Guides/Gujarat secondary cards, Sarkari's single-secondary-post case — scoped explicitly anyway for the same future-proofing reason as the rule above). 150px → 180px raises the actually-visible image (after the 7px inset on each side and the native ~1.5:1 source ratio being height-bound inside this box) from roughly 97px to roughly 120px wide — the requested "15-20% larger, ~115-125px" outcome — without touching the fixed 7px padding a separate task already tuned. */ .is-homepage .featured-card--compact { grid-template-columns: 180px 1fr; } .featured-card--compact .featured-card__body { padding: 0.9rem 1.1rem; gap: 0.3rem; } .featured-card--compact .featured-card__title { font-size: 1rem; } .card__category, .article-header__category { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; color: var(--color-primary-dark); background: var(--color-bg-soft-2); padding: 0.3em 0.85em; border-radius: var(--radius-pill); margin-bottom: 0.65em; } /* --- Popular questions: clean editorial rows, not accordion cards --- */ .question-list { columns: 2; column-gap: 2.5rem; } .question-list__item { break-inside: avoid; border-bottom: 1px solid var(--color-border); } .question-list__item:first-child { border-top: 1px solid var(--color-border); } .question-list__item a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0.25rem; transition: color 0.15s var(--ease); } .question-list__item a:hover { color: var(--color-primary-dark); } .question-list__title { font-weight: 500; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .question-list__arrow { color: var(--color-primary); flex-shrink: 0; transition: transform 0.18s var(--ease); } .question-list__item a:hover .question-list__arrow { transform: translateX(3px); } /* --- Newsletter --- */ .newsletter { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); border-radius: var(--radius-lg); margin: 0 var(--container-pad); padding: 3rem clamp(1.75rem, 2vw + 1rem, 3.5rem); } .newsletter__inner { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; } .newsletter__text { flex: 1 1 320px; } .newsletter .section-header__title, .newsletter .section-header__desc { color: #fff; } .newsletter .section-header__desc { opacity: 0.92; } .newsletter__form { flex: 1 1 340px; max-width: 420px; } .newsletter-placeholder-form { display: flex; gap: 0.5rem; background: #fff; border-radius: var(--radius-md); padding: 0.4rem; } .newsletter-placeholder-form input { flex: 1; border: none; padding: 0.75em 1em; min-width: 0; font-size: 0.98rem; border-radius: calc(var(--radius-md) - 4px); } .newsletter-placeholder-form input:focus { outline: 2px solid var(--color-accent); outline-offset: -2px; } .newsletter-placeholder-form .btn { flex-shrink: 0; } .newsletter-placeholder-note { color: #fff; margin-top: 0.7rem; font-size: 0.9rem; font-weight: 500; } .newsletter-placeholder-note[hidden] { display: none; } /* 9. Cards ----------------------------------------------------------------- */ .card { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); transition: box-shadow 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease); } .card:hover { box-shadow: var(--shadow-sm); border-color: #ddd3c8; transform: translateY(-2px); } /* Matches the featured images' own 1200×628 canvas — see the identical reasoning on .featured-card__image-link above. Used by every card grid: homepage Latest Posts, category/search/blog archives, related posts. */ .card__image-link { aspect-ratio: 1200 / 628; overflow: hidden; background: var(--color-bg-soft); } /* Homepage only — .card is shared with category/search/blog archives (deliberately untouched there; the cream background still applies), see the fuller explanation on .featured-card__image-link above. */ .is-homepage .card__image-link { background: #fff; padding: 10px 12px; } /* transform: translateZ(0) here is a rendering-stability fix, not a visual one — it promotes the image to its own GPU compositing layer at rest, not only once a :hover transform happens to trigger one. Without it, a contain-fit image sitting inside two nested overflow:hidden + border-radius boxes (the card's own radius/clip, plus this image's own smaller radius — see the .is-homepage .card-img border-radius rule below) could show a small rectangular region at one corner that the browser hadn't finished compositing correctly — a known class of browser rendering glitch with nested rounded-corner clipping, not a real gap in the image content, which is exactly why scaling the image via :hover (a transform, forcing exactly this same layer promotion) made it disappear. This is the base rule every card-image context (.featured-card, .card, .topic-highlight-card, .topic-highlight-list) shares, so the fix applies everywhere uniformly rather than needing to be repeated per component; :hover's own transform: scale(...) below still simply replaces this at rest → hover, unaffected. */ .card-img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.35s var(--ease); transform: translateZ(0); } .card:hover .card-img { transform: scale(1.04); } /* The bundled fallback illustration (assets/images/fallback.svg) is a full-bleed gradient background, not an infographic with content to protect — cover crops it with zero information loss and no visible letterboxing, which reads better than contain would here. !important is deliberate and narrow: every ancestor-scoped rule above and below (.featured-card .card-img, .topic-highlight-card__image .card-img, etc.) now says contain, and this single modifier needs to keep winning over all of them regardless of which card context renders the fallback in. */ .card-img--fallback { object-fit: cover !important; } /* Homepage only, alongside the padding/white-background change above — once the image sits inset from the card edge instead of flush against it, the card's own rounded corners no longer visually round the image itself (the white padding gap breaks that connection), so a small radius on the image keeps it looking framed rather than sharp-cornered inside a rounded card. Modest on purpose — this is a subtle finish, not a heavy frame. */ .is-homepage .card__image-link .card-img, .is-homepage .featured-card__image-link .card-img, .is-homepage .topic-highlight-card__image .card-img { border-radius: 8px; } .card__body { padding: 1.15rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; } .card__title { font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.48; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .card__title a { transition: color 0.15s var(--ease); } .card__title a:hover { color: var(--color-primary); } .card__excerpt { color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.6; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .card__meta { margin-top: auto; padding-top: 0.5rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--color-text-faint); } .card__arrow { color: var(--color-primary); opacity: 0; transform: translateX(-3px); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); } .card:hover .card__arrow { opacity: 1; transform: translateX(0); } /* --- Topic sections: Sarkari highlight-list layout --- */ .topic-highlight-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; } /* Exactly 1 post: no secondary column exists, so don't reserve empty grid space for it. */ .topic-highlight-layout--count-1 { grid-template-columns: 1fr; } .topic-highlight-card { display: grid; /* 250px (was 200px) — with the fixed 12px inset padding and the source images' own ~1.5:1 native ratio (height-bound inside this 1200:628-ratio box), this is what actually renders as a ~160px- wide visible thumbnail, the requested target. Only the column width changed here — padding, gap-via-body-padding, and every text-side rule below are untouched. */ grid-template-columns: 250px 1fr; /* center (not the grid default, stretch, and not start either) — stretch would force the 200px image column to match whatever height the text column needs, ignoring the image's own ratio entirely. start avoids that but then anchors the now-shorter, ratio-correct image box to the top of the row, leaving its leftover height as blank space underneath — visually unbalanced for a compact horizontal card. Centering it in the row is what actually looks like a deliberate thumbnail rather than a mis-stretched one. */ align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg); transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); } .topic-highlight-card:hover { border-color: #ddd3c8; box-shadow: var(--shadow-sm); } /* Was a portrait 4:5 crop — fundamentally the wrong shape for a landscape infographic; matches the 1200×628 canvas now instead. */ .topic-highlight-card__image { aspect-ratio: 1200 / 628; overflow: hidden; background: var(--color-bg-soft); } /* Homepage-only — this component only ever renders on the homepage (the Sarkari section's highlight-list layout), but scoped the same way as the others for consistency and in case that ever changes. */ .is-homepage .topic-highlight-card__image { background: #fff; padding: 12px; } .topic-highlight-card__image .card-img { width: 100%; height: 100%; object-fit: contain; } .topic-highlight-card__body { padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; } .topic-highlight-card__body h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.55rem); line-height: 1.42; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .topic-highlight-card__body h3 a:hover { color: var(--color-primary); } .topic-highlight-card__body p { color: var(--color-text-muted); font-size: 0.95rem; margin: 0; line-height: 1.65; } .topic-highlight-card__body time { font-size: 0.8rem; color: var(--color-text-faint); margin-top: 0.25rem; } /* Exactly 1 secondary post: a real compact card, not a bare text row */ .topic-highlight-secondary { display: flex; } .topic-highlight-secondary .featured-card { width: 100%; } .topic-highlight-list { display: flex; flex-direction: column; } .topic-highlight-list li { border-bottom: 1px solid var(--color-border); } .topic-highlight-list li:first-child { border-top: 1px solid var(--color-border); } /* Divider lines/spacing above are exactly as before — only the row's own internal layout changes below to make room for a thumbnail. align-items: center (was baseline, which only made sense for a text-only row) is what vertically centers the new image against the title+date text block. justify-content: space-between no longer does anything useful now that .topic-highlight-list__text carries its own flex: 1 below (it already consumes all remaining width between the fixed-width media and the row's edge), but is harmless to leave. */ .topic-highlight-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0.25rem; transition: color 0.15s var(--ease); } .topic-highlight-list a:hover { color: var(--color-primary-dark); } /* Same ~110-120px compact thumbnail treatment as the rest of the homepage (Featured Guides/Gujarat side cards, the Sarkari main card) — matching aspect-ratio, contain, white inset, subtle radius. Kept as its own selector rather than reusing .featured-card__image-link because this component's divider-line list-row styling (above) is intentionally different from a bordered .featured-card box. */ .topic-highlight-list__media { display: flex; align-items: center; justify-content: center; width: 118px; aspect-ratio: 1200 / 628; flex-shrink: 0; overflow: hidden; border-radius: 8px; background: var(--color-bg-soft); } .is-homepage .topic-highlight-list__media { background: #fff; padding: 4px 6px; } .topic-highlight-list__media .card-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; } .topic-highlight-list__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; } .topic-highlight-list__title { font-weight: 500; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .topic-highlight-list time { font-size: 0.78rem; color: var(--color-text-faint); white-space: nowrap; } /* 10. Single article --------------------------------------------------------- */ .article-header { padding-top: 2rem; max-width: var(--reading-width); } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.88rem; color: var(--color-text-muted); } .breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; color: #d8d0c6; } .breadcrumbs a { transition: color 0.15s var(--ease); } .breadcrumbs a:hover { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px; } .article-header__title { margin: 0.6rem 0 0; font-size: clamp(1.9rem, 1.4rem + 1.9vw, 3rem); line-height: 1.22; } .article-header__intro { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); color: var(--color-text-muted); line-height: 1.7; margin-top: 0.9rem; } /* Legal/policy pages only (page.php checks the slug) — small and secondary, not competing with the title. */ .article-header__updated { font-size: 0.85rem; color: var(--color-text-faint); margin-top: 0.75rem; } /* Static pages (page.php) read more comfortably a little wider than single-post's 760px reading column. .article-header/.page-layout-- narrow are descendants of the .single-page
, not the same element — scoped this way so single.php's own width (a completely different template, never carrying .single-page) is untouched. */ .single-page .page-layout--narrow { grid-template-columns: minmax(0, 820px); } .single-page .article-content { max-width: 820px; } .single-page .article-header { max-width: 820px; } .article-header__meta { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--color-text-muted); margin-top: 1.1rem; } .article-author { font-weight: 600; color: var(--color-text); } .meta-sep { color: var(--color-text-faint); } .article-featured-image { margin: 1.75rem auto 2rem; max-width: var(--content-width); } /* Highest-priority fix in this pass: no aspect-ratio box and no object-fit: cover — height: auto lets the image render at its own real intrinsic proportions (≈1200×628) at the container's full width, so the complete infographic is always visible, never cropped. object-fit: contain is kept only as a defensive no-op (it has nothing to do once height is auto and nothing else constrains the box), in case a future change ever adds a max-height here. */ .article-featured-image__img { width: 100%; height: auto; border-radius: var(--radius-lg); object-fit: contain; } /* Native
/ — collapsible with zero JS, content stays in the DOM (crawlable) and keyboard/screen-reader accessible either way. Height always follows content: a single heading gets the compact variant instead of the same generous padding as a 6-item list. */ .article-toc { background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; margin-bottom: 1.4rem; max-width: var(--reading-width); } /* One heading: a light warm strip, not a boxed alert — no border, much less padding, no numbering (nothing to number). */ .article-toc--compact { padding: 0.55rem 0.9rem; border: none; } /* Custom chevron replaces the browser's inconsistent default
triangle — pure CSS (two rotated border edges), no icon font/image. */ .article-toc__title { font-weight: 700; margin: 0; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .article-toc__title::-webkit-details-marker { display: none; } .article-toc__title::after { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(45deg); transition: transform 0.2s var(--ease); } .article-toc[open] > .article-toc__title::after { transform: rotate(225deg); } .article-toc[open] .article-toc__title { margin-bottom: 0.7em; } .article-toc--compact[open] .article-toc__title { margin-bottom: 0.3em; font-size: 0.95rem; } .article-toc ol { display: grid; gap: 0.45rem; counter-reset: toc; margin-top: 0.2em; } .article-toc--compact ol { gap: 0; } .article-toc li { counter-increment: toc; line-height: 1.5; } .article-toc li::before { content: counter(toc) ". "; color: var(--color-primary); font-weight: 600; } .article-toc--compact li::before { display: none; } .article-toc .toc-level-3 { margin-left: 1.2rem; } .article-toc a:hover { color: var(--color-primary); } .article-content { max-width: var(--reading-width); font-size: 1.125rem; line-height: 1.8; } /* Distinct, tighter transitions than the shared --space-4 (which still governs comments/pagination/404 spacing elsewhere) — these two classes only ever appear in this article-end sequence. */ .post-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: clamp(2.5rem, 2.2rem + 1vw, 3.4rem); max-width: var(--reading-width); } .post-navigation__link { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.1rem 1.25rem; display: block; transition: border-color 0.18s var(--ease); } .post-navigation__link:hover { border-color: var(--color-primary); } .post-navigation__next { text-align: right; grid-column: 2; } .post-navigation__label { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.35em; } .post-navigation__title { font-weight: 600; } /* Only one side exists (first/last post in the site) — take the full row instead of sitting alone in a half-width column. */ .post-navigation--prev-only, .post-navigation--next-only { grid-template-columns: 1fr; } .post-navigation--next-only .post-navigation__next { grid-column: 1; text-align: left; } .related-posts { margin-top: clamp(3.1rem, 2.7rem + 1.3vw, 4rem); max-width: var(--content-width); } .related-posts__title { margin-bottom: 1.5rem; } /* 1 related post: reuse .featured-card--solo but with a narrower image column than the homepage's Featured Guides use of the same variant (which needs more visual weight at full section width). */ .related-posts__solo .featured-card--solo { grid-template-columns: minmax(0, 38%) 1fr; } .article-comments { max-width: var(--reading-width); margin-top: var(--space-4); } .comments-title { margin-bottom: 1.5rem; } .comments-closed { color: var(--color-text-muted); font-style: italic; } .comment-list { display: grid; gap: var(--space-2); margin: var(--space-2) 0; } .comment-list .children { margin-top: var(--space-2); margin-left: var(--space-3); } .comment-body { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); } .comment-meta { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.7rem; } .comment-author .avatar { border-radius: 50%; display: block; } .comment-author .fn { font-weight: 700; font-size: 0.95rem; } .comment-metadata { font-size: 0.78rem; color: var(--color-text-faint); } .comment-metadata a { color: inherit; } .comment-content p:last-child { margin-bottom: 0; } .comment-reply-title { font-size: 1.25rem; margin-bottom: 1rem; } .comment-notes, .comment-form-cookies-consent { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1.25rem; } .logged-in-as { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1.25rem; } .logged-in-as a { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px; } .comment-form p { margin-bottom: 1.1rem; } .comment-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4em; color: var(--color-text); } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 0.7em 0.9em; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .comment-form textarea { min-height: 130px; border-radius: var(--radius-md); } .comment-form .form-submit { margin-bottom: 0; } .comment-form .form-submit input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; padding: 0.75em 1.6em; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; background: var(--color-primary); color: #fff; cursor: pointer; transition: background-color 0.18s var(--ease); } .comment-form .form-submit input[type="submit"]:hover { background: var(--color-primary-dark); } /* Single-post-only spacing/layout tweaks, scoped via WordPress's own "single" body class so archives/search/category/home (which share .page-layout) are completely unaffected. */ body.single .page-layout { padding-top: 1.5rem; } @media (min-width: 1025px) { body.single .page-layout .sidebar { position: sticky; top: 98px; /* sticky header (74px) + breathing room */ align-self: start; } } /* 11. Archives / search / 404 ------------------------------------------------ */ .archive-header { padding: 2rem 0 1.75rem; border-bottom: 1px solid var(--color-border); margin-bottom: 0; } .archive-header--category { --category-accent: var(--color-primary); } .archive-header__inner { display: flex; align-items: flex-start; gap: 1.1rem; margin-top: 0.85rem; } .archive-header__icon { width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: contain; flex-shrink: 0; } .archive-header__icon--fallback { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--category-accent) 12%, var(--color-bg-soft)); background-color: var(--color-bg-soft-2); color: var(--category-accent); font-family: var(--font-gu); font-weight: 700; font-size: 1.4rem; } .archive-header__title { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem); line-height: 1.2; } .archive-header__desc { color: var(--color-text-muted); margin-top: 0.6em; font-size: clamp(1.06rem, 1rem + 0.3vw, 1.19rem); line-height: 1.7; max-width: 700px; } .archive-header__count { color: var(--category-accent, var(--color-text-muted)); font-weight: 600; font-size: 0.88rem; margin-top: 0.5em; } .archive-header__search { max-width: 480px; margin-top: 1.25rem; } /* Search results — a utility page, not a topic hub: query, count and search box are the whole point, so this header stays lean rather than reusing category.php's icon/description layout. */ .archive-header--search .archive-header__title { margin-top: 0.6rem; max-width: 800px; } .archive-header--search .archive-header__count { margin-top: 0.6rem; } .archive-header--search .archive-header__search { max-width: 650px; margin-top: 1.5rem; } /* Blog (Posts Page) — the plain chronological archive. Its .archive-header sits *inside* .page-layout__main (unlike category/search/archive.php, where it's a preceding sibling), so it gets its own bottom spacing here rather than relying on the .archive-header ~ .page-layout sibling rule those templates use. */ .archive-header--blog { padding-bottom: 2.5rem; } .archive-header--blog .archive-header__title { max-width: 750px; margin-top: 0.6rem; } .archive-header--blog .archive-header__desc { max-width: 750px; margin-top: 0.8em; } /* Featured article above the grid on category archives. Only a top margin here — .archive-header ~ .page-layout's own top padding (right below this) already provides the featured→grid gap, so it isn't stacked twice. */ .archive-featured { margin: clamp(2.2rem, 2rem + 0.6vw, 2.85rem) auto 0; } /* Tighter, archive-specific top/bottom rhythm for .page-layout — this selector only ever matches on category/archive/search/home (the only templates that render .archive-header as a preceding sibling), so single.php/page.php/the homepage are structurally untouched. */ .archive-header ~ .page-layout { padding-top: clamp(2.5rem, 2.3rem + 0.6vw, 3.1rem); padding-bottom: clamp(1rem, 0.8rem + 0.6vw, 1.5rem); } /* Same reasoning for the footer gap: :has() only matches a body whose template rendered .archive-header somewhere in it, leaving the homepage/single-post's own footer spacing exactly as it was. */ body:has(.archive-header) .site-footer { margin-top: clamp(2.8rem, 2rem + 2.2vw, 5rem); } /* Category's featured article: reuse .featured-card--solo (base rule above) but scoped slightly narrower proportions (46/54 vs the homepage's 48/52), so it can't grow into an oversized "banner" on a short excerpt or a wide viewport. Matches the base rule's own align-items: start and 1200×628 image ratio — both already fixed above, restated here only because this selector needs to win over the base rule for the column proportions. */ .archive-featured .featured-card--solo { grid-template-columns: minmax(0, 46%) 1fr; align-items: start; } .archive-featured .featured-card--solo .featured-card__image-link { aspect-ratio: 1200 / 628; height: auto; min-height: 0; } /* Grid adapts when only 1-2 posts remain after the featured article is pulled out, so a lone card never sits at 1/3 width next to empty columns. Compound selectors (not just a modifier alone) so these reliably beat the responsive .card-grid rules below regardless of source order. */ .card-grid.card-grid--single { grid-template-columns: minmax(0, 420px); } .card-grid.card-grid--pair { grid-template-columns: repeat(2, 1fr); } .pagination { margin-top: clamp(2.5rem, 2.3rem + 0.7vw, 3.15rem); display: flex; justify-content: center; } .pagination ul { display: flex; gap: 0.4rem; flex-wrap: wrap; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 0.7em; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-weight: 500; transition: border-color 0.15s var(--ease), color 0.15s var(--ease); } .pagination .current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); } .content-none { text-align: center; padding: var(--space-5) 0; } .content-none .search-form { max-width: 420px; margin: var(--space-2) auto 0; } .content-none__home-link { display: inline-flex; margin-top: 1.25rem; } .content-none__icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--color-bg-soft); color: var(--color-text-faint); } .content-none__tips { display: inline-flex; flex-direction: column; gap: 0.4rem; margin: 1.5rem auto 0; color: var(--color-text-muted); font-size: 0.92rem; text-align: left; } .content-none__tips li { padding-left: 1.1em; position: relative; } .content-none__tips li::before { content: "•"; position: absolute; left: 0; color: var(--color-primary); } .content-none__categories { margin-top: 1.75rem; } .content-none__categories-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.75em; } .content-none__categories .chip-list { justify-content: center; } .page-404 { padding: var(--space-5) var(--container-pad); } .page-404__inner { max-width: 560px; margin: 0 auto; text-align: center; } .page-404__code { font-size: 5rem; font-weight: 800; color: var(--color-bg-soft-2); margin: 0; -webkit-text-stroke: 2px var(--color-primary); } .page-404__description { color: var(--color-text-muted); } .page-404__search { max-width: 420px; margin: var(--space-2) auto; } .page-404__categories { margin-top: var(--space-4); } .page-404__categories-title { font-weight: 600; margin-bottom: 0.75em; } /* 12. Sidebar --------------------------------------------------------------- */ .sidebar { display: flex; flex-direction: column; gap: 1.75rem; } .widget { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.4rem; } .widget-title { font-size: 1rem; margin-bottom: 1rem; } .widget-list li { margin-bottom: 0.7rem; } .widget-list a { display: flex; justify-content: space-between; gap: 0.5rem; transition: color 0.15s var(--ease); } .widget-list a:hover { color: var(--color-primary); } .widget-list .count { color: var(--color-text-faint); font-size: 0.85rem; } /* justify-content: flex-start explicitly overrides the generic .widget-list a rule's `space-between` above — with only two flex children (image + title), space-between pushed the title flush to the row's right edge instead of right after the image, so its left starting position drifted per-row depending on the title's own width. flex-start (plus gap) keeps every title starting at the same fixed offset: image width + gap, every row, regardless of length. */ .widget-list--posts .widget-post { display: flex; justify-content: flex-start; gap: 0.85rem; align-items: flex-start; } /* Widened from a 56×56 square and switched to contain — a square box forced a heavy crop on a landscape infographic. 76×40 is close enough to the featured images' own ~1.9:1 shape that contain needs little to no visible letterboxing; the background covers it where a narrower individual image still leaves a sliver. Compact is fine here (the sidebar title carries the context either way), distortion and cropped infographic text are not. */ .widget-post img { width: 76px; height: 40px; object-fit: contain; background: var(--color-bg-soft); border-radius: 8px; flex-shrink: 0; } .widget-post__title { flex: 1; min-width: 0; margin: 0; padding: 0; text-align: left; font-size: 0.9rem; font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .widget-post:hover .widget-post__title { color: var(--color-primary); } /* 13. Gutenberg / entry content typography ----------------------------------- */ .entry-content > * + * { margin-top: 1.35em; } .entry-content p { line-height: 1.8; margin: 0 0 1.35em; } .entry-content h2, .entry-content h3, .entry-content h4 { scroll-margin-top: 100px; } .entry-content h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin-top: clamp(2.75rem, 2.4rem + 1.5vw, 3.4rem); margin-bottom: 1rem; } .entry-content h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); margin-top: 2.25rem; margin-bottom: 0.75rem; } .entry-content h4 { font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.25rem); margin-top: 1.75rem; margin-bottom: 0.6rem; } .entry-content > h2:first-child, .entry-content > h3:first-child, .entry-content > h4:first-child { margin-top: 0; } .entry-content a { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px; } .entry-content a:hover { color: var(--color-primary); } .entry-content ul, .entry-content ol { padding-left: 1.5em; } .entry-content ul { list-style: disc; } .entry-content ol { list-style: decimal; } .entry-content li { line-height: 1.75; } .entry-content li + li { margin-top: 0.5em; } .entry-content li::marker { color: var(--color-primary); font-weight: 600; } .entry-content li > ul, .entry-content li > ol { margin-top: 0.5em; padding-left: 1.25em; } .entry-content img, .entry-content video { border-radius: var(--radius-md); } .entry-content .wp-block-image, .entry-content figure { margin: 1.75em 0; } .entry-content figcaption { font-size: 0.85rem; color: var(--color-text-muted); text-align: center; margin-top: 0.6em; } .entry-content blockquote { border-left: 4px solid var(--color-primary); background: var(--color-bg-soft); padding: 1em 1.3em; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: normal; } .entry-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .entry-content th, .entry-content td { border: 1px solid var(--color-border); padding: 0.85em 1em; text-align: left; } .entry-content th { background: var(--color-bg-soft); font-weight: 700; } .entry-content tbody tr:nth-child(even) { background: rgba(23, 18, 14, 0.015); } .entry-content .wp-block-button__link { display: inline-flex; padding: 0.7em 1.4em; border-radius: var(--radius-sm); background: var(--color-primary); color: #fff; text-decoration: none; } .entry-content .wp-block-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); } .entry-content .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.6rem; } .entry-content .wp-block-embed { position: relative; } .entry-content iframe { max-width: 100%; } .entry-content code { background: var(--color-bg-soft); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; } .entry-content pre { background: #1e1e1e; color: #eee; padding: 1em; border-radius: var(--radius-sm); overflow-x: auto; } .entry-content hr { border: none; border-top: 1px solid var(--color-border); margin: 2em 0; } /* Optional editorial callout boxes — apply via the block editor's "Additional CSS Class" field. Never inserted automatically. */ .entry-content .info-box, .entry-content .tip-box, .entry-content .important-box, .entry-content .warning-box { padding: 1.1rem 1.35rem; border-radius: var(--radius-md); border: 1px solid; margin: 1.5em 0; } .entry-content .info-box { background: var(--color-bg-soft); border-color: var(--color-border); } .entry-content .tip-box { background: #F2F9F1; border-color: #CFE8CB; } .entry-content .important-box { background: var(--color-bg-soft-2); border-color: #F3D3B0; } .entry-content .warning-box { background: #FDF6EC; border-color: #F0DDB0; } .entry-content .info-box > *:last-child, .entry-content .tip-box > *:last-child, .entry-content .important-box > *:last-child, .entry-content .warning-box > *:last-child { margin-bottom: 0; } /* Optional numbered step styling for procedural guides — apply "steps" as the Additional CSS Class on a List block. */ .entry-content .steps { list-style: none; padding-left: 0; display: grid; gap: 1.25rem; counter-reset: ga-step; } .entry-content .steps > li { counter-increment: ga-step; position: relative; padding-left: 3.1rem; min-height: 2.25rem; } .entry-content .steps > li::before { content: counter(ga-step); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; flex-shrink: 0; } /* Base styling for form markup inside page content (e.g. the Contact page) — works generically with whatever a future form plugin (Contact Form 7, Fluent Forms, WPForms, …) outputs, since it targets plain element/type selectors rather than any specific plugin's classes. Not plugin-specific, no plugin installed by this rule. */ .entry-content form { display: grid; gap: 1.1rem; max-width: 560px; } .entry-content form p { margin: 0; } .entry-content form label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4em; color: var(--color-text); } .entry-content form input[type="text"], .entry-content form input[type="email"], .entry-content form input[type="tel"], .entry-content form input[type="url"], .entry-content form input[type="number"], .entry-content form textarea, .entry-content form select { width: 100%; padding: 0.7em 0.9em; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; background: var(--color-bg); color: var(--color-text); } .entry-content form textarea { min-height: 140px; resize: vertical; } .entry-content form input:focus, .entry-content form textarea:focus, .entry-content form select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); } .entry-content form button, .entry-content form input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: 0.75em 1.6em; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; background: var(--color-primary); color: #fff; cursor: pointer; transition: background-color 0.18s var(--ease); } .entry-content form button:hover, .entry-content form input[type="submit"]:hover { background: var(--color-primary-dark); } .entry-content form .required { color: var(--color-primary-dark); } .entry-content form .error, .entry-content form .form-error, .entry-content form em.error, .entry-content form span.error { display: block; color: #C0392B; font-size: 0.85rem; margin-top: 0.35em; } /* Fluent Forms (Contact Us page) — theme CSS only, no plugin files touched. Scoped to .entry-content .fluentform so this can never reach wp-admin or any other unrelated form; the extra .entry-content ancestor also gives these rules enough specificity to reliably beat the plugin's own .fluentform-scoped defaults regardless of CSS enqueue order. Colors (submit button, required asterisk) are mostly already set via the form's own Fluent Forms settings, not overridden here with !important. */ .entry-content .fluentform { max-width: 680px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; } .entry-content .fluentform .ff-el-group { margin-bottom: 1.35rem; } .entry-content .fluentform .ff_submit_btn_wrapper { margin-bottom: 0; margin-top: 0.25rem; } .entry-content .fluentform label { display: block; font-weight: 600; font-size: 0.95rem; color: var(--color-text); line-height: 1.5; margin-bottom: 0.5em; } .entry-content .fluentform .ff-el-form-control { width: 100%; min-height: 50px; padding: 0.8em 0.95em; border: 1px solid var(--color-border); border-radius: 9px; font-size: 1rem; font-family: inherit; background: var(--color-bg); color: var(--color-text); transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); } .entry-content .fluentform textarea.ff-el-form-control { min-height: 160px; resize: vertical; } .entry-content .fluentform .ff-el-form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(232, 93, 36, 0.12); } .entry-content .fluentform .ff-btn-submit { border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; padding: 0.85em 2em; min-height: 50px; border: none; box-shadow: none; transition: filter 0.18s var(--ease); } .entry-content .fluentform .ff-btn-submit:hover { filter: brightness(0.92); } .entry-content .fluentform .ff-btn-submit:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; } .entry-content .fluentform .ff-el-is-error .ff-el-form-control { border-color: #C0392B; } .entry-content .fluentform .error { color: #C0392B; font-size: 0.85rem; margin-top: 0.4em; line-height: 1.5; } .entry-content .fluentform .ff-message-success { background: #F2F9F1; border: 1px solid #CFE8CB; box-shadow: none; border-radius: var(--radius-md); padding: 1.1rem 1.35rem; color: #2E7D32; font-weight: 500; line-height: 1.6; } .contact-form-privacy-note { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.6; margin-top: 1.25rem; max-width: 680px; } .contact-form-privacy-note a { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px; } /* 14. Responsive -------------------------------------------------------------- */ @media (max-width: 1280px) { .category-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; } .category-grid { grid-template-columns: repeat(3, 1fr); } .adaptive-featured--count-3, .adaptive-featured--count-4 { grid-template-columns: 1fr; } .adaptive-featured__secondary { flex-direction: row; flex-wrap: wrap; } .adaptive-featured__secondary .featured-card { flex: 1 1 260px; } .topic-highlight-layout { grid-template-columns: 1fr; } /* The main card itself is still horizontal here (it only fully stacks at ≤600px, below), but .topic-highlight-layout just stacked above — the card now sits at the section's full container width rather than a ~1.3fr split, so the desktop 250px column would look oversized relative to the row. 210px keeps the visible thumbnail in the requested ~120-140px mobile/tablet range instead. */ .topic-highlight-card { grid-template-columns: 210px 1fr; } } @media (max-width: 900px) { .page-layout { grid-template-columns: 1fr; } .sidebar { order: 3; } .site-header__inner { min-height: 66px; } } @media (max-width: 782px) { /* Mobile nav: a dropdown docked directly under the header, not an off-canvas side drawer. Deliberately replaces the previous position:fixed + transform:translateX(100%) approach — that technique needed exact coordination between a viewport-relative fixed panel, a translate-based closed state, and root-level overflow clipping, and proved fragile across three rounds of bugs (horizontal overflow, then a flex-wrap column-wrap bug that hid items 2+). This model has no analogous failure mode: the panel is position:absolute against .site-header (already position:sticky, so it's already a valid containing block — nothing else needs to change to support this), sized by left:0/right:0 against that same real, on-screen box, so its width is structurally incapable of exceeding the header's own (viewport) width. The closed state is opacity/visibility only — no translateX, so there's no transformed box for any clipping rule to depend on in the first place. */ .primary-navigation { position: absolute; top: 100%; left: 0; right: 0; width: 100%; max-height: calc(100dvh - 90px); overflow-y: auto; background: var(--color-bg); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-md); padding: 0.5rem 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s; z-index: 600; } .primary-navigation.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .nav-menu { display: block; } .nav-menu > li { border-bottom: 1px solid var(--color-border); } .nav-menu > li:last-child { border-bottom: none; } .nav-menu .nav-link { display: block; width: 100%; padding: 0.9rem 1.25rem; border-radius: 0; } .nav-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; margin: 0; padding: 0 0 0.5rem; background: var(--color-bg-soft); display: none; } /* Same specificity (3 classes) as the desktop nested-flyout rule (.nav-menu .sub-menu .sub-menu { left: 100% }) so this actually overrides it here — a lower-specificity override would lose to that rule and reintroduce the exact same off-viewport pattern for a grandchild submenu on mobile. */ .nav-menu .sub-menu .sub-menu { position: static; left: auto; margin: 0; background: transparent; } .nav-menu .sub-menu .nav-link { padding: 0.7rem 1.25rem 0.7rem 2rem; } .nav-menu li.submenu-open > .sub-menu { display: block; } .mobile-menu-toggle { display: flex; } /* nowrap (not wrap): the real content here — a short branding cluster plus two 44px icon buttons — fits a 375px row with ~35-40px to spare, so wrapping is never a layout necessity here, only a latent failure mode. `wrap` let a header that should always be one compact row silently balloon into two full-width rows (branding row + actions row) under any small width/font-metric variance, which is what actually produced the "too tall" header and, as a direct consequence, made normally-generous breadcrumb spacing feel crowded against a header that had quietly doubled in height. Explicit top/bottom padding (replacing reliance on min-height, which only sets a floor and doesn't stop the header from growing past it) now drives the header to its natural content height — the 44px icon buttons plus 12px top/bottom — landing at 68px, inside the requested ~64-72px band. The gap between branding and actions is also tightened here (only relevant now that .primary-navigation is out of flow and no longer supplies that spacing itself) purely to add extra fit margin at the narrowest supported widths. */ .site-header__inner { flex-wrap: nowrap; padding-top: 12px; padding-bottom: 12px; gap: 0.75rem; } /* Matches WP core admin-bar's own ≤782px breakpoint, where its fixed height changes from 32px to 46px. */ .admin-bar .site-header { top: 46px; } /* 20x20 icon + 0.55rem padding was a ~38px hit area, short of the ~44px touch-target guidance for mobile controls (main.css's other header control, .mobile-menu-toggle, is already a full 44x44). Scoped to mobile only — desktop uses a mouse pointer, not a touch target, so leaving it as-is there. */ .header-search-toggle { padding: 0.75rem; } /* .site-header is already position:sticky (a valid containing block for the absolutely-positioned dropdown above), and WordPress's own admin-bar CSS pushes html down via margin-top before anything here ever runs — so .primary-navigation's top:100% already tracks the header's real rendered bottom edge correctly with the admin bar showing, with no extra offset needed here. (The previous off-canvas model needed a manual top:46px fix because it was position:fixed — anchored to the viewport directly, not to the header — which is exactly the class of coordination problem this model avoids.) */ /* Breadcrumb clearance below the sticky header — same 20px value on both classes so single/page (.article-header) and category/search/blog (.archive-header) stay consistent with each other, matching how they already share the identical 2rem value at desktop. Only padding-top is touched; .archive-header's other sides (padding-bottom, used for its own description spacing) are untouched. */ .article-header, .archive-header { padding-top: 20px; } .card-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .footer__grid { grid-template-columns: 1fr; gap: 2.75rem; padding: 3.5rem var(--container-pad) 2.5rem; } .footer-brand__logo img { max-width: 180px; } .newsletter { margin: 0 var(--container-pad); } .newsletter__inner { flex-direction: column; align-items: stretch; text-align: center; } .newsletter__form { max-width: none; } .post-navigation { grid-template-columns: 1fr; } .post-navigation__next { text-align: left; grid-column: 1; } .question-list { columns: 1; } } @media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } .card-grid.card-grid--pair { grid-template-columns: 1fr; } .adaptive-featured--count-2 { grid-template-columns: 1fr; } .adaptive-featured__secondary { flex-direction: column; } .adaptive-featured__secondary .featured-card { flex-basis: auto; } .featured-card--solo, .archive-featured .featured-card--solo { grid-template-columns: 1fr; } .featured-card--solo .featured-card__image-link, .archive-featured .featured-card--solo .featured-card__image-link { aspect-ratio: 1200 / 628; height: auto; min-height: 0; } .featured-card--compact { grid-template-columns: 130px 1fr; } /* Same enlargement as desktop (see the base rule above), scaled to this breakpoint's own starting column width: 130px → 165px keeps the visible image in the requested ~100-115px mobile range (padding stays the fixed 7px set elsewhere) while still leaving the remaining row width comfortable for category/title/date text on a 375px screen. */ .is-homepage .featured-card--compact { grid-template-columns: 165px 1fr; } .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .topic-highlight-card { grid-template-columns: 1fr; } .topic-highlight-card__image { aspect-ratio: 1200 / 628; } /* Homepage image-inset padding, scaled down slightly for mobile — compact cards keep their padding as-is (already the smallest tier; any further reduction risks the "too tiny" thumbnail the task explicitly warned against). */ .is-homepage .featured-card__image-link { padding: 10px; } .is-homepage .card__image-link { padding: 8px; } .is-homepage .topic-highlight-card__image { padding: 8px; } .article-content, .article-header, .related-posts, .post-navigation, .article-comments { max-width: 100%; } .page-404__code { font-size: 3.5rem; } .hero__search .search-form { flex-direction: column; } .hero__search .search-submit { width: 100%; } .site-logo-mark { width: 34px; height: 34px; font-size: 1rem; } .entry-content .fluentform { padding: 1.25rem; } .entry-content .fluentform .ff-btn-submit { width: 100%; } } /* 15. Reduced motion ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }