/* Minimal reset (the app no longer ships Bootstrap's reboot): border-box sizing everywhere so width:100% controls include their padding/border, and no user-agent body margin. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } :root { /* Monochrome "ink on newsprint" — old New York Times print look. */ --paper: #f4f1e8; --ink: #121212; --ink-soft: #4a4843; --accent: #1a1a1a; --rule: #cbc6b7; --rule-dark: #2c2a26; --card-bg: #faf7ee; --font-masthead: 'UnifrakturMaguntia', 'Playfair Display', Georgia, serif; --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Lora', Georgia, 'Times New Roman', serif; /* Shared width of the centered content column AND the sticky top bar, so the "logged in as" utility bar always lines up with the page body (widened on very large screens below). */ --content-max: 1100px; } html { /* Reserve the scrollbar gutter permanently: pages of different heights (e.g. the settings tabs) otherwise toggle the scrollbar and shift the centered column horizontally. */ scrollbar-gutter: stable; } html, body { font-family: var(--font-body); background-color: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.65; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Links that act as buttons or the masthead title must never pick up the global underline. */ .btn:hover, .masthead-title-link:hover { text-decoration: none; } /* Masthead — old New York Times print style */ /* The whole top block (utility bar + masthead) sticks as one unit, so the user menu and language switch stay put instead of scrolling away. */ .site-top { position: sticky; top: 0; /* Above page content (the search/filter bar uses z-index 50) so the sticky header is never painted over, but below modals/dropdowns (z-index 199/200). */ z-index: 100; background-color: var(--paper); } .is-scrolled .site-top { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } .masthead { background-color: var(--paper); text-align: center; padding: 1.3rem 1rem 0; margin-bottom: 2rem; } /* Condensed state is an instant, artifact-free step (no CSS transition). Animating the height contributors (font-size / max-height / padding / margin) reflowed the sticky header every frame, which janked in Chromium (smooth only in Firefox); a crisp snap looks consistent everywhere. */ .is-scrolled .masthead { padding-top: 0.45rem; margin-bottom: 1rem; } .masthead-rule-top { border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); height: 2px; } .masthead-inner { padding: 0.5rem 0 0.3rem; } .is-scrolled .masthead-inner { padding: 0.1rem 0; } .masthead-title-link { text-decoration: none; } .masthead-title { font-family: var(--font-masthead); font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 400; letter-spacing: 0.01em; color: var(--ink); margin: 0; line-height: 1.02; overflow-wrap: break-word; } /* Title shrinks once when the page is scrolled and grows back near the top (reversible). The scroll handler toggles .is-scrolled on with hysteresis so it never oscillates (see masthead.js). */ .is-scrolled .masthead-title { font-size: clamp(1.8rem, 5vw, 3rem); } .masthead-title-link:hover .masthead-title { color: var(--ink); } /* Dateline strip with hairline + double rule, small-caps tagline (NYT "ear" row) */ .masthead-dateline { border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); padding: 0.3rem 0; overflow: hidden; max-height: 2rem; } /* Collapse the tagline in the condensed view (instant, in step with the title). */ .is-scrolled .masthead-dateline { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; } .masthead-dateline span { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); } /* Main layout — centered reading column with a margin that scales on wider screens. */ .newspaper-main { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 3rem) 3rem; } /* ── Buttons (self-contained; the app no longer ships Bootstrap) ───── */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; padding: 0.375rem 0.75rem; border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; transition: background-color 0.1s, border-color 0.1s, color 0.1s; } .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; } .btn-lg { font-size: 1.15rem; padding: 0.5rem 1.1rem; } .btn-sm { font-size: 0.75rem; padding: 0.25rem 0.55rem; } .btn-primary { background-color: var(--ink); border-color: var(--ink); color: var(--paper); letter-spacing: 0.05em; } .btn-primary:hover, .btn-primary:focus { background-color: var(--accent); border-color: var(--accent); color: var(--paper); } .btn-outline-secondary { border-color: var(--rule-dark); color: var(--ink-soft); } .btn-outline-secondary:hover { background-color: var(--rule); border-color: var(--rule-dark); color: var(--ink); } /* ── Form controls (self-contained) ──────────────────────────────── */ .form-control, .form-select { display: block; width: 100%; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; padding: 0.375rem 0.75rem; border: 1px solid var(--rule-dark); border-radius: 0; background-color: var(--paper); color: var(--ink); } .form-control-lg { font-size: 1.15rem; padding: 0.5rem 0.9rem; } .form-select { appearance: none; -webkit-appearance: none; padding-right: 2rem; /* Inline caret so selects read as dropdowns without Bootstrap's asset. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234a4843' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 0.85rem; } .form-control:focus, .form-select:focus { border-color: var(--ink); box-shadow: none; outline: none; background-color: #fff; } /* ── Input group (search field + attached submit button) ─────────── */ .input-group { display: flex; align-items: stretch; } .input-group > .form-control { flex: 1 1 auto; min-width: 0; } .input-group > .btn { flex: 0 0 auto; white-space: nowrap; } /* Collapse the doubled border between the attached field and button. */ .input-group > .btn { margin-left: -1px; } h1:focus { outline: none; } /* Scale the whole UI up on desktop — components are sized in rem, so bumping the root font-size enlarges search, results, filters, admin tables, etc. proportionally. */ @media (min-width: 1200px) { html, body { font-size: 17.5px; } } @media (min-width: 1700px) { html, body { font-size: 19px; } } /* Very large / 4K displays: keep scaling the rem-based UI and widen the reading column so the content does not sit as a narrow island in a sea of margin. */ @media (min-width: 2560px) { html, body { font-size: 22px; } :root { --content-max: 1500px; } } @media (min-width: 3400px) { html, body { font-size: 26px; } :root { --content-max: 1900px; } } /* Responsive / mobile */ @media (max-width: 640px) { html, body { font-size: 15px; } /* Same horizontal inset for the content column and the sticky-header bars so everything lines up and stays symmetrically centred. */ .newspaper-main { padding: 0 1rem 2rem; } .masthead { padding: 0.9rem 1rem 0; margin-bottom: 1.4rem; } .masthead-inner { padding: 0.3rem 0 0.2rem; } .masthead-dateline span { letter-spacing: 0.12em; font-size: 0.62rem; } /* On phones the title stays compact — no scroll-driven grow/shrink (masthead.js skips mobile). */ .masthead-title { font-size: clamp(1.5rem, 7vw, 2.2rem); } }