/* ========================================================================= aarav.me · Sunday Edition (V3 prototype) Locked values from IDEATION_V3.md. Do not introduce new colors. ========================================================================= */ :root { /* Palette — three colors, ever. */ --bone: #F1ECE0; --bone-deep: #E8E1D2; --ink: #16161A; --ink-muted: #6B665C; --rule: rgba(26, 26, 26, 0.12); --rule-strong: rgba(26, 26, 26, 0.30); --red: #B5251C; --red-hover: #8E1B14; /* Type — one serif, one mono. Serif swappable via data-font on . */ --serif-editorial: 'Editorial New', 'PP Editorial New', 'Source Serif 4', Georgia, 'Times New Roman', serif; --serif-source: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif; --serif-newsreader: 'Newsreader', Georgia, 'Times New Roman', serif; --serif: var(--serif-editorial); --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Rhythm */ --measure: 64ch; --container: 1180px; --hold: 120ms; --transition-in: 80ms; --transition-out: 40ms; } html[data-font="source"] { --serif: var(--serif-source); } html[data-font="newsreader"] { --serif: var(--serif-newsreader); } /* ========================================================================= RESET ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; } body { margin: 0; background: var(--bone); color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.65; font-feature-settings: "kern", "liga", "onum"; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; display: block; } a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--red); padding-bottom: 0.5px; transition: color var(--transition-in) linear var(--hold), border-color var(--transition-in) linear var(--hold), background var(--transition-in) linear var(--hold); } a:hover, a:focus-visible { color: var(--red-hover); border-bottom-color: var(--red-hover); background: rgba(181, 37, 28, 0.06); } a:focus-visible { outline: 1px solid var(--red); outline-offset: 3px; } hr { border: 0; } button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } /* ========================================================================= PAPER GRAIN — global, felt-not-seen ========================================================================= */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.045; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } /* Slight edge-warmth, like a Sunday paper yellowing at the spine */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 49; background: radial-gradient(ellipse at center, transparent 55%, rgba(181, 37, 28, 0.025) 100%); } /* ========================================================================= MASTHEAD STRIP (the signature move) ========================================================================= */ .masthead { max-width: var(--container); margin: 0 auto; padding: 18px 32px 10px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); } .masthead__strip, .masthead__nav { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin: 0; } .masthead__strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .masthead__strip .dot { color: var(--red); } .masthead__nav { display: flex; gap: 22px; flex-wrap: wrap; } .masthead__nav a { color: var(--ink); border-bottom: 1px solid transparent; padding-bottom: 2px; } .masthead__nav a:hover, .masthead__nav a:focus-visible { color: var(--red); border-bottom-color: var(--red); background: none; } .masthead__nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); } /* ========================================================================= NAMEPLATE — the big wordmark, like a real broadsheet ========================================================================= */ .nameplate { max-width: var(--container); margin: 0 auto; padding: 28px 32px 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; border-bottom: 3px double var(--rule-strong); } .nameplate__wordmark { font-family: var(--serif); font-weight: 600; font-size: clamp(48px, 9vw, 88px); letter-spacing: -0.035em; line-height: 0.95; margin: 0; color: var(--ink); } .nameplate__meta { text-align: right; display: flex; flex-direction: column; gap: 4px; min-width: 240px; } .nameplate__tagline { font-style: italic; color: var(--ink-muted); font-size: 14px; margin: 0; line-height: 1.4; } .nameplate__status { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin: 0; display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; } .status-dot { color: var(--red); font-size: 9px; line-height: 1; animation: breath 2s linear infinite; } @keyframes breath { 0%, 100% { opacity: 0.55; } 50% { opacity: 1.0; } } @media (prefers-reduced-motion: reduce) { .status-dot { animation: none; opacity: 1; } } /* ========================================================================= FRONT PAGE GRID ========================================================================= */ .front { max-width: var(--container); margin: 36px auto 56px; padding: 0 32px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; align-items: start; } @media (max-width: 880px) { .front { grid-template-columns: 1fr; gap: 40px; margin-top: 28px; } } /* ========================================================================= SECTION FLAGS, DATELINES, BYLINES ========================================================================= */ .section-flag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--red); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); } .dateline { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 6px; } .byline { font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-muted); margin: 14px 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); } /* ========================================================================= LEDE — headline, plate, body ========================================================================= */ .headline { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 5.6vw, 64px); letter-spacing: -0.022em; line-height: 1.02; margin: 6px 0 8px; color: var(--ink); text-wrap: balance; } /* Photo plate — newsprint halftone treatment */ .plate { margin: 0 0 28px; padding: 0; max-width: 360px; float: right; margin-left: 32px; margin-bottom: 8px; } @media (max-width: 640px) { .plate { float: none; margin: 0 0 24px; max-width: 100%; } } .plate__img { position: relative; border: 1px solid var(--rule-strong); background: var(--bone-deep); overflow: hidden; aspect-ratio: 4 / 5; } .plate__img img { width: 100%; height: 100%; object-fit: cover; filter: url(#newsprint) contrast(1.18) brightness(0.96); display: block; } /* Halftone dot overlay — felt as newsprint */ .plate__img::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient( circle at center, rgba(22, 22, 26, 0.65) 0.65px, transparent 1.1px ); background-size: 3px 3px; mix-blend-mode: multiply; pointer-events: none; } .plate figcaption { font-family: var(--serif); font-style: italic; font-size: 13px; line-height: 1.45; color: var(--ink-muted); margin-top: 8px; padding-left: 1px; } /* Body prose */ .prose p { font-family: var(--serif); font-size: 17px; line-height: 1.65; margin: 0 0 1.1em; max-width: var(--measure); hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; } .drop-cap { float: left; font-family: var(--serif); font-weight: 500; font-size: 5.6em; line-height: 0.85; padding: 0.07em 0.08em 0 0; margin-top: 0.05em; color: var(--ink); } .pull { margin: 28px 0 28px; padding: 0 0 0 20px; border-left: 2px solid var(--red); font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.35; letter-spacing: -0.008em; color: var(--ink); max-width: 30ch; } /* ========================================================================= SIDEBAR — Op-Ed entries ========================================================================= */ .sidebar { position: relative; } @media (min-width: 881px) { .sidebar { border-left: 1px solid var(--rule); padding-left: 36px; align-self: stretch; } } .oped { list-style: none; margin: 0; padding: 0; } .oped__entry { padding: 18px 0; border-bottom: 1px solid var(--rule); } .oped__entry:first-child { padding-top: 4px; } .oped__entry:last-child { border-bottom: 0; } .oped__dateline { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 4px; } .oped__headline { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.012em; line-height: 1.15; margin: 0 0 6px; text-wrap: balance; } .oped__headline a { border-bottom: 0; color: var(--ink); } .oped__headline a:hover, .oped__headline a:focus-visible { color: var(--red-hover); background: none; } .oped__lede { font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); margin: 0; } .sidebar__more { margin: 22px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .sidebar__more a { border-bottom: 0; color: var(--red); } .sidebar__more a:hover { color: var(--red-hover); background: none; } /* ========================================================================= RULES (the line) ========================================================================= */ .rule { max-width: var(--container); margin: 0 auto; height: 1px; background: var(--rule-strong); } .rule--heavy { height: 3px; background: transparent; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 1px 0; } /* ========================================================================= CLASSIFIEDS — selected work, ledger table ========================================================================= */ .classifieds { max-width: var(--container); margin: 36px auto 48px; padding: 0 32px; } .classifieds__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 6px; } .classifieds__head .section-flag { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .classifieds__sub { font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--ink-muted); margin: 0; } .ledger-wrap { overflow-x: auto; } .ledger { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 14px; } .ledger thead th { text-align: left; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); font-size: 10.5px; padding: 10px 12px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: transparent; } .ledger tbody td { padding: 14px 12px; border-bottom: 1px solid var(--rule); vertical-align: baseline; } .ledger tbody tr { transition: background var(--transition-in) linear var(--hold); } .ledger tbody tr:hover { background: var(--bone-deep); } .ledger tbody td:first-child { font-family: var(--serif); font-size: 16px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); } .ledger__arrow { text-align: right; width: 1%; white-space: nowrap; } .ledger__arrow a { border-bottom: 0; color: var(--red); font-family: var(--mono); } .ledger__arrow a:hover { color: var(--red-hover); background: none; } /* Status tags */ .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border: 1px solid currentColor; white-space: nowrap; color: var(--ink-muted); } .tag--press { color: var(--red); } .tag--shipped { color: var(--ink); } .tag--archived { color: var(--ink-muted); } .tag--killed { color: var(--ink-muted); text-decoration: line-through; text-decoration-thickness: 1px; } .tag--draft { color: var(--ink-muted); border-style: dashed; } /* ========================================================================= COLOPHON ========================================================================= */ .colophon { max-width: var(--container); margin: 36px auto 64px; padding: 0 32px; text-align: center; } .colophon__principle { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; color: var(--ink); margin: 0 0 14px; letter-spacing: -0.005em; } .colophon__meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0; line-height: 1.7; } .colophon__meta a { color: var(--ink-muted); border-bottom: 0; } /* ========================================================================= TYPE TOGGLE — fixed corner widget for testing the serif ========================================================================= */ .type-toggle { position: fixed; bottom: 18px; right: 18px; display: inline-flex; align-items: center; gap: 2px; padding: 7px 9px; background: var(--bone-deep); border: 1px solid var(--rule-strong); font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; z-index: 100; box-shadow: 1px 1px 0 0 var(--rule-strong); } .type-toggle__label { color: var(--ink-muted); padding-right: 9px; margin-right: 4px; border-right: 1px solid var(--rule-strong); } .type-toggle button { color: var(--ink-muted); padding: 4px 7px; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: color var(--transition-in) linear var(--hold); } .type-toggle button:hover { color: var(--ink); } .type-toggle button[aria-pressed="true"] { color: var(--red); } @media (max-width: 640px) { .type-toggle { bottom: 12px; right: 12px; padding: 6px 7px; font-size: 9.5px; } } /* ========================================================================= PRINT — the paper, on paper. Why not. ========================================================================= */ @media print { body::before, body::after, .type-toggle { display: none; } body { background: white; color: black; } a { color: black; border-bottom: 0; } }