/* Theme Name: DirectCertify Blog Author: DirectCertify Version: 1.0 */ /* ========================================================================== DirectCertify Blog — style.css Shared by index.html (blog listing) and post.html (single post) Plain custom CSS. No frameworks. -------------------------------------------------------------------------- FONTS (Google Fonts — imported via in each HTML ): • Single family : "Inter" — used for ALL text (headings, nav, body). Weights used: 400 (regular), 500 (medium), 600 (semi-bold), 700 (bold). Both --font-head and --font-body point at Inter so the whole site is consistent; change them here to swap fonts. ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS — colors extracted from the site screenshots + logo.svg Every other rule below references these variables (Task 1 requirement). -------------------------------------------------------------------------- */ :root { /* Brand — exact values sampled from Images/logo.svg */ --accent: #27b1ba; /* teal — buttons, links, accent fan icon */ --accent-dark: #1f929a; /* teal hover state (derived, ~12% darker) */ --ink: #434646; /* charcoal — logo text + headings */ /* Header */ --nav-text: #565D6D; /* nav + Categories dropdown link text (per target) */ --header-bg: #ffffff; --search-bg: #f3f3f3; /* light-grey search field */ --search-text: #6b6f70; /* Footer */ --footer-bg: #000000; /* black footer */ --footer-text: #ffffff; --footer-muted: #b9bdbe; /* dimmed footer text / dates */ --card-bg: #ffffff; /* white cards inside footer */ --card-alt: #ededed; /* grey exam/discussion rows inside cards */ --badge-bg: #111111; /* black exam-code pill */ --credit-link: #27b1ba; /* Neutral surfaces (blog body) */ --surface: #ffffff; --page-bg: #f6f7f8; --text: #2f3234; /* body ink — soft near-black, not #000 (gentler on the eye) */ --text-muted: #5c6367; /* darkened from #74797b → ~5.8:1 on white, passes WCAG AA */ --border: #e4e6e7; --thumb-bg: #dfe3e5; /* placeholder thumbnail fill */ /* Typography */ --font-head: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* Layout */ --container: 1200px; --radius: 10px; --radius-sm: 6px; --radius-pill: 999px; --shadow: 0 6px 20px rgba(0, 0, 0, .08); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .06); /* Spacing scale (4px base) — use these for consistent rhythm */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --gap: 24px; } /* -------------------------------------------------------------------------- 2. RESET / BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--text); background: var(--page-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); color: var(--ink); line-height: 1.25; margin: 0 0 .5em; font-weight: 600; } p { margin: 0 0 1.1em; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-dark); } img { max-width: 100%; display: block; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Shared button */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 0; border-radius: var(--radius-pill); font-family: var(--font-head); font-weight: 500; font-size: 15px; line-height: 1; text-align: center; white-space: nowrap; transition: background-color .18s ease, transform .18s ease; } .btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); } .btn svg { width: 18px; height: 18px; } /* ========================================================================== 3. SITE HEADER ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; } /* NOTE: the dark promo/announcement bar (coupon + countdown) was removed — it doesn't belong on the blog. Related CSS/HTML/vars deleted. */ /* 3a. Main header -------------------------------------------------------- */ .header-main { background: var(--header-bg); border-bottom: 1px solid var(--border); } /* Full-width header so the logo sits close to the browser edge (like the reference), instead of being constrained to the centered 1200px container. Dimensions measured off the reference screenshot's proportions: header content height ~40px + 16px vertical padding = ~72px band logo ~34px (≈48% of band) search ~38px tall / 215px wide (≈52% of band) gaps ~34px, evenly distributed across the left cluster */ .header-inner { display: flex; align-items: center; gap: 34px; max-width: 100%; padding: 16px 30px; } .site-logo { flex: 0 0 auto; display: flex; line-height: 0; } .site-logo img { height: 34px; width: auto; display: block; } /* Search — compact, sharp corners, matches the reference proportions */ .header-search { flex: 0 0 215px; display: flex; align-items: center; gap: 8px; background: var(--search-bg); border: 1px solid var(--border); border-radius: 3px; padding: 8px 14px; } .header-search svg { width: 16px; height: 16px; color: var(--search-text); flex: 0 0 auto; } .header-search input { border: 0; background: transparent; outline: none; width: 100%; font-size: 14px; line-height: 1.4; color: var(--ink); font-family: var(--font-body); } .header-search input::placeholder { color: var(--search-text); } /* Primary nav — sits directly after the search with even gaps (no auto margin, which previously pushed it to the far right and left an uneven gap). */ .site-nav { margin-left: 0; } .nav-list { display: flex; align-items: center; gap: 32px; } .nav-list > li { position: relative; } .nav-list a { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--nav-text); display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; white-space: nowrap; /* keep each item on one line */ } .nav-list a:hover { color: var(--accent); } .nav-list .caret { width: 13px; height: 13px; transition: transform .2s ease; } /* Categories mega-dropdown — opens on hover, closes on mouse leave */ .has-dropdown > .dropdown { position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, 6px); background: #fff; border: 2px solid var(--accent); box-shadow: var(--shadow); padding: 22px 26px; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 20; } .has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .has-dropdown:hover .caret { transform: rotate(180deg); } /* Two rows of five categories, with ALL CATEGORIES pinned top-right */ .dropdown.mega { display: flex; align-items: flex-start; gap: 18px 30px; } .mega-grid { display: grid; grid-template-columns: repeat(5, auto); gap: 20px 38px; } .mega-grid a { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--nav-text); white-space: nowrap; padding: 0; text-decoration: underline; text-underline-offset: 3px; } .mega-grid a:hover { color: var(--accent); } .all-categories { flex: 0 0 auto; align-self: flex-start; background: var(--accent); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .6px; padding: 12px 20px; border-radius: 3px; white-space: nowrap; } .all-categories:hover { background: var(--accent-dark); color: #fff; } /* Header actions — cart + Login/Register removed for the blog; only the mobile hamburger lives here now. */ .header-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; } /* Hamburger — hidden on desktop */ .nav-toggle { display: none; background: transparent; border: 0; padding: 4px; color: var(--ink); } .nav-toggle svg { width: 28px; height: 28px; } /* ========================================================================== 4. PAGE / BLOG LISTING ========================================================================== */ .page-main { padding: 40px 0 60px; } .page-head { text-align: center; margin-bottom: 36px; } .page-head h1 { font-size: clamp(28px, 4vw, 40px); } .page-head p { color: var(--text-muted); max-width: 620px; margin: 0 auto; } /* Grid of post cards */ .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .post-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; } .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } /* Placeholder thumbnail */ .post-thumb { aspect-ratio: 16 / 9; background: var(--thumb-bg); display: grid; place-items: center; position: relative; overflow: hidden; } .post-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(39,177,186,.16), rgba(67,70,70,.10)); } .post-thumb svg { width: 46px; height: 46px; color: #ffffff; opacity: .85; position: relative; } .post-thumb .cat-tag { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .4px; padding: 5px 11px; border-radius: var(--radius-pill); font-family: var(--font-head); } .post-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; } .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; } .post-meta .meta-item { display: inline-flex; align-items: center; gap: 6px; } .post-meta svg { width: 14px; height: 14px; } .post-meta a { color: var(--text-muted); font-weight: 600; } .post-meta a:hover { color: var(--accent); } .post-title { font-size: 19px; margin-bottom: 10px; } .post-title a { color: var(--ink); } .post-title a:hover { color: var(--accent); } .post-excerpt { color: var(--text-muted); font-size: 14.5px; margin-bottom: 18px; } .read-more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--accent); padding: 6px 2px 6px 0; /* taller tap target without shifting the card layout */ } .read-more svg { width: 16px; height: 16px; transition: transform .18s ease; } .read-more:hover svg { transform: translateX(4px); } /* Pagination */ .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 46px; } .pagination a, .pagination span { min-width: 44px; height: 44px; padding: 0 12px; /* 44px = WCAG tap-target min */ display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font-family: var(--font-head); font-weight: 500; font-size: 15px; } .pagination a:hover { border-color: var(--accent); color: var(--accent); } .pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; } .pagination .disabled { opacity: .45; pointer-events: none; } .pagination svg { width: 16px; height: 16px; } /* ========================================================================== 5. SINGLE POST (post.html) Two-column reading layout: article (constrained measure) + sticky TOC. ========================================================================== */ .post-container { display: grid; grid-template-columns: minmax(0, 720px) 260px; gap: 48px; justify-content: center; /* center the article+TOC group within the page */ align-items: start; } /* Article column — max 720px keeps body copy at ~66–72 chars/line for comfortable long-form reading (not full-bleed on wide screens). */ .post-layout { max-width: 720px; min-width: 0; margin: 0; } .breadcrumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; } .breadcrumbs a { color: var(--text-muted); } .breadcrumbs a:hover { color: var(--accent); } .breadcrumbs .sep { margin: 0 8px; } .article-head { margin-bottom: 28px; } .article-head .cat-tag { display: inline-block; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .4px; padding: 5px 13px; border-radius: var(--radius-pill); font-family: var(--font-head); margin-bottom: 16px; } .article-title { font-size: clamp(29px, 4vw, 42px); line-height: 1.2; margin-bottom: 18px; } .article-hero { aspect-ratio: 16 / 7; background: var(--thumb-bg); border-radius: var(--radius); display: grid; place-items: center; position: relative; overflow: hidden; margin-bottom: 36px; } .article-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(39,177,186,.16), rgba(67,70,70,.10)); } .article-hero svg { width: 64px; height: 64px; color: #fff; opacity: .85; position: relative; } /* Long-form body copy: 18px / 1.75 for sustained reading */ .article-body { font-size: 18px; line-height: 1.75; color: var(--text); } .article-body p { margin: 0 0 1.5em; } .article-body h2 { font-size: 26px; line-height: 1.3; margin: 2em 0 .55em; scroll-margin-top: 90px; } .article-body h3 { font-size: 21px; line-height: 1.35; margin: 1.7em 0 .5em; scroll-margin-top: 90px; } .article-body ul.bullets { list-style: disc; padding-left: 24px; margin: 0 0 1.5em; } .article-body ul.bullets li { margin-bottom: 10px; } .article-body blockquote { margin: 1.8em 0; padding: 18px 24px; border-left: 4px solid var(--accent); background: #fff; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text); font-style: italic; } /* darker teal for inline links → ~4.8:1 on white (WCAG AA), still on-brand; underline means links aren't distinguished by color alone either */ .article-body a { color: #0d7580; text-decoration: underline; text-underline-offset: 2px; } .article-body a:hover { color: var(--accent-dark); } .article-author { display: flex; align-items: center; gap: 14px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border); } .author-avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 20px; flex: 0 0 auto; } .article-author .name { font-family: var(--font-head); font-weight: 600; color: var(--ink); } .article-author .role { font-size: 14px; color: var(--text-muted); } /* --- Table of Contents (sticky sidebar on desktop, collapsible on mobile) - The box sticks at top:90px. Its own height is capped to whatever viewport space is left below that, so a long heading list scrolls INSIDE the box instead of running off screen with no way to reach it but scrolling the whole page. Mobile drops the cap again (see 7. RESPONSIVE) — the accordion there isn't sticky, so it's free to just expand inline like before. */ .post-sidebar { position: sticky; top: 90px; align-self: start; } .toc { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; max-height: calc(100vh - 90px - 24px); display: flex; flex-direction: column; overflow: hidden; /* only .toc-list scrolls; this keeps the corners clean */ } /* One button holds the "On this page" label + caret. On desktop it reads as a static heading (caret hidden, not interactive); on mobile it toggles. */ .toc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; flex: 0 0 auto; background: transparent; border: 0; padding: 0; cursor: default; font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); text-align: left; } /* caret is an HTML wrapper (not the raw ) so the rotate transform is reliable across engines */ .toc-caret { display: none; line-height: 0; transition: transform .2s ease; } .toc-caret svg { width: 16px; height: 16px; display: block; } /* the scrollable region: flexes to fill whatever room .toc has left under its max-height, then scrolls internally once the heading list outgrows that. Scrollbar treatment matches .card-scroll in the footer widgets. */ .toc-list { display: block; margin-top: 12px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; } .toc-list::-webkit-scrollbar { width: 7px; } .toc-list::-webkit-scrollbar-thumb { background: #cfd3d4; border-radius: 4px; } .toc-list a { display: block; padding: 7px 10px; font-size: 14px; line-height: 1.4; color: var(--text-muted); border-left: 2px solid transparent; border-radius: 0 4px 4px 0; transition: color .15s ease, background-color .15s ease, border-color .15s ease; } .toc-list a:hover { color: var(--ink); background: var(--page-bg); } .toc-list a.is-active { color: var(--accent); font-weight: 600; border-left-color: var(--accent); background: rgba(39, 177, 186, .07); } .toc-list .toc-h3 a { padding-left: 24px; font-size: 13.5px; } /* indent sub-sections */ /* --- Related articles (end of post) ------------------------------------- */ .related-posts { margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--border); } .related-posts h2 { font-size: 22px; margin-bottom: 20px; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* --- Reading progress bar (fixed, very top of viewport) ------------------ */ .reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: transparent; z-index: 200; pointer-events: none; } .reading-progress > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; } /* --- Back-to-top button -------------------------------------------------- Pill (not a bare circle) with icon + visible label so its purpose reads at a glance. Label swaps to a short "Top" on phones (see 640px block). */ .back-to-top { position: fixed; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: var(--radius-pill); background: var(--accent); color: #fff; border: 0; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; line-height: 1; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); /* lifts it off the page */ opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s, background-color .2s; z-index: 90; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .back-to-top:hover { background: var(--accent-dark); } .back-to-top svg { width: 18px; height: 18px; flex: 0 0 auto; } .btt-short { display: none; } /* swapped in below 640px */ /* ========================================================================== 6. SITE FOOTER ========================================================================== */ .site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 50px 0 44px; position: relative; } /* 3-column top area: Recent Blog Posts | More Blog Categories | Brand+links */ .footer-cards { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 30px; align-items: start; } /* Cards — shared white box style (same dimensions as the original widgets) */ .footer-card { background: var(--card-bg); border-radius: var(--radius); padding: 22px 20px; color: var(--ink); } .footer-card > h2 { text-align: center; font-size: 26px; margin-bottom: 18px; color: var(--ink); } .card-scroll { max-height: 340px; overflow-y: auto; padding-right: 6px; } .card-scroll::-webkit-scrollbar { width: 7px; } .card-scroll::-webkit-scrollbar-thumb { background: #cfd3d4; border-radius: 4px; } /* Widget 1: Recent Blog Posts — title + date badge rows */ .post-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card-alt); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px; } .post-item-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; } .post-item:hover .post-item-title { color: var(--accent); } .post-item-date { flex: 0 0 auto; background: #111; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; border-radius: var(--radius-sm); padding: 7px 12px; } /* Widget 2: More Blog Categories — simple clickable list */ .cat-list li { border-bottom: 1px solid var(--border); } .cat-list li:last-child { border-bottom: 0; } .cat-list a { display: flex; align-items: center; justify-content: space-between; padding: 11px 6px; font-size: 15px; font-weight: 500; color: var(--ink); } .cat-list a::after { content: "\203A"; color: var(--text-muted); font-size: 18px; line-height: 1; } .cat-list a:hover, .cat-list a:hover::after { color: var(--accent); } /* Brand column (Login/Register button removed) */ .footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .footer-brand .footer-logo { height: 54px; width: auto; /* TODO: confirm exact px vs live site footer logo */ /* logo.svg has dark text + teal fan; whiten it for the black footer */ filter: brightness(0) invert(1); } .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 40px; width: 100%; } .footer-links a { color: var(--footer-text); font-size: 15px; display: inline-block; padding: 5px 0; } .footer-links a:hover { color: var(--accent); } /* Social row — white circular badges with black icon (per reference) */ .footer-social { display: flex; gap: 14px; margin-top: 4px; } .footer-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111; transition: transform .18s ease, background-color .18s ease, color .18s ease; } .footer-social a:hover { background: var(--accent); color: #fff; transform: translateY(-2px); } .footer-social svg { width: 19px; height: 19px; } /* Credit line — sits inside the brand column, directly under the social icons. Values taken exactly from the original site's DevTools computed style: font-size 12px, font-weight 400, color #FFFFFF, margin 32px 0 0. NOTE: the original uses "Poppins" here, but you had me standardize the whole blog on Inter — keeping Inter for consistency. Say the word to re-import Poppins for this one line. */ .footer-credit { margin: 32px 0 0; padding: 0; border: 0; text-align: left; /* left-aligned within the column (was centered) */ font-family: var(--font-body); font-size: 12px; font-weight: 400; color: #FFFFFF; } .footer-credit a { color: var(--credit-link); /* teal link — TODO: confirm exact link hex/underline (no separate computed box in screenshot) */ font-weight: 400; text-decoration: underline; } /* ========================================================================== 7. RESPONSIVE ========================================================================== */ /* Tablet */ @media (max-width: 992px) { .post-grid { grid-template-columns: repeat(2, 1fr); } .footer-cards { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } /* Post page: single column; TOC becomes a collapsible accordion up top */ .post-container { grid-template-columns: 1fr; gap: 0; } .post-sidebar { position: static; order: -1; margin-bottom: 26px; } .toc { padding: 4px 16px; max-height: none; overflow: visible; } /* not sticky here — drop the desktop scroll cap, let it expand inline */ .toc-toggle { padding: 15px 0; cursor: pointer; } /* 44px+ tap target */ .toc-caret { display: inline-block; } /* caret visible = it's tappable */ .toc-list { display: none; margin-top: 0; padding: 4px 0 12px; } /* collapsed by default */ .toc.is-open .toc-list { display: block; } .toc.is-open .toc-caret { transform: rotate(180deg); } .toc-list a { padding: 11px 10px; } /* larger tap targets on mobile */ .toc-list .toc-h3 a { padding-left: 24px; } .related-grid { grid-template-columns: repeat(2, 1fr); } .footer-social a { width: 44px; height: 44px; } /* 44px min on touch */ /* Collapse nav into slide-down panel */ .nav-toggle { display: inline-flex; order: 3; } .header-inner { flex-wrap: wrap; gap: 14px; } .header-search { order: 4; flex: 1 1 100%; } .site-nav { order: 5; flex: 1 1 100%; margin-left: 0; max-height: 0; overflow-x: hidden; overflow-y: hidden; transition: max-height .3s ease; } /* Was a fixed 640px cap — too short once the Categories mega-dropdown (10 items) is open, which cropped the list on phone-height screens. Cap to the viewport instead and let the panel scroll internally. */ .site-nav.is-open { max-height: calc(100vh - 80px); overflow-y: auto; } .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 4px; } .nav-list > li { border-bottom: 1px solid var(--border); } .nav-list a { padding: 12px 4px; } /* Mega-dropdown becomes static/expandable inside the mobile panel. The positioning resets below are !important on purpose: on desktop the dropdown is absolutely positioned (left:50%; transform:translateX(-50%)). If that ever leaks onto mobile — via a cached/older stylesheet, a WP plugin, or a specificity clash — the panel gets shoved half its width off to the left and only a thin sliver of each category shows (the "cropped" bug). Forcing it back to static flow here makes that impossible. */ .has-dropdown > .dropdown { position: static !important; left: auto !important; right: auto !important; transform: none !important; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 8px 14px; width: auto; max-width: 100%; display: none; } .has-dropdown.is-open > .dropdown.mega { display: flex; flex-direction: column; gap: 12px; } .has-dropdown.is-open .caret { transform: rotate(180deg); } /* minmax(0,1fr) (not auto) caps each column to half the panel so long names can never push the grid wider than the screen. */ .dropdown.mega .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; justify-content: start; } .dropdown.mega .all-categories { align-self: flex-start; } } /* Mobile */ @media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } .footer-cards { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } .header-inner { gap: 12px; } .site-logo img { height: 32px; } .page-main { padding: 28px 0 44px; } .footer-links { grid-template-columns: 1fr 1fr; } /* Slightly smaller body copy on phones, still ≥16px */ .article-body { font-size: 17px; } /* Compact pill on phones: icon + short "Top" label (still 44px tall) */ .back-to-top { right: 14px; bottom: 14px; height: 44px; padding: 0 16px; gap: 6px; } .btt-full { display: none; } .btt-short { display: inline; } } /* Extra-small */ @media (max-width: 400px) { .footer-links { grid-template-columns: 1fr; } } /* ========================================================================== 8. PRINT — clean, ink-friendly study-guide printout ========================================================================== */ @media print { .site-header, .site-footer, .post-sidebar, .reading-progress, .back-to-top, .article-hero, .related-posts, .breadcrumbs { display: none !important; } body { background: #fff; color: #000; } .page-main { padding: 0; } .post-container { display: block; } .post-layout { max-width: 100%; } .article-body { font-size: 12pt; line-height: 1.5; color: #000; } .article-body a { color: #000; text-decoration: underline; } .article-body h2, .article-body h3 { break-after: avoid; } .article-body p, .article-body blockquote, .article-body li { break-inside: avoid; } } /* ========================================================================== 11. WORDPRESS COMPATIBILITY (added during the WP theme conversion) Everything above this line is the original static design, unchanged. These rules only cover markup that WordPress itself emits and the static mockup faked by hand: block-editor content, generated pagination, and real featured images in the placeholder thumbnail boxes. Safe to delete any block below if you'd rather handle it differently. ========================================================================== */ /* --- Real featured images fill the boxes that held placeholder SVGs ------ */ .post-thumb img, .article-hero img { position: relative; width: 100%; height: 100%; object-fit: cover; } /* --- WP's accessibility class (design used .visually-hidden) ------------- */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- the_posts_pagination() wraps its links in an extra .nav-links div --- */ .pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; } /* --- Block editor (Gutenberg) content inside .article-body -------------- The mockup hand-wrote