*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* ============================================================ THEME TOKENS — the article surface flips between light & dark. The nav, hero and footer are intentionally always-dark "chrome". Light is the default; [data-theme="dark"] on overrides. ============================================================ */ :root { --page-bg: var(--courier-white); --page-fg: var(--courier-ink); --page-fg-strong: var(--courier-black); --page-muted: var(--neutral-600); --page-faint: var(--neutral-400); --page-line: var(--line-on-light); --panel-bg: var(--neutral-100); --panel-line: var(--neutral-300); --spine: var(--line-on-light); --node-border: var(--courier-black); --tag-border: var(--courier-black); --link-hover-fg: var(--courier-black); } [data-theme="dark"] { --page-bg: #0E0E0E; --page-fg: #E6E6E6; --page-fg-strong: #FFFFFF; --page-muted: #9C9C9C; --page-faint: #6E6E6E; --page-line: rgba(255,255,255,0.13); --panel-bg: #1A1A1A; --panel-line: #2E2E2E; --spine: rgba(255,255,255,0.16); --node-border: #0E0E0E; --tag-border: #E6E6E6; --link-hover-fg: var(--courier-black); } body { font-family: var(--font-body); background: var(--page-bg); color: var(--page-fg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 320ms var(--ease-standard), color 320ms var(--ease-standard); } a { color: inherit; } /* ---------- Reading progress bar ---------- */ .progress { position: fixed; top: 0; left: 0; height: 4px; width: 0%; background: var(--courier-yellow); z-index: 60; transition: width 80ms linear; } /* ---------- Top nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 32px; height: 64px; padding: 0 28px; background: var(--courier-black); color: var(--courier-white); border-bottom: var(--border-bar) solid var(--courier-yellow); } .nav .mast { font-family: 'Times New Roman', Times, Georgia, serif; font-weight: 700; font-size: 24px; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; } .nav .mast .hl { background: var(--courier-yellow); color: #000; padding: 2px 7px; } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 34px; } .nav-links { display: flex; gap: 26px; } .nav-links a { font-family: var(--font-display); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; color: rgba(255,255,255,0.82); transition: color 140ms var(--ease-standard); } .nav-links a:hover { color: var(--courier-yellow); } @media (max-width: 760px) { .nav-links { display: none; } } /* ---------- Theme toggle (filled yellow switch) ---------- */ .theme-switch { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 6px 0; color: rgba(255,255,255,0.82); font-family: var(--font-display); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; transition: color 160ms var(--ease-standard); } .theme-switch:hover { color: #fff; } .theme-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); } .theme-switch .track { position: relative; width: 42px; height: 22px; border: 2px solid rgba(255,255,255,0.45); background: transparent; transition: border-color 200ms var(--ease-standard), background 200ms var(--ease-standard); } .theme-switch .knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: rgba(255,255,255,0.9); transform: translateX(20px); transition: transform 220ms var(--ease-wipe), background 200ms var(--ease-standard); } [data-theme="dark"] .theme-switch .knob { transform: translateX(0); } @media (max-width: 760px) { .nav-right { margin-left: auto; } } /* ---------- Hero ---------- */ .hero { position: relative; background: var(--courier-black); color: #fff; overflow: hidden; padding: 0; } .hero-media { position: absolute; inset: 0; background-image: url("assets/zampolli-hero.png"); background-size: cover; background-position: center 32%; filter: contrast(1.02); } .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 38%, rgba(0,0,0,0.82) 100%); } .hero-inner { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 120px 28px 64px; min-height: 72vh; display: flex; flex-direction: column; justify-content: flex-end; } .eyebrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 26px; } .eyebrow .kicker { font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; background: var(--courier-yellow); color: #000; padding: 6px 10px; } .eyebrow .meta { font-family: var(--font-display); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.82); } .hero h1 { margin: 0; max-width: 16ch; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 1.0; letter-spacing: var(--ls-tight); font-size: clamp(30px, 6.2vw, 5.2rem); } .hero h1 .bar { background: var(--courier-yellow); color: #000; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0.06em 0.16em; line-height: 1.18; } .byline { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; } .byline .by { font-family: var(--font-display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; } .byline .dot { color: var(--courier-yellow); } .byline .sub { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.7); letter-spacing: 0.02em; } /* ---------- Article column ---------- */ .lede { max-width: 720px; margin: 0 auto; padding: 64px 28px 8px; } .lede .standfirst { font-family: var(--font-body); font-weight: 400; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.42; color: var(--page-fg-strong); margin: 0 0 32px; border-left: var(--border-bar) solid var(--courier-yellow); padding-left: 22px; } .lede p { font-size: 18px; line-height: 1.62; color: var(--page-fg); margin: 0 0 22px; } .lede a, .tl-body a { color: var(--page-fg); text-decoration: none; border-bottom: 2px solid var(--courier-yellow); padding-bottom: 1px; transition: background 140ms var(--ease-standard), color 140ms var(--ease-standard); } .lede a:hover, .tl-body a:hover { background: var(--courier-yellow); color: var(--link-hover-fg); } /* ---------- Timeline section header ---------- */ .tl-intro { max-width: 720px; margin: 28px auto 0; padding: 0 28px; } .tl-intro .stamp { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; background: #000; color: var(--courier-yellow); padding: 8px 14px; margin-bottom: 18px; } .tl-intro h2 { margin: 0 0 14px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 1.04; letter-spacing: var(--ls-tight); font-size: clamp(30px, 5vw, 52px); } .tl-intro p { font-size: 18px; line-height: 1.6; color: var(--page-muted); margin: 0; } [data-theme="dark"] .tl-intro .stamp { background: var(--courier-yellow); color: #000; } /* ---------- Sticky year marker ---------- */ .yearbar { position: sticky; top: 60px; z-index: 40; pointer-events: none; max-width: 980px; margin: 36px auto 0; padding: 0 28px; } body.admin-bar .yearbar { top: 92px; } .yearbar .chip { display: inline-flex; align-items: baseline; gap: 10px; background: var(--courier-yellow); color: #000; padding: 8px 16px; transform: translateY(0); box-shadow: 0 6px 22px rgba(0,0,0,0.18); } .yearbar .chip .y { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 0.02em; } .yearbar .chip .lab { font-family: var(--font-display); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; } /* ---------- Timeline ---------- */ .timeline { position: relative; max-width: 980px; margin: 14px auto 0; padding: 0 28px 40px; } .tl-track { position: relative; } /* the vertical spine + its yellow fill */ .tl-spine, .tl-fill { position: absolute; top: 0; bottom: 0; width: 2px; left: 188px; } .tl-spine { background: var(--spine); } .tl-fill { bottom: auto; height: 0; background: var(--courier-yellow); transition: height 90ms linear; } .tl-entry { position: relative; display: grid; grid-template-columns: 188px 1fr; column-gap: 56px; padding: 30px 0; } .tl-entry + .tl-entry { border-top: 1px solid var(--page-line); } .tl-date { text-align: right; padding-right: 44px; } .tl-date .md { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.96; font-size: 30px; color: var(--page-fg-strong); } .tl-date .yr { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; color: var(--page-faint); } /* square node on the spine, aligned with date row */ .tl-node { position: absolute; left: 181px; top: 36px; width: 16px; height: 16px; background: var(--courier-yellow); border: 2px solid var(--node-border); transition: transform 180ms var(--ease-standard); } .tl-entry:hover .tl-node, .tl-entry.active .tl-node { transform: scale(1.35) rotate(45deg); } .tl-body { padding-top: 1px; } .tl-body p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: var(--page-fg); } .tl-body p:last-child { margin-bottom: 0; } .tl-body .lead { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--page-fg-strong); letter-spacing: -0.005em; } .tl-body .src { display: inline-block; margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--page-faint); } .tl-body .note { margin-top: 12px; padding: 12px 16px; background: var(--panel-bg); border-left: 3px solid var(--panel-line); font-size: 15px; line-height: 1.5; color: var(--page-muted); } /* Timeline Form */ body .timeline-sub-from input[type="email"] { line-height: 1.5; padding: 22px 15px !important; border-radius: 3px !important; border: 2px solid #fff; } body .timeline-sub-from input[type="email"]:focus, body .timeline-sub-from input[type="email"]:focus-visible { outline: 0; border-color: var(--courier-yellow) !important; } body .timeline-sub-from input[type="submit"]:focus, body .timeline-sub-from input[type="submit"]:focus-visible { outline: 0; } body .timeline-sub-from input[type="submit"] { width: 100% !important; background: var(--courier-yellow) !important; color: #000 !important; border: 0; font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding: 14px !important; cursor: pointer !important; transition: background 140ms var(--ease-standard) !important; } body .timeline-sub-from input[type="submit"]:hover { background: #000 !important; color: var(--courier-yellow) !important; box-shadow: inset 0 0 0 2px var(--courier-yellow) !important; } body .timeline-sub-from .gform-theme--foundation .gform_footer { margin-top: 12px !important; } body .timeline-sub-from .gform-theme--framework .gform_validation_errors .gform_submission_error, body .timeline-sub-from .gform-theme--framework .gform_validation_errors .gform-icon , body .timeline-sub-from .gform-theme--framework .gform_validation_errors .gform-icon::before, body .timeline-sub-from .gform-theme--framework .gfield_validation_message:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) { color: var(--courier-yellow) !important; } body .timeline-sub-from .gform-theme--framework .gform_validation_errors { border-color: var(--courier-yellow) !important; } body .timeline-sub-from input[type="email"]::placeholder { color: #2e2e2e98 !important; } /* pull quote inside timeline */ .pullquote { margin: 22px 0 4px; padding: 22px 0 0; border-top: 2px solid var(--page-fg-strong); } .pullquote blockquote, .pullquote blockquote p { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.28; letter-spacing: -0.01em; color: var(--page-fg-strong); } .pullquote .hl { background: var(--courier-yellow); color: #000; padding: 0 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .pullquote cite { display: block; margin-top: 14px; font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--page-faint); } /* Video Inside Timeline */ .video-reel-container { margin: 2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; } .video-reel-container iframe { width: 100%; height: auto; aspect-ratio: 9 / 16; } .video-reel-container .vr-kicker { font-family: var(--font-display); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 14%; } .video-reel-container .vr-meta { display: flex; flex-direction: column; gap: 5px; } .video-reel-container .vr-notes { font-size: 16px; } .video-reel-container .src { display: block; margin-top: 14px; font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--page-faint); } .video-reel-container .src a { color: var(--page-fg); text-decoration: none; border-bottom: 2px solid var(--courier-yellow); padding-bottom: 1px; transition: background 140ms var(--ease-standard), color 140ms var(--ease-standard); } .video-reel-container .src a :hover { background: var(--courier-yellow); color: var(--link-hover-fg); } /* video Cover */ .video-reel-container .reels-container { position: relative; } .vr-cover { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: #000; cursor: pointer; transition: opacity .25s ease; } .vr-cover.is-hidden { opacity: 0; pointer-events: none; } .vr-play-btn { width: 64px; height: 64px; border-radius: 50%; background: #FFD400; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.4); } .vr-play-btn svg { margin-left: 3px; /* optical centering for the triangle */ } /* Ebvent Popout */ .event-popup { position: relative; z-index: 6; background: var(--courier-yellow); color: #000; border: 2px solid #000; box-shadow: 4px 4px 0 #000; --evt-padding: clamp(20px, .5vw, 12px); padding: var(--evt-padding); display: flex; gap: 1rem; align-items: flex-start; flex-direction: column; gap: 20px; } .event-popout { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; } /* .tl-body > .event-popup { flex-direction: unset; } */ .event-popout img { margin-top: calc(var(--evt-padding) * -1); margin-inline: calc(var(--evt-padding) * -1); width: calc(100% + (var(--evt-padding) * 2)); max-width: none; display: block; height: 220px; object-fit: cover; object-position: center; } .event-popup .nl-eyebrow { margin-bottom: 0 !important; } .event-popup .evt-pop-hd { text-transform: uppercase; font-weight: 800; letter-spacing: -5%; } .event-popout-media { position: relative; width: 100%; } .event-popout-media .caption { position: absolute; bottom: 20px; z-index: 2; color: #fff; margin: 0; text-transform: uppercase; font-size: 14px; font-weight: 600; } @media screen and (max-width: 768px){ .event-popout img { height: 180px; } } /* Event Popout large */ .event-popup.lg { gap: 0 1rem; padding: 2rem; flex-wrap: wrap; } .eve-content h3 { text-transform: uppercase; letter-spacing: -5%; margin-top: 1rem; font-weight: 800; } .event-popup.lg .sub-con { width: 100%; } .eve-content { max-width: 500px; width: 100%; } .popt-info { font-size: 16px; font-weight: 600; } .evt-pop-y { font-weight: 800; } /* PopupWith Image */ .even-popout-with-img { position: relative; z-index: 6; background: var(--courier-yellow); color: #000; border: 2px solid #000; box-shadow: 8px 8px 0 #000; margin-bottom: 1rem; } .even-popout-with-img .pop-content { padding: 2rem; } .pop-img-con { position: relative; min-height: 200px; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 1rem; } .pop-img-con > div { position: relative; min-height: inherit; } .pop-img-con .year { display: inline-flex; align-items: center; gap: 10px; color: #000; background-color: var(--courier-yellow); padding: 7px 13px; font-family: var(--font-display); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; position: absolute; top: 0; left: 0; } .placeholder { position: absolute; bottom: 0; left: 0; font-weight: 600; text-transform: uppercase; color: var(--page-faint); font-size: 14px; } .pop-content .nl-eyebrow { margin-bottom: 0; } /* Image Grid Section */ .images-grid { display:grid; grid-template-columns:repeat(var(--grid-columns),1fr); gap:var(--grid-gap); } @media screen and (max-width: 998px) { .event-popup { flex-direction: column; align-items: self-start; } } @media screen and (max-width: 767px) { .video-reel-container { grid-template-columns: 100%; } .images-grid { grid-template-columns: 100%; } } /* ---------- Coda ---------- */ .coda { max-width: 720px; margin: 8px auto 0; padding: 24px 28px 64px; } .coda .origin { font-size: 15px; line-height: 1.55; color: var(--page-muted); border-top: 1px solid var(--page-line); padding-top: 20px; } .coda .origin a { color: var(--page-fg); border-bottom: 2px solid var(--courier-yellow); text-decoration: none; transition: color 140ms var(--ease-standard); } .coda .origin a:hover { background-color: var(--courier-yellow); color:var(--link-hover-fg); } .coda .tags { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .coda .tags .label { font-family: var(--font-display); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--page-faint); margin-right: 4px; } .coda .tags .tag { font-family: var(--font-display); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; border: 2px solid var(--tag-border); padding: 6px 11px; color: var(--page-fg-strong); cursor: default; transition: background 140ms var(--ease-standard), color 140ms var(--ease-standard), border-color 140ms var(--ease-standard); } .coda .tags .tag:hover { background: var(--courier-yellow); color: #000; border-color: var(--courier-yellow); } /* ---------- Timeline figure (image inside an entry) ---------- */ .tl-figure { margin: 4px 0 18px; } .tl-figure image-slot, .tl-figure img { display: block; width: 100%; /* height: 425px; */ object-fit: cover; background: var(--panel-bg); border: 1px solid var(--page-line); } .tl-figure figcaption { margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--courier-yellow); } .tl-figure .cap { display: block; font-size: 14px; line-height: 1.45; color: var(--page-muted); } .tl-figure .cred { display: block; margin-top: 3px; font-family: var(--font-display); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--page-faint); } /* ---------- Footer ---------- */ .foot { background: var(--courier-black); color: #fff; border-top: var(--border-bar) solid var(--courier-yellow); padding: 44px 28px 40px; } .foot-grid { max-width: 1380px; margin: 0 auto; display: flex; flex-direction: column; gap: 34px; } .foot-top { display: flex; flex-wrap: wrap; gap: 28px 40px; justify-content: space-between; align-items: flex-start; } .foot-lockup { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 26px; } .foot-lockup .plus { font-weight: 400; } .foot-proj { margin-top: 14px; font-family: var(--font-display); font-size: 22px; font-weight: 500; color: rgba(255,255,255,0.92); } .foot-links { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: flex-end; } .foot-links > a { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; text-decoration: none; transition: color 140ms var(--ease-standard); } .foot-links > a:hover { color: var(--courier-yellow); } .foot-social { display: flex; align-items: center; gap: 16px; } .foot-social a { color: #fff; display: inline-flex; transition: color 140ms var(--ease-standard); } .foot-social a:hover { color: var(--courier-yellow); } .foot-social svg { display: block; } .foot-bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.55); } .foot-bottom b { color: var(--courier-yellow); font-weight: 700; } .foot-bottom a { color: rgba(255,255,255,0.7); } @media (max-width: 720px) { .foot-top { flex-direction: column; } .foot-links { justify-content: flex-start; } } /* responsive timeline */ @media (max-width: 720px) { .tl-spine, .tl-fill { left: 7px; } .tl-node { left: 0; top: 4px; } .tl-entry { grid-template-columns: 1fr; column-gap: 0; padding-left: 34px; } .tl-date { text-align: left; padding-right: 0; margin-bottom: 12px; } .tl-date .md { font-size: 24px; } .yearbar { margin-top: 24px; } } /* ---------- Scroll reveal (only when JS + motion allowed) ---------- */ @media (prefers-reduced-motion: no-preference) { .js-anim .tl-entry { opacity: 0; transform: translateY(22px); transition: opacity 520ms var(--ease-standard), transform 520ms var(--ease-standard); } .js-anim .tl-entry.in { opacity: 1; transform: none; } .js-anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-standard), transform 600ms var(--ease-standard); } .js-anim .reveal.in { opacity: 1; transform: none; } } /* ===== */ /* ============================================================ TEMPLATE: Newsletter CTA (mid-timeline interstitial) Mirror of templates/newsletter-cta — high-voltage yellow band. ============================================================ */ .nl-cta { position: relative; z-index: 6; margin: 60px 0; background: var(--courier-yellow); color: #000; border: 2px solid #000; box-shadow: 10px 10px 0 #000; padding: clamp(28px,3.4vw,44px); display: flex; flex-wrap: wrap; gap: clamp(22px,3vw,44px); align-items: center; } .nl-cta .nl-copy { flex: 1 1 320px; min-width: 260px; } .nl-eyebrow { display: inline-flex; align-items: center; gap: 10px; background: #000; color: var(--courier-yellow); padding: 7px 13px; font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 20px; } .nl-diamond { width: 9px; height: 9px; background: var(--courier-yellow); display: inline-block; transform: rotate(45deg); } .nl-diamond-lg { width: 13px; height: 13px; } .nl-head { margin: 0 0 14px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 1.0; letter-spacing: -0.02em; font-size: clamp(30px,4.4vw,52px); color: #000; } .nl-body { margin: 0; font-size: clamp(16px,1.5vw,19px); line-height: 1.5; max-width: 46ch; font-weight: 500; color: #000; } .nl-readers { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 2px solid rgba(0,0,0,0.18); } .nl-num { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; } .nl-rlabel { font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; } .nl-card { flex: 0 1 348px; min-width: 260px; background: #000; color: #fff; padding: 26px; } .nl-flabel { display: block; font-family: var(--font-display); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--courier-yellow); margin-bottom: 14px; } .nl-input { width: 100%; box-sizing: border-box; background: #fff; border: 2px solid #fff !important; color: #000 !important; font-family: var(--font-body); font-size: 15px; padding: 13px 14px !important; margin-bottom: 12px; outline: none; transition: border-color 140ms var(--ease-standard); } .nl-input::placeholder { color: #2e2e2e98 !important; } .nl-input:focus, .nl-input:focus-visible { border-color: var(--courier-yellow) !important; } .nl-btn { width: 100%; background: var(--courier-yellow); color: #000; border: 0; font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; padding: 14px; cursor: pointer; transition: background 140ms var(--ease-standard); } .nl-btn:hover { background: #000; color: var(--courier-yellow); box-shadow: inset 0 0 0 2px var(--courier-yellow); } .nl-fine { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.55); } .nl-done-h { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; font-size: 21px; text-transform: uppercase; letter-spacing: -0.01em; } .nl-done-p { margin: 13px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.7); } @media (max-width: 720px) { .nl-cta { box-shadow: 6px 6px 0 #000; } } /* ============================================================ TEMPLATE: Related Coverage (article-foot card row) Mirror of templates/related-coverage. ============================================================ */ .related { max-width: 980px; margin: 0 auto; padding: 8px 28px 64px; } .related .rel-head { margin-bottom: 28px; } .rel-stamp { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; background: #000; color: var(--courier-yellow); padding: 8px 14px; margin-bottom: 16px; } [data-theme="dark"] .rel-stamp { background: var(--courier-yellow); color: #000; } .related h2 { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 1.04; letter-spacing: -0.02em; font-size: clamp(28px,4vw,46px); color: var(--page-fg-strong); } .rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px,1fr)); gap: 22px; } .rel-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 2px solid var(--page-line); background: var(--page-bg); transition: border-color 160ms var(--ease-standard), transform 160ms var(--ease-standard); } .rel-card:hover { border-color: var(--courier-yellow); transform: translateY(-3px); } .rel-media { position: relative; aspect-ratio: 16/9; background: #111; display: flex; align-items: center; justify-content: center; overflow: hidden; } .rel-ghost { position: absolute; font-family: var(--font-display); font-weight: 800; font-size: clamp(34px,5vw,48px); text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.06); white-space: nowrap; } .rel-node { width: 22px; height: 22px; background: var(--courier-yellow); transform: rotate(45deg); transition: transform 200ms var(--ease-standard); } .rel-card:hover .rel-node { transform: rotate(135deg) scale(1.1); } .rel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) contrast(1.05); transition: transform 320ms var(--ease-standard); } .rel-card:hover .rel-img { transform: scale(1.04); } .rel-text { padding: 20px 20px 22px; } .rel-kickers { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; } .rel-kickers .tag { font-family: var(--font-display); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; border: 2px solid var(--tag-border); padding: 4px 8px; color: var(--page-fg-strong); } .rel-card h3 { margin: 0 0 14px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 1.08; letter-spacing: -0.01em; font-size: 21px; color: var(--page-fg-strong); } .rel-meta { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--page-faint); } .rel-meta .dot { color: var(--courier-yellow); }