/* ============================================================================ JLA / Diricom — canonical landing-page stylesheet site.v1.css ---------------------------------------------------------------------------- ONE file for every developed site. Per-site identity lives ONLY in the inline :root{} token block in each page's (accent colours, fonts). Nothing site-specific belongs in here. Versioned filename on purpose: bump to site.v2.css to bust caches. The pages are served with cf-cache-status: DYNAMIC and max-age=0, so the HTML is never cached — this file is the only part that ever gets cached, which is the whole reason it is external. Class names are UNCHANGED from the previous inline styles. The nightly patchers (v2_content_updater.py, page_enhance_inject.py) emit fixed markup; renaming anything here silently unstyles their output. ========================================================================== */ /* ── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Design tokens ───────────────────────────────────────────────────────── */ :root { /* Spacing scale — 4px base. Replaces the ten ad-hoc values (2,4,6,8,10,12, 14,20,24,32) that produced the off-rhythm Jim reported. Use these ONLY. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; /* Layout constants. --gutter is fluid so the page breathes on phones and does not stay pinned at 20px on a 1440px screen. */ --measure: 1560px; /* 1100 -> 1240 -> 1560. At 1100 the main column was only ~704px next to the sidebar, so the grid held 2 cards and the page read left-weighted while the hero and Our Picks (both full --measure) looked balanced. 1560 lets the content justify across a large monitor. IMPORTANT: max-width never binds below its own value, so every viewport under 1560px is byte-identical to before — phones and tablets are mathematically untouched by this. Verified across 320-1920px. */ --gutter: clamp(16px, 4vw, 32px); --prose: 68ch; /* cap running text — a 844px line is ~110 characters */ --sidebar: 300px; --col-min: 280px; /* card grid minimum column. 280 not 300: at the 1024px breakpoint a 300px minimum leaves only 4px of slack beside the sidebar, so any rounding tips it back to a single column — the exact bug being fixed. 280 gives ~44px of slack and holds 2 columns consistently from 640px all the way up. */ --main-max: 760px; /* main column cap once the sidebar stacks — see note at .content-with-sidebar for why this exists */ /* Neutral surface tokens. Per-site files override --accent* only. */ --bg: #f8f8f6; --surface: #ffffff; --text: #1a1a1a; --text-muted: #6b7280; --border: #e5e7eb; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.10); --shadow-lg: 0 8px 24px rgba(0,0,0,0.14); --radius: 10px; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Playfair Display', Georgia, serif; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; } a { color: inherit; } /* ── Top bar ─────────────────────────────────────────────────────────────── */ .topbar { background: var(--text); color: #fff; font-size: 0.78em; letter-spacing: 0.02em; padding: var(--s-2) var(--gutter); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-2); } .topbar a { color: #9ca3af; text-decoration: none; } .topbar a:hover { color: #fff; } /* ── Header ────────────────────────────────────────────────────────────── Previously the gap between nav and first content accumulated ~60px from four independent rules (header padding + tagline margin + nav margin + datebar margin + container padding). Now the header owns its own block spacing and nothing stacks. */ header { background: var(--surface); border-bottom: 3px solid var(--accent); padding: var(--s-5) var(--gutter) 0; text-align: center; } .site-name { /* The site name is an h1 element (it is the page's actual heading). Browsers give h1 a 0.67em default margin that would push the whole header down, so pin it here — every visual property below is unchanged. */ margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); color: var(--text); letter-spacing: -1px; line-height: 1.1; } .site-name span { color: var(--accent); } .tagline { font-size: 0.72em; color: var(--text-muted); margin: var(--s-1) 0 var(--s-4); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 400; opacity: 0.78; } /* ── Nav ─────────────────────────────────────────────────────────────────── */ nav { display: flex; gap: var(--s-1); justify-content: center; flex-wrap: wrap; padding: 0; margin: 0; border-top: 1px solid var(--border); } nav a { display: inline-block; padding: var(--s-3) var(--s-4); font-size: 0.82em; font-weight: 600; color: var(--text-muted); text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 3px solid transparent; transition: color 0.15s, border-color 0.15s; cursor: pointer; } nav a:hover, nav a.active { color: var(--accent); border-bottom-color: var(--accent); } /* ── Container ───────────────────────────────────────────────────────────── */ .container { max-width: var(--measure); margin: 0 auto; padding: var(--s-5) var(--gutter); } /* ── Date bar ────────────────────────────────────────────────────────────── */ .datebar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-5); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); font-size: 0.79em; color: var(--text-muted); letter-spacing: 0.02em; gap: var(--s-3); flex-wrap: wrap; } .datebar-label { font-weight: 500; } .datebar-updated { opacity: 0.75; text-align: right; } .datebar-region-mid { text-align: center; flex: 1; } .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: var(--s-2); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } * { transition: none !important; } } /* ── Hero ────────────────────────────────────────────────────────────────── */ .hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-bottom: var(--s-5); } .hero-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; } .hero-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .hero-card-img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; display: block; background: var(--accent-light); max-height: 360px; /* at --measure 1560 the feature card is ~736px wide, and a strict 16:10 would make the hero image 460px tall — it would dominate the fold. object-fit: cover crops rather than distorts. No effect below ~576px wide. */ } .hero-card-img-placeholder { width: 100%; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--accent-light), var(--accent)); display: flex; align-items: center; justify-content: center; font-size: 3em; } .hero-card-body { padding: var(--s-5); flex: 1; } .hero-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 0.7em; font-weight: 700; padding: var(--s-1) var(--s-3); border-radius: 20px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--s-3); } .hero-card h2 { font-family: var(--font-display); font-size: 1.4em; line-height: 1.3; color: var(--text); margin-bottom: var(--s-3); } .hero-card p { font-size: 0.88em; color: var(--text-muted); line-height: 1.6; margin-bottom: var(--s-3); } .card-meta { font-size: 0.75em; color: #9ca3af; display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; } .card-meta-source { font-weight: 600; color: var(--accent); } /* Hero stack — the 3 headlines beside the lead story. The three items are shorter than the feature card next to them, which left a block of dead space under the headlines (Jim, 2026-07-27). Stretching the items to share the full height squares the hero off against the feature. */ .hero-stack { display: flex; flex-direction: column; gap: var(--s-3); height: 100%; } .hero-stack-item { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--s-3); display: flex; gap: var(--s-3); align-items: center; flex: 1; /* share the hero's height evenly */ text-decoration: none; color: inherit; transition: box-shadow 0.2s; } .hero-stack-item:hover { box-shadow: var(--shadow-md); } .hero-stack-img { width: 80px; height: 70px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--accent-light); } .hero-stack-body h3 { font-size: 0.92em; line-height: 1.35; margin-bottom: var(--s-1); } .hero-stack-body .card-meta { margin-top: var(--s-1); } /* ── Section header ──────────────────────────────────────────────────────── */ .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); padding-bottom: var(--s-2); border-bottom: 2px solid var(--accent); } .section-header h2 { font-family: var(--font-display); font-size: 1.5em; color: var(--text); } /* ── Main / sidebar ────────────────────────────────────────────────────── THE 901–991px FIX. Before: sidebar collapsed at max-width:900px, but the main column needed 992px of viewport before two 300px cards could fit beside it. Result: from 901–991px the card grid rendered ONE card per row at 529–619px wide, i.e. shrinking the window improved the layout. Now the sidebar collapses at 1023px. At exactly 1024px the main column is 1024 − gutter*2 − 300 − 32 = ~660px, which comfortably fits two columns. --main-max caps the main column once the sidebar stacks, so the grid does not jump 2 → 3 columns the instant the sidebar disappears. It also keeps a sane reading measure for article text. */ .content-with-sidebar { display: grid; grid-template-columns: 1fr var(--sidebar); gap: var(--s-6); align-items: start; } /* ── Card grid ─────────────────────────────────────────────────────────── EXPLICIT column counts, not auto-fill. auto-fill derives the count from the available width, which is what let the count change unpredictably with the sidebar. Jim's spec: 3 per row on a full-size screen, 2 on smaller, 1 on a phone. Explicit counts make that exactly what happens at every width. */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-bottom: var(--s-6); } .card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .card-img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; display: block; background: var(--accent-light); } .card-img-placeholder { width: 100%; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--accent-light), var(--accent)); display: flex; align-items: center; justify-content: center; font-size: 2em; } .card-body { padding: var(--s-4); flex: 1; display: flex; flex-direction: column; } .card-category { font-size: 0.68em; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--s-2); } .card h3 { font-size: 1em; line-height: 1.35; margin-bottom: var(--s-2); } .card p { font-size: 0.85em; color: var(--text-muted); margin-bottom: var(--s-3); } .card-footer { margin-top: auto; } /* ── Affiliate grid ──────────────────────────────────────────────────────── */ .affiliate-section { margin-bottom: var(--s-6); } .affiliate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-4); } .affiliate-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4); text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; } .affiliate-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .affiliate-card img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; margin-bottom: var(--s-2); } .affiliate-icon { font-size: 2em; text-align: center; margin-bottom: var(--s-2); color: var(--accent); } .affiliate-title { font-weight: 700; margin-bottom: var(--s-1); } .affiliate-desc { font-size: 0.85em; color: var(--text-muted); margin-bottom: var(--s-2); } .affiliate-cta { font-size: 0.82em; font-weight: 600; color: var(--accent); } /* ── About section ───────────────────────────────────────────────────────── */ .about-section { background: var(--surface); border-radius: var(--radius); padding: var(--s-6); margin: 0 0 var(--s-6); box-shadow: var(--shadow-sm); border-left: 4px solid var(--accent); } .about-section h2 { font-family: var(--font-display); font-size: 1.3em; color: var(--text); margin-bottom: var(--s-3); } .about-section p { font-size: 0.93em; color: #4b5563; line-height: 1.8; margin-bottom: var(--s-3); max-width: var(--prose); /* running text stays readable in a wide column */ } /* ── Domain notice ─────────────────────────────────────────────────────── An empty slot (
) filled by page_enhance_inject with the DWS cross-promo. NOT a for-sale banner — the no-for-sale-signal rule (K6B-65) is not in tension with this. */ .domain-notice { text-align: center; margin: 0 0 var(--s-6); font-size: 0.82em; color: var(--text-muted); } .domain-notice a { color: var(--text-muted); text-decoration: none; font-weight: 500; border-bottom: 1px dotted var(--text-muted); } .domain-notice a:hover { color: var(--accent); border-bottom-color: var(--accent); } .domain-notice img.dws-logo-inline { display: block; height: 28px; width: auto; margin: var(--s-2) auto 0; opacity: 0.6; transition: opacity 0.2s; } .domain-notice a:hover img.dws-logo-inline { opacity: 1; } /* ── Sidebar ───────────────────────────────────────────────────────────── Markup is