/* ============================================================ ExpoGage Design System — v1 "Event intelligence, sharpened to your ICP." ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,600&family=Inter:wght@400;500;600&family=Cormorant+Garamond:wght@700&display=swap'); /* ── Tokens ─────────────────────────────────────────── */ :root { --ink: #0A0C10; --paper: #F2EFE8; --amber: #157A63; /* accent — punchier teal, decoupled from the calmer --forest used for maps/badges */ --gray: #8A8880; --tint: #D5D0C6; --forest: #2A6B5A; --ochre: #A88033; --slate: #5F6A70; --paper2: #ede9e2; /* slightly darker warm off-white, one step below --paper */ --tint2: #c5bfb4; /* slightly darker than --tint, for subtle nested surfaces */ --border: #e2ddd6; /* hairline divider, warm neutral */ --ink2: #4a4540; /* secondary text, between --ink and --gray */ --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, sans-serif; --nav-h: 64px; --max-w: 1200px; --text-w: 700px; } /* ── Per-dataset themes ───────────────────────────────── Same ink/serif/layout everywhere — only the paper shade + accent shift, so each dataset has its own identity while staying one brand. `--amber` is the site-wide accent token, so re-defining it (plus --paper/--tint) re-tints nav, tags, links, and CTAs automatically. Applied via in Layout.astro. Events (default) inherits the :root tokens above. */ [data-theme="organizers"] { /* warm paper + ochre accent */ --paper: #F4EDE0; --tint: #E1D8C7; --amber: #9A7322; } [data-theme="venues"] { /* cool paper + slate accent */ --paper: #EAEDEC; --tint: #CFD5D3; --amber: #4E5A61; } /* ── Reset ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Any in-page anchor target (e.g. #other) settles below the sticky nav instead of tucking under it. */ section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; } img { display: block; max-width: 100%; } a { color: inherit; } button { cursor: pointer; font-family: inherit; } ul, ol { list-style: none; } /* ── Layout ─────────────────────────────────────────── */ .wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: 48px; } .wrap-text { max-width: var(--text-w); margin-inline: auto; padding-inline: 48px; } .section { padding-block: 96px; } .section-sm { padding-block: 64px; } .section-lg { padding-block: 128px; } .divider { border: none; border-top: 1px solid var(--tint); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } /* ── Typography ─────────────────────────────────────── */ .serif { font-family: var(--serif); } .tabular { font-variant-numeric: tabular-nums; } .italic { font-style: italic; } .text-gray { color: var(--gray); } .text-amber { color: var(--amber); } .small-caps { font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gray); } /* ── Navigation ─────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 200; background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 1px solid var(--tint); height: var(--nav-h); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .nav-inner { height: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: 48px; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .nav-links { display: flex; align-items: center; gap: 32px; } .nav-link { font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color 0.15s; } .nav-link:hover { border-bottom-color: var(--gray); } .nav-link-active { border-bottom-color: var(--forest); } /* always green, independent of per-dataset theme accent */ /* Mobile menu — burger + drawer (shown ≤960px; see responsive block) */ .nav-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -8px; background: none; border: none; color: var(--ink); cursor: pointer; border-radius: 4px; transition: background 0.15s; } .nav-burger:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } .nav-drawer { position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--tint); padding: 8px 28px 20px; flex-direction: column; box-shadow: 0 14px 30px -18px rgba(10, 12, 16, 0.3); } .nav-drawer:not([hidden]) { display: none; } /* desktop: stays closed even if toggled */ .nav-drawer-link { font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 13px 2px; border-bottom: 1px solid var(--tint); } .nav-drawer-link.nav-link-active { color: var(--forest); } /* ── Buttons ─────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; border-radius: 2px; cursor: pointer; white-space: nowrap; transition: all 0.15s; border: 1px solid transparent; background: none; } .btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); padding: 11px 22px; } .btn-primary:hover { background: #1A1E20; border-color: #1A1E20; color: var(--paper); } .btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); padding: 11px 22px; } .btn-secondary:hover { background: var(--tint); } .btn-invert { background: var(--paper); color: var(--ink); border-color: var(--paper); padding: 11px 22px; } .btn-invert:hover { background: var(--tint); border-color: var(--tint); } .btn-lg { font-size: 15px; padding: 14px 30px; } .btn-sm { font-size: 13px; padding: 8px 16px; } .link-text { font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; transition: border-color 0.15s; } .link-text:hover { border-bottom-color: var(--ink); } .link-text-sm { font-size: 13px; } /* ── Form inputs ─────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 8px; } .field-label { font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gray); } .field-input, .field-select, .field-textarea { font-family: var(--sans); font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--tint); border-radius: 6px; padding: 12px 16px; outline: none; width: 100%; transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; } .field-input:focus, .field-select:focus, .field-textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 14%, transparent); } .field-input::placeholder, .field-textarea::placeholder { color: var(--gray); } .field-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235F6A70' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .field-textarea { resize: vertical; min-height: 80px; line-height: 1.55; } .field-textarea-auto { resize: none; overflow: hidden; min-height: 100px; } .request-form { display: flex; flex-direction: column; gap: 24px; } .field-hint { font-size: 12px; color: var(--gray); line-height: 1.5; } .radio-opt { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .radio-opt input[type="radio"] { margin-top: 3px; accent-color: var(--amber); flex-shrink: 0; } .radio-opt-body { display: flex; flex-direction: column; gap: 3px; } .radio-opt-label { font-size: 15px; font-weight: 500; } .radio-opt-desc { font-size: 13px; color: var(--gray); } /* ── Match badge ─────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; flex-shrink: 0; padding: 3px 9px; border-radius: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; } .badge-high { background: rgba(74,155,107,.14); color: var(--forest); } .badge-medium { background: rgba(196,149,42,.14); color: var(--ochre); } .badge-low { background: rgba(138,150,160,.14); color: var(--slate); } /* ── Exhibitor card ──────────────────────────────────── */ .ex-card { background: var(--paper); border: 1px solid var(--tint); border-radius: 2px; padding: 24px; position: relative; /* Subtle lift — these are the product-output cards, so they read as a UI panel above the flat editorial page. Kept low-alpha to not look like generic web styling. */ box-shadow: 0 8px 24px -14px rgba(10, 12, 16, 0.14); transition: border-color 0.15s, box-shadow 0.15s; } .ex-card:hover { border-color: var(--gray); box-shadow: 0 12px 30px -14px rgba(10, 12, 16, 0.18); } .ex-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .ex-card-name { font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .ex-card-domain { font-size: 12px; color: var(--gray); margin-top: 2px; } .ex-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .tag { font-size: 11px; color: var(--gray); background: var(--tint); padding: 3px 8px; border-radius: 2px; } .ex-card-rationale { font-size: 14px; line-height: 1.55; color: var(--ink); font-style: italic; padding-top: 14px; border-top: 1px solid var(--tint); } .ex-card-contacts { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tint); } .contacts-hd { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); margin-bottom: 10px; } .contact-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--tint); font-size: 13px; } .contact-row:last-child { border-bottom: none; } .contact-name { font-weight: 500; } .contact-right { display: flex; align-items: center; gap: 8px; color: var(--gray); } .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .dot-v { background: var(--forest); } .dot-i { background: var(--slate); } /* Blurred card */ .ex-card-blur .ex-card-inner { filter: blur(5px); user-select: none; pointer-events: none; } .blur-gate { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--paper) 85%, transparent); z-index: 2; border-radius: 2px; } .blur-gate-inner { text-align: center; } .blur-gate-text { font-size: 13px; color: var(--ink); margin-bottom: 14px; line-height: 1.55; } /* ── Event card ──────────────────────────────────────── */ .ev-card { background: #fff; border: 1px solid var(--tint); border-radius: 2px; padding: 24px; display: block; text-decoration: none; box-shadow: 0 1px 4px rgba(10,12,16,0.06), 0 0 0 0.5px rgba(10,12,16,0.04); transition: border-color .18s, transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; } /* Card hover micro-interaction — lift + accent border + soft shadow (event/venue/organizer cards) */ .ev-card:hover { border-color: var(--amber); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(10,12,16,0.09); } .venue-card { transition: border-color .18s, transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; } .venue-card:hover { border-color: var(--amber); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(10,12,16,0.07); } @media (prefers-reduced-motion: reduce) { .ev-card:hover, .venue-card:hover { transform: none; box-shadow: none; } } .ev-card-sector { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; } .ev-card-name { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px; line-height: 1.2; } .ev-card-meta { font-size: 13px; color: var(--gray); display: flex; gap: 16px; flex-wrap: wrap; } .ev-card-count { font-size: 13px; color: var(--ink); margin-top: 12px; font-variant-numeric: tabular-nums; border-top: 1px solid var(--tint); padding-top: 12px; } /* live badge — inline, below ev-card-name */ .ev-card-live-badge { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; background: color-mix(in srgb, var(--forest) 10%, #fff); border: 1px solid color-mix(in srgb, var(--forest) 28%, transparent); border-radius: 9999px; padding: 3px 9px 3px 5px; font-size: 10px; font-weight: 600; color: var(--forest); } .ev-card-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--forest); animation: liveCardPulse 1.6s ease-in-out infinite; } @keyframes liveCardPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} } /* ── Sector quick-filter pills (events listing) ───────── */ .ev-pill-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .ev-pill-row::-webkit-scrollbar { display: none; } .ev-pill { flex-shrink: 0; padding: 6px 16px; border-radius: 9999px; border: 1px solid var(--tint); background: #fff; color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color .12s, background .12s, color .12s; } .ev-pill:hover { border-color: var(--ink); } .ev-pill-active { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ── Pricing card ────────────────────────────────────── */ .price-card { background: var(--paper); border: 1px solid var(--tint); border-radius: 2px; padding: 32px; display: flex; flex-direction: column; } .price-card.featured { border-color: var(--ink); } .price-tier { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gray); margin-bottom: 16px; } .price-amount { font-family: var(--serif); font-size: 44px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } .price-note { font-size: 13px; color: var(--gray); margin-top: 6px; margin-bottom: 24px; } .price-list { list-style: none; display: flex; flex-direction: column; gap: 11px; flex: 1; margin-bottom: 28px; } .price-item { font-size: 14px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; } .price-item::before { content: '—'; color: var(--gray); flex-shrink: 0; } /* ── Data table ──────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .data-table thead th { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--tint); white-space: nowrap; position: sticky; top: var(--nav-h); background: var(--paper); z-index: 10; } .data-table thead th:first-child { padding-left: 0; } .data-table tbody td { font-size: 14px; padding: 13px 16px; border-bottom: 1px solid var(--tint); vertical-align: middle; transition: background-color 0.15s; } .data-table tbody td:first-child { padding-left: 0; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: color-mix(in srgb, var(--tint) 60%, transparent); } .data-table .check { color: var(--forest); font-weight: 600; } .data-table .dash { color: var(--gray); } /* ── Report document ─────────────────────────────────── */ .report-doc { border: 1px solid var(--tint); border-radius: 2px; overflow: hidden; } .report-hd { background: var(--ink); color: var(--paper); padding: 32px 40px; } .report-hd-label { font-size: 11px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; } .report-hd-event { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 20px; line-height: 1.15; } .report-hd-meta { display: flex; gap: 40px; flex-wrap: wrap; } .report-hd-item { display: flex; flex-direction: column; gap: 3px; } .report-hd-item-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray); } .report-hd-item-val { font-size: 13px; color: var(--paper); } .report-body { padding: 32px 40px; } .report-section { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--tint); } .report-section:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .report-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gray); margin-bottom: 14px; } /* Report blur zone */ .report-blur-zone { position: relative; border-radius: 2px; } .report-blur-content { filter: blur(5px); opacity: 0.5; user-select: none; pointer-events: none; } .report-blur-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 16px; padding: 40px; background: color-mix(in srgb, var(--paper) 86%, transparent); z-index: 2; } /* ── ICP teaser ──────────────────────────────────────── */ .icp-teaser { border: 1px solid var(--ink); padding: 32px; border-radius: 2px; } .icp-teaser-hl { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; } .icp-teaser-sub { font-size: 16px; color: var(--gray); margin-bottom: 20px; line-height: 1.5; max-width: 460px; } .icp-teaser-eg { font-size: 13px; color: var(--gray); margin-top: 16px; } /* ── Event page layout ───────────────────────────────── */ .event-layout { display: grid; grid-template-columns: 1fr 272px; gap: 64px; align-items: start; } .event-sidebar-sticky { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 20px; } .sidebar-box { border: 1px solid var(--tint); padding: 20px; border-radius: 2px; } .sidebar-box-label { font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gray); margin-bottom: 14px; } /* ── Sticky CTA bar ──────────────────────────────────── */ .sticky-bar { position: sticky; top: var(--nav-h); z-index: 100; background: var(--paper); border-bottom: 1px solid var(--tint); padding: 12px 0; } .sticky-bar-inner { display: flex; align-items: center; justify-content: space-between; } .sticky-bar-label { font-size: 14px; color: var(--gray); } /* ── FAQ ─────────────────────────────────────────────── */ .faq-item { border-bottom: 1px solid var(--tint); padding-block: 22px; } .faq-item:first-child { border-top: 1px solid var(--tint); } .faq-q { font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; } .faq-a { font-size: 15px; color: var(--gray); line-height: 1.65; } /* ── Stat display ────────────────────────────────────── */ .stat-n { font-family: var(--serif); font-size: 44px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } .stat-l { font-size: 13px; color: var(--gray); margin-top: 6px; } /* ── Scroll-reveal — .reveal fades/slides in on scroll (JS adds .in). Scoped to html.js so content stays visible if JS never runs. ──────── */ html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); } html.js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } } /* Stagger children within a .reveal grid — add class="stagger" to the grid container */ html.js .reveal .stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); } html.js .reveal.in .stagger > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .04s; } html.js .reveal.in .stagger > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .11s; } html.js .reveal.in .stagger > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .18s; } html.js .reveal.in .stagger > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .25s; } html.js .reveal.in .stagger > *:nth-child(5) { opacity: 1; transform: none; transition-delay: .32s; } html.js .reveal.in .stagger > *:nth-child(6) { opacity: 1; transform: none; transition-delay: .39s; } html.js .reveal.in .stagger > *:nth-child(7) { opacity: 1; transform: none; transition-delay: .46s; } html.js .reveal.in .stagger > *:nth-child(8) { opacity: 1; transform: none; transition-delay: .53s; } html.js .reveal.in .stagger > *:nth-child(n+9) { opacity: 1; transform: none; transition-delay: .53s; } @media (prefers-reduced-motion: reduce) { html.js .reveal .stagger > * { opacity: 1; transform: none; transition: none !important; } } /* Shimmer — for blurred gated-content placeholders */ @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .shimmer { background: linear-gradient(105deg, var(--tint) 40%, color-mix(in srgb, var(--paper) 80%, #fff) 50%, var(--tint) 60%); background-size: 200% 100%; animation: shimmer 1.8s infinite linear; } /* ── Page transitions — a consistent slide-up cross-fade on every navigation (Astro View Transitions / ClientRouter, applied sitewide via Layout). ── */ ::view-transition-old(root) { animation: 240ms cubic-bezier(.4,0,.2,1) both vt-out; } ::view-transition-new(root) { animation: 320ms cubic-bezier(.2,.8,.2,1) both vt-in; } @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ── Step ────────────────────────────────────────────── */ .step-num { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--tint); line-height: 1; min-width: 36px; } /* ── Callout box ─────────────────────────────────────── */ .callout { background: var(--tint); padding: 24px; border-radius: 2px; } .callout-title { font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; } .callout-text { font-size: 14px; color: var(--slate); line-height: 1.6; } /* ── Taxonomy tags ───────────────────────────────────── */ .tax-group { margin-bottom: 20px; } .tax-group-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); margin-bottom: 10px; } .tax-items { display: flex; flex-wrap: wrap; gap: 8px; } .tax-tag { font-size: 13px; color: var(--ink); background: var(--tint); padding: 5px 12px; border-radius: 2px; } .tax-tag span { font-variant-numeric: tabular-nums; color: var(--gray); font-size: 11px; margin-left: 4px; } /* ── Filter/search bar ───────────────────────────────── */ .filter-bar { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; } .filter-bar .field { flex: 1; min-width: 160px; } /* ── Footer ──────────────────────────────────────────── */ .footer { border-top: 1px solid var(--tint); padding: 64px 0 48px; margin-top: 0; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; } .footer-logo { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; display: block; margin-bottom: 12px; } .footer-tagline { font-size: 13px; color: var(--gray); max-width: 220px; line-height: 1.6; } .footer-col-title { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gray); margin-bottom: 16px; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-link { font-size: 14px; color: var(--ink); text-decoration: none; transition: color 0.15s; } .footer-link:hover { color: var(--amber); } .footer-bottom { border-top: 1px solid var(--tint); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; } .footer-copy { font-size: 12px; color: var(--gray); } /* ── Responsive ──────────────────────────────────────── */ @media (max-width: 960px) { .wrap, .wrap-text { padding-inline: 28px; } .section { padding-block: 64px; } .section-lg { padding-block: 80px; } .nav-link-hide { display: none; } .nav-cta { display: none; } /* lives in the drawer on mobile */ .nav-burger { display: inline-flex; } .nav-drawer:not([hidden]) { display: flex; } /* reveal when toggled open */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .event-layout { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .wrap, .wrap-text { padding-inline: 20px; } .section { padding-block: 56px; } .footer-grid { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } .filter-bar { flex-direction: column; } .report-hd { padding: 24px; } .report-body { padding: 24px; } .report-hd-meta { gap: 20px; } } /* ── Mobile: stack crammed inline grids ──────────────────────────────── Many pages set grid-template-columns inline (1fr 1fr / 1fr 1fr 1fr), which never collapses on a phone. This !important rule overrides the inline value so content grids stack on small screens. The substring matches both 2- and 3-column inline grids. Class-based stat grids (.hero-stat-grid, .for-stat-grid) are untouched — they keep their own intentional 2-up mobile layout. */ @media (max-width: 720px) { [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } }