/* Theme Name: FS Scout Theme URI: https://folliculitisscout.com/ Author: Folliculitis Scout Description: Ultra-lean theme for the Folliculitis Scout blog. Mobile-first, no page builder, no widgets, no jQuery. Renders cmsmasters shortcode posts and nothing else. Version: 1.0.0 Requires at least: 6.5 Requires PHP: 8.1 License: Proprietary Text Domain: fs-scout */ /* ============================================================================ TOKENS - taken from the Next app's globals.css so the two halves of the domain look like one site. A reader crossing from /skin-care/ to /products/ must not notice they changed application. ========================================================================= */ :root { --fs-navy: #12395f; /* headings, the CTA colour the Next app uses */ --fs-ink: #1f2933; /* body text - Next's --fs-color-text-strong */ --fs-body: #4b5563; /* secondary text */ --fs-muted: #6b7280; --fs-line: #e5e7eb; --fs-bg: #ffffff; --fs-bg-soft: #fafafa; --fs-accent: #2f80ed; /* Next's brand-primary - links, eyebrows */ --fs-healing: #10b981; /* RESERVED: means "FA Safe" on the Next side. Do not use it for navigation or CTAs here. */ /* THE STICKY HEADER'S HEIGHT, as a token because two different things need it and they must never drift apart: .fs-header-inner min-height (56px) + its 1px bottom border, plus 8px so content does not sit flush against it. Anything the browser SCROLLS INTO VIEW has to clear this or it lands underneath the header. */ --fs-header-h: 65px; --fs-maxw: 720px; /* measure. Healthline runs ~680-720px. */ --fs-maxw-wide: 1100px; } /* ============================================================================ RESET - minimal. No normalize.css, no bootstrap. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Every in-page anchor stops this far below the viewport top instead of underneath the sticky header. Set once here rather than per-element so a future #anchor cannot get it wrong. */ scroll-padding-top: var(--fs-header-h); } body { margin: 0; background: var(--fs-bg); color: var(--fs-ink); /* 18px. MEASURED FROM THE LIVE SITE, not chosen - fs_contents/theme/posts.css sets `.cmsmasters_text p, p { font-size: 18px !important }` at every width. This is the size 380,922 clicks' worth of readers already read this content at, and 82% of them are on a phone. Do not drop it back to 16 or 17. */ font: 400 18px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--fs-accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--fs-navy); line-height: 1.2; letter-spacing: -.02em; font-weight: 800; } /* THE LIVE SITE'S TYPE SCALE, COPIED EXACTLY. Source: posts.css on folliculitisscout.com, which switches at 768px - so this uses the SAME breakpoint rather than a clamp(), because a clamp only approximates it and cannot be checked line-for-line against the original. live mobile / live >=768px h1 30 / 45 h3 20 / 26 h2 23 / 35 h4 19 / 21 The previous clamps topped out at 41.6 / 28.8 / 21.6 - smaller than live at every level, and the gap widened further down the scale. Desktop half is in the 768px block at the foot of this file. */ h1 { font-size: 30px; } h2 { font-size: 23px; } h3 { font-size: 20px; } h4 { font-size: 19px; } /* 16px MINIMUM on anything focusable. Safari on iOS zooms the page when a focused input is under 16px and never zooms back. */ input, select, textarea, button { font: inherit; font-size: max(16px, 1rem); } .fs-wrap { width: 100%; max-width: var(--fs-maxw); margin: 0 auto; padding: 0 16px; } .fs-wrap--wide { max-width: var(--fs-maxw-wide); } .fs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ============================================================================ HEADER ========================================================================= */ /* ============================================================================ HEADER - matched to the Next site's header, values read from fs-app/src/app/styles/header.css and globals.css on 2026-09-19 rather than eyeballed from a screenshot. ========================================================================= */ .fs-header { /* Next's own rule has its colour stops out of order (100% then 95%), which the browser clamps - the effect is simply #4CB8E3 fading to white. Written in the correct order here so it renders identically without carrying the mistake across. */ background: linear-gradient(180deg, #4CB8E3 0%, #ffffff 100%); box-shadow: 0 2px 10px rgba(23, 52, 83, .03); position: sticky; top: 0; z-index: 50; } .fs-header-inner { max-width: 1200px; margin: 0 auto; padding: 1.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; /* hamburger | logo | links */ align-items: center; gap: 1rem; } .fs-header-logo { display: flex; align-items: center; min-width: 0; } .fs-header-logo img { width: 250px; height: auto; display: block; } /* THE HAMBURGER IS DESKTOP-HIDDEN, exactly as Next does it - the links sit inline instead. */ .fs-header-menu-btn { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; color: #6b7683; cursor: pointer; list-style: none; /* kills the default
triangle */ } .fs-header-menu-btn::-webkit-details-marker { display: none; } /* The desktop row renders the SAME menu the drawer does, so it arrives as a