/* ============================================================================ 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: 1240px; /* was 1100. At 1100 the main column was only ~704px next to the sidebar, so the card grid could hold 2 columns and the page read as left-weighted on a wide screen while the hero and Our Picks (both full --measure) looked balanced. 1240 gives a ~844px main column, which carries 3 cards comfortably. */ --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 { 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); } .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