/* ========================================================================== Red Rock Daily — Washington County, Utah local news & guides Professional news design system (Step 1 redesign) -------------------------------------------------------------------------- Structure: 1. Design tokens — color / type / space / shadow / radius 2. Dark mode tokens — prefers-color-scheme + [data-theme] 3. Reset & base — box-sizing, body, links, images, focus 4. Layout — .wrap container, section rhythm 5. Masthead — topbar, brand, sticky primary nav 6. Breaking banner 7. Breadcrumbs 8. Hero section 9. Section headers 10. Article card grid 11. Newsletter 12. Article (.post) 13. Standalone pages (.page, .catlist) 14. Footer 15. Utilities & reduced motion Mobile-first: base rules target small screens; media queries add structure at 640 / 760 / 920 / 1120px. ========================================================================== */ /* ========================================================================== 1. Design tokens (light theme defaults) ========================================================================== */ :root { /* Red-rock palette — Navajo sandstone, vermilion, warm sand & sun */ --brand: #b4432a; /* primary vermilion */ --brand-deep: #93351f; /* hover / pressed accents */ --brand-soft: #f6e3da; /* tinted wash for chips & badges */ --accent: #d9982f; /* warm sun accent */ --bg: #faf6ef; /* page background — warm sand */ --surface: #ffffff; /* cards, nav, sticky surfaces */ --surface-alt: #f1eadf; /* alternate washes, notes */ --ink: #29211a; /* headings — warm near-black */ --text: #463a2e; /* body copy — warm brown-gray */ --muted: #857568; /* secondary / meta text */ --line: #e5dacb; /* hairlines & borders */ --line-strong: #cfc1ae; /* emphasized borders */ /* Footer is dark in both themes */ --footer-bg: #221b16; --footer-text: #c9beb2; --footer-muted: #8d8175; --footer-line: #3a3128; --footer-link: #d8c9b8; /* Typography — serif headlines, sans body */ --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(41, 33, 26, 0.06); --shadow-md: 0 6px 18px -6px rgba(41, 33, 26, 0.14); --shadow-lg: 0 16px 36px -12px rgba(41, 33, 26, 0.2); /* Layout */ --container: 1180px; --focus-ring: 2px solid var(--brand); /* Back-compat aliases — referenced by inline styles on some pages */ --gray: var(--muted); --serif: var(--font-serif); --light: var(--surface-alt); } /* ========================================================================== 2. Dark mode tokens Applied automatically via prefers-color-scheme, or manually by adding class="dark" / data-theme="dark" to . ========================================================================== */ @media (prefers-color-scheme: dark) { :root { --brand: #e0784f; --brand-deep: #c95c37; --brand-soft: #4a2a1e; --accent: #e0a83f; --bg: #16120e; --surface: #201a15; --surface-alt: #2a221b; --ink: #f2e9dc; --text: #d6c8b8; --muted: #998b7c; --line: #3a2f26; --line-strong: #4d4034; --footer-bg: #0f0c09; --footer-text: #c9beb2; --footer-muted: #8d8175; --footer-line: #332b24; --footer-link: #e0d2c2; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 36px -12px rgba(0, 0, 0, 0.55); } } :root.dark, :root[data-theme="dark"] { --brand: #e0784f; --brand-deep: #c95c37; --brand-soft: #4a2a1e; --accent: #e0a83f; --bg: #16120e; --surface: #201a15; --surface-alt: #2a221b; --ink: #f2e9dc; --text: #d6c8b8; --muted: #998b7c; --line: #3a2f26; --line-strong: #4d4034; --footer-bg: #0f0c09; --footer-text: #c9beb2; --footer-muted: #8d8175; --footer-line: #332b24; --footer-link: #e0d2c2; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 36px -12px rgba(0, 0, 0, 0.55); } /* ========================================================================== 3. Reset & base ========================================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: 1rem; line-height: 1.7; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--brand); color: #fff; } a { color: var(--brand-deep); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } :focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* ========================================================================== 4. Layout ========================================================================== */ .wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-4); } @media (min-width: 640px) { .wrap { padding: 0 var(--space-5); } } main { display: block; /* normalize
in older browsers */ } /* ========================================================================== 5. Masthead — topbar, brand, sticky nav The header is laid out as a plain pass-through (display: contents) so the primary nav can stick to the viewport for the full page height. Browsers without support fall back to a sticky full masthead. ========================================================================== */ .site-header { display: contents; } @supports not (display: contents) { .site-header { display: block; position: sticky; top: 0; z-index: 90; background: var(--surface); border-bottom: 1px solid var(--line); } } .topbar { background: var(--ink); color: var(--bg); font-size: 0.75rem; letter-spacing: 0.04em; padding: var(--space-2) 0; } .topbar .wrap { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .brand { padding: 1.5rem 0 1.125rem; text-align: center; } .brand h1 { font-family: var(--font-serif); font-size: clamp(1.9rem, 6vw, 2.9rem); font-weight: 700; line-height: 1.08; letter-spacing: 0.005em; } .brand h1 a { color: var(--ink); } .brand h1 a:hover { color: var(--brand); text-decoration: none; } .brand h1 .red { color: var(--brand); } .tagline { color: var(--muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; margin-top: 0.375rem; } /* Primary navigation — sticky */ .mainnav { position: sticky; top: 0; z-index: 100; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); } .mainnav .wrap { display: flex; } .mainnav ul { list-style: none; display: flex; align-items: center; gap: var(--space-1); width: 100%; /* Mobile: one scrollable row instead of wrapping */ overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mainnav ul::-webkit-scrollbar { display: none; } .mainnav a { display: block; padding: 0.8rem 0.875rem; font-weight: 600; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; color: var(--ink); border-radius: var(--radius-sm); } .mainnav a:hover { background: var(--surface-alt); color: var(--brand); text-decoration: none; } @media (min-width: 760px) { .mainnav ul { overflow: visible; flex-wrap: wrap; } } /* ========================================================================== 6. Breaking banner ========================================================================== */ .breaking { background: var(--brand); color: #fff; font-size: 0.85rem; padding: var(--space-2) 0; } .breaking b { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-right: 0.5rem; } .breaking a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .breaking a:hover { color: #fff; } /* ========================================================================== 7. Breadcrumbs Ready-to-use component (wrap in