/* ============================================================================ site-rules.css — CANONICAL site-wide style overrides (v2 — 2026-05-15) ============================================================================ SINGLE source of truth for site-wide CSS. Edit this file once and changes propagate to all 684 pages because every page loads it LAST in . When you need a site-wide tweak (masthead, cards, mobile, footer), add it HERE. Never patch individual pages. Tim has had to ask twice; the v2 rule is firm. ============================================================================ */ /* ============================================================================ MOBILE: <= 880px (tablet + phone) ============================================================================ */ @media (max-width: 880px) { /* Masthead becomes 2-row layout: logo + actions on top, search below */ body .masthead-main { grid-template-columns: 1fr auto !important; gap: 0.5em !important; padding: 0.65em 0.85em !important; row-gap: 0.55em !important; } body .masthead-search { grid-column: 1 / -1 !important; order: 3 !important; max-width: none !important; } body .masthead-actions { gap: 0.4em !important; } /* Hide Light button on mobile — too cramped */ body .masthead-actions .theme-tog, body .theme-tog { display: none !important; } } /* ============================================================================ MOBILE: <= 600px (phone) ============================================================================ */ @media (max-width: 600px) { /* ─── PAGE CONTAINERS ─── */ body .front-page, body .hub-page, body main, body .strategic-body { padding: 1.4em 0.85em 3em !important; } /* ─── MASTHEAD: ultra-compact ─── */ body .masthead-main { padding: 0.55em 0.85em !important; gap: 0.4em !important; } body .masthead-logo { font-size: 1.05rem !important; line-height: 1.1 !important; } body .masthead-logo .small { font-size: 0.55rem !important; letter-spacing: 0.1em !important; margin-top: -1px !important; } body .masthead-search input { font-size: 0.88rem !important; padding: 0.5em 0.9em 0.5em 2em !important; } body .masthead-actions { gap: 0.3em !important; } body .masthead-actions button, body .masthead-actions a { font-size: 0.74rem !important; padding: 0.4em 0.65em !important; white-space: nowrap !important; } /* ─── SECTIONS-BAR: horizontal scroll ─── */ body .sections-bar { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } body .sections-bar::-webkit-scrollbar { display: none !important; } body .sections-bar nav { padding: 0.4em 0.85em !important; gap: 1em !important; flex-wrap: nowrap !important; min-width: max-content !important; } body .sections-bar a { font-size: 0.8rem !important; padding: 0.3em 0 !important; } /* ─── HUB HERO (Training/Nutrition/Supplements page title block) ─── */ body .hub-hero, body .hub-intro { padding: 1.4em 0.85em 1em !important; text-align: center !important; } body .hub-hero h1, body .strategic-body h1, body main h1 { font-size: clamp(1.7rem, 8vw, 2.4rem) !important; line-height: 1.1 !important; margin: 0.3em 0 0.5em !important; } body .hub-hero .deck, body .hub-hero p:not(:has(strong)), body .strategic-body > p { font-size: 1rem !important; line-height: 1.5 !important; max-width: none !important; } body .hub-hero .kicker, body main .hub-kicker { font-size: 0.72rem !important; letter-spacing: 0.18em !important; } /* ─── CARDS GRID: single column ─── */ body .story-grid, body .strategic-grid, body .hub-grid, body .calculators-block .story-grid, body section .story-grid { grid-template-columns: 1fr !important; gap: 1em !important; margin: 1em 0 !important; } /* ─── CARD: padding + base layout ─── */ body .story-card, body .strategic-grid .story-card, body .calculators-block .story-card { padding: 0.9em 1em 1em !important; border-radius: 10px !important; } /* Image-cards: full-width image on top, text below */ body .story-card:has(img) { display: block !important; flex-direction: column !important; padding: 0 0 1em !important; } body .story-card:has(img) img { width: 100% !important; aspect-ratio: 16 / 9 !important; flex: none !important; margin: 0 0 0.7em !important; border-radius: 10px 10px 0 0 !important; } body .story-card:has(img) .kicker, body .story-card:has(img) h3, body .story-card:has(img) p, body .story-card:has(img) .blurb, body .story-card:has(img) .card-deck, body .story-card:has(img) .meta { padding-left: 1em !important; padding-right: 1em !important; flex: none !important; width: auto !important; } /* Non-image cards (calculators, list-only cards) */ body .story-card:not(:has(img)), body .calculators-block .story-card, body .strategic-grid .story-card { display: block !important; flex-direction: column !important; } body .story-card:not(:has(img)) > *, body .calculators-block .story-card > *, body .strategic-grid .story-card > * { display: block !important; width: auto !important; flex: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* ─── CARD TYPOGRAPHY ─── */ body .story-card .kicker, body .calculators-block .story-card .kicker, body .strategic-grid .story-card .kicker { font-size: 0.68rem !important; letter-spacing: 0.14em !important; margin: 0 0 0.3em !important; } body .story-card h3, body .calculators-block .story-card h3, body .strategic-grid .story-card h3 { font-size: 1.1rem !important; line-height: 1.22 !important; margin: 0 0 0.4em !important; } body .story-card p, body .story-card .blurb, body .story-card .card-deck, body .calculators-block .story-card p, body .strategic-grid .story-card p { font-size: 0.92rem !important; line-height: 1.45 !important; margin: 0 0 0.4em !important; } body .story-card .meta { font-size: 0.72rem !important; } /* ─── LEAD STORY ─── */ body .lead-story { grid-template-columns: 1fr !important; gap: 1.2em !important; padding-bottom: 1.5em !important; margin-bottom: 1.5em !important; } body .lead-story h1 { font-size: 1.7rem !important; line-height: 1.15 !important; } body .lead-story .deck { font-size: 1rem !important; line-height: 1.45 !important; } /* ─── SECTION HEADERS ─── */ body .section-block { padding: 1.5em 0 !important; } body .section-block-head { margin-bottom: 1em !important; padding-bottom: 0.5em !important; flex-wrap: wrap !important; } body .section-block-head h2 { font-size: 1.35rem !important; } body .section-block-head .more { font-size: 0.8rem !important; } /* ─── ARTICLE PAGE ─── */ body .art-hero { padding: 1.3em 0.85em 0 !important; } body .art-kicker { font-size: 0.7rem !important; letter-spacing: 0.2em !important; } body .art-headline { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; line-height: 1.1 !important; } body .art-deck { font-size: 1.02rem !important; line-height: 1.45 !important; } body .art-byline { font-size: 0.82rem !important; gap: 0.85em !important; padding: 0.85em 0 !important; } body .art-body { padding: 1.2em 0.85em 3em !important; } body .art-body p { font-size: 1.02rem !important; line-height: 1.7 !important; } body .art-body p:first-of-type:first-letter { font-size: 3.4em !important; } body .art-body h2 { font-size: 1.4rem !important; margin-top: 1.5em !important; } body .art-body ul, body .art-body ol { font-size: 1rem !important; } /* ─── BANNERS + UTILITY ─── */ body .front-banner { font-size: 0.68rem !important; padding: 0.7em 0.85em !important; letter-spacing: 0.12em !important; margin-bottom: 1.3em !important; } body .hub-library-link { font-size: 0.85rem !important; padding: 1em 0.85em !important; } /* ─── FOOTER ─── */ body .news-footer { padding: 2em 0.85em 1em !important; } body .news-footer .brand-row { flex-direction: column !important; align-items: flex-start !important; gap: 0.5em !important; padding-bottom: 1em !important; margin-bottom: 1em !important; } body .news-footer .grid { gap: 1.3em !important; } body .news-footer h5 { font-size: 0.72rem !important; } /* ─── RIBBON + MORE-SECTION ─── */ body .ribbon-section { margin: 1.5em -0.85em !important; padding: 1.5em 0.85em !important; } body .more-section { padding: 2em 0.85em !important; } } /* ============================================================================ EXTRA NARROW: <= 380px (small phones / iPhone SE / older Android) ============================================================================ */ @media (max-width: 380px) { body .masthead-logo { font-size: 0.95rem !important; } body .masthead-logo .small { display: none !important; } body .masthead-actions button, body .masthead-actions a { font-size: 0.7rem !important; padding: 0.35em 0.5em !important; } /* Hide Knowledge hub label, show icon only ideally — for now just shrink */ body .masthead-actions .cta-secondary { padding: 0.35em 0.5em !important; } body .lead-story h1 { font-size: 1.45rem !important; } body .hub-hero h1, body .strategic-body h1 { font-size: 1.55rem !important; } body .story-card h3, body .calculators-block .story-card h3, body .strategic-grid .story-card h3 { font-size: 1rem !important; } body .section-block-head h2 { font-size: 1.18rem !important; } body .art-headline { font-size: 1.5rem !important; } } /* ============================================================================ v3 ADDITIONS — 2026-05-15 — subscribe-pill + extra polish ============================================================================ */ /* Subscribe-pill button in masthead-actions */ @media (max-width: 600px) { body .masthead-actions .subscribe-pill { font-size: 0.7rem !important; padding: 0.4em 0.65em !important; min-height: auto !important; gap: 0.3em !important; } body .masthead-actions .subscribe-pill .pill-label { display: none !important; } body .masthead-actions .subscribe-pill .pill-icon { font-size: 1em !important; } } @media (max-width: 380px) { body .masthead-actions .subscribe-pill { font-size: 0.62rem !important; padding: 0.3em 0.5em !important; } } /* Related-reading cross-link paragraph */ @media (max-width: 600px) { body p.related-reading { margin: 1.5em 0 !important; padding: 0.85em 1em !important; background: var(--paper-2, rgba(255,140,51,0.04)) !important; border-left: 3px solid var(--masthead, #E8784C) !important; border-radius: 0 8px 8px 0 !important; font-size: 0.92rem !important; line-height: 1.5 !important; } } /* Newsletter modal — ensure it's properly sized at narrow widths */ @media (max-width: 600px) { body .subscribe-modal { max-width: calc(100vw - 24px) !important; padding: 1.5rem 1.2rem !important; } body .subscribe-modal h2 { font-size: 1.3rem !important; } }