/* ════════════════════════════════════════════════════════════ PRISM DEVSECOPS — SHARED DESIGN SYSTEM Editorial × Modern SaaS ════════════════════════════════════════════════════════════ */ :root { /* PAPER PALETTE (default) */ --paper: #F2EDE4; --paper2: #EBE4D8; --paper3: #E1D9CC; --paper4: #D7CDBD; --ink: #1C1814; --ink2: #3A342D; --ink3: #6B6259; --faint: #B8AFA4; --rule: rgba(28,24,20,0.12); --rule2: rgba(28,24,20,0.06); --hairline:rgba(28,24,20,0.20); /* ACCENT TOKENS (cloud-coded) */ --aws: #C47B1E; --az: #1A6BB5; --gcp: #1C7A43; --purple: #5D3A9B; --red: #B0311F; --teal: #1B6E72; /* Default accent is GCP; pages can override via [data-cloud-accent] */ --accent: var(--gcp); --accent-soft: color-mix(in srgb, var(--accent) 8%, var(--paper)); --accent-border: color-mix(in srgb, var(--accent) 35%, transparent); /* TYPE */ --serif: 'Instrument Serif', 'Source Serif Pro', Georgia, serif; --sans: 'DM Sans', 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', 'IBM Plex Mono', monospace; /* SCALE — driven by --density */ --density: 1; --gap-xs: calc(0.25rem * var(--density)); --gap-s: calc(0.5rem * var(--density)); --gap-m: calc(1rem * var(--density)); --gap-l: calc(1.75rem * var(--density)); --gap-xl: calc(3rem * var(--density)); --gap-xxl:calc(5rem * var(--density)); /* RADII (subtle — editorial feel) */ --r-s: 2px; --r-m: 4px; --r-l: 8px; /* SHADOW (only on lifts) */ --lift: 0 1px 0 var(--rule), 0 12px 24px -16px rgba(28,24,20,0.18); --lift-hover: 0 1px 0 var(--hairline), 0 20px 40px -20px rgba(28,24,20,0.28); } /* DARK MODE — Midnight base, higher contrast text, deep paper layers */ body.dark { --paper: #0B1120; /* midnight blue base */ --paper2: #131B2C; /* surface 1 */ --paper3: #1E293B; /* surface 2 (cards / inputs) */ --paper4: #283446; /* surface 3 (raised) */ --ink: #F1F5F9; /* primary text — cool white — contrast ratio 16:1 on --paper */ --ink2: #CBD5E1; /* secondary — 10:1 */ --ink3: #94A3B8; /* tertiary — 5.4:1 */ --faint: #64748B; /* muted — 3.5:1 (large text / decorative only) */ --rule: rgba(241,245,249,0.12); --rule2: rgba(241,245,249,0.06); --hairline:rgba(241,245,249,0.22); /* Brighten cloud accents for dark backgrounds (WCAG AA on midnight) */ --aws: #F4A93C; /* amber — 9.5:1 on #0B1120 */ --az: #60A5FA; /* sky blue — 8.4:1 */ --gcp: #4ADE80; /* mint green — 11.2:1 */ --purple: #C4B5FD; --red: #FCA5A5; --teal: #5EEAD4; } /* Per-page cloud-color identity — set via data-cloud-accent on */ body[data-cloud-accent="aws"] { --accent: var(--aws); } body[data-cloud-accent="az"] { --accent: var(--az); } body[data-cloud-accent="gcp"] { --accent: var(--gcp); } body[data-cloud-accent="tri"] { --accent: var(--az); } /* tri-color pages default to az for buttons */ /* Accent utility classes — scope --accent to an element subtree (higher specificity needed for some uses) */ .accent-aws, .spoke.accent-aws { --accent: var(--aws); --accent-soft: color-mix(in srgb, var(--aws) 8%, var(--paper)); --accent-border: color-mix(in srgb, var(--aws) 35%, transparent); } .accent-az, .spoke.accent-az { --accent: var(--az); --accent-soft: color-mix(in srgb, var(--az) 8%, var(--paper)); --accent-border: color-mix(in srgb, var(--az) 35%, transparent); } .accent-gcp, .spoke.accent-gcp { --accent: var(--gcp); --accent-soft: color-mix(in srgb, var(--gcp) 8%, var(--paper)); --accent-border: color-mix(in srgb, var(--gcp) 35%, transparent); } /* ════════════════════════════════════════════════════════════════════ PER-PAGE CLOUD-COLOR THEMING Each page tints its paper palette toward its cloud identity. Text colors (ink, ink2, ink3) stay dark/light per palette to keep contrast strong. ════════════════════════════════════════════════════════════════════ */ /* PAPER mode — subtle washes */ body[data-cloud-accent="aws"] { --paper: color-mix(in srgb, var(--aws) 5%, #F5EFE6); --paper2: color-mix(in srgb, var(--aws) 10%, #EFE7D9); --paper3: color-mix(in srgb, var(--aws) 14%, #E5DBC8); --paper4: color-mix(in srgb, var(--aws) 18%, #DCCFB7); } body[data-cloud-accent="az"] { --paper: color-mix(in srgb, var(--az) 4%, #EFF0F2); --paper2: color-mix(in srgb, var(--az) 8%, #E5E7EB); --paper3: color-mix(in srgb, var(--az) 12%, #D6DAE0); --paper4: color-mix(in srgb, var(--az) 16%, #C5CCD5); } body[data-cloud-accent="gcp"] { --paper: color-mix(in srgb, var(--gcp) 4%, #EEF1ED); --paper2: color-mix(in srgb, var(--gcp) 9%, #E2E8DF); --paper3: color-mix(in srgb, var(--gcp) 13%, #D2DCCC); --paper4: color-mix(in srgb, var(--gcp) 18%, #C1CEBC); } /* DARK mode — deep cloud-tinted backgrounds over midnight, contrast preserved */ body.dark[data-cloud-accent="aws"] { --paper: color-mix(in srgb, var(--aws) 6%, #0B1018); --paper2: color-mix(in srgb, var(--aws) 10%, #131A26); --paper3: color-mix(in srgb, var(--aws) 15%, #1F2A38); --paper4: color-mix(in srgb, var(--aws) 22%, #2B3645); } body.dark[data-cloud-accent="az"] { --paper: color-mix(in srgb, var(--az) 7%, #0A1018); --paper2: color-mix(in srgb, var(--az) 11%, #121A28); --paper3: color-mix(in srgb, var(--az) 16%, #1C2638); --paper4: color-mix(in srgb, var(--az) 23%, #28344A); } body.dark[data-cloud-accent="gcp"] { --paper: color-mix(in srgb, var(--gcp) 6%, #0A1218); --paper2: color-mix(in srgb, var(--gcp) 10%, #121C24); --paper3: color-mix(in srgb, var(--gcp) 15%, #1C2832); --paper4: color-mix(in srgb, var(--gcp) 22%, #283642); } /* Tri-color pages get section-level tints — see .section-band-* classes */ body[data-cloud-accent="tri"] { /* default paper, sections tint themselves */ } /* Section-level cloud tinting (for tri-color pages or anywhere we want stripes) */ .section-band-aws { background: color-mix(in srgb, var(--aws) 6%, var(--paper)); border-block: 1px solid color-mix(in srgb, var(--aws) 18%, transparent); } .section-band-az { background: color-mix(in srgb, var(--az) 6%, var(--paper)); border-block: 1px solid color-mix(in srgb, var(--az) 18%, transparent); } .section-band-gcp { background: color-mix(in srgb, var(--gcp) 6%, var(--paper)); border-block: 1px solid color-mix(in srgb, var(--gcp) 18%, transparent); } body.dark .section-band-aws { background: color-mix(in srgb, var(--aws) 10%, var(--paper)); } body.dark .section-band-az { background: color-mix(in srgb, var(--az) 10%, var(--paper)); } body.dark .section-band-gcp { background: color-mix(in srgb, var(--gcp) 10%, var(--paper)); } /* ── RESET ── */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14.5px; line-height: 1.7; font-weight: 400; overflow-x: hidden; transition: background 0.4s ease, color 0.4s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } hr { border: none; border-top: 1px solid var(--rule); } ul { list-style: none; } /* ── TYPOGRAPHY ── */ .serif { font-family: var(--serif); font-weight: 400; } .mono { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.02em; } .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); font-weight: 400; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.05; letter-spacing: -0.02em; } h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); } h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.08; } h3 { font-size: 1.4rem; line-height: 1.2; } h4 { font-size: 1.1rem; line-height: 1.3; } em { font-style: italic; color: var(--ink2); } p { color: var(--ink2); line-height: 1.75; text-wrap: pretty; font-weight: 400; } strong { color: var(--ink); font-weight: 600; } /* ── LAYOUT ── */ .container { max-width: 1240px; margin: 0 auto; padding: 0 2.5rem; } .container-wide { max-width: 1440px; margin: 0 auto; padding: 0 2.5rem; } .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; } /* ══════════════════════════════════════════════════════ MASTHEAD — sticky, with breadcrumb ══════════════════════════════════════════════════════ */ .masthead { border-bottom: 1px solid var(--rule); padding: 0.85rem 0; position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .masthead-brand { display: flex; align-items: baseline; gap: 0.5rem; font-family: var(--serif); font-size: 1.2rem; color: var(--ink); white-space: nowrap; flex-shrink: 0; } .masthead-brand em { font-style: italic; } .masthead-brand .crumb { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--faint); font-weight: 400; border-left: 1px solid var(--rule); padding-left: 0.7rem; margin-left: 0.4rem; text-transform: uppercase; white-space: nowrap; } .masthead-brand .crumb b { color: var(--ink3); font-weight: 400; } .masthead-nav { display: flex; gap: 2rem; } .masthead-nav a { font-size: 12px; color: var(--ink3); font-weight: 400; letter-spacing: 0.01em; transition: color 0.15s; position: relative; padding: 4px 0; } .masthead-nav a:hover { color: var(--ink); } .masthead-nav a.current { color: var(--ink); } .masthead-nav a.current::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 1px; background: var(--ink); } .masthead-right { display: flex; align-items: center; gap: 0.6rem; } /* ── BUTTONS ── */ .btn { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--ink); border-radius: var(--r-s); background: transparent; color: var(--ink); cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .btn:hover { background: var(--ink); color: var(--paper); } .btn.filled { background: var(--ink); color: var(--paper); } .btn.filled:hover { background: var(--ink2); } .btn.ghost { border-color: var(--rule); color: var(--ink3); } .btn.ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; } .btn-sm { padding: 4px 10px; font-size: 9px; } .btn-lg { padding: 10px 22px; font-size: 11px; } /* ── TICKER ── */ .ticker-wrap { overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--paper2); padding: 0.5rem 0; } .ticker-track { display: flex; gap: 3rem; animation: ticker 38s linear infinite; width: max-content; } .ticker-track:hover { animation-play-state: paused; } .ticker-item { font-family: var(--mono); font-size: 10px; color: var(--ink3); white-space: nowrap; letter-spacing: 0.06em; display: flex; align-items: center; gap: 0.5rem; } .ticker-item .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); flex-shrink: 0; } .ticker-item .ac { color: var(--accent); } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ══════════════════════════════════════════════════════ PAGE HEADER — used on every spoke page ══════════════════════════════════════════════════════ */ .page-head { padding: var(--gap-xl) 0 var(--gap-l); border-bottom: 1px solid var(--rule); position: relative; } .page-head::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 96px; height: 2px; background: linear-gradient(to right, var(--aws) 0 33.33%, var(--az) 33.33% 66.66%, var(--gcp) 66.66% 100%); } .page-head-meta { display: flex; align-items: center; gap: 2rem; margin-bottom: var(--gap-l); font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: 0.1em; text-transform: uppercase; } .page-head-meta::after { content: ''; flex: 1; height: 1px; background: var(--rule2); } .page-head h1 { margin-bottom: var(--gap-m); max-width: 920px; } .page-head .lead { font-size: 17px; color: var(--ink2); max-width: 640px; line-height: 1.7; font-weight: 400; } /* ── SECTION ── */ .section { padding: var(--gap-xxl) 0; border-bottom: 1px solid var(--rule); } .section:last-of-type { border-bottom: none; } .section-num { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: 0.12em; margin-bottom: var(--gap-l); display: flex; align-items: center; gap: 1rem; text-transform: uppercase; } .section-num::before { content: ''; display: inline-block; width: 18px; height: 6px; background: linear-gradient(to right, var(--aws) 0 33.33%, var(--az) 33.33% 66.66%, var(--gcp) 66.66% 100%); border-radius: 1px; flex-shrink: 0; } .section-num::after { content: ''; flex: 1; height: 1px; background: var(--rule2); } .section-head { margin-bottom: var(--gap-xl); } .section-head h2 { margin-bottom: 0.75rem; max-width: 720px; } .section-head p { max-width: 640px; font-size: 15px; } /* ══════════════════════════════════════════════════════ CARDS / SURFACES ══════════════════════════════════════════════════════ */ .card { background: var(--paper2); border: 1px solid var(--rule); border-radius: var(--r-m); padding: var(--gap-l); transition: all 0.2s ease; position: relative; } .card-lift { cursor: pointer; } .card-lift:hover { transform: translateY(-2px); border-color: var(--hairline); box-shadow: var(--lift-hover); } .card-ink { background: var(--ink); color: var(--paper); border-color: rgba(255,255,255,0.08); } .card-ink h2, .card-ink h3, .card-ink .serif { color: var(--paper); } .card-ink p { color: rgba(242,237,228,0.55); } .card-accent-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); border-radius: var(--r-m) var(--r-m) 0 0; } /* ── CHIPS ── */ .chip { font-family: var(--mono); font-size: 10px; padding: 2px 8px; border: 1px solid var(--rule); color: var(--ink3); background: var(--paper); border-radius: var(--r-s); display: inline-flex; align-items: center; gap: 4px; } .chip.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); } .chip.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--paper)); } .chip-row { display: flex; flex-wrap: wrap; gap: 4px; } /* ── PILL TABS ── */ .tabs { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--r-s); padding: 2px; background: var(--paper2); gap: 2px; } .tabs button { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; color: var(--ink3); border-radius: 2px; transition: all 0.15s; } .tabs button:hover { color: var(--ink); } .tabs button.active { background: var(--ink); color: var(--paper); } /* ── HSTAT ── */ .hstats { display: flex; gap: 0; border: 1px solid var(--rule); border-radius: var(--r-s); width: fit-content; } .hstat { padding: 0.8rem 1.8rem; border-right: 1px solid var(--rule); text-align: left; } .hstat:last-child { border-right: none; } .hstat-n { font-family: var(--serif); font-size: 2.2rem; color: var(--ink); display: block; line-height: 1; margin-bottom: 4px; } .hstat-l { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: 0.08em; text-transform: uppercase; } /* ── KEY-VALUE LIST ── */ .kv { display: flex; flex-direction: column; } .kv-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule2); gap: 1rem; } .kv-k { color: var(--ink3); font-size: 12px; } .kv-v { color: var(--ink); font-size: 12px; font-family: var(--mono); } /* ══════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════ */ .site-footer { border-top: 1px solid var(--rule); padding: var(--gap-xl) 0 var(--gap-m); background: var(--paper2); margin-top: var(--gap-xxl); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; } .footer-brand { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 0.35rem; } .footer-brand em { font-style: italic; } .footer-meta { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: 0.08em; } .footer-col h5 { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.85rem; font-weight: 400; } .footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; } .footer-col a { font-size: 12.5px; color: var(--ink3); transition: color 0.15s; } .footer-col a:hover { color: var(--ink); } .footer-bottom { margin-top: var(--gap-l); padding-top: var(--gap-m); border-top: 1px solid var(--rule2); display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: 0.06em; } /* ══════════════════════════════════════════════════════ HUB SPOKES GRID ══════════════════════════════════════════════════════ */ .spokes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-m); overflow: hidden; } /* Each spoke uses --accent from its accent-{cloud} class (set by chrome.js from page registry); tri-color pages fall through to body default. */ .spoke .spoke-illust { color: var(--accent); opacity: 0.78; } .spoke:hover .spoke-illust { opacity: 1; } .spoke .spoke-num { color: var(--accent); } .spoke::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0.18); transform-origin: top; transition: transform 0.25s ease; } .spoke:hover::before { transform: scaleY(1); } .spoke .spoke-arrow { color: var(--accent); opacity: 0.5; } .spoke:hover .spoke-arrow { opacity: 1; } /* Fallback: tri-color pages cycle through aws/az/gcp by nth-child */ .spoke:not(.accent-aws):not(.accent-az):not(.accent-gcp):nth-child(3n+1) { --accent: var(--aws); } .spoke:not(.accent-aws):not(.accent-az):not(.accent-gcp):nth-child(3n+2) { --accent: var(--az); } .spoke:not(.accent-aws):not(.accent-az):not(.accent-gcp):nth-child(3n+3) { --accent: var(--gcp); } .spoke { background: var(--paper2); padding: 1.6rem 1.6rem 1.6rem 1.9rem; display: flex; flex-direction: column; gap: 0.6rem; position: relative; min-height: 220px; transition: all 0.2s ease; cursor: pointer; overflow: hidden; } .spoke:hover { background: var(--paper); transform: translateY(-1px); } .spoke-illust { height: 56px; width: 56px; margin-bottom: 0.5rem; color: var(--ink2); opacity: 0.85; } .spoke:hover .spoke-illust { color: var(--accent); } .spoke-num { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: 0.1em; } .spoke-title { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); line-height: 1.1; } .spoke-desc { font-size: 12px; color: var(--ink3); line-height: 1.55; margin-top: auto; } .spoke-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--rule2); } .spoke-arrow { position: absolute; top: 1.6rem; right: 1.6rem; color: var(--faint); transition: all 0.2s ease; font-family: var(--mono); font-size: 14px; } .spoke:hover .spoke-arrow { color: var(--ink); transform: translate(2px,-2px); } /* ══════════════════════════════════════════════════════ ARCH FIGURE (hero — dark slab) ══════════════════════════════════════════════════════ */ .fig-arch { background: var(--ink); color: var(--paper); border-radius: var(--r-m); overflow: hidden; padding: 1.75rem; display: flex; flex-direction: column; min-height: 420px; position: relative; } .fig-label { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.32); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: auto; } .fig-foot { display: flex; justify-content: space-between; padding-top: 0.75rem; margin-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.25); letter-spacing: 0.06em; } .fig-layer { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 6px 0; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-s); background: rgba(255,255,255,0.03); transition: all 0.2s; cursor: pointer; } .fig-layer:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); } .fig-layer-n { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.32); min-width: 24px; } .fig-layer-t { font-family: var(--sans); font-size: 12.5px; color: rgba(255,255,255,0.92); font-weight: 400; } .fig-layer-s { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.4); margin-left: auto; } .fig-layer.l1 { border-color: rgba(88,166,255,0.32); background: rgba(88,166,255,0.06); } .fig-layer.l1 .fig-layer-t { color: #A8CCFF; } .fig-layer.l2 { border-color: rgba(180,140,255,0.32); background: rgba(180,140,255,0.06); } .fig-layer.l2 .fig-layer-t { color: #D0B8FF; } .fig-layer.l3 { border-color: rgba(255,180,80,0.32); background: rgba(255,180,80,0.06); } .fig-layer.l3 .fig-layer-t { color: #FFD49A; } .fig-layer.l4 { border-color: rgba(100,220,150,0.22); background: rgba(100,220,150,0.04); } .fig-conn { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.25); padding: 0 0 0 24px; } /* ══════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════ */ @media (max-width: 1200px) { .masthead-brand .crumb { display: none; } } @media (max-width: 1100px) { .masthead-nav { gap: 1.25rem; } .masthead-nav a { font-size: 11.5px; } .masthead-right .btn { padding: 4px 10px; font-size: 9.5px; } .spokes-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 960px) { .masthead-nav { display: none; } .masthead-right .btn-sm:not(#prism-toggle-tweaks) { display: none; } } @media (max-width: 760px) { .container, .container-wide { padding: 0 1.25rem; } .masthead-nav { display: none; } .masthead-brand .crumb { display: none; } .spokes-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } h1 { font-size: 2.4rem; } h2 { font-size: 1.7rem; } .hstats { flex-wrap: wrap; } } /* ══════════════════════════════════════════════════════ UTILITIES ══════════════════════════════════════════════════════ */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-1 { flex: 1; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .gap-xs { gap: var(--gap-xs); } .gap-s { gap: var(--gap-s); } .gap-m { gap: var(--gap-m); } .gap-l { gap: var(--gap-l); } .mt-s { margin-top: var(--gap-s); } .mt-m { margin-top: var(--gap-m); } .mt-l { margin-top: var(--gap-l); } .mt-xl { margin-top: var(--gap-xl); } .text-center { text-align: center; } .text-ink3 { color: var(--ink3); } .text-faint { color: var(--faint); } .full { width: 100%; } .hide-ticker .ticker-wrap { display: none; } .hide-eyebrows .eyebrow, .hide-eyebrows .section-num { display: none; } .hide-stats .hstats, .hide-stats .hero-stats { display: none; } /* Compact density preset */ body.compact { --density: 0.7; font-size: 13px; } body.compact h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); } body.compact h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); } body.compact .section { padding: 3rem 0; } /* Spacious */ body.spacious { --density: 1.3; }