/* Theme Name: TrenddifyHub Theme URI: https://trenddifyhub.com Author: Jatin Sharma Description: Editorial minimal, in motion. Trends, explained in plain English. Hand-built Lottie motion graphics, a light/dark toggle, and no plugins. Version: 4.0.0 Requires at least: 6.4 Requires PHP: 8.1 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: trenddifyhub Tags: blog, news, editorial, one-column, custom-menu, featured-images, translation-ready, dark-mode-support */ /* ---------- Fonts ---------- Self-hosted woff2, latin subset. No runtime CDN request, so the site renders identically offline and nothing leaks to fonts.gstatic.com. */ @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/instrument-serif.woff2') format('woff2'); } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/instrument-serif-italic.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; /* variable */ font-display: swap; src: url('fonts/inter.woff2') format('woff2'); } /* ---------- Tokens ---------- One palette, both themes. light-dark() reads `color-scheme`, so the OS decides by default and the header toggle overrides it by stamping data-theme on — no duplicated palette and no second stylesheet to keep in sync. */ :root { color-scheme: light dark; --paper: light-dark(#FCFAF6, #0E0C0A); /* warm cream / near-black */ --paper-2: light-dark(#F6F0E6, #18140F); /* raised blocks */ --paper-3: light-dark(#EFE6D8, #211C15); /* full-width bands */ --ink: light-dark(#16120E, #F8F4EB); --ink-2: light-dark(#524940, #B7AC9D); /* ≥7:1 both ways */ --ink-3: light-dark(#8B8177, #7C7266); /* decorative labels only, never body copy */ --line: light-dark(#E4DCCE, #2D271F); /* Vivid, and still ≥4.5:1 as text on their own ground — checked, not eyeballed. */ --accent: light-dark(#E11D48, #FB7185); /* rose — the brand mark */ --accent-2:light-dark(#0E7490, #22D3EE); /* cyan — the counterweight */ --accent-3:light-dark(#7C3AED, #A78BFA); /* violet — third note in every gradient */ --gold: light-dark(#A16207, #FBBF24); --on-accent: light-dark(#FFFFFF, #16120E); /* text sitting on a filled accent */ --cat: var(--accent); /* per-section colour, overridden by .cat-* below */ /* The footer is its own surface: light and legible by day, raised by night. */ --footer-bg: light-dark(#F3ECFB, #131010); --footer-tint: light-dark(#FDEEF3, #1B1613); --footer-ink: light-dark(#4A4139, #C8BEB0); --footer-head: light-dark(#16120E, #F8F4EB); /* Dark-only non-colour values. light-dark() covers colours; these two are blend modes and opacities, which it cannot express. */ --blend: multiply; --aurora-op: .38; --media-op: .34; --radius: 14px; --glow: 0 18px 40px -22px color-mix(in srgb, var(--cat) 55%, transparent); --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --header-h: 5rem; --wide: 1240px; --measure: 43rem; /* ~68 characters at 19px */ --pad: clamp(1.25rem, 4vw, 3rem); --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } /* The toggle writes one attribute; everything else follows from color-scheme. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --blend: screen; --aurora-op: .42; --media-op: .28; } } :root[data-theme="dark"] { --blend: screen; --aurora-op: .42; --media-op: .28; } /* Each section gets its own ink. Set on cards and article headers via post_class. */ .cat-tech { --cat: light-dark(#0B69D4, #6FB4F2); } .cat-money { --cat: light-dark(#0D7A42, #5FD69A); } .cat-work { --cat: light-dark(#B84D08, #F0B45E); } .cat-culture { --cat: light-dark(#C21E7A, #F58AC0); } .cat-health { --cat: light-dark(#0A7A70, #5FD8C6); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; padding: 0; } ul, ol { list-style: none; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; font-feature-settings: 'kern', 'liga', 'cv11'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* A whisper of film grain over the whole page. Static, GPU-cheap, and it stops the large flat cream areas from looking like dead pixels. */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .wrap { max-width: var(--wide); margin-inline: auto; padding-inline: var(--pad); } .skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: .75rem 1rem; z-index: 10000; } .skip:focus { left: 1rem; top: 1rem; } /* Visually hidden but read aloud. Unlike .skip it never comes back on focus. */ .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Rings for keyboard users, not for mouse users. */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--accent); color: #fff; } /* ---------- Motion primitives ---------- */ /* .reveal starts hidden and is released by js/motion.js. --i staggers siblings. Without JS the .no-js rule below shows everything immediately. */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); } .reveal.in { opacity: 1; transform: none; } .no-js .reveal { opacity: 1; transform: none; } @keyframes rise { from { opacity: 0; transform: translateY(1.1em) rotate(1.5deg); } to { opacity: 1; transform: none; } } @keyframes drift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.10) translate3d(-1.5%, -1.5%, 0); } } @keyframes sheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes bob { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(7px); opacity: 1; } } /* Two blobs on different orbits — never repeats visibly, only ever transforms. */ @keyframes orbit-a { 0% { transform: translate3d(-8%, -6%, 0) scale(1); } 50% { transform: translate3d(10%, 8%, 0) scale(1.25); } 100% { transform: translate3d(-8%, -6%, 0) scale(1); } } @keyframes orbit-b { 0% { transform: translate3d(8%, 10%, 0) scale(1.15); } 50% { transform: translate3d(-10%, -8%, 0) scale(.9); } 100% { transform: translate3d(8%, 10%, 0) scale(1.15); } } @keyframes hue-shift { from { background-position: 0% 50%; } to { background-position: 200% 50%; } } @keyframes spin { to { transform: rotate(1turn); } } /* ---------- Aurora ---------- Colour where the page used to be flat. Two blurred blobs behind the content, painted from the brand ramp; the parent only needs position + isolation. */ .aurora { position: relative; isolation: isolate; } .aurora::before, .aurora::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; will-change: transform; } .aurora::before { inset: -30% 40% 20% -20%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 62%, transparent), transparent 70%); animation: orbit-a 24s ease-in-out infinite; } .aurora::after { inset: 10% -20% -30% 45%; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 55%, transparent), transparent 70%); animation: orbit-b 31s ease-in-out infinite; } /* A third note, only where a section can carry it. */ .aurora-3::before { background: radial-gradient(circle, color-mix(in srgb, var(--accent-3) 50%, transparent), transparent 70%); } /* Gradient-filled text. Warm half of the ramp only — terracotta to violet and back. Adding the teal made two adjacent words read as two unrelated colours. */ .gradient-text { background: linear-gradient(100deg, var(--accent), var(--accent-3) 50%, var(--accent)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hue-shift 14s linear infinite; } /* ---------- Shared type ---------- */ /* The section colour as a filled chip, not a word in colour — this is where most of the page's colour now lives. */ .eyebrow { display: inline-flex; align-items: center; gap: .45em; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cat); background: color-mix(in srgb, var(--cat) 16%, transparent); border: 1px solid color-mix(in srgb, var(--cat) 22%, transparent); padding: .32em .8em; border-radius: 999px; line-height: 1.5; transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease-out); } .eyebrow::before { content: ''; width: .4em; height: .4em; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .18em color-mix(in srgb, var(--cat) 25%, transparent); } a.eyebrow:hover { background: var(--cat); color: var(--on-accent); transform: translateY(-1px); } .meta { font-size: .8125rem; color: var(--ink-3); letter-spacing: .01em; } .meta span + span::before { content: '·'; margin: 0 .5em; } .rule { display: flex; align-items: baseline; gap: 1rem; padding-top: .85rem; margin-bottom: 2.5rem; position: relative; } .rule::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-3) 45%, var(--accent-2) 75%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out); } .rule.in::before, .no-js .rule::before { transform: scaleX(1); } .rule h2 { font-family: var(--sans); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .rule .rule-link { margin-left: auto; font-size: .8125rem; color: var(--ink-2); white-space: nowrap; } .rule .rule-link span { display: inline-block; transition: transform .35s var(--ease-out); } .rule .rule-link:hover { color: var(--accent); } .rule .rule-link:hover span { transform: translateX(5px); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .35s var(--ease), background .35s var(--ease); } .site-header.scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--paper) 93%, transparent); } .site-header .wrap { display: flex; align-items: center; gap: 2rem; min-height: var(--header-h); transition: min-height .35s var(--ease); } .site-header.scrolled .wrap { min-height: 4rem; } /* On the homepage the header floats over the hero rather than sitting above it, so the banner is genuinely full-bleed. It only takes on a background once you scroll off. */ .home .site-header { background: transparent; backdrop-filter: none; } .home .site-header.scrolled { background: color-mix(in srgb, var(--paper) 93%, transparent); backdrop-filter: saturate(180%) blur(14px); } /* Scroll progress — a single hairline that fills as you read. */ .progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(var(--p, 0)); transform-origin: left; background: linear-gradient(90deg, var(--accent), var(--gold)); transition: transform .1s linear; } .brand { font-family: var(--serif); font-size: 1.65rem; letter-spacing: -.015em; line-height: 1; white-space: nowrap; transition: opacity .3s; } .brand em { font-style: italic; color: var(--accent); } .brand:hover { opacity: .72; } .nav { margin-left: auto; } .nav ul { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; } .nav li { list-style: none; } /* wp_nav_menu emits
  • ; markers otherwise show through */ .nav a { position: relative; display: inline-block; font-size: .875rem; color: var(--ink-2); padding-block: .3rem; transition: color .25s; } .nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); } .nav a:hover { color: var(--ink); } .nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; } .nav .current-menu-item a { color: var(--ink); } .nav .current-menu-item a::after { transform: scaleX(1); } .header-cta { margin-left: 1.75rem; font-size: .8125rem; font-weight: 500; padding: .5rem 1.1rem; border: 1px solid var(--ink); border-radius: 999px; white-space: nowrap; position: relative; overflow: hidden; transition: color .35s var(--ease); } .header-cta::before { content: ''; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); z-index: -1; } .header-cta:hover { color: var(--paper); } .header-cta:hover::before { transform: scaleX(1); } @media (max-width: 940px) { .header-cta { display: none; } } /* ---------- Mobile menu ---------- Under 820px the seven sections cannot sit in a row without clipping, so the row becomes a panel behind one button. The button is `hidden` in the markup and only revealed by motion.js — without JS the nav stays a plain visible list. */ .nav-toggle { display: none; margin-left: auto; width: 2.75rem; height: 2.75rem; /* 44px — the minimum comfortable tap target */ align-items: center; justify-content: center; background: none; border: 1px solid var(--line); border-radius: 999px; color: inherit; cursor: pointer; } .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 1.05rem; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease-out), opacity .2s; } .nav-toggle .bars::before, .nav-toggle .bars::after { content: ''; position: absolute; } .nav-toggle .bars::before { transform: translateY(-5px); } .nav-toggle .bars::after { transform: translateY(5px); } .nav-toggle[aria-expanded="true"] .bars { background: transparent; } .nav-toggle[aria-expanded="true"] .bars::before { transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .bars::after { transform: rotate(-45deg); } @media (max-width: 820px) { :root { --header-h: 4.25rem; } .site-header .wrap { gap: 1rem; } .site-header.scrolled .wrap { min-height: 4rem; } .nav-toggle:not([hidden]) { display: inline-flex; position: relative; } /* Theme first, hamburger last: the menu button stays under the thumb at the edge. */ .theme-toggle { margin-left: auto; } .nav-toggle { margin-left: 0; order: 1; } .nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; /* Opaque, not frosted: the panel sits over the hero art, and a blur that a browser skips leaves the headline legible straight through the menu. */ background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px -30px rgba(0,0,0,.5); padding: .5rem var(--pad) 1.25rem; /* Collapsed state — animated, so it slides rather than snapping. */ display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .45s var(--ease-out), opacity .3s, visibility .45s; } .site-header.nav-open .nav { grid-template-rows: 1fr; opacity: 1; visibility: visible; } .nav ul { overflow: hidden; flex-direction: column; align-items: stretch; gap: 0; flex-wrap: nowrap; } .nav li + li { border-top: 1px solid var(--line); } .nav a { display: block; font-size: 1.05rem; padding-block: .85rem; /* full-width 44px+ rows */ color: var(--ink); } .nav a::after { bottom: .7rem; width: 1.2rem; } /* Each row slides in behind the one above it once the panel is open. */ .site-header.nav-open .nav li { animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); } /* The panel needs an opaque header above it, even over the hero. */ .home .site-header.nav-open { background: color-mix(in srgb, var(--paper) 95%, transparent); backdrop-filter: saturate(180%) blur(14px); } } /* ---------- Hero ---------- */ .hero { position: relative; margin-top: calc(-1 * var(--header-h)); /* slide up under the floating header */ padding-top: var(--header-h); min-height: min(92svh, 840px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--paper-2); } .hero-media img { width: 100%; height: 100%; object-fit: cover; animation: drift 26s var(--ease) infinite alternate; will-change: transform; } /* Two scrims: one so the type always has contrast, one to dissolve the image into the page so the hero has no hard bottom edge. */ .hero-media::after { content: ''; position: absolute; inset: 0; background: /* veil under the floating header so the nav is legible over any part of the art */ linear-gradient(to bottom, color-mix(in srgb, var(--paper) 90%, transparent) 0%, color-mix(in srgb, var(--paper) 45%, transparent) 8%, transparent 18%), linear-gradient(to right, var(--paper) 0%, var(--paper) 26%, color-mix(in srgb, var(--paper) 78%, transparent) 46%, color-mix(in srgb, var(--paper) 22%, transparent) 72%, transparent 88%), linear-gradient(to top, var(--paper) 1%, color-mix(in srgb, var(--paper) 50%, transparent) 22%, transparent 56%); } /* Colour graded into the art itself — the hero photo is near-monochrome, so the brand ramp is multiplied over it rather than sitting beside it. */ .hero-media img { filter: saturate(1.15) contrast(1.03); } .hero .aurora-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--aurora-op); mix-blend-mode: var(--blend); } .hero .aurora-layer::before, .hero .aurora-layer::after { filter: blur(90px); } .hero-inner { width: 100%; padding-block: clamp(3rem, 9vw, 6rem); position: relative; } .hero-kicker { font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: .75rem; animation: rise .9s var(--ease-out) both; } .hero-kicker::after { content: ''; flex: 0 0 3.5rem; height: 1px; background: var(--accent); opacity: .5; } .hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.9rem, 8.2vw, 6.4rem); line-height: .98; letter-spacing: -.028em; margin-top: 1.25rem; max-width: 15ch; } /* The gradient is set on each word, not on the em: the words are transformed while they rise, and an ancestor's background-clip:text does not follow a transformed child. */ .hero h1 em { font-style: italic; } /* Word-by-word rise. Each span is one word, delayed by its index. */ .hero h1 .w { display: inline-block; animation: rise .95s var(--ease-out) both; animation-delay: calc(.12s + var(--i) * .07s); } /* Two animations on the gradient words: the rise, then the endless colour drift. Declared together because the shorthand on .gradient-text would otherwise lose. */ .hero h1 em .w { animation: rise .95s var(--ease-out) both, hue-shift 14s linear infinite; animation-delay: calc(.12s + var(--i) * .07s), 0s; } .hero-sub { margin-top: 1.5rem; max-width: 33rem; font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--ink-2); animation: rise .9s var(--ease-out) both; animation-delay: .55s; } .hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; animation: rise .9s var(--ease-out) both; animation-delay: .68s; } .hero-scroll { position: absolute; right: var(--pad); bottom: 2rem; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: .5rem; } .hero-scroll::after { content: ''; width: 1px; height: 2.5rem; background: linear-gradient(var(--ink-3), transparent); animation: bob 2.4s ease-in-out infinite; } @media (max-width: 720px) { /* The header is one fixed row now that the menu is behind a button, so the hero can keep its full-bleed overlap on phones instead of being pushed below it. */ .hero { min-height: 76svh; } .hero h1 { max-width: 12ch; } /* Portrait art needs the type readable over the bottom third, not the side. */ .hero-media::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--paper) 78%, transparent) 0%, transparent 22%), linear-gradient(to top, var(--paper) 4%, color-mix(in srgb, var(--paper) 88%, transparent) 34%, color-mix(in srgb, var(--paper) 25%, transparent) 78%, transparent 100%); } .hero-scroll { display: none; } } /* ---------- Ticker ---------- */ .ticker { overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent-3) 9%, transparent) 45%, color-mix(in srgb, var(--accent-2) 9%, transparent) 80%, color-mix(in srgb, var(--accent) 9%, transparent)), var(--paper-2); background-size: 200% 100%, auto; animation: hue-shift 24s linear infinite; padding-block: .85rem; margin-bottom: clamp(3rem, 7vw, 5rem); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .ticker-track { display: flex; width: max-content; animation: marquee 42s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-track span { font-family: var(--serif); font-size: 1.15rem; color: var(--ink-2); padding-inline: 1.5rem; display: flex; align-items: center; gap: 1.5rem; white-space: nowrap; } /* The separator dots walk through the section palette so the strip is never one colour. */ .ticker-track span::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .8; } .ticker-track span:nth-child(5n+2)::after { background: #1D63A8; } .ticker-track span:nth-child(5n+3)::after { background: #1D7A4F; } .ticker-track span:nth-child(5n+4)::after { background: #A32267; } .ticker-track span:nth-child(5n+5)::after { background: #0F7A70; } /* ---------- Buttons ---------- */ .btn, .btn-ghost { display: inline-flex; align-items: center; gap: .6rem; font-size: .9375rem; font-weight: 500; padding: .85rem 1.7rem; border-radius: 999px; position: relative; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease-out), color .35s var(--ease); } /* The one loud element on the page: a moving brand gradient rather than flat ink. */ .btn { background: linear-gradient(100deg, var(--accent), var(--accent-3) 50%, var(--accent)); background-size: 220% 100%; color: var(--on-accent); animation: hue-shift 16s linear infinite; box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--accent) 80%, transparent); } .btn-ghost { border: 1px solid var(--line); color: var(--ink); } .btn:hover, .btn-ghost:hover { transform: translateY(-2px); } .btn:hover { box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--accent) 85%, transparent); } /* A light sweep across the fill, not a colour change — reads as material, not as a state. */ .btn::after { content: ''; position: absolute; top: -50%; left: 0; width: 45%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: translateX(-120%) skewX(-18deg); z-index: -1; } .btn:hover::after { animation: sheen .85s var(--ease-out); } .btn-ghost::before { content: ''; position: absolute; inset: 0; background: var(--paper-2); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); z-index: -1; } .btn-ghost:hover::before { transform: scaleX(1); } .btn .arrow, .btn-ghost .arrow { transition: transform .35s var(--ease-out); } .btn:hover .arrow, .btn-ghost:hover .arrow { transform: translateX(4px); } /* ---------- Lead story ---------- */ .lead { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-bottom: clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--line); margin-bottom: clamp(2.5rem, 6vw, 4rem); } .lead-media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--cat) 70%, transparent); transition: box-shadow .7s var(--ease), transform .7s var(--ease-out); } .lead-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform 1s var(--ease-out), filter .7s var(--ease); } .lead:hover .lead-media { transform: translateY(-4px); box-shadow: 0 34px 60px -28px color-mix(in srgb, var(--cat) 85%, transparent); } .lead:hover .lead-media img { transform: scale(1.045); filter: saturate(1.12); } /* Section-colour duotone that lifts on hover — the still image is tinted, the hovered one is true colour, so the wash reads as intent rather than a bad crop. */ .lead-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, color-mix(in srgb, var(--cat) 60%, transparent), transparent 48%); mix-blend-mode: var(--blend); opacity: var(--media-op); transition: opacity .7s var(--ease); } .lead:hover .lead-media::after { opacity: 0; } .lead h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.03; letter-spacing: -.022em; margin-block: .85rem 1rem; } .lead h2 a { background-image: linear-gradient(var(--cat), var(--cat)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .6s var(--ease-out), color .35s; } .lead h2 a:hover { color: var(--cat); background-size: 100% 2px; } .lead p { color: var(--ink-2); font-size: 1.0625rem; max-width: 34rem; } .lead .meta { margin-top: 1.25rem; } @media (max-width: 860px) { .lead { grid-template-columns: 1fr; } .lead-media { order: -1; } } /* ---------- Cards ---------- */ .grid { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid, .grid-2 { grid-template-columns: 1fr; } } .card { position: relative; } /* Pointer spotlight — motion.js reports --mx/--my, this paints it. Defaults to the centre so the highlight is never in the wrong place before the first move. */ .card::before, .lead::before { content: ''; position: absolute; inset: -1.25rem; z-index: -1; border-radius: 20px; background: radial-gradient(220px circle at calc(var(--mx, .5) * 100%) calc(var(--my, .5) * 100%), color-mix(in srgb, var(--cat) 16%, transparent), transparent 70%); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; } .card:hover::before, .lead:hover::before { opacity: 1; } .card-media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); margin-bottom: 1.1rem; box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--cat) 75%, transparent); transition: box-shadow .6s var(--ease), transform .6s var(--ease-out); } .card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .9s var(--ease-out), filter .6s var(--ease); } .card:hover .card-media { transform: translateY(-4px); box-shadow: var(--glow); } .card:hover .card-media img { transform: scale(1.055); filter: saturate(1.15); } /* Section colour over the thumb, lifting on hover, plus the bar that wipes across the bottom edge — the tint is what gives a page of photos a shared palette. */ .card-media::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, color-mix(in srgb, var(--cat) 55%, transparent), transparent 52%); mix-blend-mode: var(--blend); opacity: var(--media-op); transition: opacity .6s var(--ease); } .card:hover .card-media::before { opacity: 0; } .card-media::after { content: ''; position: absolute; z-index: 2; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--cat), color-mix(in srgb, var(--cat) 35%, var(--accent))); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out); } .card:hover .card-media::after { transform: scaleX(1); } .card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.13; letter-spacing: -.014em; margin-block: .55rem .55rem; } .card h3 a { transition: color .35s var(--ease); } .card:hover h3 a { color: var(--cat); } .card p { color: var(--ink-2); font-size: .9375rem; line-height: 1.6; } .card .meta { margin-top: .8rem; } /* Wide card used for the two stories beside the lead */ .card-wide { display: grid; grid-template-columns: 9rem 1fr; gap: 1.35rem; align-items: start; } .card-wide .card-media { margin-bottom: 0; } .card-wide .card-media img { aspect-ratio: 1 / 1; } .card-wide h3 { font-size: 1.3rem; margin-top: .35rem; } @media (max-width: 620px) { .card-wide { grid-template-columns: 6.5rem 1fr; } } /* ---------- Sections and the category strip ---------- */ .block { margin-block: clamp(3rem, 7vw, 5rem); } .topics { margin-block: clamp(3rem, 7vw, 5rem); padding-block: clamp(2rem, 5vw, 3rem); border-block: 1px solid var(--line); } .topics ul { display: flex; flex-wrap: wrap; gap: .625rem; } .topics li { list-style: none; } /* Scoped to the pill list only. Unscoped, this rule lands on every link in the section — card titles and cover images included — and puts them all in pills. */ .topics ul a { display: inline-block; font-size: .875rem; padding: .55rem 1.15rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); position: relative; overflow: hidden; isolation: isolate; transition: color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease-out); } /* Each pill carries its own section colour — the template puts .cat-* on the link. */ .topics ul a::before { content: ''; position: absolute; inset: 0; background: var(--cat); transform: translateY(101%); transition: transform .45s var(--ease-out); z-index: -1; } .topics ul a { border-color: color-mix(in srgb, var(--cat) 30%, var(--line)); color: color-mix(in srgb, var(--cat) 75%, var(--ink-2)); } .topics ul a:hover, .topics ul a[aria-current] { border-color: var(--cat); color: var(--on-accent); } .topics ul a:hover { transform: translateY(-2px); box-shadow: var(--glow); } .topics ul a:hover::before, .topics ul a[aria-current]::before { transform: translateY(0); } .topics ul a .n { color: currentColor; opacity: .6; margin-left: .45em; font-size: .8125rem; } /* ---------- Subscribe band ---------- */ .subscribe { position: relative; text-align: center; padding: clamp(3.5rem, 9vw, 6rem) var(--pad); background: var(--paper-3); margin-top: clamp(3rem, 7vw, 5rem); overflow: hidden; } /* Slow-breathing radial wash so the band is never a flat rectangle. */ .subscribe::before { content: ''; position: absolute; inset: -30%; background: radial-gradient(ellipse at 26% 34%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 58%), radial-gradient(ellipse at 74% 68%, color-mix(in srgb, var(--accent-2) 38%, transparent), transparent 58%), radial-gradient(ellipse at 52% 12%, color-mix(in srgb, var(--accent-3) 30%, transparent), transparent 55%); animation: drift 30s var(--ease) infinite alternate; } /* A slow band of light sweeping across the whole band — the only large-scale motion on the page, and the reason this section reads as a feature rather than a footer. */ .subscribe::after { content: ''; position: absolute; top: -50%; left: 0; width: 30%; height: 200%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 55%, transparent), transparent); transform: translateX(-120%) skewX(-18deg); animation: sheen 7s var(--ease-out) infinite; animation-delay: 2s; pointer-events: none; } .subscribe > * { position: relative; z-index: 1; } .subscribe h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.06; letter-spacing: -.022em; } .subscribe p { color: var(--ink-2); margin: 1rem auto 2rem; max-width: 30rem; } /* ---------- Page head (blog / archive / search) ---------- */ .page-head { position: relative; padding-block: clamp(3rem, 7vw, 4.5rem) clamp(1.75rem, 4vw, 2.75rem); border-bottom: 1px solid var(--line); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } /* A colour bloom behind the page title so archives are not a headline on blank cream. */ .page-head::before { content: ''; position: absolute; z-index: -1; left: -12%; right: 40%; top: -60%; bottom: -10%; background: radial-gradient(ellipse at 30% 60%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%), radial-gradient(ellipse at 75% 30%, color-mix(in srgb, var(--accent-3) 16%, transparent), transparent 60%); filter: blur(40px); animation: orbit-a 28s ease-in-out infinite; pointer-events: none; } .page-head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: min(9rem, 40%); height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-3)); } .page-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -.024em; } .page-head p { color: var(--ink-2); margin-top: .95rem; max-width: 36rem; } /* ---------- Single post ---------- */ .post-header { max-width: var(--measure); margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 4rem) 0; text-align: center; } .post-header h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5.4vw, 3.8rem); line-height: 1.02; letter-spacing: -.024em; margin-block: .9rem 1rem; } .dek { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.42; color: var(--ink-2); } .post-header .meta { margin-top: 1.6rem; } /* Radius and glow on the image, not the figure — the figure also holds the credit line, and a shadow around both leaves a white band under the photo. */ .post-cover { margin-block: clamp(2rem, 5vw, 3rem); } .post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--cat) 90%, transparent); } .credit { font-size: .75rem; color: var(--ink-3); margin-top: .7rem; text-align: right; } .credit a { border-bottom: 1px solid var(--line); transition: border-color .3s; } .credit a:hover { border-bottom-color: var(--ink-3); } /* Article body — the whole point of the site. */ .article { max-width: var(--measure); margin-inline: auto; font-size: 1.1875rem; line-height: 1.72; } .article > * + * { margin-top: 1.5rem; } .article p { color: var(--ink); } .article a { color: var(--cat); background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s var(--ease-out); } .article a:hover { background-size: 100% 2px; } .article h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 3.2vw, 2.25rem); line-height: 1.14; letter-spacing: -.018em; margin-top: 3.2rem; } .article h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.005em; margin-top: 2.25rem; } .article ul, .article ol { padding-left: 1.25rem; } .article ul li { list-style: none; position: relative; padding-left: 1.1rem; } .article ul li::before { content: ''; position: absolute; left: 0; top: .78em; width: .35rem; height: .35rem; border-radius: 50%; background: var(--cat); } .article ol { list-style: decimal; } .article ol li::marker { color: var(--ink-3); font-size: .9em; } .article li + li { margin-top: .5rem; } .article strong { font-weight: 600; } .article blockquote { font-family: var(--serif); font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.26; letter-spacing: -.018em; color: var(--ink); border-left: 2px solid var(--cat); padding-left: 1.6rem; margin-block: 2.75rem; } /* TL;DR box */ .tldr { background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 11%, var(--paper-2)), var(--paper-2)); border: 1px solid color-mix(in srgb, var(--cat) 22%, transparent); border-left: 3px solid var(--cat); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.6rem 1.85rem; font-size: 1rem; line-height: 1.62; } .tldr h2 { font-family: var(--sans) !important; font-size: .6875rem !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cat); margin: 0 0 .8rem !important; } .tldr ul { padding-left: 0; } .tldr li { color: var(--ink-2); } /* Takeaway box that closes each post */ .takeaway { position: relative; border: 1px solid color-mix(in srgb, var(--cat) 25%, var(--line)); border-radius: var(--radius); padding: 1.85rem; margin-top: 3rem; font-size: 1rem; line-height: 1.62; background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 10%, transparent), transparent 70%); overflow: hidden; } .takeaway::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--cat), transparent); } .takeaway h2 { font-family: var(--sans) !important; font-size: .6875rem !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cat); margin: 0 0 .9rem !important; } .takeaway li { color: var(--ink-2); } .endmark { max-width: var(--measure); margin: 3rem auto 0; text-align: center; color: var(--cat); letter-spacing: .5em; } .related { margin-top: clamp(4rem, 9vw, 6rem); } /* ---------- Pagination ---------- */ .pagination { margin-top: clamp(3rem, 6vw, 4.5rem); display: flex; gap: .5rem; justify-content: center; font-size: .9375rem; } .pagination .page-numbers { padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); transition: .3s var(--ease); } .pagination a.page-numbers:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); } .pagination .current { border-color: var(--ink); color: var(--ink); } /* ---------- Search ---------- */ .searchform { display: flex; gap: .5rem; max-width: 26rem; margin-top: 1.5rem; } .searchform input[type=search] { flex: 1; font: inherit; font-size: .9375rem; padding: .75rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); transition: border-color .3s; } .searchform input[type=search]:focus { border-color: var(--ink); } .searchform button { font: inherit; font-size: .9375rem; padding: .75rem 1.5rem; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer; transition: background .3s; } .searchform button:hover { background: var(--accent); } /* ---------- Footer ---------- Its own surface rather than a black slab: a tinted band that stays legible in light mode and only goes near-black when the page does. */ .site-footer { position: relative; margin-top: 0; background: linear-gradient(160deg, var(--footer-tint), var(--footer-bg) 55%), var(--footer-bg); color: var(--footer-ink); overflow: hidden; isolation: isolate; padding-block: clamp(3.5rem, 8vw, 5.5rem) 0; border-top: 1px solid var(--line); } /* Three coloured lights drifting behind it. Blurred and low-opacity, so they read as a wash of brand colour rather than three visible blobs. */ .site-footer::before { content: ''; position: absolute; inset: -40% -10%; z-index: -1; background: radial-gradient(ellipse 40% 50% at 18% 30%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%), radial-gradient(ellipse 45% 55% at 82% 70%, color-mix(in srgb, var(--accent-2) 50%, transparent), transparent 70%), radial-gradient(ellipse 35% 40% at 55% 110%, color-mix(in srgb, var(--accent-3) 45%, transparent), transparent 70%); opacity: .3; filter: blur(30px); animation: orbit-a 34s ease-in-out infinite; pointer-events: none; } .site-footer::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-3), var(--accent-2), var(--gold), var(--accent)); background-size: 200% 100%; animation: hue-shift 18s linear infinite; } .site-footer a { color: var(--footer-ink); } .site-footer a:hover { color: var(--accent); } .footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); } @media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } } .footer-brand .brand { color: var(--footer-head); font-size: 2rem; } .footer-brand .brand em { color: var(--accent); } .footer-brand p { margin-top: .9rem; max-width: 26ch; font-size: .9375rem; color: var(--footer-ink); } .footer-col h3 { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--footer-head); margin-bottom: 1.1rem; } .footer-col li + li { margin-top: .6rem; } .footer-col a { font-size: .9375rem; display: inline-block; transition: transform .35s var(--ease-out), color .3s; } .footer-col a:hover { transform: translateX(5px); } .footer-col p { font-size: .9375rem; margin-bottom: .9rem; } .footer-bar { border-top: 1px solid color-mix(in srgb, var(--footer-head) 15%, transparent); padding-block: 1.5rem 2rem; display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; font-size: .8125rem; color: color-mix(in srgb, var(--footer-ink) 80%, transparent); } .footer-bar .right { margin-left: auto; } /* Oversized wordmark bleeding off the bottom. Decorative, hidden from screen readers. */ .footer-mark { font-family: var(--serif); font-size: clamp(4rem, 17vw, 15rem); line-height: .78; letter-spacing: -.04em; color: color-mix(in srgb, var(--footer-head) 8%, transparent); white-space: nowrap; user-select: none; pointer-events: none; margin-bottom: -.18em; padding-inline: var(--pad); max-width: var(--wide); margin-inline: auto; } /* ---------- Theme toggle ---------- Ships `hidden`; motion.js reveals it. Without JS the page still follows the OS via color-scheme, so an inert button would be the only broken thing on the page. */ .theme-toggle { flex: none; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper) 70%, transparent); color: var(--ink-2); cursor: pointer; padding: 0; transition: color .3s, border-color .3s, transform .35s var(--ease-out); } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); transform: rotate(-12deg); } .theme-toggle svg { width: 1.15rem; height: 1.15rem; display: block; } .theme-toggle .moon { display: none; } :root[data-theme="dark"] .theme-toggle .moon { display: block; } :root[data-theme="dark"] .theme-toggle .sun { display: none; } /* ---------- Subscribe form ---------- */ .sub-form { display: flex; gap: .5rem; max-width: 30rem; margin-inline: auto; } .sub-form input[type="email"] { flex: 1 1 12rem; min-width: 0; font: inherit; font-size: .9375rem; padding: .85rem 1.15rem; color: var(--ink); background: color-mix(in srgb, var(--paper) 88%, transparent); border: 1px solid var(--line); border-radius: 999px; transition: border-color .3s, background .3s; } .sub-form input[type="email"]::placeholder { color: var(--ink-3); } .sub-form input[type="email"]:focus { border-color: var(--accent); outline: none; background: var(--paper); } .sub-form .btn { flex: none; } .sub-note { font-size: .8125rem; color: var(--ink-2); margin-top: .85rem; } /* One line of feedback after the redirect. Colour carries the meaning, the wording repeats it — a red box with no text is not a message. */ .sub-msg { margin: 0 auto 1.25rem; max-width: 30rem; font-size: .9375rem; padding: .7rem 1.1rem; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); border-left: 3px solid var(--tone); background: var(--paper); box-shadow: 0 10px 30px -18px rgba(0,0,0,.5); color: var(--ink); text-align: left; --tone: var(--accent-2); } .sub-msg.is-error { --tone: var(--accent); } /* On a phone the field and the button each get their own full-width row; side by side they leave an address box too narrow to read what you typed. */ @media (max-width: 620px) { .sub-form { flex-wrap: wrap; } .sub-form input[type="email"] { flex: 1 1 100%; } .sub-form .btn { flex: 1 1 100%; justify-content: center; padding-block: .95rem; } .theme-toggle { width: 2.75rem; height: 2.75rem; } /* 44px tap target */ } /* In the footer column it is a stacked block, not a centred band. */ .footer-col .sub-form { flex-wrap: wrap; margin-inline: 0; max-width: none; } .footer-col .sub-form input[type="email"] { flex: 1 1 100%; } .footer-col .sub-form .btn { padding-inline: 1.3rem; } .footer-col .sub-msg { margin-inline: 0; } /* ---------- 404 ---------- */ .notfound { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); } .notfound h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(3.5rem, 12vw, 7rem); line-height: 1; } .notfound p { color: var(--ink-2); margin-block: 1rem 2rem; } /* ---------- Responsive ---------- One block, largest breakpoint first. Everything above this point is written for the desktop layout; these are the phone-specific corrections, not a second design. */ h1, h2, h3, .hero h1, .lead h2, .card h3 { text-wrap: balance; } .hero-sub, .lead p, .card p, .article p, .page-head p { text-wrap: pretty; } @media (max-width: 900px) { .lead h2 { font-size: clamp(1.9rem, 5.4vw, 2.6rem); } } @media (max-width: 620px) { :root { --radius: 12px; } body { font-size: 1rem; } /* Full-width buttons read as buttons on a phone; side-by-side pills do not. */ .hero-cta { gap: .6rem; } .hero-cta .btn, .hero-cta .btn-ghost { flex: 1 1 100%; justify-content: center; padding-block: .95rem; } .ticker-track span { font-size: 1rem; padding-inline: 1rem; gap: 1rem; } /* The square thumb next to a headline gets too small to read below ~360px. */ .card-wide { grid-template-columns: 5.5rem 1fr; gap: 1rem; } .card-wide h3 { font-size: 1.15rem; } .card h3 { font-size: 1.45rem; } .article { font-size: 1.0625rem; } .article blockquote { padding-left: 1.1rem; margin-block: 2rem; } .tldr, .takeaway { padding: 1.25rem 1.35rem; } .post-header { text-align: left; } .post-header .meta { margin-top: 1.1rem; } /* 44px minimum on anything a thumb has to hit. */ .pagination .page-numbers { padding: .7rem 1.05rem; } .topics ul a { padding: .65rem 1.15rem; } .footer-col a { padding-block: .25rem; } .searchform { max-width: none; } .footer-bar { gap: .5rem 1rem; } .footer-bar .right { margin-left: 0; } } /* ---------- Motion off ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } .rule::before { transform: scaleX(1); } }