@charset "UTF-8"; /* ========================================================================== Front theme — rich media look. Tokens: data-theme · data-font · data-layout · data-radius ========================================================================== */ :root { --font-display-fallback: Georgia, "Times New Roman", serif; --font-body-fallback: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-display: var(--font-display-fallback); --font-body: var(--font-body-fallback); --primary: #0f5fa8; --primary-strong: #0b487f; --accent: #ff7a1a; --radius: 16px; --radius-sm: 8px; --radius-xs: 4px; --container: 1240px; --measure: 66ch; --display-case: none; --display-tracking: -.025em; --display-weight: 800; --display-scale: 1; --display-lh: 1.02; --ease: cubic-bezier(.2,.7,.2,1); color-scheme: light dark; } [data-theme="forest"] { --primary:#1f7a4d; --primary-strong:#0f3a26; --accent:#ffc61a; } [data-theme="sunset"] { --primary:#d2461c; --primary-strong:#6e2210; --accent:#ffb400; } [data-theme="slate"] { --primary:#334155; --primary-strong:#111827; --accent:#38bdf8; } [data-theme="wine"] { --primary:#8a2140; --primary-strong:#3b0d1d; --accent:#f4c542; } [data-theme="midnight"] { --primary:#4338ca; --primary-strong:#1b1a5c; --accent:#ff4d6d; } [data-theme="emerald"] { --primary:#059669; --primary-strong:#033e2d; --accent:#fbbf24; } [data-theme="charcoal"] { --primary:#1f2937; --primary-strong:#0a0f16; --accent:#f43f5e; } [data-theme="sky"] { --primary:#0284c7; --primary-strong:#03304a; --accent:#fde047; } [data-theme="olive"] { --primary:#5f6f22; --primary-strong:#262d0e; --accent:#f97316; } [data-theme="plum"] { --primary:#7e22ce; --primary-strong:#31104f; --accent:#4ade80; } :root { --paper: color-mix(in srgb, var(--primary) 4%, #f7f7f4); --surface: #ffffff; --ink: color-mix(in srgb, var(--primary) 26%, #0e0e0e); --ink-2: color-mix(in srgb, var(--primary) 14%, #545454); --ink-3: color-mix(in srgb, var(--primary) 10%, #8a8a8a); --line: color-mix(in srgb, var(--primary) 12%, #e2e2dd); --line-strong: color-mix(in srgb, var(--primary) 30%, #c9c9c3); --tint: color-mix(in srgb, var(--primary) 8%, #ffffff); --band: color-mix(in srgb, var(--primary-strong) 85%, #000); --band-ink-2: color-mix(in srgb, #fff 70%, var(--primary)); --band-line: color-mix(in srgb, #fff 14%, transparent); --shadow: 0 1px 2px rgba(0,0,0,.05), 0 16px 40px -22px color-mix(in srgb, var(--primary) 45%, #000); --shadow-lg: 0 2px 4px rgba(0,0,0,.06), 0 30px 70px -30px color-mix(in srgb, var(--primary) 55%, #000); --accent-ink: #111; } /* Dark mode. Only the neutral token layer is redefined: the 11 palettes keep driving --primary / --accent, so every theme gets a coherent dark variant for free. data-scheme="light" on opts a site out. */ @media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) { --paper: color-mix(in srgb, var(--primary) 7%, #0f1113); --surface: color-mix(in srgb, var(--primary) 6%, #181b1f); --ink: color-mix(in srgb, var(--primary) 6%, #f1f3f5); --ink-2: color-mix(in srgb, var(--primary) 12%, #b6bcc4); --ink-3: color-mix(in srgb, var(--primary) 12%, #8b919a); --line: color-mix(in srgb, var(--primary) 18%, #282c32); --line-strong: color-mix(in srgb, var(--primary) 30%, #3b4149); --tint: color-mix(in srgb, var(--primary) 16%, #1a1e23); --band: color-mix(in srgb, var(--primary-strong) 55%, #000); --band-ink-2: color-mix(in srgb, #fff 62%, var(--primary)); --band-line: color-mix(in srgb, #fff 10%, transparent); --shadow: 0 1px 2px rgba(0,0,0,.45), 0 16px 40px -22px #000; --shadow-lg: 0 2px 4px rgba(0,0,0,.55), 0 30px 70px -30px #000; } /* Full-bleed photos are a touch bright against a dark ground. */ :root:not([data-scheme="light"]) .post-hero-img, :root:not([data-scheme="light"]) .tile img { filter: brightness(.92); } } [data-radius="none"] { --radius: 0; --radius-sm: 0; --radius-xs: 0; } [data-radius="sm"] { --radius: 6px; --radius-sm: 4px; --radius-xs: 2px; } [data-radius="lg"] { --radius: 24px; --radius-sm: 12px; --radius-xs: 6px; } [data-font="sport"] { --display-case: uppercase; --display-tracking: 0; --display-weight: 800; --display-scale: 1.15; --display-lh: .92; } [data-font="tech"] { --display-tracking: -.035em; } [data-font="editorial"], [data-font="classic"] { --display-weight: 700; --display-tracking: -.015em; --display-lh: 1.06; } [data-font="sport"] .prose h2, [data-font="sport"] .prose h3, [data-font="sport"] .card--default .card-title, [data-font="sport"] .card--compact .card-title, [data-font="sport"] .guide-list strong, [data-font="sport"] .trending-title, [data-font="sport"] .tile-name { text-transform: none; letter-spacing: -.01em; } /* --- Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } /* An element hidden by script must stay hidden whatever display its class sets (age gate, consent, sticky bars). */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--base-size, 1.0625rem); line-height: var(--base-lh, 1.6); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-strong); } :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 80%, transparent); outline-offset: 2px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: var(--display-lh); margin: 0 0 .5em; color: inherit; text-wrap: balance; } h1 { font-size: calc(clamp(2.2rem, 1.2rem + 3vw, 3.8rem) * var(--display-scale)); text-transform: var(--display-case); } h2 { font-size: calc(clamp(1.5rem, 1.05rem + 1.3vw, 2.2rem) * var(--display-scale)); text-transform: var(--display-case); } h3 { font-size: 1.3rem; line-height: 1.2; } p { margin: 0 0 1em; } button, input, textarea, select { font: inherit; } .container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: .5rem 1rem; z-index: 100; } .skip-link:focus { left: 8px; } .eyebrow { font-family: var(--font-body); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); margin: 0 0 .5rem; } .btn { display: inline-flex; align-items: center; gap: .4rem; background: var(--ink); color: #fff; border: 0; padding: .75rem 1.3rem; border-radius: 999px; font-weight: 700; cursor: pointer; font-size: .95rem; transition: transform .2s var(--ease), background .2s; } .btn:hover { background: var(--primary); color: #fff; transform: translateY(-1px); } .btn-accent { background: var(--accent); color: var(--accent-ink); } .btn-accent:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); color: var(--accent-ink); } .btn-ghost { background: transparent; color: inherit; border: 1px solid currentColor; } .btn-ghost:hover { background: rgba(255,255,255,.12); color: inherit; } .btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); } .chip { display: inline-block; padding: .3rem .7rem; border-radius: 999px; background: var(--primary); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; } .chip--accent { background: var(--accent); color: var(--accent-ink); } .notice { padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--tint); border-left: 3px solid var(--primary); } .notice-success { background: #edf7ef; border-color: #2f8f4e; } .notice-error { background: #fbeeec; border-color: #c0392b; } .empty { color: var(--ink-3); padding: 2rem 0; } /* --- Header ------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); transition: box-shadow .25s; } .site-header.is-scrolled { box-shadow: 0 10px 30px -20px rgba(0,0,0,.35); } .masthead-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; } .brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--ink); flex-shrink: 0; } .brand:hover { color: var(--ink); } .brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--primary), var(--primary-strong)); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; box-shadow: 0 8px 20px -10px var(--primary); } .brand-logo { width: auto; max-height: 44px; } .brand-text { display: flex; flex-direction: column; } .brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; letter-spacing: var(--display-tracking); text-transform: var(--display-case); line-height: 1; } .brand-tagline { display: none; } .site-nav { flex: 1; min-width: 0; display: flex; justify-content: center; } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; } .nav-list::-webkit-scrollbar { display: none; } .nav-list a { display: block; padding: .5rem .75rem; border-radius: 999px; color: var(--ink); font-weight: 600; font-size: .86rem; white-space: nowrap; transition: background .2s, color .2s; } .site-nav { mask-image: linear-gradient(90deg, #000 94%, transparent); } .nav-list a:hover { background: var(--tint); color: var(--primary); } .nav-list a[aria-current] { background: var(--ink); color: #fff; } .nav-page, .nav-search { display: none; } .masthead-tools { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; margin-left: auto; } .icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; } .icon-btn:hover { background: var(--tint); } .btn-follow { padding: .55rem 1.1rem; font-size: .85rem; } .search-bar { border-top: 1px solid var(--line); background: var(--surface); } .search-bar-inner { display: flex; gap: .6rem; padding: .8rem 0; } .search-bar input { flex: 1; padding: .7rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); } .nav-toggle { display: none; background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; width: 40px; height: 40px; cursor: pointer; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px; color: var(--ink); } .nav-toggle-bar { width: 18px; height: 2px; background: currentColor; display: block; transition: transform .2s, opacity .2s; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .topbar { display: none; } @media (max-width: 1000px) { .nav-toggle { display: flex; } .btn-follow { display: none; } .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: .6rem 1.25rem 1.2rem; } .site-nav.is-open { display: block; } .nav-list { flex-direction: column; overflow: visible; } .nav-list a { padding: .75rem .2rem; border-radius: 0; border-bottom: 1px solid var(--line); } .nav-list a[aria-current] { background: none; color: var(--primary); } .nav-page { display: block; } .nav-page a { font-weight: 500; color: var(--ink-2); } .nav-search { display: flex; gap: .5rem; margin-top: 1rem; } .nav-search input { flex: 1; padding: .6rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px; } } /* Ticker */ .ticker { background: var(--band); color: #fff; font-size: .82rem; border-top: 1px solid var(--band-line); } .ticker-inner { display: flex; align-items: center; gap: 1rem; height: 38px; } .ticker-label { flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; color: var(--accent); } .ticker-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 1.6s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } } .ticker-track { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .ticker-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2.5rem; width: max-content; animation: marquee 60s linear infinite; } .ticker:hover .ticker-list { animation-play-state: paused; } .ticker-list a { color: #fff; white-space: nowrap; opacity: .92; } .ticker-list a:hover { color: var(--accent); } .ticker-list em { font-style: normal; color: var(--accent); font-weight: 700; margin-right: .5rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; } @keyframes marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker-list { animation: none; } .ticker-label::before { animation: none; } } /* Layout variants of the header */ .layout-classic .site-header { position: static; backdrop-filter: none; background: var(--surface); } .layout-classic .topbar { display: block; background: var(--tint); border-bottom: 1px solid var(--line); font-size: .78rem; } .layout-classic .topbar-inner { display: flex; align-items: center; gap: 1.2rem; min-height: 34px; } .layout-classic .topbar-links { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 1.1rem; } .layout-classic .topbar-links a { color: var(--ink-2); } .layout-classic .brand-mark { border-radius: 2px; } .layout-classic .nav-list a { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; font-weight: 700; } .layout-classic .nav-list a[aria-current] { background: none; color: var(--primary); box-shadow: inset 0 -3px 0 var(--accent); } .layout-minimal .site-header { background: var(--paper); backdrop-filter: none; } .layout-minimal .brand-mark { display: none; } .layout-minimal .brand-name { font-size: 1.7rem; } .layout-minimal .nav-list a { font-weight: 500; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; } .layout-minimal .ticker { display: none; } /* --- Mosaic hero -------------------------------------------------------------------- */ .mosaic { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.4rem; height: clamp(520px, 62vh, 680px); } .mosaic-lead { grid-row: span 2; min-height: 0; } .mosaic-side { min-height: 0; } .mosaic--solo { grid-template-columns: 1fr; height: clamp(420px, 56vh, 620px); } .mosaic--one .mosaic-side { grid-row: span 2; } .card--over { position: relative; height: 100%; border-radius: var(--radius); overflow: hidden; color: #fff; box-shadow: var(--shadow); isolation: isolate; } .card--over .card-media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; } .card--over .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.88)); } .card--over .card-body { position: absolute; inset: auto 0 0 0; padding: clamp(1.1rem, 2.4vw, 2rem); gap: .6rem; z-index: 1; } .card--over .card-title a { color: #fff; background-image: linear-gradient(#fff, #fff); } .card--over .card-kicker, .card--over time, .card--over .card-read { color: rgba(255,255,255,.8); } .card--over .card-excerpt { color: rgba(255,255,255,.85); } .card--over .ph-mono, .card--over .ph-cat { display: none; } .card--over .chip--accent { margin-right: .2rem; } .card--lead .card-title { font-size: calc(clamp(1.9rem, 1rem + 2.6vw, 3.6rem) * var(--display-scale)); text-transform: var(--display-case); max-width: 22ch; text-shadow: 0 2px 30px rgba(0,0,0,.35); } .card--lead .card-excerpt { font-size: 1.1rem; max-width: 58ch; } .card--overlay .card-title { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); } .card--overlay .card-excerpt { display: none; } @media (max-width: 899.98px) { .mosaic { grid-template-columns: 1fr; grid-template-rows: none; height: auto; } .mosaic-lead, .mosaic-side { aspect-ratio: 4 / 3; } .card--lead .card-excerpt { display: none; } } /* Trending strip */ .trending { margin-top: 1.4rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.4rem; display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center; } .trending-label { margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); border-left: 2px solid var(--accent); padding-left: .5rem; font-size: .68rem; } .trending-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.2rem; counter-reset: tr; } .trending-list li { counter-increment: tr; display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; } .trending-list li::before { content: counter(tr, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--primary); font-variant-numeric: tabular-nums; } .trending-list a { display: flex; flex-direction: column; gap: .2rem; color: var(--ink); min-width: 0; } .trending-cat { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); } .trending-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: .98rem; line-height: 1.25; letter-spacing: -.01em; } .trending-list a:hover .trending-title { color: var(--primary); } @media (max-width: 699.98px) { .trending { grid-template-columns: 1fr; } .trending-label { writing-mode: horizontal-tb; transform: none; border-left: 0; border-bottom: 2px solid var(--accent); padding: 0 0 .3rem; } } /* --- Sections ---------------------------------------------------------------------- */ .section { padding: 3rem 0 .4rem; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; position: relative; } .section-title { margin: 0; font-size: calc(clamp(1.45rem, 1rem + 1vw, 2.1rem) * var(--display-scale)); padding-left: .9rem; border-left: 5px solid var(--accent); line-height: 1; } .section-more { font-size: .86rem; font-weight: 800; white-space: nowrap; } .section-more span { display: inline-block; transition: transform .2s var(--ease); } .section-more:hover span { transform: translateX(3px); } .intro { padding: 3rem 0; } .home-intro { padding: 2.2rem 0 1.2rem; } .home-intro-title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.14; letter-spacing: -.02em; margin: 0; } .home-intro-text { color: var(--ink-2); font-size: 1.05rem; max-width: 65ch; margin: .7rem 0 0; } .intro-text { color: var(--ink-2); font-size: 1.15rem; max-width: 60ch; } /* Cards */ .card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; height: 100%; min-width: 0; box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .card-media { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--tint); container-type: inline-size; } .card-media img, .card-media .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .card:hover .card-media img, .card:hover .card-media .ph { transform: scale(1.05); } .card-media .chip { position: absolute; left: .9rem; top: .9rem; z-index: 1; box-shadow: 0 4px 12px rgba(0,0,0,.2); } .card-body { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; min-width: 0; } .card-kicker { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; font-size: .74rem; color: var(--ink-3); margin: 0; font-weight: 600; } .card-read::before { content: "·"; margin-right: .6rem; } .card-title { margin: 0; font-size: 1.28rem; line-height: 1.18; overflow-wrap: anywhere; } .card-title a { color: var(--ink); background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px; transition: background-size .3s var(--ease); } .card:hover .card-title a { background-size: 100% 2px; } .card-excerpt { margin: 0; color: var(--ink-2); font-size: .95rem; flex: 1; line-height: 1.55; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--gap, 1.5rem); } @media (min-width: 900px) { .card-grid--feature { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card--wide { grid-column: span 2; grid-row: span 2; } .card--wide .card-media { aspect-ratio: auto; flex: 1; min-height: 340px; } .card--wide .card-title { font-size: calc(clamp(1.6rem, 1rem + 1.4vw, 2.4rem) * var(--display-scale)); text-transform: var(--display-case); } .card--wide .card-excerpt { font-size: 1.05rem; } } .card--compact { flex-direction: row; align-items: center; gap: 1rem; padding: .8rem; } .card--compact .card-media { flex: 0 0 96px; aspect-ratio: 1; border-radius: var(--radius-sm); } .card--compact .card-body { padding: 0; gap: .3rem; } .card--compact .card-title { font-size: 1rem; } .card--row { flex-direction: row; } .card--row .card-media { flex: 0 0 min(340px, 40%); aspect-ratio: auto; } .card--row .card-body { padding: 1.4rem 1.6rem; justify-content: center; } .card--row .card-title { font-size: 1.5rem; } .listing-lead { margin-bottom: 1.6rem; } @media (max-width: 640px) { .card--row { flex-direction: column; } .card--row .card-media { flex-basis: auto; aspect-ratio: 3/2; } } /* Placeholder visual */ .ph { position: relative; display: grid; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(var(--angle, 135deg), color-mix(in srgb, var(--primary) var(--tone, 70%), #1a1a1a), var(--primary-strong)); } .ph-pattern { position: absolute; inset: 0; width: 100%; height: 100%; color: color-mix(in srgb, #fff 20%, transparent); } .ph-1 .ph-pattern { color: color-mix(in srgb, var(--accent) 45%, transparent); } .ph-mono { position: relative; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 28cqw, 5.5rem); letter-spacing: -.04em; line-height: 1; color: color-mix(in srgb, #fff 92%, var(--primary)); text-shadow: 0 2px 20px rgba(0,0,0,.25); } .ph-cat { display: none; } /* Band */ .band { margin-top: 3.4rem; padding: 3.2rem 0 3.6rem; color: #fff; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 70%, color-mix(in srgb, var(--primary-strong) 70%, #000) 100%); position: relative; overflow: hidden; } .band::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 35%, transparent), transparent); pointer-events: none; } .band .container { position: relative; } .band .section-title { border-left-color: var(--accent); color: #fff; } .band .eyebrow { color: var(--accent); } .band-intro { color: var(--band-ink-2); margin: -.6rem 0 1.6rem; max-width: 64ch; font-size: 1.05rem; } .band-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .band .card--over { aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.12); } .band .btn-ghost { color: #fff; } /* Tiles */ .tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; } .tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; color: #fff; background: linear-gradient(var(--angle, 135deg), color-mix(in srgb, var(--primary) var(--tone, 70%), #1a1a1a), var(--primary-strong)); box-shadow: var(--shadow); isolation: isolate; } .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35) 50%, rgba(0,0,0,.85)); } .tile:hover img { transform: scale(1.06); } .tile-body { position: absolute; inset: auto 0 0 0; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; z-index: 1; } .tile-name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.05; letter-spacing: var(--display-tracking); text-transform: var(--display-case); } .tile-desc { font-size: .82rem; color: rgba(255,255,255,.8); } .tile-count:empty { display: none; } .tile-count { margin-top: .4rem; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } /* Guides */ .guide-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; } .guide-list a { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n t" "n d"; column-gap: 1rem; padding: 1.3rem 3rem 1.3rem 1.3rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); height: 100%; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .guide-list a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .guide-num { grid-area: n; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--tint); color: var(--primary); font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; } .guide-list strong { grid-area: t; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: var(--display-tracking); line-height: 1.25; } .guide-desc { grid-area: d; color: var(--ink-2); font-size: .9rem; margin-top: .3rem; } .guide-arrow { position: absolute; right: 1.1rem; top: 1.2rem; color: var(--accent); font-weight: 800; font-size: 1.2rem; transition: transform .2s var(--ease); } .guide-list a:hover .guide-arrow { transform: translateX(4px); } /* CTA */ .cta { margin-top: 3rem; } .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.6rem, 3vw, 2.8rem); border-radius: var(--radius); background: var(--ink); color: #fff; background-image: radial-gradient(120% 200% at 100% 0%, color-mix(in srgb, var(--primary) 60%, transparent), transparent 60%); } .cta .eyebrow { color: var(--accent); } .cta-title { margin: 0 0 .4rem; font-size: calc(clamp(1.5rem, 1rem + 1.4vw, 2.4rem) * var(--display-scale)); } .cta-text { margin: 0; color: rgba(255,255,255,.75); max-width: 56ch; } .cta-actions { display: flex; gap: .6rem; flex-wrap: wrap; flex-shrink: 0; } .cta .btn-ghost { color: #fff; } @media (max-width: 760px) { .cta-inner { flex-direction: column; align-items: flex-start; } } /* --- Listing heads / pagination ---------------------------------------------------- */ .page-head { padding: 1.6rem 0 1.6rem; max-width: 64ch; } .page-title { margin-bottom: .5rem; } .page-num { font-size: .5em; color: var(--ink-3); font-weight: 500; font-family: var(--font-body); text-transform: none; letter-spacing: 0; } .page-intro { color: var(--ink-2); font-size: 1.12rem; } .breadcrumbs { font-size: .78rem; color: var(--ink-3); padding-top: 1.2rem; } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; } .breadcrumbs li + li::before { content: "/"; margin-right: .35rem; opacity: .5; } .breadcrumbs a { color: inherit; } .breadcrumbs a:hover { color: var(--primary); } .pagination { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; margin: 2.6rem 0 1rem; } .page-list { list-style: none; margin: 0; padding: 0; display: flex; gap: .3rem; } .page-link { display: inline-block; min-width: 40px; text-align: center; padding: .5rem .8rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); font-weight: 700; background: var(--surface); } .page-link:hover { border-color: var(--ink); } .page-link.is-current { background: var(--ink); color: #fff; border-color: var(--ink); } .page-ellipsis { padding: .45rem .3rem; color: var(--ink-3); } .search-form { display: flex; gap: .6rem; max-width: 560px; margin: 1rem 0; } .search-form input { flex: 1; padding: .75rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); } .category-content { margin: 3rem auto 1rem; } /* --- Article ---------------------------------------------------------------------- */ .post-hero { position: relative; color: #fff; isolation: isolate; } .post-hero--image { min-height: clamp(420px, 60vh, 640px); display: flex; align-items: flex-end; } .post-hero-media { position: absolute; inset: 0; z-index: -1; } .post-hero-media img, .post-hero-media .ph { width: 100%; height: 100%; object-fit: cover; } .post-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 30%, rgba(0,0,0,.65) 65%, rgba(0,0,0,.92)); } .post-hero--plain { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); padding-top: .5rem; } .post-hero-inner { padding: 2rem 0 2.6rem; } .post-hero-inner > * { max-width: 980px; } .post-hero .breadcrumbs { color: rgba(255,255,255,.7); margin-bottom: 1.4rem; } .post-hero .chip { margin-bottom: 1rem; } .post-title { margin: 0 0 .8rem; text-shadow: 0 2px 30px rgba(0,0,0,.35); font-size: calc(clamp(2rem, 1.1rem + 3.2vw, 4rem) * var(--display-scale)); } .post-lead { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem); line-height: 1.45; color: rgba(255,255,255,.88); max-width: 60ch; } .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; font-size: .88rem; color: rgba(255,255,255,.8); margin: 1.2rem 0 0; } .post-author { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; color: #fff; } .avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .9rem; } .post-credit { position: absolute; right: 0; left: 0; bottom: .6rem; text-align: right; font-size: .72rem; color: rgba(255,255,255,.6); margin: 0; } .post-credit a { color: inherit; text-decoration: underline; } .post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: start; padding-top: 2.8rem; } .post-layout.has-toc { grid-template-columns: 250px minmax(0, 1fr); } .post-main { max-width: 760px; min-width: 0; } .post-toc { position: sticky; top: 90px; font-size: .9rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; } .post-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .post-toc a { color: var(--ink-2); display: block; line-height: 1.35; } .post-toc a:hover { color: var(--primary); } .post-toc .toc-l3 { padding-left: .9rem; font-size: .84rem; } .share--side { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); } @media (max-width: 960px) { .post-layout.has-toc { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } .post-toc { position: static; } .share--side { display: none; } } .prose { max-width: var(--measure); font-size: 1.12rem; line-height: 1.75; } .prose > * + * { margin-top: 1.15em; } .prose h2 { margin-top: 2.1em; font-size: calc(1.65rem * var(--display-scale)); } .prose h3 { margin-top: 1.7em; font-size: 1.25rem; } .prose h2 + *, .prose h3 + * { margin-top: .6em; } .prose > p:first-child::first-letter { font-family: var(--font-display); font-weight: 800; font-size: 3.4em; float: left; line-height: .8; padding: .1em .12em 0 0; color: var(--primary); } .prose.faq-answer > p:first-child::first-letter { font: inherit; float: none; padding: 0; color: inherit; } .prose img { border-radius: var(--radius); margin: 1.6em auto; box-shadow: var(--shadow); } .prose figure { margin: 1.6em 0; } .prose figcaption { text-align: center; color: var(--ink-3); font-size: .9rem; margin-top: .5em; } .prose blockquote { margin: 1.8em 0; padding: 1.2em 1.4em; border-left: 4px solid var(--accent); background: var(--tint); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-display); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 1.25em; line-height: 1.45; color: var(--ink); } .prose blockquote p:last-child { margin-bottom: 0; } .prose table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; border-radius: var(--radius-sm); } .prose th, .prose td { padding: .7em .9em; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .prose th { background: var(--tint); font-weight: 700; } .prose pre { background: var(--ink); color: #f2f2ee; padding: 1em 1.2em; border-radius: var(--radius-sm); overflow-x: auto; font-size: .9rem; } .prose code { background: var(--tint); padding: .1em .35em; border-radius: 3px; font-size: .92em; } .prose pre code { background: none; padding: 0; } .prose a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent); } .prose a:hover { text-decoration-color: var(--primary); } .prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); } .prose ul li, .prose ol li { margin: .45em 0; } .prose ul { padding-left: 1.2em; } .prose ul li::marker { color: var(--accent); } .prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; } .post-faq { margin-top: 3em; } .faq-item { background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .2rem 1.2rem; margin: .7rem 0; } .faq-item summary { font-weight: 700; cursor: pointer; padding: .9rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .faq-item summary::after { content: "+"; color: var(--primary); font-weight: 800; } .faq-item[open] summary::after { content: "–"; } .faq-answer { padding: 0 0 1rem; font-size: 1rem; } .post-footer { margin-top: 2.8rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1.2rem; } .tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .tag-list a { display: inline-block; padding: .4rem .9rem; border-radius: 999px; background: var(--tint); color: var(--primary-strong); font-size: .82rem; font-weight: 700; } .tag-list a:hover { background: var(--ink); color: #fff; } .share { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; } .share-label { color: var(--ink-3); font-weight: 800; margin-right: .3rem; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; width: 100%; } .share a, .share-copy { display: inline-block; padding: .45rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 700; cursor: pointer; font-size: .82rem; } .share a:hover, .share-copy:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .related { margin-top: 1.5rem; } .related .card--over { aspect-ratio: 4 / 3; } .reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 60; transition: width .1s linear; } /* --- Static pages ------------------------------------------------------------------ */ .page .page-head { max-width: var(--measure); } .page--wide .page-head, .page--wide .prose { max-width: 960px; } .page-head--landing { text-align: center; padding-top: 3rem; margin-inline: auto; } .page-content { margin-bottom: 2rem; } .contact-section { max-width: 640px; margin: 2rem 0; } .contact-form { display: grid; gap: 1rem; background: var(--surface); padding: 1.8rem; border-radius: var(--radius); box-shadow: var(--shadow); } .form-row { display: grid; gap: .35rem; } .form-row label { font-weight: 600; font-size: .92rem; } .form-row input, .form-row textarea { padding: .8rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); width: 100%; } .hp { position: absolute; left: -10000px; } .html-sitemap { display: grid; grid-template-columns: 1fr 1.5fr; gap: 2rem; max-width: 960px; margin: 1rem 0 3rem; } @media (max-width: 720px) { .html-sitemap { grid-template-columns: 1fr; } } .error-page { text-align: center; padding: 4rem 0 5rem; } .error-code { font-family: var(--font-display); font-size: 8rem; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; line-height: 1; } .error-page .search-form { margin-inline: auto; justify-content: center; } /* --- Footer -------------------------------------------------------------------------- */ .site-footer { margin-top: 4.5rem; background: var(--band); color: var(--band-ink-2); font-size: .93rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.6rem; padding: 3.4rem 0 2rem; } .footer-brand { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.6rem); color: #fff; margin-bottom: .6rem; letter-spacing: var(--display-tracking); text-transform: var(--display-case); line-height: 1; } .footer-desc { max-width: 46ch; } .footer-title { color: #fff; font-weight: 800; margin-bottom: .8rem; text-transform: uppercase; font-size: .7rem; letter-spacing: .16em; } .footer-links, .footer-social { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .footer-social { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; } .footer-social a { border: 1px solid var(--band-line); padding: .35rem .8rem; border-radius: 999px; font-size: .82rem; } .site-footer a { color: var(--band-ink-2); } .site-footer a:hover { color: var(--accent); } .footer-bottom { border-top: 1px solid var(--band-line); padding: 1.1rem 0 1.5rem; font-size: .8rem; opacity: .75; } .footer-bottom p { margin: 0; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; } } /* --- Motion ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .mosaic, .trending, .section, .band, .cta { animation: rise .45s var(--ease) both; } @keyframes rise { from { opacity: .001; transform: translateY(12px); } to { opacity: 1; transform: none; } } } @media print { .site-header, .site-footer, .share, .related, .post-toc, .breadcrumbs, .pagination, .reading-progress, .ticker { display: none !important; } body { background: #fff; color: #000; } .post-hero { color: #000; } } /* -------------------------------------------------------------------------- Blocks: calls to action, banners, boxes (auto-placed or [cta:slug]) -------------------------------------------------------------------------- */ .cta-block { position: relative; display: grid; gap: 1.2rem; margin: 2.2rem 0; padding: clamp(1.3rem, 2.6vw, 2rem); border-radius: var(--radius); background: var(--ink); color: #fff; box-shadow: var(--shadow); overflow: hidden; font-size: 1rem; line-height: 1.55; } .cta-block--card { background-image: radial-gradient(120% 200% at 100% 0%, color-mix(in srgb, var(--primary) 60%, transparent), transparent 60%); } .cta-block--primary { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); } .cta-block--accent { background: var(--accent); color: var(--accent-ink); box-shadow: none; } .cta-block--soft { background: var(--tint); color: var(--ink); box-shadow: none; border: 1px solid var(--line); } .cta-block--outline { background: transparent; color: var(--ink); box-shadow: none; border: 2px solid var(--line-strong); } .cta-block--inline { display: block; margin: 1.6rem 0; padding: 0; background: none; box-shadow: none; text-align: center; } .cta-block-media img { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; } .cta-block-body { display: grid; gap: .6rem; } .cta-block-eyebrow { margin: 0; color: var(--accent); } .cta-block--accent .cta-block-eyebrow, .cta-block--soft .cta-block-eyebrow, .cta-block--outline .cta-block-eyebrow { color: var(--primary); } .cta-block-title { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); line-height: 1.15; letter-spacing: var(--display-tracking); } .cta-block-text { color: rgba(255,255,255,.82); } .cta-block-text > * + * { margin-top: .6em; } .cta-block-text p { margin: 0; } .cta-block--accent .cta-block-text { color: color-mix(in srgb, var(--accent-ink) 80%, transparent); } .cta-block--soft .cta-block-text, .cta-block--outline .cta-block-text { color: var(--ink-2); } .cta-block-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; } .cta-block--soft .btn, .cta-block--outline .btn { background: var(--primary); color: #fff; } .cta-block--accent .btn { background: var(--ink); color: #fff; } @media (min-width: 700px) { .cta-block--card.cta-block--content_middle, .cta-block--primary.cta-block--content_middle { grid-template-columns: 1fr auto; align-items: center; } .cta-block--content_middle .cta-block-actions { margin: 0; } .cta-block-media + .cta-block-body { align-self: center; } .cta-block:has(.cta-block-media) { grid-template-columns: 200px 1fr; } } /* box kind: quieter, reads like an editorial note */ .cta-block--box { border-left: 4px solid var(--primary); border-radius: var(--radius-sm); } /* banners: full width strips outside the content column */ .cta-block--banner.cta-block--site_top, .cta-block--banner.cta-block--site_bottom, .cta-block--site_top, .cta-block--site_bottom { margin: 0; border-radius: 0; padding: .9rem 1rem; box-shadow: none; } .cta-block--site_top .cta-block-body, .cta-block--site_bottom .cta-block-body { max-width: var(--container); margin: 0 auto; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.2rem; text-align: center; } .cta-block--site_top .cta-block-title, .cta-block--site_bottom .cta-block-title { font-size: 1.05rem; } .cta-block--site_top .cta-block-eyebrow, .cta-block--site_bottom .cta-block-eyebrow { display: none; } .cta-block--site_top .cta-block-actions, .cta-block--site_bottom .cta-block-actions { margin: 0; } .cta-block--site_top .btn, .cta-block--site_bottom .btn { padding: .5rem 1rem; font-size: .85rem; } .cta-block--site_bottom { margin-top: 3rem; } /* home + sidebar placements */ .cta-block--home_top, .cta-block--home_bottom { max-width: var(--container); margin: 2.4rem auto; width: calc(100% - 2rem); } .post-toc .cta-block { margin: 1.4rem 0 0; padding: 1.1rem; font-size: .92rem; } .post-toc .cta-block-title { font-size: 1.1rem; } .post-toc--blocks { position: sticky; top: 90px; } .autolink { text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent); } /* --- Affiliate CTA formats -------------------------------------------------- */ /* A scripted button must look and feel exactly like a link. */ .cta-block-btn[role="link"] { cursor: pointer; user-select: none; } .cta-block-btn[aria-busy="true"] { opacity: .7; pointer-events: none; } .btn-xl { font-size: clamp(1rem, .9rem + .5vw, 1.25rem); padding: .95em 2.2em; font-weight: 800; letter-spacing: .01em; } /* XXL: full-width, impossible to miss. */ .cta-block--hero { display: grid; gap: 1.2rem; padding: clamp(1.6rem, 1rem + 3vw, 3rem); margin: 2.2rem 0; border-radius: var(--radius); color: #fff; text-align: center; justify-items: center; background: linear-gradient(135deg, var(--primary-strong), var(--primary) 55%, color-mix(in srgb, var(--accent) 55%, var(--primary))); box-shadow: var(--shadow-lg); } .cta-block--hero .cta-block-title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem); line-height: 1.1; font-weight: var(--display-weight); letter-spacing: -.02em; margin: 0; text-wrap: balance; } .cta-block--hero .cta-block-eyebrow { color: color-mix(in srgb, #fff 80%, var(--accent)); margin: 0; } .cta-block--hero .cta-block-text { max-width: 60ch; font-size: 1.08rem; color: color-mix(in srgb, #fff 88%, transparent); } .cta-block--hero .cta-block-media { max-width: 220px; } .cta-block--hero .cta-block-media img { border-radius: var(--radius-sm); } /* Wide gradient strip, lighter than hero. */ .cta-block--strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.3rem clamp(1rem, .6rem + 1.6vw, 2rem); margin: 2rem 0; border-radius: var(--radius); color: #fff; background: linear-gradient(100deg, var(--band), color-mix(in srgb, var(--accent) 40%, var(--primary))); } .cta-block--strip .cta-block-title { font-size: 1.25rem; margin: 0; font-family: var(--font-display); } .cta-block--strip .cta-block-body { display: grid; gap: .3rem; } .cta-block--strip .cta-block-text { color: color-mix(in srgb, #fff 85%, transparent); margin: 0; } .cta-block--strip .cta-block-actions { flex: 0 0 auto; } /* Sticky bar, always on screen, dismissable. */ .cta-block--sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: .85rem 3rem .85rem 1rem; margin: 0; border-radius: 0; color: #fff; background: var(--band); box-shadow: 0 -8px 30px -12px rgba(0,0,0,.5); } .cta-block--sticky .cta-block-body { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; } .cta-block--sticky .cta-block-title { margin: 0; font-size: 1.02rem; } .cta-block--sticky .cta-block-text { display: none; } .cta-block--sticky .cta-block-media { display: none; } .cta-block-close { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: .2rem .5rem; opacity: .75; } .cta-block-close:hover { opacity: 1; } body:has(.cta-block--sticky:not([hidden])) { padding-bottom: 4.5rem; } /* In the header, next to the menu. */ .cta-block--header { margin: 0; padding: 0; background: none; box-shadow: none; } .cta-block--header .cta-block-body { display: flex; align-items: center; gap: .6rem; } .cta-block--header .cta-block-title { display: none; } .cta-block--header .cta-block-text { display: none; } .cta-block--header .cta-block-media { display: none; } /* Right under the article title. */ .cta-block--article_top { margin: 0 0 1.6rem; } @media (max-width: 640px) { .cta-block--strip { flex-direction: column; align-items: stretch; text-align: center; } .cta-block--strip .cta-block-actions .btn { width: 100%; } .cta-block--hero .btn-xl { width: 100%; } .cta-block--sticky { padding: .7rem 2.6rem .7rem .8rem; } .cta-block--sticky .cta-block-title { font-size: .95rem; } } /* --- Age gate & cookie consent ---------------------------------------------- */ .gate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.2rem; background: color-mix(in srgb, var(--band) 92%, #000); backdrop-filter: blur(6px); } .gate-box { background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); max-width: 34rem; width: 100%; text-align: center; box-shadow: var(--shadow-lg); } .gate-badge { display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: 0 auto .8rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 900; font-size: 1.1rem; } .gate-title { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); margin: 0 0 .6rem; } .gate-text { color: var(--ink-2); font-size: .98rem; } .gate-text p:last-child { margin-bottom: 0; } .gate-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; } .consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: var(--surface); border-top: 2px solid var(--line-strong); box-shadow: 0 -10px 40px -18px rgba(0,0,0,.4); } .consent-inner { width: min(100% - 2rem, var(--container)); margin-inline: auto; padding: .9rem 0; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: space-between; } .consent-text { font-size: .92rem; color: var(--ink-2); max-width: 70ch; } .consent-text p { margin: .2rem 0 0; } .consent-text strong { color: var(--ink); } .consent-actions { display: flex; gap: .5rem; flex-shrink: 0; } /* The sticky CTA must not sit on top of the consent banner. */ .consent:not([hidden]) ~ .cta-block--sticky { bottom: 4.6rem; } @media (max-width: 640px) { .consent-inner { flex-direction: column; align-items: stretch; } .consent-actions .btn { flex: 1; } .gate-actions .btn { width: 100%; } } /* --- Auto-generated logo mark ------------------------------------------------ */ .brand-auto { flex: 0 0 auto; display: block; border-radius: var(--radius-xs); } .brand-auto text { font-family: var(--font-display); } @media (max-width: 640px) { .brand-auto { width: 36px; height: 36px; } } /* --- Affiliate blocks: comparison, review, tip --------------------------------- */ .cta-block--compare, .cta-block--review, .cta-block--tip { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); background-image: none; gap: 1rem; } .cta-block--compare .eyebrow, .cta-block--review .eyebrow, .cta-block--tip .eyebrow { color: var(--primary); margin: 0; } .aff-title { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height: 1.15; letter-spacing: var(--display-tracking); } .aff-intro, .aff-verdict { color: var(--ink-2); } .aff-intro p, .aff-verdict p { margin: 0 0 .5em; } .aff-compare { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; counter-reset: none; } .aff-row { position: relative; display: grid; grid-template-columns: minmax(150px, 1.2fr) auto 1.6fr auto; align-items: center; gap: .8rem 1.2rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); } .aff-compare.is-ranked .aff-row { padding-left: 3.2rem; } .aff-row.is-top { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .aff-rank { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: .85rem; } .aff-row.is-top .aff-rank { background: var(--accent); color: var(--accent-ink); } .aff-brand { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; min-width: 0; } .aff-logo { width: 96px; height: 48px; object-fit: contain; border-radius: var(--radius-xs); background: #fff; padding: 4px; } .aff-logo--text { display: grid; place-items: center; width: 48px; height: 48px; background: var(--tint); color: var(--primary); font-weight: 800; border-radius: var(--radius-xs); } .aff-name { font-weight: 800; font-size: 1.05rem; } .aff-badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .aff-rating { display: flex; align-items: center; gap: .45rem; white-space: nowrap; } .aff-stars { position: relative; display: inline-block; font-size: 1.05rem; line-height: 1; letter-spacing: .08em; white-space: nowrap; } .aff-stars::before { content: "★★★★★"; color: var(--line-strong); } .aff-stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; } .aff-stars-fill::before { content: "★★★★★"; color: #f5a623; } .aff-score { font-weight: 800; } .aff-score small { color: var(--ink-3); font-weight: 600; } .aff-offer { display: grid; gap: .25rem; min-width: 0; } .aff-offer-label { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .aff-features { margin: .2rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .2rem .9rem; color: var(--ink-2); font-size: .9rem; } .aff-features li::before { content: "✓ "; color: var(--primary); font-weight: 800; } .aff-action { justify-self: end; } .aff-btn { white-space: nowrap; } .aff-btn[role="link"] { cursor: pointer; user-select: none; } .aff-disclaimer { margin: .2rem 0 0; font-size: .78rem; color: var(--ink-3); } @media (max-width: 760px) { .aff-row { grid-template-columns: 1fr auto; } .aff-offer { grid-column: 1 / -1; } .aff-action { grid-column: 1 / -1; justify-self: stretch; } .aff-action .btn { width: 100%; justify-content: center; } } .aff-review-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .aff-review-head .aff-logo { width: 120px; height: 60px; } .aff-proscons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; } .aff-pros, .aff-cons { padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--line); } .aff-pc-title { margin: 0 0 .4rem; font-weight: 800; } .aff-pros ul, .aff-cons ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; } .aff-pros li::before { content: "+ "; color: #2f8f4e; font-weight: 800; } .aff-cons li::before { content: "– "; color: #c0392b; font-weight: 800; } .aff-specs { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .1rem 1.2rem; } .aff-specs div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--line); } .aff-specs dt { color: var(--ink-3); } .aff-specs dd { margin: 0; font-weight: 700; text-align: right; } .aff-tip-date { margin: .3rem 0 0; color: var(--ink-2); font-size: .92rem; } .aff-tip-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .6rem; } .aff-tip-cell { display: grid; gap: .2rem; padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--line); } .aff-tip-cell span { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .aff-tip-cell strong { font-size: 1.15rem; } .aff-tip-pick { border-color: var(--accent); } .aff-confidence { color: var(--accent); letter-spacing: .1em; } .aff-confidence .is-off { color: var(--line-strong); } @media (max-width: 600px) { .aff-tip-grid { grid-template-columns: 1fr 1fr; } .aff-tip-pick { grid-column: 1 / -1; } } /* --- Authors ------------------------------------------------------------------- */ .author-avatar { border-radius: 50%; flex-shrink: 0; object-fit: cover; } a.post-author { display: inline-flex; align-items: center; gap: .45rem; color: inherit; font-weight: 700; } a.post-author:hover { color: var(--primary); } .author-box { display: flex; gap: 1.1rem; align-items: flex-start; margin: 2.4rem 0 0; padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .author-box-body { display: grid; gap: .3rem; min-width: 0; } .author-box .eyebrow { margin: 0; } .author-box-name { margin: 0; font-weight: 800; font-size: 1.1rem; } .author-box-name a { color: var(--ink); } .author-box-bio { margin: 0; color: var(--ink-2); font-size: .95rem; } .author-box-more { font-weight: 700; font-size: .9rem; } .author-head { display: flex; align-items: center; gap: 1.2rem; } .author-job { margin: .2rem 0 0; color: var(--ink-2); font-weight: 600; } .author-profile { max-width: var(--measure); margin: 0 0 2.4rem; } .author-expertise .chip { background: var(--tint); color: var(--primary); } .author-links a { margin-right: .8rem; font-weight: 700; } /* --- 404 suggestions ---------------------------------------------------------- */ .nf-suggest { margin: 1.6rem 0 0; } .nf-suggest ul { padding-left: 1.1rem; } /* --- Template variants (data-header / data-card / data-footer) --------------------- Picked at random per site by the generator, editable in Paramètres → Apparence. Same markup, visibly different sites. */ [data-header="centered"] .masthead-inner { flex-wrap: wrap; justify-content: center; padding: .9rem 0 .4rem; gap: .6rem 1.5rem; } [data-header="centered"] .brand { flex-basis: 100%; justify-content: center; } [data-header="centered"] .brand-name { font-size: 1.8rem; } [data-header="centered"] .masthead-tools { position: absolute; right: max(1.25rem, calc((100% - var(--container)) / 2)); top: 1rem; } [data-header="centered"] .masthead { position: relative; } [data-header="centered"] .site-nav { flex-basis: 100%; } @media (max-width: 1000px) { [data-header="centered"] .brand { flex-basis: auto; } [data-header="centered"] .masthead-inner { justify-content: space-between; } [data-header="centered"] .masthead-tools { position: static; } } [data-header="split"] .site-header { background: var(--primary-strong); border-bottom: 3px solid var(--accent); backdrop-filter: none; -webkit-backdrop-filter: none; } [data-header="split"] .brand, [data-header="split"] .brand:hover { color: #fff; } @media (min-width: 1001px) { [data-header="split"] .site-nav .nav-list a { color: color-mix(in srgb, #fff 86%, transparent); } [data-header="split"] .site-nav .nav-list a:hover, [data-header="split"] .site-nav .nav-list a[aria-current] { color: #fff; background: color-mix(in srgb, #fff 14%, transparent); } } [data-header="split"] .icon-btn { border-color: color-mix(in srgb, #fff 35%, transparent); } [data-header="split"] .icon-btn { color: #fff; } [data-header="split"] .nav-toggle-bar { background: #fff; } [data-header="split"] .topbar { background: color-mix(in srgb, var(--primary-strong) 80%, #000); color: color-mix(in srgb, #fff 75%, transparent); border: 0; } [data-header="split"] .topbar a { color: inherit; } [data-card="flat"] .card { box-shadow: none; border-radius: 0; background: transparent; border-bottom: 1px solid var(--line); padding-bottom: .6rem; } [data-card="flat"] .card:hover { transform: none; box-shadow: none; } [data-card="flat"] .card-media { border-radius: var(--radius-sm); } [data-card="flat"] .card-body { padding: .9rem 0 .4rem; } [data-card="flat"] .card--over .card-body { padding: clamp(1.1rem, 2.4vw, 2rem); } [data-card="boxed"] .card { box-shadow: none; border: 1px solid var(--line-strong); border-top: 4px solid var(--primary); } [data-card="boxed"] .card:hover { border-top-color: var(--accent); box-shadow: var(--shadow); } [data-footer="compact"] .footer-grid { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0 1rem; text-align: center; } [data-footer="compact"] .footer-desc { max-width: 60ch; margin-inline: auto; } [data-footer="compact"] .footer-links, [data-footer="compact"] .footer-social { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; } [data-footer="compact"] .footer-title { display: none; } [data-footer="compact"] .footer-bottom { text-align: center; } /* --- Collapsible table of contents: open on desktop, closed on phones (front.js) --- */ .toc-box > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .toc-box > summary::-webkit-details-marker { display: none; } .toc-box > summary::after { content: "+"; font-size: 1.1rem; line-height: 1; color: var(--ink-3); } .toc-box[open] > summary::after { content: "–"; } @media (min-width: 961px) { .toc-box > summary { pointer-events: none; } .toc-box > summary::after { display: none; } } @media (max-width: 960px) { .post-toc .toc-l3 { display: none; } .toc-box:not([open]) > summary { margin-bottom: 0; } } /* --- [articles] shortcode, home SEO text --- */ .article-list { list-style: none; padding: 0; margin: 1rem 0 1.6rem; display: grid; gap: .1rem; } .article-list li { padding: .75rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .2rem; } .article-list a { font-weight: 700; } .article-list-desc { color: var(--ink-2); font-size: .93rem; } .home-seo { max-width: var(--measure); } @media (max-width: 700px) { .cta-block--site_top .cta-block-text { display: none; } }