/* ═══════════════════════════════════════════════════════════════ STYLES.CSS — Dual-mode design system EDITORIAL MODE: Clean cream paper, typography-driven, no imagery MAGAZINE MODE: Blurred hero images, gradient body overlay, atmospheric Mode is set by site.engine.js reading site.config.js visualStyle. Colors are CSS custom properties set at runtime. This file NEVER needs editing when forking. ═══════════════════════════════════════════════════════════════ */ /* ── TOKENS ── 2026-05-28: palette remapped to the homepage's overhauled warm-editorial language (parchment / ink / brass / terracotta). Token NAMES preserved so every component selector inherits via the cascade with zero selector edits. NOTE: --accent + --secondary (and their light/hover variants) are ALSO set at runtime by site.engine.js from site.config.js colors{} (inline style on wins specificity), so the live accent/secondary values live in site.config.js — these defaults are the no-JS fallback and must match. */ :root{ --accent:#88642f;--accent-light:#f4ead3;--accent-hover:#7a5826; --secondary:#9a3f24;--secondary-light:#f3e2d8;--secondary-hover:#7a3019; --paper:#f5efe5;--dark:#0c1e3a;--dark-mid:#1a2e52;--muted:#a39882; --text:#3a3528;--text-light:#6b6253;--border:#e7dfd2;--cream:#faf6f0; --display:'Fraunces',Georgia,serif;--body:'Satoshi',system-ui,sans-serif; --mono:'IBM Plex Mono','Fira Code',monospace; --max-w:1080px;--content-w:720px;--radius:10px; --shadow-sm:0 1px 2px rgba(12,30,58,.06);--shadow-md:0 8px 24px rgba(12,30,58,.08); --shadow-lg:0 24px 48px -12px rgba(12,30,58,.16) } /* ── RESET ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body{font-family:var(--body);color:var(--text);background:var(--paper);font-size:1rem;line-height:1.7; background-image: radial-gradient(at 8% 0%,rgba(168,123,58,.05) 0,transparent 38%), radial-gradient(at 92% 0%,rgba(12,30,58,.04) 0,transparent 38%), radial-gradient(at 50% 100%,rgba(154,63,36,.04) 0,transparent 50%); background-attachment:fixed} img{max-width:100%;display:block} /* ── CROSS-SITE BAR (removed — network links now in footer only) ── */ /* ── NAV ── */ nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:var(--max-w);margin:0 auto;padding:1rem 1.5rem;border-bottom:1px solid var(--border)} .nav-left{display:flex;align-items:center;gap:1.5rem} .nav-left a{text-decoration:none;color:var(--text-light);font-size:.875rem;font-weight:500;transition:color .2s} .nav-left a:hover{color:var(--dark)} .nav-brand{font-family:var(--display);font-size:1.4rem;font-weight:600;background:var(--dark);color:#fff;padding:.35rem 1.1rem;border-radius:6px;text-decoration:none;letter-spacing:-.02em;justify-self:center} .nav-brand span{color:var(--accent)} .nav-brand:hover{text-decoration:none;opacity:.92} .nav-right{display:flex;align-items:center;justify-content:flex-end;gap:1rem} .nav-links{list-style:none;display:flex;gap:1.75rem} .nav-links a{text-decoration:none;color:var(--text-light);font-size:.875rem;font-weight:500;transition:color .2s} .nav-links a:hover{color:var(--dark)} .nav-cta{font-size:.8125rem;font-weight:700;color:#fff;text-decoration:none;background:var(--accent-fill,var(--accent));padding:.5rem 1.25rem;border-radius:6px;transition:all .2s;white-space:nowrap} .nav-cta:hover{background:var(--accent-hover);transform:translateY(-1px)} @media(max-width:768px){.nav-left{gap:.6rem}.nav-left a{font-size:.75rem}.nav-brand{font-size:1.1rem;padding:.3rem .8rem}.nav-cta{font-size:.75rem;padding:.4rem 1rem}} /* ── FOOTER DISCLOSURE ── */ .footer-disclosure{background:var(--accent-light);border:1px solid var(--border);border-radius:6px;padding:.6rem 1rem;font-size:.75rem;color:var(--text-light);line-height:1.5;margin:1rem 0;text-align:center;flex-basis:100%} .footer-disclosure a{color:var(--accent);font-weight:500} /* ── BREADCRUMBS ── */ .breadcrumbs{max-width:var(--max-w);margin:0 auto;padding:.875rem 1.5rem;font-size:.75rem;color:var(--muted)} .breadcrumbs a{color:var(--text-light);text-decoration:none}.breadcrumbs a:hover{color:var(--accent)} /* ═══════════════════════════════════════════════════════════════ HOMEPAGE-PARITY CHROME (2026-05-28) Ribbon + circular-seal brand nav ported from index.html so the engine-injected article header matches the homepage instead of the old centered dark pill. Literal parchment/ink/brass hexes for exact parity. The .site-nav selector outranks the legacy bare `nav` rule. ═══════════════════════════════════════════════════════════════ */ .ribbon{background:var(--dark);color:#faf6f0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:9px 24px;text-align:center;border-bottom:1px solid rgba(168,123,58,.4)} .ribbon b{color:#c69b54;font-weight:600} .ribbon a{color:inherit;text-decoration:underline;text-decoration-color:rgba(168,123,58,.4);text-underline-offset:3px;margin-left:.6em} nav.site-nav{max-width:var(--max-w);margin:0 auto;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--border)} nav.site-nav .brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--dark)} .brand-seal{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#c69b54,#88642f 60%,#7a5826 100%);display:flex;align-items:center;justify-content:center;color:#fffbeb;font-family:var(--display);font-weight:600;font-size:18px;box-shadow:inset 0 1px 2px rgba(255,255,255,.4),0 2px 8px rgba(168,123,58,.3);border:1px solid rgba(122,88,38,.4);position:relative;flex-shrink:0} .brand-seal::before{content:"";position:absolute;inset:3px;border-radius:50%;border:1px dashed rgba(255,251,235,.5)} .brand-name{font-family:var(--display);font-size:22px;font-weight:600;line-height:1;letter-spacing:-.01em;color:var(--dark)} .brand-name span{color:var(--accent)} .brand-sub{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-light);margin-top:3px} nav.site-nav .nav-links{display:flex;gap:30px;list-style:none;margin:0;padding:0} nav.site-nav .nav-links a{color:var(--dark);text-decoration:none;font-size:14px;font-weight:500;position:relative;padding:4px 0;transition:color .2s} nav.site-nav .nav-links a:hover{color:var(--accent)} nav.site-nav .nav-links a::after{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--accent-fill,var(--accent));transition:width .25s} nav.site-nav .nav-links a:hover::after{width:100%} nav.site-nav .nav-cta{background:var(--dark);color:#fffbeb;padding:10px 20px;border-radius:6px;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.02em;border:1px solid var(--dark);white-space:nowrap;transition:all .2s} nav.site-nav .nav-cta:hover{background:var(--accent-fill,var(--accent));border-color:var(--accent);color:#fffbeb;transform:none} @media(max-width:880px){nav.site-nav{padding:16px}nav.site-nav .nav-links{display:none}} /* ═══════════════════════════════════════════════════════════════ HERO — Two modes Editorial: Clean text on cream, no background image Magazine: Blurred background image with dark overlay (set by engine.js) ═══════════════════════════════════════════════════════════════ */ .hero{max-width:var(--max-w);margin:0 auto;padding:4rem 1.5rem 3rem;text-align:center} .hero-tag{font-family:var(--mono);font-size:.75rem;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem;display:block} .hero h1{font-family:var(--display);font-size:clamp(2.5rem,6vw,3.5rem);font-weight:500;line-height:1.1;letter-spacing:-.03em;color:var(--dark);margin-bottom:1.25rem} .hero h1 em{font-style:italic;color:var(--accent)} .hero p{font-size:1.125rem;color:var(--text-light);max-width:600px;margin:0 auto 2rem;line-height:1.6} .hero-cta{display:inline-block;padding:.875rem 2rem;background:var(--accent-fill,var(--accent));color:#fff;font-weight:700;font-size:1rem;text-decoration:none;border-radius:6px;transition:all .2s;box-shadow:var(--shadow-sm)} .hero-cta:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)} /* Magazine hero overrides (applied by engine.js inline styles + these classes) */ .hero--magazine{background-size:cover;background-position:center;border-radius:var(--radius);margin:0 1.5rem;padding:5rem 2rem 4rem;position:relative} .hero--magazine::before{content:'';position:absolute;inset:0;border-radius:var(--radius);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .hero--magazine>*{position:relative;z-index:1} .hero--magazine .hero-tag{color:rgba(255,255,255,.7)} .hero--magazine h1{color:#fff} .hero--magazine p{color:rgba(255,255,255,.85)} .hero--magazine .hero-cta{background:var(--secondary);box-shadow:0 4px 20px rgba(0,0,0,.3)} .hero--magazine .hero-cta:hover{background:var(--secondary-hover)} /* ═══════════════════════════════════════════════════════════════ ARTICLE ═══════════════════════════════════════════════════════════════ */ .article-wrap{max-width:var(--content-w);margin:0 auto;padding:0 1.5rem 4rem} .article-meta-bar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:1.5rem;font-size:.8125rem;color:var(--text-light)} .article-tag{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)} .article-wrap h1{font-family:var(--display);font-size:clamp(2rem,5vw,2.75rem);font-weight:500;line-height:1.15;letter-spacing:-.02em;margin-bottom:1.25rem;color:var(--dark)} .article-intro{font-size:1.0625rem;color:var(--text-light);line-height:1.7;margin-bottom:2.5rem} .article-intro strong{color:var(--dark)} .article-wrap h2{font-family:var(--display);font-size:1.375rem;font-weight:500;margin-top:2.75rem;margin-bottom:1rem;color:var(--dark);letter-spacing:-.01em} .article-wrap h3{font-family:var(--display);font-size:1.125rem;font-weight:400;margin-top:2rem;margin-bottom:.75rem;color:var(--dark)} .article-wrap p{margin-bottom:1.25rem} .article-wrap ul,.article-wrap ol{margin-bottom:1.25rem;padding-left:1.5rem} .article-wrap li{margin-bottom:.5rem} .article-wrap a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} .article-wrap a:hover{color:var(--accent-hover)} /* ── SCORE CARD (BagEngine pattern: rating + pros/cons at top) ── */ .score-card{display:grid;grid-template-columns:120px 1fr 1fr;gap:1.5rem;background:#fff;border:2px solid var(--accent);border-radius:var(--radius);padding:1.75rem;margin:2rem 0;box-shadow:var(--shadow-md)} .score-card-rating{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--border);padding-right:1.5rem} .score-card-number{font-family:var(--display);font-size:2.5rem;font-weight:600;color:var(--accent);line-height:1} .score-card-label{font-family:var(--mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:.375rem} .score-card-stars{color:var(--secondary);font-size:1rem;margin-top:.25rem} .score-card-pros,.score-card-cons{font-size:.8125rem;line-height:1.7} .score-card-pros li::marker{color:#16a34a}.score-card-cons li::marker{color:#dc2626} .score-card-pros strong,.score-card-cons strong{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:.375rem} .score-card-pros strong{color:#16a34a}.score-card-cons strong{color:#dc2626} @media(max-width:600px){.score-card{grid-template-columns:1fr;text-align:center}.score-card-rating{border-right:none;border-bottom:1px solid var(--border);padding-right:0;padding-bottom:1rem}} /* ── QUICK VERDICT (Nesyona pattern) ── */ .quick-verdict{background:var(--accent-light);border-left:3px solid var(--accent);padding:1.25rem 1.5rem;border-radius:0 var(--radius) var(--radius) 0;margin:1.5rem 0;font-size:.9375rem} .quick-verdict strong{display:block;font-family:var(--display);margin-bottom:.5rem;color:var(--dark);font-size:1rem} /* ── CALLOUT ── */ .callout{background:var(--accent-light);border-left:3px solid var(--accent);padding:1.25rem 1.5rem;border-radius:0 var(--radius) var(--radius) 0;margin-bottom:1.5rem;font-size:.9375rem} .callout strong{display:block;font-family:var(--display);margin-bottom:.375rem;color:var(--dark)} .callout.warning{background:#fef2f2;border-color:#ef4444}.callout.warning strong{color:#dc2626} .callout.success{background:#f0fdf4;border-color:#16a34a}.callout.success strong{color:#16a34a} .callout.tip{background:var(--secondary-light);border-color:var(--secondary)}.callout.tip strong{color:var(--secondary)} /* ── CTA BLOCK (BagEngine: action boxes with links) ── */ .cta-block{background:var(--cream);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin:2rem 0;display:flex;gap:1.25rem;align-items:center} .cta-block-icon{font-size:2rem;flex-shrink:0} .cta-block-body{flex:1} .cta-block-title{font-family:var(--display);font-weight:500;font-size:1rem;color:var(--dark);margin-bottom:.25rem} .cta-block-desc{font-size:.8125rem;color:var(--text-light);line-height:1.5;margin-bottom:.5rem} .cta-block .btn-deal{font-size:.8125rem;padding:.5rem 1.25rem} @media(max-width:600px){.cta-block{flex-direction:column;text-align:center}} /* ── PRODUCT CARD ── */ .product-card{background:#fff;border:2px solid var(--accent);border-radius:var(--radius);padding:1.75rem;margin:2rem 0;position:relative;box-shadow:var(--shadow-md)} .product-card-badge{position:absolute;top:-10px;left:16px;background:var(--accent-fill,var(--accent));color:#fff;font-family:var(--mono);font-size:.6875rem;font-weight:700;padding:.3rem .875rem;border-radius:100px;text-transform:uppercase;letter-spacing:.05em} .product-card-name{font-family:var(--display);font-size:1.25rem;color:var(--dark);margin-bottom:.25rem;margin-top:.5rem} .product-card-price{font-family:var(--mono);font-size:.9375rem;color:var(--accent);font-weight:700;margin-bottom:.75rem} .product-card-body{font-size:.875rem;color:var(--text-light);line-height:1.6;margin-bottom:1rem} .product-card-body a{color:var(--accent)} /* ── PROP GRID (scoring badges) ── */ .prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1rem 0} @media(max-width:600px){.prop-grid{grid-template-columns:repeat(2,1fr)}} .prop-badge{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--cream);border-radius:6px;font-size:.75rem} .prop-badge-icon{font-size:.875rem;flex-shrink:0} .prop-badge-label{font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.04em;font-size:.625rem} .prop-badge-score{font-family:var(--mono);font-weight:700;font-size:.8125rem;margin-left:auto} .prop-badge-score.high{color:var(--accent)}.prop-badge-score.mid{color:var(--secondary)}.prop-badge-score.low{color:#ef4444} /* ── BUTTONS ── */ .btn-deal{display:inline-block;padding:.7rem 1.75rem;background:var(--secondary);color:#fff;font-weight:700;font-size:.875rem;text-decoration:none;border-radius:6px;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.15)} .btn-deal:hover{background:var(--secondary-hover);transform:translateY(-1px);text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.2)} .btn-secondary{display:inline-block;padding:.6rem 1.5rem;background:transparent;color:var(--accent);font-weight:600;font-size:.875rem;text-decoration:none;border:2px solid var(--accent);border-radius:6px;transition:all .2s} .btn-secondary:hover{background:var(--accent-fill,var(--accent));color:#fff} /* ── DATA TABLE ── */ .data-table{width:100%;border-collapse:collapse;margin-bottom:1.5rem;font-size:.875rem;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)} .data-table th{background:var(--dark);color:#fff;padding:.75rem 1rem;text-align:left;font-family:var(--display);font-weight:400;font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em} .data-table td{padding:.75rem 1rem;border-bottom:1px solid var(--border)} .data-table tr:last-child td{border-bottom:none} .data-table tr:nth-child(even) td{background:var(--cream)} /* ── WHO SHOULD / SHOULD NOT (BagEngine pattern) ── */ .who-block{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:2rem 0} .who-block-header{padding:1rem 1.5rem;font-family:var(--display);font-weight:500;font-size:1rem} .who-block-header.good{background:#f0fdf4;color:#16a34a;border-bottom:1px solid #bbf7d0} .who-block-header.bad{background:#fef2f2;color:#dc2626;border-bottom:1px solid #fecaca} .who-block-body{padding:1rem 1.5rem;font-size:.875rem;line-height:1.7} .who-block-body li{margin-bottom:.375rem} /* ── FAQ (BagEngine pattern) ── */ .faq{margin:2.5rem 0} .faq-title{font-family:var(--display);font-size:1.25rem;margin-bottom:1.25rem;color:var(--dark)} .faq-item{border-bottom:1px solid var(--border);padding:1rem 0} .faq-item summary{font-weight:600;font-size:.9375rem;cursor:pointer;color:var(--dark);list-style:none;display:flex;align-items:center;gap:.75rem} .faq-item summary::before{content:'+';font-family:var(--mono);font-size:1.25rem;color:var(--accent);font-weight:700;width:1.5rem;text-align:center;flex-shrink:0;transition:transform .2s} .faq-item[open] summary::before{content:'\2212'} .faq-item .faq-answer{padding:.75rem 0 .25rem 2.25rem;font-size:.875rem;color:var(--text-light);line-height:1.7} /* ── COMPARISON GRID (Nesyona pattern: side-by-side) ── */ .vs-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;margin:2rem 0;align-items:center} .vs-grid-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center;box-shadow:var(--shadow-sm)} .vs-grid-card-name{font-family:var(--display);font-size:1.125rem;color:var(--dark);margin-bottom:.5rem} .vs-grid-card-price{font-family:var(--mono);font-size:.8125rem;color:var(--accent)} .vs-grid-divider{font-family:var(--display);font-size:1.5rem;color:var(--muted);font-weight:600} @media(max-width:600px){.vs-grid{grid-template-columns:1fr;gap:1rem}.vs-grid-divider{text-align:center}} /* ── EMAIL MICRO-CAPTURE (inline, non-intrusive) ── */ .email-micro{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;background:var(--cream);border:1px solid var(--border);border-radius:var(--radius);margin:2rem 0;flex-wrap:wrap} .email-micro-icon{font-size:1.25rem;flex-shrink:0} .email-micro-text{font-size:.8125rem;color:var(--text);flex:1;min-width:150px} .email-micro-text strong{color:var(--accent)} .email-micro-input{padding:.5rem .75rem;border:1px solid var(--border);border-radius:6px;font-size:.8125rem;font-family:var(--body);flex:1;min-width:160px;max-width:220px;transition:border-color .2s} .email-micro-input:focus{outline:none;border-color:var(--accent)} .email-micro-btn{padding:.5rem 1rem;background:var(--accent-fill,var(--accent));color:#fff;border:none;border-radius:6px;font-size:.8125rem;font-weight:700;font-family:var(--body);cursor:pointer;white-space:nowrap;transition:all .2s} .email-micro-btn:hover{background:var(--accent-hover)} @media(max-width:600px){.email-micro{flex-direction:column;text-align:center}.email-micro-input,.email-micro-btn{width:100%;max-width:100%}} /* ── STICKY EMAIL STRIP (bottom of viewport, scroll-triggered) ── */ .email-strip{position:fixed;bottom:0;left:0;right:0;background:var(--dark);border-top:1px solid #333;padding:.625rem 1.5rem;z-index:1000;transform:translateY(100%);transition:transform .3s ease;box-shadow:0 -4px 20px rgba(0,0,0,.2)} .email-strip.visible{transform:translateY(0)} .email-strip-inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;gap:.75rem} .email-strip-text{font-size:.8125rem;color:#e5e5e5;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .email-strip-text strong{color:#fff} .email-strip-input{padding:.4rem .75rem;border:1px solid #444;border-radius:4px;background:#1c1917;color:#fff;font-size:.8125rem;font-family:var(--body);width:180px} .email-strip-btn{padding:.4rem 1rem;background:var(--accent-fill,var(--accent));color:#fff;border:none;border-radius:4px;font-size:.8125rem;font-weight:700;font-family:var(--body);cursor:pointer;white-space:nowrap;transition:background .2s} .email-strip-btn:hover{background:var(--accent-hover)} .email-strip-close{background:none;border:none;color:#666;font-size:1.125rem;cursor:pointer;padding:.25rem .5rem;margin-left:.25rem;transition:color .2s} .email-strip-close:hover{color:#fff} @media(max-width:600px){.email-strip-text{display:none}.email-strip-inner{justify-content:center}} /* ── RELATED GRID ── */ .related{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)} .related-title{font-family:var(--display);font-size:1.125rem;margin-bottom:1.25rem;color:var(--dark)} .related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem} @media(max-width:600px){.related-grid{grid-template-columns:1fr}} .related-card{display:block;text-decoration:none;color:inherit;padding:1.25rem;background:var(--cream);border-radius:var(--radius);transition:all .2s;border:1px solid transparent} .related-card:hover{border-color:var(--accent);background:var(--accent-light);transform:translateY(-2px);box-shadow:var(--shadow-sm)} .related-card-tag{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:.375rem} .related-card-title{font-family:var(--display);font-weight:400;font-size:.9375rem;line-height:1.3;color:var(--dark)} /* ── AD ZONE ── */ .ad-zone{max-width:var(--max-w);margin:2rem auto;min-height:0} .ad-zone:empty{display:none} .ad-zone:has(.adsbygoogle){min-height:90px;padding:0.5rem 0} /* ── HOMEPAGE SECTIONS ── */ .section{max-width:var(--max-w);margin:0 auto;padding:3rem 1.5rem} .section-title{font-family:var(--display);font-size:1.75rem;font-weight:500;color:var(--dark);margin-bottom:.5rem;letter-spacing:-.01em} .section-sub{font-size:.9375rem;color:var(--text-light);margin-bottom:2rem} /* ── CARD GRID (homepage) ── */ .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem} .guide-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:all .2s} .guide-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)} .guide-card-cat{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem} .guide-card-title{font-family:var(--display);font-size:1.0625rem;font-weight:500;color:var(--dark);margin-bottom:.375rem;line-height:1.3} .guide-card-desc{font-size:.8125rem;color:var(--text-light);line-height:1.5} .guide-card-tag{font-family:var(--mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:.5rem} /* ── STATS ROW (homepage) ── */ .stats-row{display:flex;justify-content:center;gap:3rem;margin:2rem 0;flex-wrap:wrap} .stat{text-align:center} .stat-number{font-family:var(--display);font-size:2rem;font-weight:600;color:var(--accent);line-height:1} .stat-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.25rem} /* ── FOOTER ── */ footer{max-width:var(--max-w);margin:0 auto;padding:2.5rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--border)} .footer-logo{font-family:var(--display);font-size:1.25rem;text-decoration:none;color:var(--dark)} .footer-logo span{color:var(--accent)} .footer-links{list-style:none;display:flex;gap:1.5rem;flex-wrap:wrap} .footer-links a{font-size:.8125rem;color:var(--text-light);text-decoration:none;transition:color .2s} .footer-links a:hover{color:var(--dark)} .footer-note{font-size:.6875rem;color:var(--muted);max-width:560px;flex-basis:100%;line-height:1.6} .footer-network{font-size:.7rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;flex-basis:100%;margin-top:.5rem} .footer-network span{font-weight:700;color:var(--text-light);margin-right:.25rem} .footer-network a{color:var(--muted);font-family:var(--mono);font-size:.65rem;text-decoration:none} .footer-network a:hover{color:var(--accent)} /* ── IMAGE COMPONENT (inline article images, optional) ── */ .article-img{width:100%;border-radius:var(--radius);margin:1.5rem 0;box-shadow:var(--shadow-sm)} .article-img-caption{font-size:.75rem;color:var(--muted);text-align:center;margin-top:.375rem;font-style:italic} /* ── TIER LIST (BagEngine pattern) ── */ .tier{margin:2rem 0} .tier-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:var(--dark);color:#fff;border-radius:var(--radius) var(--radius) 0 0;font-family:var(--display);font-size:.9375rem;font-weight:500} .tier-header .tier-badge{font-family:var(--mono);font-size:.6875rem;padding:.2rem .5rem;border-radius:4px;text-transform:uppercase;letter-spacing:.04em} .tier-header .tier-badge.t1{background:#16a34a}.tier-header .tier-badge.t2{background:var(--secondary)}.tier-header .tier-badge.t3{background:var(--muted)} .tier-body{border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);padding:1.25rem 1.5rem} .tier-body ul{margin:0;padding-left:1.25rem;font-size:.875rem;line-height:1.8} /* ═══════════════════════════════════════════════════════════════ ENTERPRISE-GRADE COMPONENTS — 10-pattern bar Added 2026-05-16 (session 8) from GrantProbe homepage overhaul. Maps to ENTERPRISE-GRADE-STANDARD.md patterns 2-8 + 10. Use these instead of hand-rolling per-site overrides. ═══════════════════════════════════════════════════════════════ */ /* Pattern 2 + 10 — Eyebrow labels (hairline-flanked universal signature) */ .eyebrow{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light);display:inline-flex;align-items:center;gap:.6rem} .eyebrow::before,.eyebrow::after{content:'';width:24px;height:1px;background:var(--border)} .eyebrow-solo{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:8px} .section-head{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;text-align:center;margin-bottom:1.5rem} .section-head .eyebrow{margin-bottom:.6rem} .section-head h2{font-family:var(--display);font-size:1.75rem;font-weight:500;color:var(--dark);letter-spacing:-.01em;margin:0} .section-head p{font-size:.9375rem;color:var(--text-light);margin-top:.5rem;max-width:560px;margin-left:auto;margin-right:auto} .eg-section{padding:2.5rem 0} .eg-section.tight{padding:1.5rem 0 2rem} /* Pattern 4 — Cred-strip (iconified trust metrics under hero) */ .cred-strip{max-width:var(--max-w);margin:1.5rem auto 0;padding:0 1.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem} .cred-cell{display:flex;align-items:center;gap:.75rem;padding:.95rem 1.1rem;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-sm)} .cred-cell svg{flex-shrink:0;width:22px;height:22px;color:var(--accent)} .cred-text{display:flex;flex-direction:column;line-height:1.3} .cred-label{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-light)} .cred-value{font-size:.8125rem;font-weight:600;color:var(--dark);margin-top:2px} @media(max-width:768px){.cred-strip{grid-template-columns:repeat(2,1fr)}} /* Pattern 3 — Numbered methodology grid (01-06 framework) */ .method-grid{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem} .method-cell{background:#fff;border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.2rem;position:relative;transition:all .2s} .method-cell:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)} .method-num{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.06em;margin-bottom:.45rem} .method-name{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--dark);margin-bottom:.35rem;line-height:1.25} .method-desc{font-size:.78rem;color:var(--text-light);line-height:1.55} @media(max-width:760px){.method-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.method-grid{grid-template-columns:1fr}} /* Pattern 5 — Anchor + mock-output card (CTA paired with sample-output) */ .anchor-mock{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr 1.05fr;gap:1.25rem;align-items:stretch} .am-pitch{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.75rem 1.85rem;display:flex;flex-direction:column;justify-content:center} .am-pitch h3{font-family:var(--display);font-size:1.5rem;font-weight:600;line-height:1.15;color:var(--dark);margin:.5rem 0 .65rem;letter-spacing:-.01em} .am-pitch p{font-size:.92rem;color:var(--text);line-height:1.6;margin-bottom:1.1rem} .am-pitch ul{list-style:none;padding:0;margin:0 0 1.25rem;font-size:.86rem;color:var(--text);line-height:1.7} .am-pitch ul li{padding-left:1.4rem;position:relative} .am-pitch ul li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:800} .am-cta{display:inline-block;align-self:flex-start;padding:.75rem 1.4rem;background:var(--accent-fill,var(--accent));color:#fff;font-weight:700;font-size:.875rem;text-decoration:none;border-radius:8px;transition:all .2s;box-shadow:0 2px 8px rgba(15,118,110,.22)} .am-cta:hover{background:var(--accent-hover);transform:translateY(-1px)} .am-mock{background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.4rem;box-shadow:var(--shadow-sm)} .am-mock-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:.7rem;border-bottom:1px solid var(--border);margin-bottom:.6rem} .am-mock-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light)} .am-mock-pill{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent-fill,var(--accent));padding:3px 8px;border-radius:4px} .am-mock-input{font-family:var(--mono);font-size:.75rem;color:var(--text-light);padding:.5rem .65rem;background:var(--cream);border-radius:6px;margin-bottom:.8rem} .am-mock-input strong{color:var(--dark);font-weight:700} .am-row{display:grid;grid-template-columns:1fr auto;gap:.4rem .8rem;padding:.7rem 0;border-bottom:1px dashed var(--border);align-items:center} .am-row:last-child{border-bottom:none} .am-row-name{font-size:.85rem;font-weight:600;color:var(--dark);line-height:1.25} .am-row-meta{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);margin-top:3px} .am-row-amount{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--accent);text-align:right;line-height:1} .am-row-score{font-family:var(--mono);font-size:.66rem;font-weight:700;color:var(--accent);text-align:right;margin-top:3px} .am-mock-foot{margin-top:.75rem;padding-top:.7rem;border-top:1px solid var(--border);font-size:.72rem;color:var(--text-light);font-style:italic;text-align:center} @media(max-width:820px){.anchor-mock{grid-template-columns:1fr}} /* Pattern 7 — Named advisory / editorial section */ .advisory{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem} .advisory-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.75rem 2rem;box-shadow:var(--shadow-sm)} .advisory-grid{display:grid;grid-template-columns:240px 1fr;gap:1.5rem;align-items:start} .advisory-author{display:flex;flex-direction:column;align-items:center;text-align:center;padding-right:1.25rem;border-right:1px solid var(--border)} .advisory-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.4rem;font-weight:600;margin-bottom:.65rem} .advisory-name{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--dark);line-height:1.2} .advisory-role{font-size:.75rem;color:var(--text-light);margin-top:.2rem;margin-bottom:.55rem} .advisory-cred{font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:700;line-height:1.55} .advisory-body h4{font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--dark);margin:0 0 .65rem;letter-spacing:-.01em} .advisory-body p{font-size:.88rem;color:var(--text);line-height:1.65;margin-bottom:.7rem} .advisory-body p:last-child{margin-bottom:0} .advisory-links{display:flex;gap:1rem;margin-top:.85rem;flex-wrap:wrap} .advisory-links a{font-family:var(--mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);text-decoration:none} .advisory-links a:hover{text-decoration:underline} @media(max-width:720px){.advisory-grid{grid-template-columns:1fr}.advisory-author{padding-right:0;border-right:none;padding-bottom:1.25rem;border-bottom:1px solid var(--border);flex-direction:row;text-align:left;gap:1rem;align-items:center}.advisory-avatar{margin-bottom:0}} /* Pattern 8 — Newsletter social-proof line */ .email-proof{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light);text-align:center;margin-top:.6rem;flex-basis:100%;line-height:1.5} .email-proof strong{color:var(--accent);font-weight:700} .email-strip-proof{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#a8a29e;margin-left:.6rem} /* Pattern 6 — Type-badges + score-pills */ .tb{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2.5px 7px;border-radius:3px;line-height:1.3;margin-right:.4rem;vertical-align:middle} .tb-pillar{background:var(--accent-fill,var(--accent));color:#fff} .tb-roundup{background:var(--secondary-light);color:var(--secondary-hover);border:1px solid rgba(180,83,9,.25)} .tb-guide{background:var(--accent-light);color:var(--accent-hover);border:1px solid rgba(30,64,175,.25)} .tb-state{background:#fdf2f8;color:#9d174d;border:1px solid rgba(219,39,119,.25)} .tb-tool{background:#f3e8ff;color:#6b21a8;border:1px solid rgba(124,58,237,.25)} .tb-review{background:#e0e7ff;color:#3730a3;border:1px solid rgba(67,56,202,.25)} .tb-comparison{background:#fef3c7;color:#92400e;border:1px solid rgba(180,83,9,.25)} .score-pill{font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.04em;background:var(--accent-fill,var(--accent));color:#fff;padding:2px 6px;border-radius:3px;margin-left:.35rem} /* ── PRINT STYLES ── */ @media print{.nav-cta,.email-micro,.email-strip,.ad-zone,.cred-strip,.method-grid,.anchor-mock,.advisory{display:none}body{background:#fff}} /* === RESPONSIVE TABLES (network heal 2026-07-30) === */ /* Wide comparison tables were pushing article pages into horizontal scroll on mobile (measured at 390px by lattice-core/scripts/render-audit.mjs). Give the table its own scroll container so the PAGE never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and the table remains readable. Both rules are required; the first alone destroys the layout. */ table.data-table, table.pricing-table, table.capability-matrix, table.comparison-table, .article-body table, main table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table.data-table > thead, table.data-table > tbody, table.pricing-table > thead, table.pricing-table > tbody, table.capability-matrix > thead, table.capability-matrix > tbody, table.comparison-table > thead, table.comparison-table > tbody, .article-body table > thead, .article-body table > tbody, main table > thead, main table > tbody { display: table; width: 100%; min-width: max-content; } /* === RESPONSIVE TABLES v2 (network heal 2026-07-30) === */ /* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and the table stays readable. BOTH rules are required; the first alone destroys the layout. Deliberately generic: the network uses 15+ distinct table class names and an explicit list has already been outrun once. */ table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table > thead, table > tbody, table > tfoot { display: table; width: 100%; min-width: max-content; } /* === RESPONSIVE TABLES v3 (network heal 2026-07-30) === */ /* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and the table stays readable. BOTH rules are required; the first alone destroys the layout. Deliberately generic: the network uses 15+ distinct table class names and an explicit list has already been outrun once. */ table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table > thead, table > tbody, table > tfoot { display: table; width: 100%; min-width: max-content; } /* Form controls must not outgrow their container either. The newsletter capture ships an email input with an inline `min-width:200px`, which together with its padding and the Subscribe button pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is the classic cause, and it is inline on the element, so only a max-width guard reaches it. */ input, select, textarea, button, img, video, iframe, pre { max-width: 100%; } /* === RESPONSIVE TABLES v4 (network heal 2026-07-30) === */ /* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and the table stays readable. BOTH rules are required; the first alone destroys the layout. Deliberately generic: the network uses 15+ distinct table class names and an explicit list has already been outrun once. */ table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table > thead, table > tbody, table > tfoot { display: table; width: 100%; min-width: max-content; } /* Form controls must not outgrow their container either. The newsletter capture ships an email input with an inline `min-width:200px`, which together with its padding and the Subscribe button pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is the classic cause, and it is inline on the element, so only a max-width guard reaches it. */ input, select, textarea, button, img, video, iframe, pre { max-width: 100%; } /* max-width alone does not reach this one. The email input carries an INLINE `min-width:200px`, and an inline style beats a stylesheet rule, so the flex row stays wider than its parent and the page keeps scrolling 5px. A min-width floor on a flex child is the standard cause of exactly this, and `!important` is the only lever that reaches an inline declaration — used deliberately here and scoped to one control rather than sprayed across the sheet. */ form input[type="email"] { min-width: 0 !important; } /* === RESPONSIVE TABLES v5 (network heal 2026-07-30) === */ /* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and the table stays readable. BOTH rules are required; the first alone destroys the layout. Deliberately generic: the network uses 15+ distinct table class names and an explicit list has already been outrun once. */ table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table > thead, table > tbody, table > tfoot { display: table; width: 100%; min-width: max-content; } /* Form controls must not outgrow their container either. The newsletter capture ships an email input with an inline `min-width:200px`, which together with its padding and the Subscribe button pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is the classic cause, and it is inline on the element, so only a max-width guard reaches it. */ input, select, textarea, button, img, video, iframe, pre { max-width: 100%; } /* max-width alone does not reach this one. The email input carries an INLINE `min-width:200px`, and an inline style beats a stylesheet rule, so the flex row stays wider than its parent and the page keeps scrolling 5px. A min-width floor on a flex child is the standard cause of exactly this, and `!important` is the only lever that reaches an inline declaration — used deliberately here and scoped to one control rather than sprayed across the sheet. */ form input[type="email"] { min-width: 0 !important; } /* Long unbroken links. On LensPOV the widest element on four pages was an at 547-678px against a 390px viewport: raw URLs used as citation link text, which have no spaces to wrap at, so the browser lets them run past the edge and the whole page scrolls sideways. The U3 citation campaign adds MORE external links, so this gets worse as the network gets better sourced unless it is fixed at the stylesheet. */ a, code, kbd, samp { overflow-wrap: anywhere; word-break: break-word; }