/* Theme Name: Bright Matter Theme URI: https://example.com/bright-matter Author: Bright Matter Author URI: https://example.com Description: A classic WordPress theme for Bright Matter — a science-discovery publication for curious readers ages 8–14. Block-editor friendly content, a category-led layout, and patterns for missions, glossaries, picture stories, quizzes, and more. Version: 0.9.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bright-matter Tags: classic-theme, blog, news, magazine, education, custom-colors, custom-menu, featured-images, block-styles, wide-blocks */ /* ========================================================= Bright Matter — base stylesheet Tokens are also exported via theme.json so they appear in the block editor. ========================================================= */ :root { --teal: #0F766E; --aqua: #2DD4BF; --sun: #FACC15; --coral: #FB7185; --paper: #FFFDF8; --paper-2: #F6F1E4; --paper-3: #EDE6D2; --char: #1F2937; --char-2: #374151; --char-3: #6B7280; --f-d: 'Space Grotesk', system-ui, sans-serif; --f-r: 'Newsreader', Georgia, serif; --f-u: 'IBM Plex Sans', system-ui, sans-serif; --bm-vh: 1vh; --bm-admin-bar: 0px; --bm-mobile-header: 76px; /* radius scale */ --radius-sm: 6px; /* tags, labels, , small UI */ --radius-card: 6px; /* content cards, thumbnails, prose images */ --radius-panel: 6px; /* sidebar boxes, quiz, glossary, feature panels */ --radius-pill: 999px; /* buttons, filter chips, search, pill badges */ /* per-category accent — overridden by .cat-* body classes */ --cat-bg: #0b1220; --cat-accent: var(--aqua); --cat-warm: var(--coral); } *, *::before, *::after { box-sizing: border-box; } html, body{ margin: 0; padding: 0; overflow-x: clip; } html { min-height: 100%; } body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-family: var(--f-r); color: var(--char); background: var(--paper); -webkit-font-smoothing: antialiased; } #site-main { flex: 1 0 auto; } .foot { flex-shrink: 0; } body.admin-bar { --bm-admin-bar: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --bm-admin-bar: 46px; } } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { position: fixed; left: 16px; top: 16px; width: auto; height: auto; padding: 8px 14px; background: var(--char); color: var(--paper); z-index: 1000; border-radius: var(--radius-card); } /* Per-category accent (set on ) */ body.cat-latest { --cat-bg: #0f1f1c; --cat-accent: var(--aqua); --cat-warm: var(--sun); } body.cat-space { --cat-bg: #0b1220; --cat-accent: var(--aqua); --cat-warm: var(--coral); } body.cat-tech { --cat-bg: #0a1f1c; --cat-accent: var(--aqua); --cat-warm: var(--sun); } body.cat-earth-life { --cat-bg: #0a2a1f; --cat-accent: #34d399; --cat-warm: var(--sun); } body.cat-how-it-works { --cat-bg: #0d1a2a; --cat-accent: var(--aqua); --cat-warm: var(--sun); } body.cat-hidden-histories { --cat-bg: #1a0d0f; --cat-accent: var(--coral); --cat-warm: var(--sun); } body.cat-quizzes { --cat-bg: #0b5c52; --cat-accent: var(--sun); --cat-warm: var(--coral); } /* ── SHARED TAG ── */ .tag { font-family: var(--f-u); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; padding: 3px 9px; border-radius: var(--radius-sm); display: inline-block; } .tag.feature { background: var(--char); color: var(--paper); } .tag.space { background: var(--teal); color: var(--paper); } .tag.breaking { background: var(--coral); color: var(--paper); } .tag.explainer { background: var(--aqua); color: var(--char); } .tag.picture { background: var(--sun); color: var(--char); } .tag.howweknow { background: var(--paper); color: var(--char); box-shadow: inset 0 0 0 1px var(--char); } .tag.history { background: var(--char); color: var(--sun); } .tag.quiz-tag { background: var(--char); color: var(--paper); } .tag.life { background: #065f46; color: var(--paper); } .tag.news { background: var(--coral); color: var(--paper); } .tag.list-tag { background: var(--paper-2); color: var(--char); box-shadow: inset 0 0 0 1px var(--paper-3); } /* ── MASTHEAD ── */ .top { background: var(--teal); color: var(--paper); position: relative; z-index: 300; } .top-strip { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-family: var(--f-u); font-size: 11px; letter-spacing: .04em; color: rgba(255,253,248,.8); border-bottom: 1px solid rgba(255,253,248,.12); } .top-strip .crumbs { display: flex; gap: 18px; } .top-strip .crumbs b { color: var(--sun); font-weight: 500; } .masthead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 18px 0; } .logo { display: flex; align-items: center; gap: 12px; color: var(--paper); } .logo-mark { width: 46px; height: auto; flex: 0 0 auto; display: block; } .logo-text { font-family: var(--f-d); font-weight: 700; font-size: 22px; letter-spacing: -.01em; line-height: 1; } .logo-text .sep { opacity: .55; margin: 0 2px; font-weight: 400; } .nav { display: flex; gap: 16px; justify-content: center; font-family: var(--f-d); font-size: 14px; font-weight: 500; flex-wrap: nowrap; padding: 0; margin: 0; list-style: none; } .nav li { display: inline-block; } .nav a { color: var(--aqua); padding: 6px 0; position: relative; } .nav .current-menu-item > a, .nav a.active { color: var(--paper); } .nav .current-menu-item > a::after, .nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sun); border-radius: 2px; } .nav a:hover { color: var(--paper); } .actions { display: flex; gap: 10px; align-items: center; } .search-form { display: inline-block; } .search-field { border: 2px solid rgba(255,253,248,.35); border-radius: var(--radius-pill); padding: 6px 14px 6px 30px; width: 216px; background: rgba(255,253,248,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 10px center / 14px no-repeat; font-family: var(--f-u); font-size: 12px; color: rgba(255,253,248,.95); } .search-field::placeholder { color: rgba(255,253,248,.75); } .search-submit { display: none; } .btn { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: 8px 18px; font-family: var(--f-d); font-weight: 600; font-size: 14px; border: 2px solid transparent; cursor: pointer; line-height: 1; } .btn.sun { background: var(--sun); color: var(--char); } .btn.sun:hover { background: #ffd730; } .btn.ghost { background: transparent; border-color: rgba(255,253,248,.45); color: var(--paper); } .btn.outline { background: transparent; border-color: var(--char); color: var(--char); } .btn.teal { background: var(--teal); color: var(--paper); } @media (min-width: 1201px) { .masthead { padding: 12px 0; } .top .logo-text { order: 1; } .top .logo-mark { order: 2; position: relative; z-index: 2; transform: translateY(20px) scale(1.34); } } /* ── CATEGORY HERO ── */ .cat-hero { background: var(--cat-bg); color: var(--paper); padding: 0; position: relative; overflow: hidden; min-height: 520px; display: flex; flex-direction: column; } .cat-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 90% 10%, rgba(45,212,191,.12), transparent 40%), radial-gradient(circle at 5% 85%, rgba(250,204,21,.07), transparent 40%); pointer-events: none; } .cat-hero .stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .star { position: absolute; border-radius: 50%; background: var(--paper); opacity: 0; animation: bm-twinkle var(--dur, 3s) var(--delay, 0s) infinite; } @keyframes bm-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: var(--op, .6); } } @media (prefers-reduced-motion: reduce) { .star { animation: none; opacity: .5; } } .cat-hero .wrap { position: relative; z-index: 1; flex-grow: 1; flex-basis: auto; width: 100%; max-width: 1240px; display: flex; align-items: stretch; padding-top: 48px; padding-bottom: 48px; } .cat-hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; width: 100%; } .cat-emblem-wrap { align-self: center; } .cat-crumbs { font-family: var(--f-u); font-size: 11px; color: rgba(255,253,248,.55); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 14px; } .cat-crumbs a { color: var(--aqua); } .cat-crumbs .sep { margin: 0 8px; opacity: .4; } .cat-name { font-family: var(--f-d); font-weight: 700; font-size: clamp(64px, 8vw, 108px); line-height: .92; letter-spacing: -.03em; margin: 0 0 18px; } .cat-name .sub { font-size: clamp(14px, 1.2vw, 18px); font-weight: 400; color: rgba(255,253,248,.5); letter-spacing: .06em; font-family: var(--f-u); display: block; margin-bottom: 10px; } .cat-intro { font-family: var(--f-r); font-size: 19px; line-height: 1.5; color: rgba(255,253,248,.82); max-width: 54ch; margin: 0 0 24px; text-wrap: pretty; } .subtopics { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; } .subtopic { padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(255,253,248,.22); font-family: var(--f-u); font-size: 13px; font-weight: 500; color: rgba(255,253,248,.8); cursor: pointer; transition: all 120ms; background: transparent; } .subtopic:hover { border-color: var(--cat-accent); color: var(--cat-accent); } .subtopic.active, .subtopic[aria-pressed="true"] { background: var(--cat-accent); border-color: var(--cat-accent); color: var(--char); } /* emblem side */ .cat-emblem-wrap { display: flex; align-items: center; justify-content: center; } .cat-emblem { width: min(320px, 100%); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,253,248,.12); background: rgba(255,253,248,.04); display: flex; align-items: center; justify-content: center; position: relative; } .cat-emblem::before { content: ""; position: absolute; inset: 22px; border-radius: 50%; border: 1px dashed rgba(255,253,248,.14); } .cat-emblem::after { content: ""; position: absolute; inset: 56px; border-radius: 50%; background: radial-gradient(circle, var(--cat-accent) 0%, rgba(45,212,191,.1) 60%, transparent 80%); opacity: .55; } .cat-emblem .glyph { position: relative; z-index: 1; font-family: var(--f-d); font-size: 72px; line-height: 1; color: var(--cat-accent); opacity: .9; text-shadow: 0 0 40px rgba(45,212,191,.4); user-select: none; } .cat-emblem.has-poster { width: min(384px, 100%); overflow: hidden; background: rgba(255,253,248,.06); border: 0; } .cat-emblem.has-poster::after { display: none; } .cat-emblem-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .cat-count { font-family: var(--f-u); font-size: 11px; color: rgba(255,253,248,.4); letter-spacing: .12em; text-transform: uppercase; margin: -12px 0 24px; } /* ── START HERE ── */ .start-here { padding-top: 36px; } .start-box { background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: var(--radius-panel); padding: 28px 32px; display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 0; } .start-label-col { padding-right: 28px; border-right: 1px solid var(--paper-3); margin-right: 28px; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .kicker { font-family: var(--f-u); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--char-3); display: block; margin-bottom: 5px; } .start-label-col h3 { font-family: var(--f-d); font-weight: 700; font-size: 24px; margin: 4px 0 0; letter-spacing: -.01em; } .start-item { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; padding: 0 24px; border-right: 1px solid var(--paper-3); } .start-item:last-child { border-right: none; } .start-num { width: 32px; height: 32px; border-radius: 50%; background: var(--char); display: flex; align-items: center; justify-content: center; font-family: var(--f-d); font-weight: 700; font-size: 15px; color: var(--sun); flex: 0 0 auto; } .start-item .title { font-family: var(--f-d); font-weight: 600; font-size: 16px; line-height: 1.3; margin: 0 0 5px; color: var(--char); } .start-item .me { font-family: var(--f-u); font-size: 11px; color: var(--char-3); line-height: 1.5; } /* ── SECTION HEAD ── */ .section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; gap: 20px; flex-wrap: wrap; } .section-head h2 { font-family: var(--f-d); font-weight: 700; font-size: 32px; margin: 0; letter-spacing: -.015em; } .section-head .more { font-family: var(--f-d); font-weight: 600; font-size: 14px; color: var(--teal); border-bottom: 2px solid var(--sun); padding-bottom: 2px; } .section-head .more:hover { color: var(--char); } /* ── FEATURED + MISSIONS ── */ .feature-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; padding: 44px 0 0; } .feat-card { display: flex; flex-direction: column; gap: 0; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--paper-3); background: var(--paper); } .feat-card .thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; background: #0b1220; } .feat-card .thumb img { width: 100%; height: 100%; object-fit: cover; } .feat-card .thumb .img-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-u); font-size: 11px; letter-spacing: .08em; color: rgba(255,253,248,.38); background: radial-gradient(circle at 55% 45%, rgba(251,113,133,.3), rgba(250,204,21,.08) 35%, #0b1220 75%); } .feat-card .body { padding: 24px 26px 26px; flex: 1; display: flex; flex-direction: column; gap: 10px; } .feat-card .tag-row { display: flex; gap: 8px; flex-wrap: wrap; } .feat-card h3 { font-family: var(--f-d); font-weight: 700; font-size: 26px; margin: 0; letter-spacing: -.015em; line-height: 1.1; text-wrap: balance; } .feat-card:hover h3 { color: var(--teal); } .feat-card .deck { font-family: var(--f-r); font-size: 16px; line-height: 1.5; color: var(--char-2); margin: 0; } .feat-card .byline { font-family: var(--f-u); font-size: 11px; color: var(--char-3); margin-top: auto; padding-top: 6px; } /* missions rail */ .missions-rail { background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: var(--radius-panel); padding: 24px; display: flex; flex-direction: column; gap: 0; } .missions-rail .rail-head { margin-bottom: 16px; } .missions-rail .rail-head h3 { font-family: var(--f-d); font-weight: 700; font-size: 20px; margin: 0 0 3px; letter-spacing: -.01em; } .missions-rail .rail-head p { font-family: var(--f-r); font-size: 14px; color: var(--char-3); margin: 0; } .mission-row { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--paper-3); align-items: center; } .mission-row:last-child { border-bottom: none; } .mission-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--paper-3); background: var(--paper); flex: 0 0 auto; } .mission-row.live .mission-dot { background: var(--sun); border-color: var(--sun); box-shadow: 0 0 0 3px rgba(250,204,21,.25); } .mission-info .name { font-family: var(--f-d); font-weight: 600; font-size: 15px; color: var(--char); } .mission-info .where { font-family: var(--f-u); font-size: 10px; color: var(--char-3); margin-top: 2px; } .mission-count { font-family: var(--f-u); font-size: 11px; color: var(--char-2); border: 1px solid var(--paper-3); padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; } /* ── FILTER BAR ── */ .filter-wrap { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--paper-3); box-shadow: 0 1px 8px rgba(31,41,55,.05); padding: 12px 0; margin-top: 44px; } .filter-bar { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .filter-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .filter-label { font-family: var(--f-u); font-size: 10px; color: var(--char-3); text-transform: uppercase; letter-spacing: .12em; margin-right: 4px; } .filter-pill { padding: 5px 12px; border-radius: var(--radius-pill); border: 2px solid var(--paper-3); font-family: var(--f-u); font-size: 12px; font-weight: 500; color: var(--char-2); background: var(--paper); cursor: pointer; transition: all 100ms; } .filter-pill:hover { border-color: var(--char-2); color: var(--char); } .filter-pill.on, .filter-pill[aria-pressed="true"] { background: var(--char); color: var(--paper); border-color: var(--char); } .filter-spacer { flex: 1; } .view-toggle { display: flex; gap: 2px; } .view-btn { width: 32px; height: 32px; border-radius: var(--radius-card); border: 2px solid var(--paper-3); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--char-3); background: var(--paper); font-size: 14px; } .view-btn.on, .view-btn[aria-pressed="true"] { background: var(--char); color: var(--paper); border-color: var(--char); } /* ── STORY GRID ── */ .story-section { padding-top: 24px; padding-bottom: 44px; } .story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .s-card { display: flex; flex-direction: column; gap: 10px; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--paper-3); background: var(--paper); } .s-card .thumb { aspect-ratio: 4/3; position: relative; overflow: hidden; flex: 0 0 auto; } .s-card .thumb img { width: 100%; height: 100%; object-fit: cover; } .s-card .thumb .img-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-u); font-size: 10px; color: rgba(31,41,55,.3); letter-spacing: .08em; background: repeating-linear-gradient(135deg, rgba(31,41,55,.04) 0 1px, transparent 1px 14px), var(--paper-2); } .s-card .thumb.teal .img-ph { background: radial-gradient(circle at 55% 45%, rgba(45,212,191,.4), rgba(15,118,110,.5) 70%), #0a4540; color: rgba(255,253,248,.5); } .s-card .thumb.coral .img-ph { background: radial-gradient(circle at 45% 55%, rgba(251,113,133,.5), #6a1a24 70%); color: rgba(255,253,248,.5); } .s-card .thumb.sun .img-ph { background: radial-gradient(circle at 50% 45%, rgba(250,204,21,.5), #4a3c00 70%); color: rgba(255,253,248,.5); } .s-card .thumb.dark .img-ph { background: radial-gradient(circle at 55% 40%, rgba(45,212,191,.25), #0b1220 70%); color: rgba(255,253,248,.4); } .s-card .content { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .s-card .tag-row { display: flex; gap: 6px; flex-wrap: wrap; } .s-card h3 { font-family: var(--f-d); font-weight: 600; font-size: 19px; line-height: 1.2; margin: 0; letter-spacing: -.01em; text-wrap: balance; } .s-card:hover h3 { color: var(--teal); } .s-card .excerpt { font-family: var(--f-r); font-size: 14px; line-height: 1.45; color: var(--char-2); margin: 0; } .s-card .meta { font-family: var(--f-u); font-size: 10px; color: var(--char-3); letter-spacing: .04em; margin-top: auto; padding-top: 6px; text-transform: uppercase; } .s-card.wide { grid-column: span 2; flex-direction: row; } .s-card.wide .thumb { aspect-ratio: unset; width: 50%; flex: 0 0 50%; } .s-card.wide .content { justify-content: center; } .s-card.wide h3 { font-size: 24px; } .s-card.tall .thumb { aspect-ratio: 3/4; } body.list-view .story-grid { grid-template-columns: 1fr; } body.list-view .s-card { flex-direction: row; border-radius: var(--radius-card); } body.list-view .s-card .thumb { width: 200px; flex: 0 0 200px; aspect-ratio: unset; border-radius: 0; } body.list-view .s-card.wide { grid-column: span 1; } body.list-view .s-card.wide .thumb { width: 200px; flex: 0 0 200px; } body.list-view .s-card.tall .thumb { aspect-ratio: unset; } @media (max-width: 600px) { body.list-view .s-card { flex-direction: column; } body.list-view .s-card .thumb { width: 100%; flex: none; aspect-ratio: 16/9; } body.list-view .s-card.wide .thumb { width: 100%; flex: none; } } /* ── PICTURE STORY STRIP ── */ .picture-strip { background: var(--char); color: var(--paper); border-radius: var(--radius-panel); padding: 36px; display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: center; margin-bottom: 44px; position: relative; overflow: hidden; } .picture-strip::before { content: ""; position: absolute; right: -80px; bottom: -80px; width: 340px; height: 340px; border-radius: 50%; background: var(--teal); opacity: .15; } .picture-strip .ps-left { position: relative; } .picture-strip .ps-left h3 { font-family: var(--f-d); font-weight: 700; font-size: 28px; margin: 8px 0 10px; letter-spacing: -.015em; line-height: 1.08; } .picture-strip .ps-left .deck { font-family: var(--f-r); font-size: 15px; color: rgba(255,253,248,.78); margin: 0 0 18px; line-height: 1.5; } .picture-strip .ps-left .byline { font-family: var(--f-u); font-size: 11px; color: rgba(255,253,248,.5); margin-bottom: 16px; } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; } .gallery .g-frame { aspect-ratio: 1; border-radius: var(--radius-card); overflow: hidden; background: #1a2535; position: relative; cursor: pointer; } .gallery .g-frame .img-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-u); font-size: 10px; color: rgba(255,253,248,.3); background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 12px), #1a2535; } .gallery .g-frame:hover .img-ph { background: radial-gradient(circle at 50% 50%, rgba(45,212,191,.25), #1a2535 70%); } /* ── EVERGREEN ── */ .evergreen { background: var(--paper-2); border-radius: var(--radius-panel); padding: 32px; margin-bottom: 44px; } .evergreen-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; } .evergreen-head h2 { font-family: var(--f-d); font-weight: 700; font-size: 28px; margin: 0; letter-spacing: -.015em; } .ev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .ev-card { background: var(--paper); border: 1px solid var(--paper-3); border-radius: var(--radius-panel); padding: 20px; display: flex; flex-direction: column; gap: 8px; } .ev-card:hover { border-color: var(--teal); } .ev-card .n { font-family: var(--f-d); font-weight: 700; font-size: 44px; line-height: 1; color: var(--teal); letter-spacing: -.03em; margin-bottom: 2px; } .ev-card .q { font-family: var(--f-d); font-weight: 600; font-size: 16px; line-height: 1.3; margin: 0; color: var(--char); text-wrap: balance; } .ev-card:hover .q { color: var(--teal); } .ev-card .me { font-family: var(--f-u); font-size: 11px; color: var(--char-3); text-transform: uppercase; letter-spacing: .06em; } /* ── GLOSSARY + QUIZZES ── */ .two-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; margin-bottom: 44px; } .glos-box { background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: var(--radius-panel); padding: 28px; } .glos-box h3 { font-family: var(--f-d); font-weight: 700; font-size: 24px; margin: 6px 0 4px; letter-spacing: -.015em; } .glos-box .sub { font-family: var(--f-r); font-size: 15px; color: var(--char-3); margin: 0 0 18px; } .glos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; } .glos-grid dt { font-family: var(--f-d); font-weight: 600; font-size: 16px; margin-top: 10px; color: var(--char); } .glos-grid dd { margin: 2px 0 0; font-family: var(--f-r); font-size: 14px; color: var(--char-2); line-height: 1.4; } .glos-grid dt:first-child { margin-top: 0; } .glos-more { font-family: var(--f-d); font-weight: 600; font-size: 13px; color: var(--teal); border-bottom: 2px solid var(--sun); padding-bottom: 1px; display: inline-block; margin-top: 16px; } .quiz-box { background: var(--char); border-radius: var(--radius-panel); padding: 28px; } .quiz-box h3 { font-family: var(--f-d); font-weight: 700; font-size: 24px; margin: 6px 0 4px; letter-spacing: -.015em; color: var(--paper); } .quiz-box .sub { font-family: var(--f-r); font-size: 15px; color: rgba(255,253,248,.7); margin: 0 0 16px; } .quiz-list { display: flex; flex-direction: column; gap: 8px; } .quiz-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; padding: 12px 14px; border: 2px solid rgba(255,253,248,.12); border-radius: var(--radius-card); align-items: center; cursor: pointer; } .quiz-item:hover { border-color: var(--sun); } .quiz-item .ico { width: 26px; height: 26px; border-radius: 50%; background: var(--sun); color: var(--char); display: flex; align-items: center; justify-content: center; font-family: var(--f-d); font-weight: 700; font-size: 13px; } .quiz-item .qtitle { font-family: var(--f-d); font-weight: 500; font-size: 15px; color: var(--paper); } .quiz-item .qtime { font-family: var(--f-u); font-size: 10px; color: rgba(255,253,248,.45); } /* ── PARTICIPATE ── */ .participate { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; margin-bottom: 44px; } .ask-box { background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: var(--radius-panel); padding: 28px; display: flex; flex-direction: column; gap: 12px; } .ask-box h3 { font-family: var(--f-d); font-weight: 700; font-size: 24px; margin: 6px 0 0; letter-spacing: -.015em; } .ask-box .deck { font-family: var(--f-r); font-size: 16px; color: var(--char-2); margin: 0; line-height: 1.5; } .q-list { display: flex; flex-direction: column; gap: 8px; } .q-item { background: var(--paper); border: 1px solid var(--paper-3); border-radius: var(--radius-card); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .q-item .qtext { font-family: var(--f-d); font-size: 15px; font-weight: 500; color: var(--char); } .q-item .kid { font-family: var(--f-u); font-size: 10px; color: var(--char-3); white-space: nowrap; } .ask-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .contrib-box { background: var(--paper); border: 1px solid var(--paper-3); border-radius: var(--radius-panel); padding: 24px; display: flex; flex-direction: column; gap: 12px; } .contrib-head { display: flex; gap: 12px; align-items: center; } .contrib-head .av { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-d); font-weight: 700; font-size: 18px; flex: 0 0 auto; } .contrib-head .av.aqua { background: var(--aqua); color: var(--char); } .contrib-head .pill { display: inline-block; font-family: var(--f-u); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; background: var(--paper-2); border-radius: var(--radius-sm); color: var(--char-3); } .contrib-head .name { font-family: var(--f-d); font-weight: 600; font-size: 17px; margin: 3px 0 0; } .contrib-head .place { font-family: var(--f-u); font-size: 10px; color: var(--char-3); } .contrib-box .thumb { aspect-ratio: 16/9; border-radius: var(--radius-card); overflow: hidden; background: var(--paper-2); position: relative; } .contrib-box .thumb .img-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-u); font-size: 10px; color: rgba(31,41,55,.3); background: repeating-linear-gradient(135deg, rgba(31,41,55,.04) 0 1px, transparent 1px 14px), var(--paper-2); } .contrib-box h4 { font-family: var(--f-d); font-weight: 600; font-size: 18px; line-height: 1.25; margin: 0; text-wrap: balance; } .contrib-box:hover h4 { color: var(--teal); } .contrib-box .excerpt { font-family: var(--f-r); font-size: 14px; color: var(--char-2); margin: 0; line-height: 1.45; } .contrib-box .meta { font-family: var(--f-u); font-size: 10px; color: var(--char-3); text-transform: uppercase; letter-spacing: .04em; } /* ── PAGINATION ── */ .pagination { display: flex; justify-content: space-between; align-items: center; padding: 22px 0 44px; border-top: 1px solid var(--paper-3); flex-wrap: wrap; gap: 14px; } .pagination .info { font-family: var(--f-u); font-size: 12px; color: var(--char-3); } .pages { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .pages .page-numbers { width: 36px; height: 36px; border-radius: var(--radius-card); border: 2px solid var(--paper-3); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-u); font-size: 13px; color: var(--char-2); cursor: pointer; background: var(--paper); text-decoration: none; } .pages .page-numbers:hover { border-color: var(--teal); color: var(--teal); } .pages .page-numbers.current { background: var(--char); color: var(--paper); border-color: var(--char); } .pages .page-numbers.dots { border: none; background: transparent; } .pagination .feeds { display: flex; gap: 10px; flex-wrap: wrap; } .feed-btn { font-family: var(--f-u); font-size: 12px; font-weight: 500; color: var(--char-3); border: 2px solid var(--paper-3); padding: 5px 12px; border-radius: var(--radius-pill); cursor: pointer; background: var(--paper); } .feed-btn:hover { border-color: var(--teal); color: var(--teal); } /* ── ARTICLE (single post) ── */ .entry-header { padding: 56px 0 24px; } .entry-header .tag-row { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .entry-title { font-family: var(--f-d); font-weight: 700; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance; max-width: 22ch; } .entry-deck { font-family: var(--f-r); font-size: 20px; line-height: 1.5; color: var(--char-2); margin: 0 0 18px; max-width: 56ch; } .entry-byline { font-family: var(--f-u); font-size: 12px; color: var(--char-3); } .entry-content { padding: 12px 0 64px; } .entry-content > * { max-width: 64ch; margin-left: auto; margin-right: auto; } .entry-content p { font-family: var(--f-r); font-size: 19px; line-height: 1.65; color: var(--char); margin: 0 0 1em; } .entry-content h2 { font-family: var(--f-d); font-weight: 700; font-size: 32px; line-height: 1.15; margin: 1.6em 0 .4em; letter-spacing: -.015em; } .entry-content h3 { font-family: var(--f-d); font-weight: 700; font-size: 24px; margin: 1.4em 0 .3em; letter-spacing: -.01em; } .entry-content blockquote { border-left: 5px solid var(--sun); padding: 12px 0 12px 22px; font-family: var(--f-r); font-size: 22px; line-height: 1.45; color: var(--char-2); font-style: italic; margin: 32px 0; } .entry-content blockquote p { font: inherit; line-height: inherit; color: inherit; font-style: inherit; margin: 0; } .entry-content blockquote cite { display: block; font-family: var(--f-u); font-weight: 700; font-size: 13px; line-height: 1.3; color: var(--teal); font-style: normal; letter-spacing: 0.8px; text-transform: uppercase; margin-top: 14px; } .entry-content code { font-family: var(--f-u); font-size: .9em; background: var(--paper-2); padding: 1px 6px; border-radius: var(--radius-sm); } .entry-content .alignwide { max-width: 1040px; } .entry-content .alignfull { max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; } .entry-content figure { margin: 1.6em auto; } .entry-content figcaption { font-family: var(--f-u); font-size: 11px; color: var(--char-3); margin-top: 8px; text-align: center; letter-spacing: .04em; } /* ── FOOTER ── */ .foot { background: var(--char); color: var(--paper); padding: 64px 0 32px; margin-top: 44px; } body.home .foot { margin-top: 0; border-top: 44px solid var(--paper-2); } .foot-grid { display: grid; grid-template-columns: minmax(280px, 1.35fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr); gap: 36px; align-items: start; } .foot-grid > :nth-child(2) { grid-column: 3; } .foot-grid > :nth-child(3) { grid-column: 4; } .foot h4 { font-family: var(--f-d); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--sun); margin: 0 0 14px; } .foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-family: var(--f-u); font-size: 14px; } .foot ul a { color: rgba(255,253,248,.8); } .foot ul a:hover { color: var(--aqua); } .foot-logo-mark { display: inline-block; position: relative; top: 70px; z-index: 1; margin-top: 28px; transform: translateX(-110px) rotate(-17deg); transform-origin: center; } .foot-logo-mark img { width: 70px; height: auto; display: block; } .foot .blurb { font-family: var(--f-r); font-size: 15px; line-height: 1.5; color: rgba(255,253,248,.75); max-width: 34ch; margin-top: 12px; } .foot-bottom { border-top: 1px solid rgba(255,253,248,.12); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font-family: var(--f-u); font-size: 11px; color: rgba(255,253,248,.5); flex-wrap: wrap; gap: 10px; } .foot-bottom .links { display: flex; gap: 18px; flex-wrap: wrap; } .foot-bottom a { color: rgba(255,253,248,.6); } /* ── QUIZ — inline embed & standalone ── */ /* shared quiz block — card design */ .bm-quiz { background: var(--paper); border: 1px solid var(--paper-3); border-radius: var(--radius-panel); overflow: hidden; margin: 40px 0; position: relative; } /* yellow top bar */ .bm-quiz::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--sun), var(--aqua)); pointer-events: none; } /* standalone page — flush, slightly larger radius */ .bm-quiz--page { margin: 0; border-radius: var(--radius-panel); } .bm-quiz--page .bm-quiz-inner { align-items: start; } .bm-quiz--page .bm-quiz-options { grid-template-columns: 1fr; } /* inner two-column grid: question left, options right */ .bm-quiz-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 56px 48px; position: relative; } /* left column — label + question + explanation */ .bm-quiz-left { display: flex; flex-direction: column; gap: 14px; } .bm-quiz-label { display: inline-block; background: var(--char); color: var(--sun); font-family: var(--f-u); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .18em; padding: 5px 12px; align-self: flex-start; border-radius: var(--radius-sm); } .bm-quiz-question { font-family: var(--f-d); font-weight: 700; font-size: clamp(22px, 2.8vw, 38px); line-height: 1.06; letter-spacing: -.015em; color: var(--char); margin: 0; } /* right column — options */ .bm-quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .bm-quiz-opt { background: var(--paper-2); border: 2px solid var(--paper-3); padding: 14px 16px; display: flex; align-items: center; gap: 12px; font-family: var(--f-d); font-size: 16px; font-weight: 600; color: var(--char); cursor: pointer; text-align: left; transition: border-color 200ms, background 200ms, opacity 400ms 100ms; border-radius: var(--radius-card); } .bm-quiz-opt:hover:not([disabled]) { border-color: var(--char); background: var(--paper); } .bm-quiz-opt[disabled] { cursor: default; } .bm-quiz-opt.dimmed { opacity: .37; transition: opacity 500ms 180ms; } .bm-quiz-opt.correct { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, var(--paper-2)); animation: bm-quiz-pop 600ms cubic-bezier(.34,1.8,.64,1) forwards; } .bm-quiz-opt.correct .bm-quiz-letter { background: var(--teal); color: var(--paper); animation: bm-quiz-letter-pop 600ms cubic-bezier(.34,2,.64,1) forwards; } .bm-quiz-opt.wrong { border-color: var(--coral); animation: bm-quiz-shake 380ms ease forwards; } .bm-quiz-opt.wrong .bm-quiz-letter { background: var(--coral); color: var(--paper); } .bm-quiz-letter { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--char); color: var(--sun); display: flex; align-items: center; justify-content: center; font-family: var(--f-d); font-weight: 700; font-size: 13px; transition: background 250ms, color 250ms; } @keyframes bm-quiz-pop { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } } @keyframes bm-quiz-letter-pop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } } @keyframes bm-quiz-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 68% { transform: translateX(-3px); } 85% { transform: translateX(2px); } } /* explanation */ .bm-quiz-explanation { background: var(--char); padding: 16px 20px; border-radius: var(--radius-sm); font-family: var(--f-r); font-size: 15px; color: rgba(255,253,248,.9); line-height: 1.6; } .bm-quiz-explanation:not([hidden]) { animation: bm-quiz-reveal 500ms cubic-bezier(.16,1,.3,1) forwards; } @keyframes bm-quiz-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .bm-quiz-result-label { display: block; font-family: var(--f-u); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; } .bm-quiz-result-label.correct { color: var(--aqua); } .bm-quiz-result-label.wrong { color: var(--coral); } /* footer link */ .bm-quiz-footer { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--paper-3); } .bm-quiz-permalink { font-family: var(--f-u); font-size: 12px; font-weight: 600; color: var(--char-3); text-decoration: none; } .bm-quiz-permalink:hover { color: var(--teal); } /* responsive */ @media (max-width: 700px) { .bm-quiz-inner { grid-template-columns: 1fr; gap: 28px; padding: 36px 24px; } .bm-quiz-options { grid-template-columns: 1fr; } .bm-quiz-footer { grid-column: 1; } } /* standalone quiz page */ .quiz-page-wrap { min-height: 60vh; background: linear-gradient(180deg, var(--paper-2), var(--paper) 320px); } .quiz-standalone-wrap { max-width: 1040px; padding-top: 48px; padding-bottom: 72px; } .quiz-standalone-head { max-width: 720px; margin: 0 0 28px; } .quiz-standalone-head .kicker { color: var(--teal); } .quiz-standalone-head h1 { font-family: var(--f-d); font-weight: 700; font-size: clamp(38px, 5vw, 68px); line-height: .98; letter-spacing: -.03em; color: var(--char); margin: 0 0 14px; text-wrap: balance; } .quiz-standalone-head p { font-family: var(--f-r); font-size: 19px; line-height: 1.55; color: var(--char-2); max-width: 56ch; margin: 0; } .quiz-related { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--paper-3); } .quiz-related-label { font-family: var(--f-u); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--char-3); display: block; margin-bottom: 8px; } .quiz-related-link { display: inline-block; font-family: var(--f-d); font-weight: 600; font-size: 16px; color: var(--teal); text-decoration: none; border-bottom: 2px solid var(--sun); padding-bottom: 2px; } .quiz-related-link:hover { color: var(--char); } /* quiz archive grid */ .quiz-archive-wrap { padding-top: 48px; padding-bottom: 72px; } .quiz-archive-head { margin-bottom: 24px; } .quiz-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .quiz-card { display: block; text-decoration: none; background: var(--paper); border: 1px solid var(--paper-3); border-radius: var(--radius-card); overflow: hidden; transition: transform 150ms, border-color 150ms, box-shadow 150ms; } .quiz-card:hover { transform: translateY(-3px); border-color: rgba(15,118,110,.35); box-shadow: 0 14px 28px rgba(31,41,55,.08); } .quiz-card-inner { padding: 24px; display: flex; flex-direction: column; gap: 14px; height: 100%; } .quiz-card::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--sun), var(--aqua)); } .quiz-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .quiz-card-cat { font-family: var(--f-u); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--char-3); } .quiz-card-mark { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--char); color: var(--sun); font-family: var(--f-d); font-weight: 700; font-size: 17px; } .quiz-card-meta { font-family: var(--f-u); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--char-3); } .quiz-card-question { font-family: var(--f-d); font-weight: 700; font-size: 19px; color: var(--char); margin: 0; letter-spacing: -.01em; line-height: 1.25; flex: 1; } .quiz-card-question a { color: var(--char); text-decoration: none; } .quiz-card-question a:hover { color: var(--teal); } .quiz-card-links { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--paper-3); } .quiz-card-cta { font-family: var(--f-u); font-size: 12px; font-weight: 700; color: var(--char); text-decoration: none; letter-spacing: .03em; text-transform: uppercase; } .quiz-card-cta:hover { color: var(--teal); } .quiz-card-article-wrap { font-family: var(--f-u); font-size: 12px; line-height: 1.45; color: var(--char-3); text-wrap: balance; } .quiz-card-article-label { font-weight: 600; color: var(--char-3); } .quiz-card-article { display: inline; color: var(--teal); font-family: var(--f-u); font-size: 12px; font-weight: 500; text-decoration-line: underline; text-decoration-color: var(--sun); text-decoration-thickness: 1px; text-underline-offset: 2px; text-wrap: balance; } .quiz-card-article::after { content: "\00a0\2192"; white-space: nowrap; } .quiz-card-article:hover { color: var(--char); } .single-post .article-quiz-wrap.content-width { width: 100%; max-width: none; margin: 44px 0 0; } .single-post .article-quiz-wrap .bm-quiz-question { font-size: clamp(18px, 1.8vw, 24px); } .quiz-archive-nudge { margin: 0; padding: 24px 48px 0; display: flex; justify-content: flex-end; } .quiz-archive-nudge a { font-family: var(--f-d); font-weight: 600; font-size: 13px; color: var(--teal); text-decoration: none; border-bottom: 2px solid var(--sun); padding-bottom: 1px; display: inline-block; } .quiz-archive-nudge a:hover { color: var(--char); } @media (max-width: 1200px) { .quiz-archive-grid { grid-template-columns: 1fr 1fr; } .bm-quiz-options { grid-template-columns: 1fr; } .single-post .article-quiz-wrap.content-width { width: 100%; max-width: 100%; } .single-post .article-quiz-wrap .bm-quiz, .single-post .article-quiz-wrap .bm-quiz-inner, .single-post .article-quiz-wrap .bm-quiz-left, .single-post .article-quiz-wrap .bm-quiz-options, .single-post .article-quiz-wrap .bm-quiz-opt, .single-post .article-quiz-wrap .bm-quiz-question, .single-post .article-quiz-wrap .bm-quiz-opt-text { min-width: 0; } .single-post .article-quiz-wrap .bm-quiz-question, .single-post .article-quiz-wrap .bm-quiz-opt-text { overflow-wrap: anywhere; } } @media (max-width: 600px) { .quiz-archive-grid { grid-template-columns: 1fr; } } /* ── GLOSSARY PAGE ── */ .glos-hero { background: var(--char); color: var(--paper); padding: 56px 0 48px; } .glos-hero-inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; } .glos-kicker { font-family: var(--f-u); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); display: block; margin-bottom: 12px; } .glos-hero h1 { font-family: var(--f-d); font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.03em; margin: 0 0 14px; color: var(--paper); } .glos-intro { font-family: var(--f-r); font-size: 18px; color: rgba(255,253,248,.7); margin: 0; } .glos-alpha { display: grid; grid-template-columns: repeat(13, 32px); gap: 6px; justify-content: end; } .glos-alpha a { font-family: var(--f-d); font-weight: 600; font-size: 14px; color: rgba(255,253,248,.5); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-card); text-decoration: none; transition: background 120ms, color 120ms; } .glos-alpha a:hover { background: rgba(255,253,248,.1); color: var(--paper); } .glos-body { padding-top: 56px; padding-bottom: 80px; } .glos-empty { font-family: var(--f-r); font-size: 18px; color: var(--char-3); padding: 40px 0; } .glos-group { display: grid; grid-template-columns: 60px 1fr; gap: 0 32px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--paper-3); } .glos-group:last-child { border-bottom: none; } .glos-letter { font-family: var(--f-d); font-weight: 700; font-size: 48px; color: var(--paper-3); line-height: 1; padding-top: 4px; } .glos-list { display: grid; gap: 0; margin: 0; } .glos-entry { padding: 16px 0; border-bottom: 1px solid var(--paper-3); } .glos-entry:first-child { padding-top: 0; } .glos-entry:last-child { border-bottom: none; padding-bottom: 0; } .glos-entry dt { font-family: var(--f-d); font-weight: 700; font-size: 18px; color: var(--char); margin: 0 0 4px; letter-spacing: -.01em; } .glos-entry dd { font-family: var(--f-r); font-size: 17px; color: var(--char-2); margin: 0; line-height: 1.55; } .glos-sources { font-family: var(--f-u); font-size: 12px; color: var(--char-3); display: block; margin-top: 6px; } .glos-sources a { color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--paper-3); } .glos-sources a:hover { border-color: var(--teal); } @media (max-width: 600px) { .glos-hero-inner { grid-template-columns: 1fr; } .glos-alpha { justify-content: flex-start; } .glos-group { grid-template-columns: 40px 1fr; gap: 0 16px; } .glos-letter { font-size: 32px; } } /* ── 404 / search no results ── */ .text-pad { padding-top: 80px; padding-bottom: 80px; text-align: center; } .text-pad h1 { font-family: var(--f-d); font-size: 72px; margin: 0 0 12px; letter-spacing: -.02em; } .text-pad p { font-family: var(--f-r); font-size: 18px; color: var(--char-2); } /* ── HAMBURGER BUTTON (hidden on desktop, shown via media query below) ── */ .mob-menu-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; background: none; border: none; cursor: pointer; border-radius: var(--radius-card); transition: background 150ms; flex-shrink: 0; } .mob-menu-btn:hover { background: rgba(255,253,248,.12); } .mob-menu-btn .bar { display: block; width: 22px; height: 2px; background: var(--paper); border-radius: 2px; transition: transform 250ms, opacity 150ms; transform-origin: center; } body.mob-open .mob-menu-btn .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.mob-open .mob-menu-btn .bar:nth-child(2) { opacity: 0; } body.mob-open .mob-menu-btn .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── responsive: nav → hamburger at 1200px ── */ @media (max-width: 1200px) { .nav, .top-strip { display: none; } .desk-only { display: none !important; } .mob-menu-btn { display: flex; } .masthead { grid-template-columns: auto 1fr; } .actions { margin-left: auto; margin-right: -20px; } .mob-nav { top: calc(var(--bm-mobile-header) + var(--bm-admin-bar)); height: calc((var(--bm-vh) * 100) - var(--bm-mobile-header) - var(--bm-admin-bar)); } .logo-mark { width: 50px; } .logo-text { font-size: 21px; } .top .logo-text { order: 1; } .top .logo-mark { order: 2; position: relative; z-index: 2; transform: translateY(27px) scale(1.2); } .masthead .logo { margin-left: -5px; } } /* ── responsive: layout collapses at 1200px ── */ @media (max-width: 1200px) { .cat-hero-inner, .feature-row, .start-box, .two-col, .participate { grid-template-columns: 1fr; } .start-label-col { border-right: none; border-bottom: 1px solid var(--paper-3); padding-right: 0; margin-right: 0; padding-bottom: 16px; margin-bottom: 4px; } .start-item { border-right: none; padding: 12px 0; border-bottom: 1px solid var(--paper-3); } .start-item:last-child { border-bottom: none; } .story-grid { grid-template-columns: 1fr 1fr; } .s-card.wide { grid-column: span 1; flex-direction: column; } .s-card.wide .thumb { width: 100%; } .ev-grid { grid-template-columns: 1fr 1fr; } .picture-strip { grid-template-columns: 1fr; } } /* ── MOBILE NAV DRAWER ── */ .mob-nav { display: none; position: fixed; top: calc(var(--bm-mobile-header) + var(--bm-admin-bar)); left: 0; right: 0; bottom: auto; height: calc((var(--bm-vh) * 100) - var(--bm-mobile-header) - var(--bm-admin-bar)); z-index: 200; background: var(--teal); transform: translateY(-100%); transition: transform 300ms cubic-bezier(.4,0,.2,1); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } body.mob-open .mob-nav { transform: translateY(0); } body.mob-open, body.mob-scroll-locked { overflow: hidden; } body.mob-scroll-locked { position: fixed; left: 0; right: 0; width: 100%; } .mob-nav-inner { padding: 24px 28px 36px; display: flex; flex-direction: column; gap: 4px; } .mob-nav-list { list-style: none; margin: 0 0 24px; padding: 0; } .mob-nav-list li { border-bottom: 1px solid rgba(255,253,248,.12); } .mob-nav-list a { display: block; padding: 16px 0; font-family: var(--f-d); font-size: 22px; font-weight: 600; color: var(--paper); letter-spacing: -.01em; } .mob-nav-list a:hover { color: var(--sun); } .mob-nav-list .current-menu-item > a { color: var(--sun); } .mob-join { margin-top: 8px; align-self: flex-start; } /* overlay */ .mob-nav-overlay { display: none; position: fixed; inset: 0; z-index: 190; background: rgba(0,0,0,.45); } body.mob-open .mob-nav-overlay { display: block; } @media (max-width: 1200px) { body.mob-open .mob-nav { display: block; } } @media (min-width: 1201px) { body.mob-open .mob-nav-overlay { display: none; } } @media (max-width: 600px) { .story-grid, .ev-grid { grid-template-columns: 1fr; } .gallery { grid-template-columns: repeat(2, 1fr); } .masthead { grid-template-columns: auto 1fr auto; gap: 12px; } .actions { gap: 6px; } .actions .search-form { display: none; } body.category .cat-hero .wrap, body.category .start-here, body.category .filter-wrap > .wrap, body.category .story-section, body.category .pagination, body.category main > .wrap { padding-left: 28px; padding-right: 28px; } } @media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } .foot-grid > :nth-child(2), .foot-grid > :nth-child(3) { grid-column: auto; } } @media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr 1fr; } } /* ========================================================= v2 — extended layout (home + article) Reuses tokens from above. Adds the lead hero, quick-entry strip, 4-up cards, dark topic zone, how-it-works, hidden histories feature, contributors block; plus the single- article body grid, callouts, sidebar, related & trust. ========================================================= */ /* ── HOME LEAD HERO v2 ── */ .home-hero-v2 { background: #131C2B; color: var(--paper); overflow: hidden; padding-bottom: 24px; } .home-hero-v2-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(420px, 1fr); grid-template-rows: auto auto; grid-template-areas: "header image" "body image"; max-width: 1320px; margin: 0 auto; padding: 0 28px; } .hhv2-header { grid-area: header; padding: 48px 24px 16px 0; display: flex; align-items: flex-start; } .hhv2-body { grid-area: body; padding: 0 24px 44px 30px; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; } .hhv2-bordered { border-left: 3px solid var(--coral); padding-left: 27px; } .hhv2-kicker { font-family: var(--f-u); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--sun); margin: 0 0 14px; } .hhv2-title { font-family: var(--f-d); font-weight: 700; font-size: clamp(28px, 3vw, 42px); line-height: 1.06; letter-spacing: -.015em; margin: 0 0 18px; text-wrap: balance; } .hhv2-title a { color: var(--paper); text-decoration: none; } .hhv2-title a:hover { color: var(--aqua); } .hhv2-deck { font-family: var(--f-r); font-size: 18px; line-height: 1.55; color: var(--aqua); margin: 0 0 18px; max-width: 50ch; } .hhv2-meta { font-family: var(--f-u); font-size: 13px; color: rgba(255,253,248,.62); margin: 0 0 20px; } .hhv2-actions { display: flex; gap: 12px; flex-wrap: wrap; } .hhv2-btn-primary { display: inline-flex; align-items: center; font-family: var(--f-d); font-weight: 600; font-size: 16px; padding: 14px 22px; text-decoration: none; line-height: 1; background: var(--paper); color: #131C2B; } .hhv2-btn-primary:hover { background: #fff; } .hhv2-btn-muted { display: inline-flex; align-items: center; font-family: var(--f-d); font-weight: 600; font-size: 16px; padding: 14px 22px; text-decoration: none; line-height: 1; background: rgba(255,253,248,.12); color: var(--paper); } .hhv2-btn-muted:hover { background: rgba(255,253,248,.18); } .hhv2-right { grid-area: image; display: flex; align-items: flex-start; padding: 48px 0 48px 12px; } .hhv2-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card); background: radial-gradient(circle at 30% 35%, rgba(251,113,133,.10), transparent 55%), radial-gradient(circle at 70% 80%, rgba(180,80,30,.18), transparent 55%), radial-gradient(circle at 18% 75%, rgba(45,212,191,.08), transparent 50%), #0c1424; display: flex; align-items: center; justify-content: center; position: relative; } .hhv2-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* CSS planet — shown when there is no featured image */ .hhv2-planet { width: 74%; max-width: 580px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(ellipse at 60% 28%, rgba(255,255,255,.18), transparent 55%), repeating-linear-gradient(178deg, #b95a3a 0 16px, #c89072 16px 28px, #7a3a2a 28px 38px, #d6a890 38px 56px, #884030 56px 72px, #c98970 72px 92px); box-shadow: inset -50px -30px 80px rgba(0,0,0,.55), inset 30px 20px 80px rgba(255,200,170,.15), 0 30px 80px rgba(0,0,0,.45); position: relative; } .hhv2-planet::after { content: ""; position: absolute; left: -6%; bottom: 4%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5b6270, #1c2230 70%); box-shadow: inset -8px -6px 14px rgba(0,0,0,.55); } @media (max-width: 1200px) { .home-hero-v2-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "header" "image" "body"; padding: 0; } .hhv2-header { padding: 28px 24px 16px; } .hhv2-body { padding: 16px 24px 28px; gap: 12px; } .hhv2-right { padding: 0; min-height: 260px; } .hhv2-img { border-radius: 0; aspect-ratio: 16/9; width: 100%; } /* remove the line on mobile */ .hhv2-bordered { border-left: none; padding-left: 0; } } @media (max-width: 600px) { .hhv2-img { aspect-ratio: 4/3; } .hhv2-title { font-size: 26px; max-width: none; } .hhv2-deck { font-size: 16px; max-width: none; } } /* ── HOME LEAD HERO (legacy — kept for reference) ── */ .home-hero { background: var(--char); color: var(--paper); padding: 44px 0 56px; position: relative; overflow: hidden; } .home-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 85% 20%, rgba(250,204,21,.08), transparent 45%), radial-gradient(circle at 10% 90%, rgba(45,212,191,.10), transparent 45%); } .home-hero .wrap { position: relative; z-index: 1; } .hero-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-u); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .15em; color: var(--sun); margin-bottom: 18px; } .hero-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(251,113,133,.22); } .hero-kicker .sep { height: 1px; width: 42px; background: rgba(255,253,248,.25); display: inline-block; } .hero-figure { position: relative; display: block; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 21/9; background: #111827; margin-bottom: 34px; } .hero-figure img { width: 100%; height: 100%; object-fit: cover; } .hero-figure .img-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,253,248,.38); font-family: var(--f-u); font-size: 11px; letter-spacing: .08em; background: radial-gradient(circle at 70% 40%, rgba(251,113,133,.22), transparent 55%), radial-gradient(circle at 30% 60%, rgba(45,212,191,.12), transparent 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 14px), #0b1220; } .hero-figure .credit { position: absolute; right: 14px; bottom: 12px; font-family: var(--f-u); font-size: 10px; color: rgba(255,253,248,.6); letter-spacing: .06em; } .hero-figure .credit b { color: var(--paper); font-weight: 500; } .hero-figure .badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; background: var(--paper); color: var(--char); font-family: var(--f-u); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; padding: 7px 10px; border-radius: var(--radius-sm); } .hero-figure .badge .dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--coral); } .home-hero .hero-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; } .hero-title { font-family: var(--f-d); font-weight: 700; font-size: clamp(44px, 5.2vw, 72px); line-height: .96; letter-spacing: -.02em; margin: 0; max-width: 14ch; text-wrap: balance; color: var(--paper); } .hero-title em { font-family: var(--f-r); font-style: italic; font-weight: 500; color: var(--sun); } .hero-side { padding-top: 10px; border-left: 1px solid rgba(255,253,248,.14); padding-left: 34px; } .hero-deck { font-family: var(--f-r); font-size: 20px; line-height: 1.5; color: rgba(255,253,248,.85); margin: 0 0 22px; } .hero-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-family: var(--f-u); font-size: 12px; color: rgba(255,253,248,.65); margin-bottom: 22px; } .hero-meta .avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--aqua); display: inline-block; margin-right: 6px; vertical-align: middle; } .hero-meta b { color: var(--paper); font-weight: 500; } .hero-meta .pipe { opacity: .35; } .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; } .btn.ghost-light { background: rgba(255,253,248,.1); color: var(--paper); border-color: rgba(255,253,248,.4); } /* ── QUICK-ENTRY STRIP ── */ .qstrip-wrap { background: var(--teal); color: var(--paper); } .qstrip { display: grid; grid-template-columns: auto repeat(6, 1fr); align-items: stretch; } .qstrip .label { padding: 16px 18px 16px 0; font-family: var(--f-u); font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--sun); display: flex; align-items: center; gap: 8px; border-right: 1px solid rgba(255,253,248,.15); margin-right: 0; } .qstrip > *, .cards-4 > *, .topic-zone-grid > *, .zone-list > *, .zone-secondary > *, .hiw-grid > *, .hist-grid > *, .contrib-grid > * { min-width: 0; } .qstrip a { padding: 20px 14px; display: flex; align-items: center; gap: 10px; font-family: var(--f-d); font-weight: 500; font-size: 15px; color: var(--paper); border-right: 1px solid rgba(255,253,248,.1); transition: background 120ms; min-width: 0; overflow-wrap: anywhere; } .qstrip a:last-child { border-right: none; } .qstrip a:hover { background: rgba(255,253,248,.06); } .qstrip a .glyph { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; font-family: var(--f-u); color: var(--char); flex: 0 0 auto; } .qstrip a .glyph-img { width: auto; height: 50px; border-radius: 0; object-fit: contain; background: none !important; box-shadow: none !important; } .qstrip a:nth-child(2) .glyph { background: var(--aqua); } .qstrip a:nth-child(3) .glyph { background: var(--sun); } .qstrip a:nth-child(4) .glyph { background: var(--coral); color: var(--paper); } .qstrip a:nth-child(5) .glyph { background: var(--paper); } .qstrip a:nth-child(6) .glyph { background: var(--char); color: var(--sun); } .qstrip a:nth-child(5):has(.glyph-img), .qstrip a:nth-child(6):has(.glyph-img) { padding-top: 6px; padding-bottom: 6px; } .qstrip a:nth-child(7) .glyph { background: var(--teal); box-shadow: inset 0 0 0 2px var(--paper); color: var(--paper); } /* ── 4-UP LATEST CARDS ── */ .cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .card { display: flex; flex-direction: column; gap: 12px; color: var(--char); } .card .thumb { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; position: relative; background: var(--paper-2); } .card .thumb img { width: 100%; height: 100%; object-fit: cover; } .card .thumb .img-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-u); font-size: 10px; color: rgba(31,41,55,.35); letter-spacing: .08em; background: repeating-linear-gradient(135deg, rgba(31,41,55,.04) 0 1px, transparent 1px 14px), var(--paper-2); } .card .thumb.teal .img-ph { background: radial-gradient(circle at 60% 40%, rgba(45,212,191,.4), rgba(15,118,110,.6) 70%), var(--teal); color: rgba(255,253,248,.6); } .card .thumb.coral .img-ph { background: radial-gradient(circle at 40% 60%, rgba(251,113,133,.6), rgba(251,113,133,.2) 70%), #fce7ea; color: var(--coral); } .card .thumb.sun .img-ph { background: radial-gradient(circle at 50% 50%, rgba(250,204,21,.35), rgba(250,204,21,.1) 70%), #fff8d9; color: #a87b00; } .card .thumb.dark .img-ph { background: radial-gradient(circle at 50% 40%, rgba(45,212,191,.25), rgba(31,41,55,.5) 70%), #0b1220; color: rgba(255,253,248,.4); } .card .kicker-row { display: flex; align-items: center; gap: 8px; font-family: var(--f-u); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--char-3); } .card h3 { font-family: var(--f-d); font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; margin: 0; text-wrap: balance; } .card:hover h3 { color: var(--teal); } .card .excerpt { font-family: var(--f-r); font-size: 15px; line-height: 1.45; color: var(--char-2); margin: 0; } .card .meta { font-family: var(--f-u); font-size: 10px; color: var(--char-3); letter-spacing: .04em; margin-top: auto; text-transform: uppercase; } /* extra tag colors used by new patterns */ .tag.tech { background: var(--char); color: var(--aqua); } .tag.weird { background: var(--sun); color: var(--char); } .tag.contrib { background: var(--teal); color: var(--paper); } .tag.t-cat { background: transparent; color: var(--teal); box-shadow: inset 0 0 0 1px rgba(15,118,110,.3); } /* ── DARK TOPIC ZONE (Space-style category showcase) ── */ .topic-zone { background: var(--char); color: var(--paper); padding: 72px 0; position: relative; overflow: hidden; } .topic-zone::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 10% 10%, rgba(45,212,191,.08), transparent 40%), radial-gradient(circle at 90% 80%, rgba(250,204,21,.05), transparent 40%); } .topic-zone .wrap { position: relative; z-index: 1; } .topic-zone .section-head h2 { color: var(--paper); } .topic-zone .section-head .kicker { color: var(--aqua); } .topic-zone .section-head .more { color: var(--sun); border-color: var(--sun); } /* Topic Zone — 2-column grid: [featured] | [secondary] */ .topic-zone-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: 0; align-items: start; } /* Col 1: featured — image → tag → title → excerpt → meta */ .zone-feat { display: flex; flex-direction: column; gap: 14px; color: var(--paper); padding-right: 40px; } .zone-feat .thumb { aspect-ratio: 4/3; border-radius: var(--radius-card); overflow: hidden; background: #0b1220; position: relative; } .zone-feat .thumb img { width: 100%; height: 100%; object-fit: cover; } .zone-feat .thumb .img-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-u); font-size: 11px; letter-spacing: .08em; color: rgba(255,253,248,.4); background: radial-gradient(circle at 55% 45%, rgba(251,113,133,.35), rgba(250,204,21,.1) 35%, #0b1220 75%); } .zone-feat .tag-row { display: flex; gap: 8px; flex-wrap: wrap; } .zone-concept { font-family: var(--f-u); font-size: 10px; font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,253,248,.45); background: none; padding: 0; border: none; } .related-section .zone-concept { color: var(--char-3); } .zone-feat h3 { font-family: var(--f-d); font-weight: 700; font-size: 30px; line-height: 1.08; letter-spacing: -.015em; margin: 0; text-wrap: balance; color: var(--paper); } .zone-feat:hover h3 { color: var(--aqua); } .zone-feat .deck { font-family: var(--f-r); font-size: 16px; line-height: 1.5; color: rgba(255,253,248,.72); margin: 0; } .zone-feat .byline { font-family: var(--f-u); font-size: 11px; color: rgba(255,253,248,.5); } /* Col 2: three secondary posts — left border is the divider */ .zone-secondary { display: flex; flex-direction: column; gap: 22px; padding-left: 40px; border-left: 1px solid rgba(255,253,248,.15); align-self: stretch; } .zone-cols { display: contents; } /* kept for compatibility */ .zone-list { display: flex; flex-direction: column; gap: 22px; } .zone-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; color: var(--paper); } .zone-row .thumb { aspect-ratio: 4/3; border-radius: var(--radius-card); overflow: hidden; position: relative; background: #0b1220; } .zone-row .thumb img { width: 100%; height: 100%; object-fit: cover; } .zone-row .thumb .img-ph { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(45,212,191,.3), #0b1220 70%); color: rgba(255,253,248,.35); } .zone-row .thumb.coral .img-ph { background: radial-gradient(circle at 50% 50%, rgba(251,113,133,.45), #2a0e17 70%); } .zone-row .thumb.sun .img-ph { background: radial-gradient(circle at 50% 50%, rgba(250,204,21,.35), #2a2008 70%); } .zone-row .tag-row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; } .zone-row h4 { font-family: var(--f-d); font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -.005em; margin: 0; color: var(--paper); } .zone-row:hover h4 { color: var(--aqua); } .zone-row .meta { font-family: var(--f-u); font-size: 10px; color: rgba(255,253,248,.5); letter-spacing: .04em; margin-top: 6px; } /* ── HOW IT WORKS ZONE ── */ .zone-hiw { background: var(--paper-2); padding: 72px 0; } .hiw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .hiw-diagram { background: var(--paper); border-radius: var(--radius-panel); padding: 28px; border: 1px solid var(--paper-3); } .hiw-diagram .hiw-tag-row { display: flex; gap: 8px; margin-bottom: 20px; } .hiw-diagram .diagram-title { font-family: var(--f-d); font-weight: 600; font-size: 20px; margin: 0 0 22px; letter-spacing: -.01em; } .hiw-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; padding: 14px 0; } .hiw-step { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .hiw-step .bubble { width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-u); font-size: 10px; color: var(--char-2); text-align: center; padding: 8px; line-height: 1.2; } .hiw-step.a .bubble { background: var(--aqua); } .hiw-step.b .bubble { background: var(--sun); } .hiw-step.c .bubble { background: var(--coral); color: var(--paper); } .hiw-step .lbl { font-family: var(--f-u); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--char-2); } .hiw-arrow { font-family: var(--f-d); font-size: 24px; color: var(--char-3); } .hiw-cap { font-family: var(--f-u); font-size: 11px; color: var(--char-3); margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--paper-3); line-height: 1.5; } .hiw-list { padding: 4px 0 0; } .hiw-list .kicker { font-family: var(--f-u); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--char-3); } .hiw-list h3 { font-family: var(--f-d); font-weight: 700; font-size: 32px; line-height: 1.05; letter-spacing: -.015em; margin: 6px 0 10px; text-wrap: balance; } .hiw-list .deck { font-family: var(--f-r); font-size: 17px; line-height: 1.5; color: var(--char-2); margin: 0 0 18px; } .hiw-list ol { list-style: none; padding: 0; margin: 0; } .hiw-list li { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--paper-3); align-items: start; } .hiw-list li:last-child { border-bottom: none; } .hiw-list .num { font-family: var(--f-d); font-weight: 600; font-size: 26px; line-height: 1; color: var(--teal); letter-spacing: -.02em; } .hiw-list .q { font-family: var(--f-d); font-weight: 600; font-size: 17px; line-height: 1.3; margin: 0 0 4px; color: var(--char); } .hiw-list .a { font-family: var(--f-r); font-size: 14px; line-height: 1.4; color: var(--char-2); margin: 0; } .hiw-list .min { font-family: var(--f-u); font-size: 11px; color: var(--char-3); } /* ── HIDDEN HISTORIES feature band ── */ .zone-hist { background: #d5405f; color: var(--paper); padding: 80px 0; position: relative; overflow: hidden; } .zone-hist::before { content: ""; position: absolute; right: -120px; bottom: -120px; width: 500px; height: 500px; border-radius: 50%; border: 2px dashed rgba(255,253,248,.22); } .zone-hist::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 340px; height: 340px; border-radius: 50%; border: 2px dashed rgba(255,253,248,.22); } .hist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; position: relative; z-index: 1; } /* left column — tags at top, content pushed to bottom */ .hist-col { display: flex; flex-direction: column; justify-content: space-between; min-height: 420px; } .hist-col-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hist-col-bottom { display: flex; flex-direction: column; gap: 0; } .hist-featured-badge { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--paper); font-family: var(--f-u); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; padding: 3px 9px; border-radius: var(--radius-sm); border: 1px solid #fff; } .hist-featured-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sun); flex-shrink: 0; animation: bm-pulse 1.8s ease-in-out infinite; } @keyframes bm-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.7); } } .hist-label { display: inline-block; padding: 4px 10px; border: 1px solid rgba(255,253,248,.55); font-family: var(--f-u); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; border-radius: var(--radius-sm); } .hist-cat-kicker { display: block; font-family: var(--f-u); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .18em; color: rgba(255,253,248,.75); margin-bottom: 12px; } .hist-title { font-family: var(--f-d); font-weight: 700; font-size: 52px; line-height: .98; letter-spacing: -.02em; margin: 0 0 18px; text-wrap: balance; color: var(--paper); } .hist-deck { font-family: var(--f-r); font-size: 19px; line-height: 1.5; margin: 0 0 24px; color: rgba(255,253,248,.9); max-width: 52ch; } .hist-meta { font-family: var(--f-u); font-size: 11px; color: rgba(255,253,248,.7); margin-bottom: 18px; letter-spacing: .05em; } .hist-cta { display: flex; gap: 10px; flex-wrap: wrap; } .hist-cta .btn.ghost { background: transparent; border: 2px solid var(--paper); color: var(--paper); } .hist-figure { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-card); overflow: hidden; background: #6a2a35; } .hist-figure img { width: 100%; height: 100%; object-fit: cover; } .hist-figure .img-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-u); font-size: 11px; color: rgba(255,253,248,.5); letter-spacing: .08em; background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 12px), radial-gradient(circle at 50% 35%, rgba(250,204,21,.15), transparent 55%), #6a2a35; } .hist-figure-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 14px; background: linear-gradient(to top, rgba(0,0,0,.65), transparent); font-family: var(--f-u); font-size: 11px; color: rgba(255,253,248,.85); line-height: 1.5; letter-spacing: .01em; } /* ── CONTRIBUTORS ZONE (3-up: intro + 2 cards) ── */ .zone-quiz { background: var(--paper-2); padding: 72px 0; } .zone-quiz .bm-quiz { margin: 0; } .zone-quiz .bm-quiz-inner { align-items: start; } .zone-quiz .bm-quiz-options { grid-template-columns: 1fr; } .zone-quiz-source { font-family: var(--f-u); font-size: 14px; color: var(--char-3); margin: 18px 0 0; } .zone-quiz-source a { color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--sun); padding-bottom: 1px; } .zone-quiz-source a:hover { color: var(--char); } .zone-contrib { background: var(--paper); padding: 72px 0; } .contrib-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 24px; align-items: stretch; } .contrib-intro { background: var(--teal); color: var(--paper); border-radius: var(--radius-panel); padding: 28px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; } .contrib-intro::before { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: var(--aqua); opacity: .2; } .contrib-intro .kicker { font-family: var(--f-u); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sun); } .contrib-intro h3 { font-family: var(--f-d); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -.015em; margin: 0; color: var(--paper); } .contrib-intro p { font-family: var(--f-r); font-size: 16px; line-height: 1.5; margin: 0; color: rgba(255,253,248,.85); } .contrib-intro ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; font-family: var(--f-u); font-size: 14px; font-weight: 500; } .contrib-intro ul li { display: flex; align-items: center; gap: 10px; } .contrib-intro ul li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--sun); flex: 0 0 auto; } .contrib-card { background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: var(--radius-panel); padding: 22px; display: flex; flex-direction: column; gap: 12px; color: var(--char); } .contrib-card .contrib-head { display: flex; gap: 14px; align-items: center; } .contrib-card .av { width: 54px; height: 54px; border-radius: 50%; background: var(--aqua); display: flex; align-items: center; justify-content: center; font-family: var(--f-d); font-weight: 700; font-size: 18px; color: var(--char); flex: 0 0 auto; } .contrib-card .av.coral { background: var(--coral); color: var(--paper); } .contrib-card .pill { display: inline-block; font-family: var(--f-u); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; background: var(--paper); border-radius: var(--radius-sm); color: var(--char-2); } .contrib-card .name { font-family: var(--f-d); font-weight: 600; font-size: 17px; margin: 4px 0 0; } .contrib-card .place { font-family: var(--f-u); font-size: 10px; color: var(--char-3); } .contrib-card .thumb { aspect-ratio: 16/9; border-radius: var(--radius-card); overflow: hidden; background: var(--paper); position: relative; } .contrib-card .thumb img { width: 100%; height: 100%; object-fit: cover; } .contrib-card .thumb .img-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-u); font-size: 10px; color: rgba(31,41,55,.3); } .contrib-card h4 { font-family: var(--f-d); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -.005em; margin: 0; text-wrap: balance; color: var(--char); } .contrib-card:hover h4 { color: var(--teal); } .contrib-card .excerpt { font-family: var(--f-r); font-size: 14px; line-height: 1.45; color: var(--char-2); margin: 0; } .contrib-card .meta { font-family: var(--f-u); font-size: 10px; color: var(--char-3); } /* ── FOOTER newsletter add-on (sits inside existing .foot) ── */ .foot .newsletter { background: rgba(255,253,248,.06); padding: 18px; border-radius: var(--radius-panel); margin-top: 14px; } .foot .newsletter p { font-family: var(--f-r); font-size: 14px; margin: 0 0 10px; color: rgba(255,253,248,.8); } .foot .newsletter .row { display: flex; gap: 6px; } .foot .newsletter input { flex: 1; background: var(--paper); border: none; border-radius: var(--radius-pill); padding: 8px 14px; font-family: var(--f-u); font-size: 13px; color: var(--char); } /* ========================================================= ARTICLE (single) — extended layout ========================================================= */ /* sticky breadcrumbs + read progress bar */ .progress-bar { position: sticky; top: var(--bm-admin-bar); z-index: 90; background: var(--paper); border-bottom: 1px solid var(--paper-3); } .progress-inner { max-width: 1240px; margin: 0 auto; padding: 0 28px; height: 40px; display: flex; align-items: center; gap: 16px; } .breadcrumbs { font-family: var(--f-u); font-size: 12px; color: var(--char-3); flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; flex-wrap: nowrap; } .breadcrumbs a { color: var(--teal); white-space: nowrap; flex-shrink: 0; } .breadcrumbs .sep { color: var(--char-3); white-space: nowrap; flex-shrink: 0; } .breadcrumbs .current { color: var(--char); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .read-bar { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .bar-track { width: 120px; height: 4px; background: var(--paper-2); border-radius: 2px; overflow: hidden; } .bar-fill { height: 100%; width: 0%; background: var(--aqua); border-radius: 2px; transition: width .3s ease; } .time-left { font-family: var(--f-u); font-size: 11px; color: var(--char-3); white-space: nowrap; } .save-btn { font-family: var(--f-u); font-size: 12px; font-weight: 500; color: var(--teal); background: none; border: 2px solid var(--paper-3); border-radius: var(--radius-pill); padding: 3px 12px; cursor: pointer; white-space: nowrap; } .save-btn:hover { background: var(--paper-2); } /* article header (replaces the single-post .entry-header on long-form posts) */ .article-header { padding: 40px 0 28px; } .article-header .cat-row { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; } .article-header .issue-label { font-family: var(--f-u); font-size: 11px; color: var(--char-3); letter-spacing: .3px; } .article-header .article-title { font-family: var(--f-d); font-weight: 700; font-size: clamp(34px, 5.5vw, 72px); line-height: 1.03; letter-spacing: -.03em; color: var(--char); margin: 0 0 18px; max-width: 100%; text-wrap: balance; } .article-header .article-deck { font-family: var(--f-r); font-size: 19px; line-height: 1.65; color: var(--char-2); margin: 0 0 22px; max-width: 56ch; } .byline-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--paper-3); font-family: var(--f-u); font-size: 12px; color: var(--char-3); } .byline-author { display: flex; align-items: center; gap: 9px; } .byline-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--paper-3); display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--char-3); flex-shrink: 0; font-family: var(--f-d); font-weight: 700; } .byline-name { font-weight: 600; color: var(--char); } .byline-sep { color: var(--paper-3); } .reading-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .chip { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--paper-3); border-radius: var(--radius-pill); padding: 4px 12px; font-family: var(--f-u); font-size: 11px; color: var(--char-2); background: var(--paper); cursor: pointer; } .chip:hover { border-color: var(--aqua); background: var(--paper-2); } .chip-dot { width: 7px; height: 7px; border-radius: 50%; } .chip-dot-aqua { background: var(--aqua); } .chip-dot-teal { background: var(--teal); } /* lead figure */ .lead-figure { padding: 0; } .lead-figure .lead-img { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-card); overflow: hidden; position: relative; background: linear-gradient(135deg, #0a2420 0%, #143426 40%, #0d2b28 100%); display: flex; align-items: center; justify-content: center; } .lead-figure .lead-img img { width: 100%; height: 100%; object-fit: cover; } .lead-figure .lead-img .img-ph { position: relative; z-index: 1; font-family: var(--f-u); font-size: 12px; color: rgba(255,255,255,.3); padding: 24px; text-align: center; } .lead-figure .lead-caption { font-family: var(--f-u); font-size: 12px; line-height: 1.6; color: var(--char-3); padding: 10px 0 0; max-width: 820px; } .lead-figure .lead-caption strong { color: var(--char-2); } /* body grid: prose + sidebar */ .body-section { padding: 36px 0 0; max-width: 1060px; margin-left: auto; margin-right: auto; } .body-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: start; } .prose { font-family: var(--f-r); font-size: 18px; line-height: 1.75; color: var(--char); max-width: 68ch; } .prose > p { margin: 0 0 20px; } .prose > p:last-child { margin-bottom: 0; } .prose.dropcap > p:first-of-type::first-letter { font-family: var(--f-d); font-weight: 700; font-size: 4.8em; float: left; line-height: .82; padding: 6px 10px 0 0; color: var(--teal); } .prose .defined { background: linear-gradient(to top, rgba(250,204,21,.45) 40%, transparent 40%); padding: 0 2px; cursor: help; border-radius: 2px; } .prose .defined::after { content: '?'; font-family: var(--f-u); font-size: 9px; vertical-align: super; color: var(--char-3); margin-left: 1px; } .prose .section-head { display: block; font-family: var(--f-d); font-weight: 700; font-size: 22px; letter-spacing: -.3px; line-height: 1.2; color: var(--char); margin: 40px 0 16px; padding-top: 20px; border-top: 2px solid var(--paper-3); } .prose .section-head .section-num { display: block; font-family: var(--f-u); font-weight: 600; font-size: 10px; color: var(--teal); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; } .prose .pullquote { border-left: 5px solid var(--aqua); padding: 12px 0 12px 22px; margin: 32px 0; font-family: var(--f-r); font-style: italic; font-size: 22px; line-height: 1.45; color: var(--char); } .prose .pullquote cite { display: block; font-family: var(--f-u); font-weight: 700; font-size: 13px; color: var(--teal); font-style: normal; letter-spacing: 1.8px; text-transform: uppercase; margin-top: 14px; } .prose .pullquote cite::before { content: "\2014 "; } .prose figure { margin: 28px 0; } .prose figure img { border-radius: var(--radius-card); display: block; max-width: 100%; height: auto; } .prose img { border-radius: var(--radius-card); max-width: 100%; height: auto; } .prose figure figcaption { font-family: var(--f-u); font-size: 12px; color: var(--char-3); padding: 10px 0 0; line-height: 1.55; } .inline-fig { width: 100%; aspect-ratio: 16/9; background: var(--paper-2); border-radius: var(--radius-card); border: 1px solid var(--paper-3); display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-family: var(--f-u); font-size: 11px; color: var(--char-3); overflow: hidden; } .inline-fig img { width: 100%; height: 100%; object-fit: cover; } .inline-fig-diagram { display: flex; flex-direction: column; gap: 16px; width: 100%; padding: 24px; } .diagram-title { font-family: var(--f-u); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--teal); margin: 0; } .diagram-nodes { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; } .dnode { width: 100px; height: 100px; border-radius: 50%; border: 2px solid var(--paper-3); background: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--f-u); font-size: 11px; text-align: center; color: var(--teal); padding: 10px; line-height: 1.35; flex-shrink: 0; } .darr { font-size: 20px; color: var(--aqua); padding: 0 8px; } .diagram-caption { font-family: var(--f-u); font-size: 11px; color: var(--char-3); margin: 0; } /* callouts */ .callout { border-radius: var(--radius-card); padding: 18px 22px; margin: 28px 0; } .callout-label { display: inline-flex; align-items: center; font-family: var(--f-u); font-weight: 700; font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-sm); margin-bottom: 10px; } .callout h4 { font-family: var(--f-d); font-weight: 700; font-size: 17px; letter-spacing: -.2px; margin: 0 0 8px; } .callout p { font-family: var(--f-r); font-size: 16px; line-height: 1.65; margin: 0 0 10px; } .callout p:last-child { margin-bottom: 0; } .callout ul { font-family: var(--f-r); font-size: 16px; line-height: 1.7; margin: 8px 0 0; padding-left: 20px; } .callout li { margin-bottom: 6px; } .callout.whymatters { background: rgba(251,113,133,.07); border: 1px solid rgba(251,113,133,.3); } .callout.whymatters .callout-label { background: var(--coral); color: var(--paper); } .callout.howweknow { background: var(--paper-2); border: 1px solid var(--paper-3); } .callout.howweknow .callout-label { background: var(--teal); color: var(--paper); } .callout.glossary { background: rgba(250,204,21,.08); border: 1px solid rgba(250,204,21,.4); } .callout.glossary .callout-label { background: var(--sun); color: var(--char); } .callout.tryit { background: var(--paper); border: 1px dashed var(--paper-3); } .callout.tryit .callout-label { background: var(--paper-2); color: var(--teal); border: 1px solid var(--paper-3); } /* inline quiz */ .inline-quiz { background: var(--char); border-radius: var(--radius-panel); padding: 22px; margin: 28px 0; } .inline-quiz .quiz-label { display: inline-flex; align-items: center; font-family: var(--f-u); font-weight: 700; font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-sm); margin-bottom: 12px; background: var(--sun); color: var(--char); } .inline-quiz .quiz-q { font-family: var(--f-d); font-weight: 700; font-size: 19px; letter-spacing: -.2px; color: var(--paper); margin: 0 0 14px; } .inline-quiz .quiz-opts { display: flex; flex-direction: column; gap: 8px; } .inline-quiz .quiz-opt { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.12); border-radius: var(--radius-card); padding: 10px 16px; font-family: var(--f-r); font-size: 16px; color: rgba(255,255,255,.88); cursor: pointer; } .inline-quiz .quiz-opt:hover { border-color: var(--aqua); background: rgba(45,212,191,.08); } .inline-quiz .quiz-letter { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-family: var(--f-d); font-weight: 700; font-size: 12px; color: rgba(255,255,255,.6); flex-shrink: 0; } /* sources */ .sources { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--paper-3); } .sources-title { font-family: var(--f-d); font-weight: 700; font-size: 18px; letter-spacing: -.2px; color: var(--char); margin: 0 0 12px; } .sources ol { font-family: var(--f-u); font-size: 12px; color: var(--char-3); padding-left: 18px; line-height: 1.8; margin: 0; } .sources li { margin-bottom: 4px; } .sources a { color: var(--teal); text-decoration: underline dashed; } .sources-meta { font-family: var(--f-u); font-size: 11px; color: var(--char-3); margin-top: 14px; line-height: 1.6; } .sources-meta a { color: var(--teal); } /* sidebar (sticky boxes) */ .sidebar { position: sticky; top: calc(40px + var(--bm-admin-bar) + 20px); display: flex; flex-direction: column; gap: 20px; align-self: start; min-width: 0; max-height: none; overflow: visible; } .side-box { background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: var(--radius-panel); padding: 18px; } .side-label { font-family: var(--f-u); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--char-3); margin-bottom: 10px; display: block; } .side-box h4 { font-family: var(--f-d); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--char); margin: 0 0 10px; } /* TOC */ .toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .toc-list li { position: relative; } .toc-list a { display: flex; align-items: flex-start; gap: 10px; font-family: var(--f-u); font-size: 13px; color: var(--char-2); padding: 7px 10px; border-radius: var(--radius-card); text-decoration: none; } .toc-list a:hover { background: var(--paper); color: var(--char); } .toc-list li.active a, .toc-list a.active { background: var(--paper); color: var(--teal); font-weight: 600; } .toc-num { font-family: var(--f-u); font-size: 10px; color: var(--char-3); min-width: 18px; flex-shrink: 0; margin-top: 2px; } /* glossary */ .glossary-dl { margin: 0; } .glossary-dl dt { font-family: var(--f-d); font-weight: 600; font-size: 15px; color: var(--char); margin-top: 10px; } .glossary-dl dt:first-child { margin-top: 0; } .glossary-dl dd { font-family: var(--f-r); font-size: 13.5px; color: var(--char-2); margin: 2px 0 0; line-height: 1.4; } .glossary-more { display: inline-block; margin-top: 12px; font-family: var(--f-d); font-weight: 600; font-size: 13px; color: var(--teal); text-decoration: none; border-bottom: 2px solid var(--sun); padding-bottom: 1px; } /* share */ .share-icons { display: flex; gap: 8px; margin-bottom: 10px; } .share-icn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--paper-3); background: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--f-u); font-size: 12px; color: var(--char-2); cursor: pointer; text-decoration: none; } .share-icn:hover { border-color: var(--teal); color: var(--teal); } .share-note { font-family: var(--f-u); font-size: 10px; color: var(--char-3); margin-top: 10px; line-height: 1.5; } /* ask box — dark, backgrounded until participation is ready */ .side-box.ask-box { background: var(--char); border-color: var(--char); } .side-box.ask-box .side-label { color: rgba(255,253,248,.5); } .side-box.ask-box h4 { color: var(--paper); } .side-box.ask-box p { font-family: var(--f-r); font-size: 14px; color: rgba(255,253,248,.8); margin: 0 0 12px; line-height: 1.45; } /* trust */ .trust-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .trust-list li { display: flex; align-items: center; gap: 8px; font-family: var(--f-u); font-size: 13px; color: var(--char-2); } .trust-check { width: 18px; height: 18px; border-radius: 50%; background: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--paper); flex-shrink: 0; } .trust-more { display: inline-block; margin-top: 14px; font-family: var(--f-d); font-weight: 600; font-size: 13px; color: var(--teal); text-decoration: none; border-bottom: 2px solid var(--sun); padding-bottom: 1px; } /* related stories (after article body) */ .related-section { padding: 52px 0 0; } .section-heading { font-family: var(--f-u); font-weight: 700; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--teal); margin: 0 0 4px; } .section-title { font-family: var(--f-d); font-weight: 700; font-size: 22px; letter-spacing: -.3px; color: var(--char); margin: 0 0 20px; padding-bottom: 14px; border-bottom: 2px solid var(--teal); } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .related-card { display: flex; flex-direction: column; gap: 10px; background: var(--paper); border: 1px solid var(--paper-3); border-radius: var(--radius-card); padding: 0 0 14px; overflow: hidden; transition: box-shadow .15s, transform .15s; color: var(--char); } .related-card:hover { box-shadow: 0 4px 20px rgba(15,118,110,.1); transform: translateY(-2px); } .related-card .zone-concept, .related-card .related-hed, .related-card .related-exc, .related-card .related-meta { padding: 0 14px; } .related-card .zone-concept { padding-top: 12px; } .related-img { aspect-ratio: 4/3; background: var(--paper-2); border-radius: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-u); font-size: 11px; color: var(--char-3); text-align: center; overflow: hidden; } .related-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .related-hed { font-family: var(--f-d); font-weight: 600; font-size: 16px; letter-spacing: -.15px; line-height: 1.3; color: var(--char); margin: 0; } .related-card:hover .related-hed { color: var(--teal); } .related-exc { font-family: var(--f-r); font-size: 13px; color: var(--char-2); line-height: 1.55; flex: 1; margin: 0; } .related-meta { font-family: var(--f-u); font-size: 11px; color: var(--char-3); letter-spacing: .4px; text-transform: uppercase; } /* trust / contributor block (writer + reviewer + about) */ .trust-section { padding: 48px 0 0; } .trust-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; } .trust-card { background: var(--paper); border: 1px solid var(--paper-3); border-radius: var(--radius-card); padding: 20px; display: flex; flex-direction: column; gap: 12px; } .trust-card.alt { background: var(--paper-2); } .trust-role { font-family: var(--f-u); font-weight: 700; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--teal); } .trust-person { display: flex; align-items: center; gap: 12px; } .trust-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--paper-3); display: flex; align-items: center; justify-content: center; font-family: var(--f-d); font-weight: 700; font-size: 12px; color: var(--char-2); flex-shrink: 0; overflow: hidden; } .trust-avatar img { width: 100%; height: 100%; object-fit: cover; } .trust-name { font-family: var(--f-d); font-weight: 600; font-size: 16px; color: var(--char); margin: 0; } .trust-title-meta { font-family: var(--f-u); font-size: 11px; color: var(--char-3); margin-top: 2px; letter-spacing: .2px; } .trust-bio { font-family: var(--f-r); font-size: 14px; color: var(--char-2); line-height: 1.6; margin: 0; } .trust-link { font-family: var(--f-u); font-size: 12px; font-weight: 600; color: var(--teal); border-bottom: 1px solid var(--paper-3); display: inline-block; margin-top: 4px; } .trust-card h4 { font-family: var(--f-d); font-weight: 700; font-size: 17px; color: var(--char); margin: 0; } /* join-in CTA band */ .joinin-section { padding: 48px 0 0; } .joinin-band { background: var(--char); border-radius: var(--radius-panel); padding: 36px 40px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; position: relative; overflow: hidden; } .joinin-band::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sun), var(--aqua)); } .joinin-hed { font-family: var(--f-d); font-weight: 700; font-size: 26px; letter-spacing: -.5px; color: var(--paper); margin: 0 0 8px; } .joinin-desc { font-family: var(--f-r); font-size: 16px; color: rgba(255,253,248,.65); line-height: 1.55; margin: 0; } .joinin-btns { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; } /* responsive overrides for v2 */ @media (max-width: 1200px) { .home-hero .hero-row, .topic-zone-grid, .hiw-grid, .hist-grid, .contrib-grid, .body-grid, .related-grid, .trust-grid, .joinin-band { grid-template-columns: 1fr; } .hero-side { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,253,248,.14); padding-top: 22px; margin-top: 8px; } /* Topic zone: vertical divider → horizontal when columns stack */ .zone-feat { padding-right: 0; } .zone-secondary { border-left: none; border-top: 1px solid rgba(255,253,248,.15); margin-top: 32px; padding: 32px 0 0; align-self: auto; } .cards-4 { grid-template-columns: 1fr 1fr; } .qstrip { grid-template-columns: 1fr 1fr; } .qstrip .label { grid-column: 1 / -1; border-right: none; border-bottom: 1px solid rgba(255,253,248,.15); margin-right: 0; padding: 12px 0; } .hist-title { font-size: 36px; } .sidebar { position: static; } /* Constrain collapsed body-grid using prose's own font so ch units match exactly */ .body-grid { font-size: 18px; max-width: 68ch; } .progress-bar .read-bar { display: none; } } @media (max-width: 600px) { .cards-4, .related-grid, .trust-grid { grid-template-columns: 1fr; } .qstrip-wrap .wrap { padding-left: 0; padding-right: 0; max-width: none; } .qstrip { grid-template-columns: 1fr 1fr; gap: 0; } .qstrip a { border-right: 1px solid rgba(255,253,248,.08); border-bottom: 1px solid rgba(255,253,248,.08); padding: 18px 16px; } .qstrip a:nth-child(even) { border-right: none; } .qstrip .label { display: none; } .hiw-steps { grid-template-columns: 1fr; gap: 10px; } .hiw-arrow { transform: rotate(90deg); } }