/* ========================================================================== Milan Bogojevic Blog Two surfaces, on purpose: STAGE dark, glass, kinetic type moving behind it. Short looks only. READING light, solid, nothing moving. Long text lives here. Colour is category and nothing else. There is no separate brand colour. --cat / --cat-on / --cat-dark / --cat-light are set per page from PHP. ========================================================================== */ @property --wdth { syntax: ''; inherits: true; initial-value: 100; } /* --- Fonts, same origin. latin-ext stays lazy behind unicode-range. ------- */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url('fonts/archivo-400_900-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url('fonts/archivo-400_900-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/instrument-sans-400_600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/instrument-sans-400_600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/jetbrains-mono-600-subset.woff2') format('woff2'); } /* --- Tokens -------------------------------------------------------------- */ :root { /* Contrast ratios below are measured, not estimated. Muted text is checked against --paper, not --card: paper is the darker of the two grounds, so a value that clears it clears both. --ink-3 was #6d757e, which read 4.28:1 on paper and therefore failed on every page background while passing on cards. */ /* dark stage */ --night: #0c1013; --night-2: #11161b; --on-night: #f4f3ef; /* 17.2:1 on night */ --on-night-2: #a7adb4; /* 8.4:1 on night */ /* Safe only on the solid footer and behind the 68% topbar glass. Anywhere the 22% band shows through a 52% tile it drops under 4.5:1, so the stage and the category tiles use --on-night-2 instead. */ --on-night-3: #7d858e; /* 5.1:1 on flat night */ /* light reading */ --paper: #f6f5f2; --card: #ffffff; --ink: #14181d; /* 16.4:1 on paper */ --ink-2: #4c545d; /* 7.1:1 on paper */ --ink-3: #666e77; /* 4.7:1 on paper, 5.2:1 on a card */ --line: #e2e0da; --line-2: #cfccc4; /* glass, thin enough to read the type behind it */ --glass: rgba(11, 15, 19, .52); --glass-hi: rgba(18, 24, 30, .66); --edge: rgba(244, 243, 239, .11); --edge-hi: rgba(244, 243, 239, .24); --blur: 15px; /* category, replaced per page by PHP on */ --cat: #eec20b; --cat-on: #14181d; --cat-dark: #eec20b; --cat-light: #7a6100; --display: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif; --body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* 1.25 major third */ --t-xs: .75rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: 1.5625rem; --t-2x: 1.9375rem; --t-3x: 2.4375rem; --t-4x: 3.0625rem; --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --z-back: 0; --z-stage: 5; --z-nav: 30; --ease: cubic-bezier(.2, .7, .3, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--t-md); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } ::selection { background: var(--cat); color: var(--cat-on); } :where(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--cat-light); outline-offset: 3px; border-radius: var(--r-sm); } .stage :where(a, button):focus-visible { outline-color: var(--cat-dark); } .skip { position: fixed; top: 10px; left: 10px; z-index: 100; transform: translateY(-180%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r-sm); font: 600 var(--t-sm)/1 var(--body); text-decoration: none; transition: transform 180ms var(--ease); } .skip:focus-visible { transform: translateY(0); } /* ========================================================================== 1. Stage: dark, with the kinetic type layer the glass sits over ========================================================================== */ .stage { /* Updated from the real topbar height by app.js. The fallback values below keep the upper kinetic line below the navigation before JS runs. */ --stage-nav-height: 69px; position: relative; isolation: isolate; background: var(--night); color: var(--on-night); overflow: hidden; padding-bottom: clamp(40px, 6vw, 84px); } .backdrop { position: absolute; inset: 0; z-index: var(--z-back); overflow: hidden; pointer-events: none; background: radial-gradient(120% 90% at 84% 0%, color-mix(in srgb, var(--cat) 12%, transparent), transparent 62%), var(--night); } .backdrop__band { position: absolute; left: 0; width: 200%; white-space: nowrap; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' var(--wdth), 'wght' 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .8; will-change: transform; } .backdrop__run { display: flex; gap: .35em; } .backdrop__band[data-band="a"] { /* This line used to sit at 6% of the whole hero and was therefore hidden behind the navigation. Anchor it to the measured nav height instead. */ top: calc(var(--stage-nav-height) + clamp(8px, 1.2vw, 16px)); font-size: clamp(4rem, 13vw, 13rem); /* 22%, not 34%. Muted text sits directly on this band with no glass in between, and at 34% the eyebrow and the lede dropped to 2.3:1 and 3.7:1. The band is decoration; the words are not. */ color: color-mix(in srgb, var(--cat-dark) 22%, transparent); animation: run-left 52s linear infinite; } /* The navigation wraps as space gets tighter. app.js supplies the exact value; these are no-flash fallbacks for the first paint. */ @media (max-width: 699px) { .stage { --stage-nav-height: 116px; } } @media (max-width: 459px) { .stage { --stage-nav-height: 154px; } } .backdrop__band[data-band="b"] { bottom: 4%; font-size: clamp(3rem, 9.5vw, 9.5rem); color: transparent; -webkit-text-stroke: 2px rgba(244, 243, 239, .14); animation: run-right 68s linear infinite; } @keyframes run-left { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @keyframes run-right { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } } .stage__inner { position: relative; z-index: var(--z-stage); max-width: 1360px; margin: 0 auto; padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 40px) 0; } /* ========================================================================== 2. Top bar ========================================================================== */ .topbar { position: relative; z-index: var(--z-nav); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; max-width: 1360px; margin: 0 auto; padding: 18px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--edge); } /* Full-bleed glass behind the bar, clipped by the stage's own overflow. Without it the nav wraps onto the moving type on narrow screens and the links end up sitting inside a letterform. */ .topbar::before { content: ""; position: absolute; inset: 0 -100vw; z-index: -1; background: rgba(12, 16, 19, .68); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .wordmark { display: inline-flex; align-items: baseline; gap: 9px; text-decoration: none; font-family: var(--display); letter-spacing: -.04em; } .wordmark__name { font-weight: 800; font-variation-settings: 'wdth' 90, 'wght' 800; font-size: var(--t-lg); transition: font-variation-settings 320ms var(--ease); } .wordmark:hover .wordmark__name { font-variation-settings: 'wdth' 116, 'wght' 800; } .wordmark__kind { font-family: var(--mono); font-weight: 600; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--on-night-3); } .topnav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-left: auto; } .topnav__item { position: relative; font-size: var(--t-sm); color: var(--on-night-2); text-decoration: none; padding: 4px 0 6px; transition: color 170ms ease; } .topnav__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--item); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease); } .topnav__item:hover { color: var(--on-night); } .topnav__item:hover::after, .topnav__item.is-current::after { transform: scaleX(1); } .topnav__item.is-current { color: var(--on-night); } /* ========================================================================== 3. Intro and the page title ========================================================================== */ /* --on-night-2, not -3. These sit on the open stage where the moving band passes behind them, so they are measured against the band rather than against the flat ground. --on-night-3 is only safe inside a glass tile. */ .eyebrow { margin: 0 0 16px; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-2); } .pagetitle { --wdth: 104; margin: 0 0 22px; max-width: 20ch; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' var(--wdth), 'wght' 900; font-size: clamp(2.4375rem, 6.4vw, 4.75rem); line-height: .95; letter-spacing: -.042em; text-wrap: balance; } /* An article title is read, not performed. It settles once and then holds. It is also set noticeably smaller than the homepage headline: real titles run to a dozen words, and at hero size a long one turns the header into eight lines of shouting before anyone reaches the first sentence. */ .pagetitle--post { max-width: 24ch; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.02; font-weight: 800; --wdth: 102; } .intro { max-width: 62ch; padding-block: clamp(28px, 5vw, 60px) clamp(24px, 4vw, 44px); } .intro__lede { margin: 0 0 14px; font-size: var(--t-lg); line-height: 1.52; color: var(--on-night-2); text-wrap: pretty; } .intro__promise { margin: 0 0 18px; font-size: var(--t-md); color: var(--cat-dark); max-width: 54ch; } .intro__count, .intro__meta { margin: 0; font-size: var(--t-sm); color: var(--on-night-2); display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .intro--post { max-width: 70ch; } .crumbs { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 22px; font-size: var(--t-xs); color: var(--on-night-2); } .crumbs a { text-decoration: none; color: var(--on-night-2); } .crumbs a:hover { color: var(--cat-dark); } .crumbs [aria-current] { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draftflag { display: inline-block; margin: 0 0 14px; padding: 6px 12px; border: 1px dashed var(--edge-hi); border-radius: 999px; font-size: var(--t-xs); color: var(--on-night-2); } /* ========================================================================== 4. Category bento: glass over the moving type ========================================================================== */ .catgrid { display: grid; gap: 12px; grid-template-columns: 1fr; padding-bottom: clamp(8px, 2vw, 20px); } @media (min-width: 760px) { .catgrid { grid-template-columns: repeat(12, 1fr); } } .cat { position: relative; display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 30px); text-decoration: none; color: var(--on-night); background: var(--glass); backdrop-filter: blur(var(--blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden; transition: background-color 280ms var(--ease), border-color 280ms var(--ease), backdrop-filter 280ms var(--ease), transform 280ms var(--ease); } .cat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(244,243,239,.055), transparent 40%); } /* Sizes differ so the three read as a considered set, not a row of thirds. */ @media (min-width: 760px) { .cat--1 { grid-column: span 5; } .cat--2 { grid-column: span 3; } .cat--3 { grid-column: span 4; } } .cat:hover { background: var(--glass-hi); border-color: var(--edge-hi); backdrop-filter: blur(7px) saturate(190%); -webkit-backdrop-filter: blur(7px) saturate(190%); } .cat:active { transform: translateY(1px); } .cat__rule { display: block; width: 46px; height: 4px; margin-bottom: 20px; background: var(--cat); border-radius: 2px; transition: width 320ms var(--ease); } .cat:hover .cat__rule { width: 84px; } /* The glass tile is only 52% opaque, so the band still lifts the ground underneath. --on-night-3 measured 4.29:1 here. */ .cat__count { font-family: var(--mono); font-weight: 600; font-size: var(--t-xs); letter-spacing: .04em; color: var(--on-night-2); margin-bottom: 10px; } .cat__name { --wdth: 100; margin: 0 0 12px; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' var(--wdth), 'wght' 800; font-size: clamp(1.5625rem, 2.4vw, 2.4375rem); line-height: 1.02; letter-spacing: -.035em; color: var(--cat-dark); text-wrap: balance; transition: --wdth 320ms var(--ease); } .cat:hover .cat__name { --wdth: 112; } .cat__lede { margin: 0 0 14px; font-size: var(--t-sm); color: var(--on-night-2); } .cat__promise { margin: 0 0 22px; padding-top: 14px; border-top: 1px solid var(--edge); font-size: var(--t-sm); color: var(--on-night-2); } .cat__go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); font-weight: 600; color: var(--on-night); } .arrow { transition: transform 220ms var(--ease); } .cat:hover .arrow, .btn:hover .arrow { transform: translateX(5px); } /* ========================================================================== 5. Light side: sections and the post bento ========================================================================== */ .wrap { max-width: 1360px; margin: 0 auto; padding: clamp(40px, 6vw, 76px) clamp(16px, 4vw, 40px); } .section + .section { margin-top: clamp(40px, 6vw, 72px); } .section__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); } .section__h { margin: 0; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 92, 'wght' 800; font-size: var(--t-xl); letter-spacing: -.035em; } .section__note { margin: 0; font-size: var(--t-sm); color: var(--ink-3); } .bento { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 1000px) { .bento { grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; } .bento > .card { grid-column: span 4; } .bento > .card--lead { grid-column: span 7; } /* Two rows only when there is a picture to fill them. Without one the tall lead card is mostly empty space with the date stranded at the bottom. */ .bento > .card--lead.has-shot { grid-row: span 2; } .bento > .card--lead + .card, .bento > .card--lead + .card + .card { grid-column: span 5; } /* Related strip: still three, but never three equal thirds. */ .bento--related > .card:nth-child(1) { grid-column: span 5; } .bento--related > .card:nth-child(2) { grid-column: span 4; } .bento--related > .card:nth-child(3) { grid-column: span 3; } } @media (min-width: 660px) and (max-width: 999px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento > .card--lead { grid-column: span 2; } } .card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: border-color 200ms ease, transform 200ms var(--ease); } .card--lead { border-radius: var(--r-lg); } .card:hover { border-color: var(--line-2); } .card:hover .card__title a { color: var(--cat-light); } /* One hairline that becomes the category signal on the card edge. */ .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cat); transform: scaleX(0); transform-origin: left; transition: transform 340ms var(--ease); z-index: 2; } .card:hover::before { transform: scaleX(1); } .card__shot { display: block; overflow: hidden; background: var(--line); } .card__shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; transition: transform 520ms var(--ease); } .card--lead .card__shot img { aspect-ratio: 16 / 10; } .card:hover .card__shot img { transform: scale(1.03); } .card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(16px, 1.8vw, 24px); } .card--lead .card__body { padding: clamp(20px, 2.4vw, 32px); } .card__title { margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 98, 'wght' 700; font-size: var(--t-lg); line-height: 1.14; letter-spacing: -.025em; text-wrap: balance; } .card--lead .card__title { font-size: clamp(1.5625rem, 2.6vw, 2.4375rem); line-height: 1.04; } .card__title a { text-decoration: none; transition: color 180ms ease; } /* The whole card is clickable, but only the title is the real link. */ .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .card__excerpt { margin: 0 0 16px; font-size: var(--t-sm); color: var(--ink-2); max-width: 56ch; text-wrap: pretty; } .card--lead .card__excerpt { font-size: var(--t-md); } .card__meta { margin: auto 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: var(--t-xs); color: var(--ink-3); } .card__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; } .tag { align-self: flex-start; position: relative; z-index: 2; margin-bottom: 12px; padding: 5px 11px; border-radius: 999px; background: var(--cat); color: var(--cat-on); font-size: var(--t-xs); font-weight: 600; letter-spacing: .01em; text-decoration: none; } .tag--big { margin: 0; padding: 9px 16px; font-size: var(--t-sm); } /* ========================================================================== 6. Reading surface. Solid, quiet, one column. ========================================================================== */ .reading { max-width: 74ch; margin: 0 auto; padding: clamp(34px, 5vw, 64px) clamp(18px, 5vw, 24px) clamp(30px, 4vw, 50px); } .reading__shot { margin: 0 0 clamp(26px, 4vw, 42px); } .reading__shot img { width: 100%; border-radius: var(--r-md); border: 1px solid var(--line); } .reading__shot figcaption { margin-top: 10px; font-size: var(--t-sm); color: var(--ink-3); } .prose { font-size: 1.125rem; line-height: 1.68; color: var(--ink); } /* Only the first child loses its top margin. Zeroing every p here would beat the sibling rule below on specificity and run all the paragraphs together. */ .prose > :first-child { margin-top: 0; } .prose > * + * { margin-top: 1.15em; } .prose p { margin-bottom: 0; max-width: 68ch; text-wrap: pretty; } .prose h2, .prose h3, .prose h4 { font-family: var(--display); letter-spacing: -.03em; line-height: 1.14; text-wrap: balance; margin-top: 1.9em; } .prose h2 { font-weight: 800; font-variation-settings: 'wdth' 94, 'wght' 800; font-size: var(--t-2x); padding-top: .55em; border-top: 1px solid var(--line); } .prose h3 { font-weight: 700; font-variation-settings: 'wdth' 98, 'wght' 700; font-size: var(--t-xl); } .prose h4 { font-weight: 700; font-size: var(--t-lg); } .prose a { color: var(--cat-light); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 160ms ease; } .prose a:hover { text-decoration-thickness: 2px; } .prose ul, .prose ol { margin: 0; padding-left: 1.3em; max-width: 66ch; } .prose li + li { margin-top: .5em; } .prose li::marker { color: var(--cat-light); } .prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--cat); font-size: var(--t-lg); line-height: 1.5; color: var(--ink-2); max-width: 60ch; } .prose blockquote p { font-size: inherit; } .prose code { font-family: var(--mono); font-size: .86em; background: #eeece6; padding: .16em .38em; border-radius: var(--r-sm); } .prose pre { background: var(--night); color: var(--on-night); padding: 18px 20px; border-radius: var(--r-md); overflow-x: auto; /* wide code scrolls itself, the page never does */ font-size: var(--t-sm); line-height: 1.6; } .prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; } .prose img { border-radius: var(--r-md); border: 1px solid var(--line); } .prose hr { border: 0; border-top: 1px solid var(--line-2); margin: 2.4em 0; } .prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); } .prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); } .prose th { font-weight: 600; border-bottom-color: var(--ink); } /* Figures inside the article. They break out slightly wider than the text measure, because an image read at 68ch looks cramped next to type that is meant to be that narrow. */ .prose img { border-radius: var(--r-md); border: 1px solid var(--line); width: 100%; } .prose p > img:only-child { margin-inline: calc(-1 * clamp(0px, 3vw, 40px)); width: calc(100% + 2 * clamp(0px, 3vw, 40px)); max-width: none; } /* ========================================================================== FAQ on an article. Shown as well as marked up, never marked up alone. ========================================================================== */ .faq { margin-top: clamp(34px, 5vw, 54px); padding-top: 26px; border-top: 1px solid var(--line); } .faq__h { margin: 0 0 16px; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 94, 'wght' 800; font-size: var(--t-xl); letter-spacing: -.03em; } .faq__item { border-bottom: 1px solid var(--line); } .faq__q { padding: 15px 30px 15px 0; position: relative; cursor: pointer; font-weight: 600; font-size: 1.0625rem; list-style: none; text-wrap: pretty; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--cat-light); border-bottom: 2px solid var(--cat-light); transform: translateY(-70%) rotate(45deg); transition: transform 220ms var(--ease); } .faq__item[open] .faq__q::after { transform: translateY(-30%) rotate(225deg); } .faq__q:hover { color: var(--cat-light); } .faq__a { padding: 0 0 18px; color: var(--ink-2); max-width: 66ch; } .faq__a > * + * { margin-top: .9em; } .faq__a p { margin: 0; } /* ========================================================================== Consent bar. Only rendered when analytics is set to ask first. ========================================================================== */ .consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 520px; padding: 18px 20px; background: var(--night); color: var(--on-night); border-radius: var(--r-md); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); } .consent__t { margin: 0 0 14px; font-size: var(--t-sm); color: var(--on-night-2); text-wrap: pretty; } .consent__b { display: flex; flex-wrap: wrap; gap: 8px; } .consent .btn--solid { background: var(--paper); color: var(--ink); } .consent .btn--solid:hover { background: #fff; } .consent .btn--quiet { color: var(--on-night); border-color: var(--edge-hi); } .consent .btn--quiet:hover { background: rgba(244,243,239,.08); border-color: var(--on-night-2); } .reading__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(34px, 5vw, 56px); padding-top: 22px; border-top: 2px solid var(--ink); } .reading__sig { margin: 0; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 88, 'wght' 800; font-size: var(--t-lg); letter-spacing: -.03em; } /* ========================================================================== 7. Buttons, empty states, footer ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border: 1px solid transparent; border-radius: var(--r-sm); font: 600 var(--t-sm)/1 var(--body); text-decoration: none; cursor: pointer; transition: background-color 170ms var(--ease), color 170ms ease, border-color 170ms ease, transform 110ms ease; } .btn--solid { background: var(--ink); color: var(--paper); } .btn--solid:hover { background: #000; } .btn--solid:active { transform: translateY(1px); } /* Defaults to the light surface, because that is where most of the site lives. Defaulting the other way put near-white text on the light admin bar, which made the Save button invisible. */ .btn--quiet { border-color: var(--line-2); color: var(--ink); background: transparent; } .btn--quiet:hover { background: #fff; border-color: var(--ink); } .stage .btn--quiet { border-color: var(--edge-hi); color: var(--on-night); } .stage .btn--quiet:hover { background: rgba(244,243,239,.07); border-color: var(--on-night-2); } .empty { max-width: 54ch; padding: clamp(30px, 5vw, 54px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); } .empty__h { margin: 0 0 12px; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 94, 'wght' 800; font-size: var(--t-xl); letter-spacing: -.03em; } .empty__p { margin: 0 0 22px; color: var(--ink-2); text-wrap: pretty; } .empty__links { display: flex; flex-wrap: wrap; gap: 10px; } .stage .empty__links { margin-top: 8px; } .footer { background: var(--night); color: var(--on-night); padding: clamp(40px, 6vw, 70px) clamp(16px, 4vw, 40px) 34px; } .footer__grid { max-width: 1360px; margin: 0 auto; display: grid; gap: 32px; grid-template-columns: 1fr; } @media (min-width: 800px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } } .footer__mark { margin: 0 0 10px; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 76, 'wght' 900; font-size: clamp(2rem, 5vw, 3.0625rem); line-height: .95; letter-spacing: -.045em; } .footer__line { margin: 0; max-width: 46ch; color: var(--on-night-2); font-size: var(--t-sm); } .footer__h { margin: 0 0 14px; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-3); } .footer__nav { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .footer__nav a { font-size: var(--t-sm); color: var(--on-night-2); text-decoration: none; border-bottom: 1px solid transparent; transition: color 160ms ease, border-color 160ms ease; } .footer__nav a:hover { color: var(--on-night); border-bottom-color: currentColor; } .footer__n { font-family: var(--mono); font-weight: 600; font-size: var(--t-xs); color: var(--on-night-3); } .footer__legal { max-width: 1360px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--edge); font-size: var(--t-xs); color: var(--on-night-3); } /* ========================================================================== 8. Reduced motion. Loops off, states kept. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .backdrop__band { animation: none !important; } .card__shot img { transition: none; } *, *::before, *::after { transition-duration: 1ms !important; animation-iteration-count: 1 !important; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .cat { background: #141a20; } } /* ========================================================================== About page, and the sources block on an article ========================================================================== */ .reading--about { max-width: 76ch; } .intro--about { max-width: 60ch; } /* Plain facts, set as a definition list so the pairing is in the markup and not only in the visual alignment. */ .facts { margin: 0 0 clamp(28px, 4vw, 40px); padding: 0 0 4px; border-top: 2px solid var(--ink); } .facts__row { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); } .facts dt { flex: 0 0 auto; min-width: 11rem; font-size: var(--t-sm); color: var(--ink-3); } .facts dd { margin: 0; flex: 1 1 14rem; font-weight: 600; text-wrap: pretty; } .about__block { margin-top: clamp(32px, 5vw, 48px); padding-top: 24px; border-top: 1px solid var(--line); } .about__h { margin: 0 0 18px; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 94, 'wght' 800; font-size: var(--t-xl); letter-spacing: -.03em; } .about__cats { display: grid; gap: 10px; } @media (min-width: 720px) { .about__cats { grid-template-columns: repeat(3, 1fr); } } .about__cat { display: block; padding: 16px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--cat); border-radius: 0 0 var(--r-sm) var(--r-sm); text-decoration: none; transition: border-color 180ms ease, transform 180ms var(--ease); } .about__cat:hover { border-color: var(--line-2); border-top-color: var(--cat); transform: translateY(-2px); } .about__catname { display: block; font-weight: 600; font-size: var(--t-sm); } .about__catn { display: block; margin: 2px 0 8px; font-family: var(--mono); font-weight: 600; font-size: var(--t-xs); color: var(--ink-3); } .about__catlede { display: block; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.5; } .about__topics { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; } .topic { padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--t-xs); color: var(--ink-2); } .about__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .about__links a { font-size: 1.0625rem; color: var(--cat-light); text-decoration: underline; text-underline-offset: 3px; } /* --- sources on an article ------------------------------------------------ */ .sources { margin-top: clamp(30px, 4vw, 44px); padding-top: 24px; border-top: 1px solid var(--line); } .sources__h { margin: 0 0 14px; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .sources__list { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; } .sources__list li { font-size: var(--t-sm); } .sources__list li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; } .sources__list a { color: var(--cat-light); text-decoration: underline; text-underline-offset: 3px; } .sources__host { display: block; font-family: var(--mono); font-weight: 600; font-size: 10px; color: var(--ink-3); margin-top: 2px; } .topnav__item--about { opacity: .82; } .topnav__item--about:hover { opacity: 1; } /* --- portrait on the about page ------------------------------------------- */ .aboutlead { display: grid; gap: clamp(20px, 3vw, 34px); align-items: start; } /* Two columns only when there is actually a photo. Applying the track list unconditionally squeezed the subtitle into the empty 300px portrait column. */ @media (min-width: 820px) { .aboutlead--shot { grid-template-columns: 300px minmax(0, 1fr); align-items: center; } } .portrait { display: block; } .portrait img { width: 100%; max-width: 300px; height: auto; border-radius: var(--r-md); /* A hairline rather than a shadow: the photo already sits on the dark stage, and a glow around a head reads as a cut-out. */ border: 1px solid var(--edge-hi); } @media (max-width: 819px) { .portrait img { max-width: 190px; } } .aboutlead .intro { padding-block: 0; } .aboutlead .intro--about { max-width: 46ch; } /* ========================================================================== Author box, at the end of every article ========================================================================== */ .authorbox { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin-top: clamp(34px, 5vw, 52px); padding: 22px; background: var(--card); border: 1px solid var(--line); /* The category colour marks the edge, the same signal the cards use. */ border-left: 3px solid var(--cat); border-radius: 0 var(--r-md) var(--r-md) 0; } .authorbox__face { width: 72px; height: 96px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; } .authorbox__body { flex: 1 1 15rem; min-width: 0; } .authorbox__label { margin: 0 0 4px; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .authorbox__name { margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 92, 'wght' 800; font-size: var(--t-lg); letter-spacing: -.02em; line-height: 1.1; } .authorbox__name a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--cat); transition: color 170ms ease; } .authorbox__name a:hover { color: var(--cat-light); } .authorbox__line { margin: 0 0 8px; font-size: var(--t-sm); color: var(--ink-2); text-wrap: pretty; } .authorbox__more { margin: 0; font-size: var(--t-sm); } .authorbox__more a { color: var(--cat-light); text-decoration: underline; text-underline-offset: 3px; } .reading__end { justify-content: flex-end; border-top: 0; padding-top: 18px; margin-top: 18px; }