/* ========================================================================== 2026 LGBTQ+ Business Climate Index — Site Styles Visual identity matched to outleadership.com Brand: ivypresto-display (headings), Raleway (body), teal #4f9aa0, deep teal #14546d, plum #422a66, cream #faf6ef ========================================================================== */ /* Adobe Typekit ivypresto-display + Google Fonts Raleway loaded in */ /* Focus ring — visible for keyboard nav, hidden for mouse */ *:focus { outline: none; } *:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; } :root { --teal: #4f9aa0; --teal-dark: #14546d; --teal-darker: #124b61; --plum: #422a66; --plum-dark: #382554; --orange: #de744b; --cream: #faf6ef; --cream-2: #fdfbf7; --cream-3: #fbf6ee; --white: #fefefe; --text: #0a0a0a; --text-secondary: #292524; --text-muted: #57534e; --text-mute: #78716c; --border: #e7e5e4; --score-5: #2a7a3f; /* dark green */ --score-4: #6db26b; /* light green */ --score-3: #f4b942; /* amber */ --score-2: #e87a3e; /* orange */ --score-1: #c0382b; /* red */ --score-na: #cbc6c0; /* grey */ --serif: ivypresto-display, "Times New Roman", Times, serif; --sans: Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif; --container: 1240px; --container-narrow: 880px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); font-weight: 400; color: var(--text); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--teal-darker); text-decoration: none; transition: color .2s; } a:hover { color: var(--teal); } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--text); letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.5em; } h1 { font-size: clamp(2rem, 3.8vw, 3.2rem); } h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); } h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); } /* For headings promoted a level (e.g. h3->h2) to keep heading order sequential for screen readers, while preserving the original visual size. */ .heading-sm { font-size: clamp(1.3rem, 2.4vw, 1.7rem); } h4 { font-size: 1.1rem; } p { margin: 0 0 1em; } .eyebrow { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; color: var(--teal-dark); /* a11y: --teal failed AA contrast on light sections */ margin-bottom: 0.6rem; display: inline-block; } .eyebrow-pill { display: inline-block; background: var(--plum); color: white; padding: 4px 10px; border-radius: 2px; font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; margin-bottom: 1rem; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; } .load-error { max-width: var(--container-narrow); margin: 24px auto; padding: 14px 18px; border: 1px solid #f0c8b5; border-left: 4px solid var(--orange); background: #fff7f2; color: var(--text-secondary); border-radius: 4px; font-size: 0.94rem; } .state-quicknav { position: sticky; top: 72px; z-index: 80; background: rgba(253,251,247,0.96); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); } #score, #finding, #brief, #indicators, #leadership, #downloads { scroll-margin-top: 130px; } .state-quicknav-inner { max-width: var(--container); margin: 0 auto; padding: 10px 24px; display: flex; gap: 8px; overflow-x: auto; } .state-quicknav a { flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--border); border-radius: 2px; background: white; color: var(--teal-dark); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .state-quicknav a:hover { border-color: var(--teal); } /* ----------- Header ----------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--teal-dark); } .site-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 32px; max-width: 1480px; margin: 0 auto; gap: 24px; } .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: white; flex-shrink: 0; } .brand-mark { width: 44px; height: 44px; background: white; color: var(--teal-dark); display: grid; place-items: center; font-family: var(--serif); font-size: 1.5rem; line-height: 1; border-radius: 2px; font-weight: 600; } .brand-mark-img { width: 44px; height: 44px; border-radius: 8px; display: block; flex-shrink: 0; } .brand-wordmark { height: 30px; width: auto; display: block; flex-shrink: 0; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-name { font-family: var(--serif); font-size: 1.05rem; color: white; } .brand-sub { font-family: var(--sans); font-weight: 600; font-size: 0.63rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.82); /* a11y: 0.55 failed AA on the teal header */ margin-top: 3px; } .site-nav { display: flex; align-items: center; gap: 12px; } .site-nav a { color: rgba(255,255,255,0.72); font-size: 0.84rem; font-weight: 500; transition: color .15s; white-space: nowrap; } .site-nav a:hover { color: white; } .site-nav a.is-current { color: white; font-weight: 600; box-shadow: 0 2px 0 0 white; } /* Background ▾ dropdown (native

) */ .nav-dropdown { position: relative; } .nav-dropdown summary { list-style: none; cursor: pointer; color: rgba(255,255,255,0.72); font-size: 0.84rem; font-weight: 500; transition: color .15s; white-space: nowrap; } .nav-dropdown summary::-webkit-details-marker { display: none; } .nav-dropdown summary::after { content: ' ▾'; margin-left: 4px; } .nav-dropdown summary:hover, .nav-dropdown[open] summary { color: white; } .nav-dropdown summary.is-current { color: white; font-weight: 600; box-shadow: 0 2px 0 0 white; } .nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: white; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 12px 32px -16px rgba(20,84,109,0.25); padding: 8px 0; min-width: 180px; flex-direction: column; z-index: 100; } .nav-dropdown[open] .nav-dropdown-menu { display: flex; } .nav-dropdown-menu a { color: var(--teal-darker); padding: 8px 18px; font-size: 0.9rem; font-weight: 500; white-space: nowrap; } .nav-dropdown-menu a:hover { background: var(--cream-2); color: var(--teal-dark); } /* Active item lives on the white menu — dark text, not the header's white */ .nav-dropdown-menu a.is-current { color: var(--teal-dark); font-weight: 700; background: var(--cream-2); box-shadow: none; } .nav-cta { background: white; color: var(--teal-dark) !important; padding: 8px 12px; border-radius: 2px; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; transition: background .15s, color .15s; white-space: nowrap; } .nav-cta:hover { background: rgba(255,255,255,0.88); color: var(--teal-darker) !important; } .nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; color: white; flex-shrink: 0; } .nav-toggle svg { width: 28px; height: 28px; } /* Keyboard skip-to-content link — visible only on focus. */ .skip-link { position: absolute; top: -100%; left: 16px; background: white; color: var(--teal-dark); padding: 8px 16px; border-radius: 0 0 4px 4px; font-size: 0.9rem; font-weight: 700; z-index: 200; text-decoration: none; transition: top .15s; } .skip-link:focus { top: 0; } @media (max-width: 1240px) { .site-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; background: var(--teal-darker); padding: 20px 32px 28px; gap: 16px; display: none; border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .site-nav.is-open { display: flex; } .nav-toggle { display: grid; place-items: center; } .site-nav a { color: rgba(255,255,255,0.8); font-size: 1rem; } .site-nav a:hover { color: white; } .nav-cta { margin-top: 4px; } /* Dropdown flattens inline inside the drawer — tap Background to expand */ .nav-dropdown { width: 100%; } .nav-dropdown summary { color: rgba(255,255,255,0.8); font-size: 1rem; } .nav-dropdown-menu { position: static; top: auto; right: auto; background: transparent; border: 0; box-shadow: none; padding: 10px 0 0 16px; min-width: 0; } .nav-dropdown-menu a { color: rgba(255,255,255,0.7); font-size: 0.95rem; padding: 8px 0; } .nav-dropdown-menu a:hover { background: transparent; color: white; } /* Drawer sits on dark teal — keep active item white here */ .nav-dropdown-menu a.is-current { color: white; background: transparent; } /* The hamburger appears here; let the brand shrink (name ellipsizes) so the toggle is never pushed off-screen on narrow phones. */ .brand { flex-shrink: 1; min-width: 0; overflow: hidden; } .brand-text { min-width: 0; overflow: hidden; } .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 480px) { .site-header-inner { padding: 0 16px; gap: 12px; } /* Hide "2026 EDITION · 8TH ANNUAL" subtitle on very small screens so the brand name doesn't crowd the hamburger. */ .brand-sub { display: none; } /* Scale the title down and let it wrap to two lines so the full "State LGBTQ+ Business Climate Index" shows — no ellipsis, no dropped words. min-height:72px header + align-items:center absorbs the 2nd line. */ .brand-name { font-size: 0.8rem; letter-spacing: -0.01em; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.16; } } /* Intermediate widths: inline nav is shown but the full brand title would push it off-screen, so show just the OUTLEADERSHIP wordmark here. Phones (<=1080px, hamburger) keep the ellipsized title; wide screens (>1330px) keep the full title. */ @media (min-width: 1241px) and (max-width: 1432px) { .brand-text { display: none; } } /* ----------- Hero ----------- */ .hero { background: var(--teal-dark); color: white; padding: 52px 0 40px; position: relative; overflow: hidden; } .hero .eyebrow { color: #9cd6da; } /* a11y: was rgba(176,214,218,0.85) ≈ 4.3:1, under AA */ .hero h1, .hero p, .hero .lead { color: white; } .hero-with-bg { /* Outdoor photographic background. Light gradient overlay only (just enough to ensure WCAG contrast on the text card edges) so the photo actually reads as a photograph rather than a flat color. */ background-color: var(--teal-dark); background-image: linear-gradient(180deg, rgba(14, 62, 81, 0.15) 0%, rgba(14, 62, 81, 0.30) 100%), url("../img/findings/finding-05-oregon-road.jpg?v=602ce143"); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 90px 0 80px; } .hero-with-bg .container { /* Translucent dark card behind the text content so the headline and lead read cleanly over the photograph. Photo shows through clearly on the left/right edges (max-width keeps the card narrower than the hero). Lower opacity = more photo visible behind text. */ background: rgba(14, 62, 81, 0.62); padding: 44px 48px 40px; border-radius: 6px; max-width: 880px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } @media (max-width: 720px) { .hero-with-bg .container { padding: 28px 24px 24px; } } .hero-with-bg .eyebrow { color: #b0d6da; } .hero h1 { margin-bottom: 0.5em; } .hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(255,255,255,0.82); margin-bottom: 2rem; } .hero-with-bg .lead { color: rgba(255,255,255,0.85); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* ----------- Buttons ----------- */ .btn { display: inline-block; padding: 14px 28px; border-radius: 2px; font-weight: 700; font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase; transition: all .25s cubic-bezier(.23,1,.32,1); border: 0; cursor: pointer; font-family: var(--sans); text-align: center; } .btn-primary { background: var(--teal-dark); color: white; } /* a11y: --teal bg failed AA with white text */ .btn-primary:hover { background: var(--teal-darker); color: white; box-shadow: 0 8px 24px -8px rgba(20,84,109,0.4); } .btn-secondary { background: white; color: var(--teal-dark); border: 1px solid var(--teal-dark); } .btn-secondary:hover { background: var(--teal-dark); color: white; } .btn-ghost { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.6); } .btn-ghost:hover { background: white; color: var(--teal-dark); } /* Tier color chip (compare cards + briefs cards) */ .tier-chip { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 5px; flex-shrink: 0; } /* btn-secondary on dark sections (404 hero / teal sections): outline style so the hover state isn't dark-on-dark and invisible. */ .hero .btn-secondary, .section-teal .btn-secondary { background: transparent; color: white; border-color: rgba(255,255,255,0.6); } .hero .btn-secondary:hover, .section-teal .btn-secondary:hover { background: rgba(255,255,255,0.15); border-color: white; color: white; } /* ----------- Section variants ----------- */ .section { padding: 80px 0; } .section-cream { background: var(--cream); } .section-cream-2 { background: var(--cream-2); } .section-white { background: var(--white); } .section-teal { background: var(--teal-dark); color: white; } .section-teal h2, .section-teal h3 { color: white; } .section-plum { background: var(--plum-dark); color: white; } .section-plum h2, .section-plum h3 { color: white; } .section-header { margin-bottom: 48px; max-width: 760px; } .section-header.center { margin-left: auto; margin-right: auto; text-align: center; } /* ----------- Cards ----------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; } .card { background: white; border: 1px solid var(--border); border-radius: 4px; padding: 28px; transition: transform .25s, box-shadow .25s, border-color .25s; display: flex; flex-direction: column; } .card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(20,84,109,0.25); border-color: rgba(79,154,160,0.4); } /* Anchor the CTA button to the bottom of every card regardless of description length */ .card > .btn { margin-top: auto; align-self: flex-start; } .stat { display: flex; flex-direction: column; gap: 6px; } .stat-num { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--teal-dark); line-height: 1; } .stat-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--text-muted); } /* ----------- Rank cards (top/bottom 10) ----------- */ .rank-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: white; border: 1px solid var(--border); border-radius: 4px; transition: all .2s; color: var(--text); text-decoration: none; } .rank-card:hover { border-color: var(--teal); transform: translateX(4px); color: var(--text); } .rank-num { font-family: var(--serif); font-size: 1.6rem; color: var(--teal-dark); width: 38px; flex-shrink: 0; } .rank-state { flex: 1; font-weight: 600; } .rank-score { font-family: var(--serif); font-size: 1.3rem; color: var(--text-muted); } /* ----------- Score badge ----------- */ .score-badge { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 4px; font-family: var(--serif); font-size: 1.5rem; color: white; font-weight: 600; line-height: 1; } .score-tier-high { background: var(--score-5); } .score-tier-mid-high { background: var(--score-4); color: #1a3320; } .score-tier-mid { background: var(--score-3); color: #4a3a10; } .score-tier-mid-low { background: var(--score-2); } .score-tier-low { background: var(--score-1); } /* ----------- Home-page grids ----------- */ .rank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .methodology-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; } @media (max-width: 720px) { .rank-grid { grid-template-columns: 1fr; gap: 32px; } .methodology-grid { grid-template-columns: 1fr; gap: 32px; } } /* ----------- Footer ----------- */ /* a11y: the footer sits on cream, so the brand text (white in the dark header) must be dark here, and body-copy links need underlines to be distinguishable without relying on color (WCAG 1.4.1 / link-in-text-block). */ .site-footer .brand-name { color: var(--text-secondary); } .site-footer .brand-sub { color: var(--text-muted); } /* Footer brand wordmark sized much larger than the header's compact 30px so it carries the column on its own (no accompanying "Out Leadership" text). */ .site-footer .brand-wordmark { height: 64px; max-width: 100%; } .section p a:not(.btn), .section li a:not(.btn), .container-narrow p a, .container-narrow li a, .note-box a:not(.btn), .lead a, .hero p a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; } .site-footer { background: var(--cream-2); padding: 64px 0 28px; border-top: 1px solid var(--border); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 48px; align-items: start; } .footer-grid h2 { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 18px; } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: 10px; } .footer-grid a { color: var(--text-secondary); font-size: 0.94rem; } .footer-grid a:hover { color: var(--teal-dark); } .footer-icon { display: inline-block; vertical-align: -2px; margin-right: 8px; flex-shrink: 0; } .footer-bottom { border-top: 1px solid var(--border); margin-top: 40px; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; color: var(--text-muted); } .footer-bottom a { color: var(--text-muted); } .footer-legal { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .footer-legal a { color: var(--text-muted); text-decoration: none; transition: color .15s; } .footer-legal a:hover { color: var(--teal); } .footer-legal-dot { color: var(--border); user-select: none; } .footer-badges { display: flex; align-items: center; gap: 18px; } .footer-badge { display: inline-flex; align-items: center; text-decoration: none; opacity: 0.85; transition: opacity .15s; } .footer-badge:hover { opacity: 1; } .footer-badge-img { display: block; width: auto; } .footer-badge-bcorp { height: 48px; } .footer-badge-nglcc { height: 34px; } /* ---- Footer social row ---- */ .footer-social { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .footer-social-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border); color: var(--text-muted); transition: border-color .2s, color .2s, background .2s; flex-shrink: 0; } .footer-social-icon:hover { border-color: var(--teal); color: var(--teal); background: rgba(79,154,160,0.06); } .footer-social-icon svg { display: block; } .footer-subscribe-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1.5px solid var(--border); border-radius: 3px; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: border-color .2s, color .2s, background .2s; white-space: nowrap; } .footer-subscribe-btn:hover { border-color: var(--teal); color: var(--teal); background: rgba(79,154,160,0.06); } .footer-subscribe-btn svg { flex-shrink: 0; } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } } /* ----------- Tables ----------- */ .data-table { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } .data-table th, .data-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.94rem; } .data-table th { background: var(--cream); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; user-select: none; white-space: nowrap; } .data-table th.sortable::after { content: " ↕"; color: var(--text-mute); font-size: 0.7rem; } .data-table th.sort-asc::after { content: " ↑"; color: var(--teal); } .data-table th.sort-desc::after { content: " ↓"; color: var(--teal); } .data-table tbody tr:hover { background: var(--cream-3); } .data-table tbody tr { cursor: pointer; } .data-table .col-score { font-family: var(--serif); font-size: 1.05rem; color: var(--teal-dark); } .table-action { display: inline-block; padding: 5px 10px; border: 1px solid var(--border); border-radius: 2px; background: white; color: var(--teal-dark); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .table-action:hover { border-color: var(--teal); color: var(--teal-darker); } /* ----------- Rankings table enhancements ----------- */ .tier-dot { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 8px; vertical-align: middle; flex-shrink: 0; } /* Scroll-fade wrapper: gradient fade on right edge hints at horizontal scroll */ .table-scroll-wrap { position: relative; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll-wrap::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 48px; background: linear-gradient(to right, transparent, rgba(254,254,254,0.95)); pointer-events: none; opacity: 0; transition: opacity .2s; } .table-scroll-wrap.has-overflow::after { opacity: 1; } /* State-page score-history table is wide (many year columns); let it scroll inside its card instead of forcing horizontal page scroll on phones. */ .brief-history-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* State-page indicator section is two columns on desktop; collapse to one on phones so the rows don't overflow the viewport. (!important overrides the inline grid-template-columns set by the generator.) */ @media (max-width: 720px) { .indicator-columns { grid-template-columns: 1fr !important; } } /* Trends distribution chart uses fixed-width bars; let it scroll on narrow screens rather than forcing horizontal page scroll. */ .dist-chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* iOS zooms the page in when a focused form control's font-size is < 16px. Force 16px on small screens so focusing an input/select/textarea never triggers zoom. (!important overrides the per-component class rules that set ~0.94-0.96rem across the filter bars and the share-caption textarea.) */ @media (max-width: 600px) { input, select, textarea { font-size: 16px !important; } } /* ----------- Filter / search bar ----------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; align-items: center; } .filter-bar input, .filter-bar select { padding: 11px 14px; border: 1px solid var(--border); border-radius: 2px; font-family: var(--sans); font-size: 0.94rem; background: white; color: var(--text); } .filter-bar input { flex: 1; min-width: 200px; } .filter-bar input:focus, .filter-bar select:focus { outline: 2px solid var(--teal); outline-offset: -1px; border-color: var(--teal); } .compare-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; } @media (max-width: 1100px) and (min-width: 721px) { .compare-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .compare-controls select { padding: 12px 14px; border: 1px solid var(--border); border-radius: 2px; background: white; font-family: var(--sans); font-size: 0.94rem; } .compare-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; margin-bottom: 32px; } .compare-card { display: grid; gap: 4px; padding: 20px; border: 1px solid var(--border); border-radius: 4px; background: white; color: var(--text); } .compare-card:hover { border-color: var(--teal); color: var(--text); } .compare-rank { color: var(--text-muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .compare-name { font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; color: var(--teal-dark); } .compare-score { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--teal-dark); } .compare-meta { color: var(--text-muted); font-size: 0.86rem; } .compare-section { margin-top: 34px; } .compare-section h2 { font-size: 1.6rem; } .compare-table { table-layout: fixed; } .compare-table th:first-child, .compare-table td:first-child { width: 280px; } /* Row-header labels (the first column) must wrap — the global .data-table th nowrap rule is for column headers only. Long indicator labels like "Adult Gender-Affirming Care Access" otherwise overflow into the next column. */ .compare-table th[scope="row"] { white-space: normal; word-wrap: break-word; line-height: 1.3; } @media (max-width: 760px) { .compare-controls { grid-template-columns: 1fr 1fr; } /* On phones the fixed 280px metric column squeezed the state columns until their headers/values overlapped. Switch to auto layout so columns size to content, cap the metric column, and let the table overflow its .table-scroll-wrap (horizontal scroll) instead of collapsing. */ .compare-table { table-layout: auto; } .compare-table th:first-child, .compare-table td:first-child { width: 150px; min-width: 150px; } .compare-table th:not(:first-child), .compare-table td:not(:first-child) { white-space: nowrap; min-width: 84px; } } /* ----------- Map page layout ----------- */ .map-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; margin-top: 24px; } .map-canvas { background: white; border: 1px solid var(--border); border-radius: 4px; padding: 20px 12px 12px; min-height: 540px; position: relative; } .map-canvas svg { width: 100%; height: auto; max-height: 780px; } .map-canvas svg path { cursor: pointer; transition: opacity .15s; stroke: none; } .map-canvas svg path:hover { opacity: 0.78; } .map-canvas svg path.is-selected, #us-map-home path.is-selected { stroke: var(--teal-dark); stroke-width: 2.5; } /* Mesh border overlays — never receive pointer events */ .state-borders { pointer-events: none; } /* Rank number labels on map */ .state-rank-label { font-family: Raleway, "Helvetica Neue", Arial, sans-serif; font-size: 9px; font-weight: 800; fill: white; stroke: rgba(0, 0, 0, 0.45); stroke-width: 2.5px; paint-order: stroke fill; pointer-events: none; user-select: none; } .state-code-label { font-family: Raleway, "Helvetica Neue", Arial, sans-serif; font-size: 7.5px; font-weight: 600; fill: rgba(255, 255, 255, 0.88); stroke: rgba(0, 0, 0, 0.35); stroke-width: 2px; paint-order: stroke fill; pointer-events: none; user-select: none; letter-spacing: 0.04em; } /* Home map hover */ #us-map-home path { cursor: pointer; transition: opacity .15s; } #us-map-home path:hover { opacity: 0.78; } .map-tooltip { position: absolute; background: var(--text); color: white; padding: 10px 14px; border-radius: 3px; font-size: 0.84rem; pointer-events: none; transform: translate(-50%, -110%); white-space: nowrap; opacity: 0; transition: opacity .12s; z-index: 10; box-shadow: 0 6px 20px rgba(0,0,0,0.18); } .map-tooltip.is-visible { opacity: 1; } .map-tooltip-state { font-weight: 600; margin-bottom: 2px; } .map-tooltip-score { color: #b0d6da; } .map-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; align-items: center; font-size: 0.82rem; color: var(--text-muted); } .map-legend-context { width: 100%; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: -4px; } .map-legend-item { display: inline-flex; align-items: center; gap: 8px; } .map-legend-swatch { width: 18px; height: 18px; border-radius: 2px; flex-shrink: 0; } /* State panel close button — inline in panel header row */ .panel-close { background: none; border: 1px solid var(--border); font-size: 1rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 2px; transition: color .15s, background .15s; flex-shrink: 0; align-self: flex-start; } .panel-close:hover { color: var(--text); background: var(--cream); } .state-panel { background: white; border: 1px solid var(--border); border-radius: 4px; padding: 28px; align-self: start; position: sticky; top: 100px; } .state-panel-empty { color: var(--text-mute); font-style: italic; } .map-panel-cover { width: 60%; max-width: 180px; height: auto; display: block; margin: 0 auto 18px; border-radius: 3px; box-shadow: 0 12px 24px -16px rgba(20,84,109,0.28); } .state-panel-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .state-panel-name { flex: 1; } .state-panel-name h3 { margin: 0; } .state-panel-name .rank { font-family: var(--sans); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .cat-bar { margin: 14px 0; } .cat-bar-label { display: flex; justify-content: space-between; font-size: 0.86rem; margin-bottom: 6px; } .cat-bar-label span:last-child { color: var(--teal-dark); font-weight: 600; } .cat-bar-track { height: 8px; background: var(--cream); border-radius: 4px; overflow: hidden; } .cat-bar-fill { height: 100%; background: var(--teal); border-radius: 4px; transition: width .4s; } @media (max-width: 980px) { .map-layout { grid-template-columns: 1fr; } .state-panel { position: static; } } /* ----------- Page nav / breadcrumb ----------- */ .breadcrumb { font-size: 0.86rem; color: var(--text-muted); /* a11y: --text-mute failed AA at this size */ margin-bottom: 18px; } .breadcrumb a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; } .breadcrumb a:hover { color: var(--teal-dark); } .breadcrumb .sep { margin: 0 8px; color: var(--text-mute); } /* When the breadcrumb sits inside a .hero (dark teal background), use light colors. */ .hero .breadcrumb, .hero .breadcrumb a, .hero .breadcrumb .sep { color: rgba(255,255,255,0.78); } .hero .breadcrumb a:hover { color: white; } /* ----------- State prev/next navigation ----------- */ .state-prevnext { background: var(--cream); border-top: 1px solid var(--border); padding: 20px 0; } .state-prevnext-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; } .prevnext-link { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--text-secondary); transition: color .15s; padding: 10px 14px; border-radius: 4px; border: 1px solid var(--border); background: white; } .prevnext-link:hover { border-color: var(--teal); color: var(--teal-dark); } .prevnext-prev { text-align: left; } .prevnext-next { text-align: right; justify-self: end; width: 100%; } .prevnext-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); } .prevnext-name { font-family: var(--serif); font-size: 1.05rem; } .prevnext-all { font-size: 0.84rem; font-weight: 600; color: var(--teal-darker); text-align: center; white-space: nowrap; } @media (max-width: 600px) { .state-prevnext-inner { grid-template-columns: 1fr 1fr; } .prevnext-all { display: none; } .prevnext-next { justify-self: stretch; } } /* ----------- Misc utilities ----------- */ .text-center { text-align: center; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 0.6rem !important; } .mb-2 { margin-bottom: 1.2rem !important; } .mb-3 { margin-bottom: 2rem !important; } .mb-4 { margin-bottom: 3rem !important; } .divider { border: 0; height: 1px; background: var(--border); margin: 32px 0; } .tag { display: inline-block; padding: 4px 10px; background: var(--cream); color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 2px; margin-right: 4px; margin-bottom: 4px; } .tag-positive { background: rgba(42,122,63,0.12); color: #2a7a3f; } .tag-negative { background: rgba(192,56,43,0.12); color: #c0382b; } .tag-warning { background: rgba(244,185,66,0.18); color: #8a6210; } /* ============================================================ "Find Your State" interactive widget ============================================================ */ .your-state-widget { max-width: 1100px; margin: 0 auto; scroll-margin-top: 90px; } .ys-wrap { display: flex; flex-direction: column; gap: 32px; } /* ---- Picker (map + dropdown side by side) ---- */ .ys-picker { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; background: white; border: 1px solid var(--border); border-radius: 4px; padding: 24px 26px; } .ys-picker-map { display: flex; flex-direction: column; gap: 10px; min-width: 0; } /* Hide-picker-map mode: the home page big map drives selection — hide the picker entirely. */ .your-state-widget[data-hide-picker-map="true"] .ys-picker { display: none; } .ys-search { padding: 14px 18px; border: 2px solid var(--border); border-radius: 3px; background: white; font-family: var(--sans); font-size: 1.05rem; color: var(--text); width: 100%; margin-bottom: 8px; box-sizing: border-box; } .ys-search:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); } .ys-picker-hint { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .ys-map-svg { width: 100%; height: auto; display: block; background: white; border-radius: 2px; } .ys-map-svg .ys-state { transition: opacity .15s; stroke: white; stroke-width: 0.6px; } .ys-map-svg .ys-state.is-selected { stroke: var(--teal-dark); stroke-width: 2.5px; filter: drop-shadow(0 0 6px rgba(20,84,109,0.5)); } .ys-map-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.74rem; color: var(--text-muted); } .ys-leg { display: inline-flex; align-items: center; gap: 6px; } .ys-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; } .ys-picker-select { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .ys-label { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .ys-select { padding: 16px 18px; border: 2px solid var(--border); border-radius: 3px; background: white; font-family: var(--sans); font-size: 1.05rem; color: var(--text); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 48px; width: 100%; } .ys-select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); } .ys-reset { align-self: flex-start; background: none; border: 0; color: var(--teal-dark); font-family: var(--sans); font-size: 0.82rem; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 4px 0; } .ys-empty { background: var(--cream-2); border: 2px dashed var(--border); border-radius: 4px; padding: 40px 32px; text-align: center; color: var(--text-muted); font-size: 1.04rem; } /* ---- Result card ---- */ .ys-result { background: white; border: 1px solid var(--border); border-left: 6px solid var(--tier-color, var(--teal)); border-radius: 4px; padding: 36px 38px; box-shadow: 0 12px 28px -22px rgba(20,84,109,0.18); } .ys-result-header { display: grid; grid-template-columns: 160px 1fr auto; gap: 18px 24px; align-items: end; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 24px; } .ys-result-cover { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 12px 24px -16px rgba(20,84,109,0.28); grid-row: 1 / span 2; align-self: start; } .ys-state-name { font-family: var(--serif); font-size: clamp(2.4rem, 4.4vw, 3.3rem); line-height: 1; color: var(--text); margin-bottom: 10px; } .ys-rank-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .ys-rank-num { font-family: var(--serif); font-size: 1.7rem; color: var(--tier-color, var(--teal-dark)); line-height: 1; } .ys-rank-of { font-family: var(--sans); font-size: 0.86rem; color: var(--text-muted); } .ys-tier-tag { display: inline-block; padding: 5px 12px; border-radius: 2px; color: white; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-left: 6px; } .ys-score-row { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; justify-self: end; } .ys-score-big { font-family: var(--serif); font-size: clamp(3rem, 5vw, 4.2rem); line-height: 1; color: var(--tier-color, var(--teal-dark)); } .ys-score-label { font-size: 0.82rem; color: var(--text-muted); } .ys-headline { font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.32; color: var(--text); padding: 0 0 22px; border-bottom: 1px solid var(--border); margin-bottom: 24px; } .ys-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 16px 24px; margin-bottom: 24px; align-items: end; /* bars align at the bottom of each card */ } .ys-cat { display: flex; flex-direction: column; justify-content: flex-end; } .ys-cat-label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; line-height: 1.3; min-height: 2.2em; /* reserve 2 lines so bars align across cards */ } .ys-cat-bar { height: 8px; background: var(--cream); border-radius: 4px; overflow: hidden; margin-bottom: 6px; } .ys-cat-fill { height: 100%; transition: width .4s; } .ys-cat-stat { font-size: 0.86rem; color: var(--text-secondary); font-family: var(--sans); } .ys-cta-row { display: flex; gap: 12px; flex-wrap: wrap; padding: 14px 0 26px; border-bottom: 1px solid var(--border); margin-bottom: 30px; } /* ---- Inline share kit ---- */ .ys-share-kit { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border); } .ys-share-head { margin-bottom: 18px; } .ys-share-head h3 { font-family: var(--serif); font-size: 1.5rem; color: var(--text); margin: 4px 0 6px; } .ys-share-head p { color: var(--text-muted); font-size: 0.94rem; margin: 0; } .ys-share-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; } .ys-share-sublabel { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .ys-share-textcol, .ys-share-imgcol { display: flex; flex-direction: column; min-width: 0; } .ys-share-text { width: 100%; border: 1.5px solid var(--border); border-radius: 3px; padding: 14px 16px; font-family: var(--sans); font-size: 0.95rem; line-height: 1.55; color: var(--text); resize: vertical; min-height: 200px; background: white; } .ys-share-text:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); } .ys-share-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .ys-share-buttons .btn { font-size: 0.82rem; padding: 10px 18px; } .ys-share-hint { display: block; margin-top: 10px; font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; } .ys-share-preview { background: var(--cream); border: 1.5px solid var(--border); border-radius: 3px; padding: 8px; overflow: hidden; } .ys-share-canvas { width: 100%; height: auto; display: block; border-radius: 2px; background: var(--teal-dark); } /* ---- Share image: format selector tabs ---- */ .ys-share-formats { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; } .ys-fmt-btn { flex: 1 1 auto; min-width: 120px; padding: 8px 12px; background: var(--cream); border: 1.5px solid var(--border); border-radius: 3px; cursor: pointer; font-family: inherit; color: var(--text); text-align: left; line-height: 1.25; transition: border-color 0.15s ease, background 0.15s ease; } .ys-fmt-btn strong { display: block; font-size: 0.82rem; font-weight: 700; margin-bottom: 2px; } .ys-fmt-btn small { display: block; font-size: 0.72rem; color: var(--text-muted); font-weight: 400; } .ys-fmt-btn:hover { border-color: var(--teal); background: white; } .ys-fmt-btn.is-active { border-color: var(--teal); background: var(--teal); color: white; } .ys-fmt-btn.is-active small { color: rgba(255, 255, 255, 0.78); } /* ---- Share image: preview container with multiple format images ---- */ .ys-share-preview { display: flex; align-items: center; justify-content: center; min-height: 240px; } .ys-share-preview[data-active-format="story"] { background: #1a1a1a; } .ys-share-img { display: none; max-width: 100%; height: auto; border-radius: 2px; } .ys-share-img.is-active { display: block; } /* Story format is very tall — cap height so it doesn't dominate the page */ .ys-share-img[data-format="story"].is-active { max-height: 640px; width: auto; } /* ---- Compare panel ---- */ .ys-compare { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border); } .ys-compare-head { margin-bottom: 16px; } .ys-compare-head h3 { font-family: var(--serif); font-size: 1.5rem; color: var(--text); margin: 4px 0 0; } .ys-compare-select { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; } .ys-compare-select .ys-select { max-width: 360px; } .ys-compare-clear { background: none; border: 0; color: var(--teal-dark); font-family: var(--sans); font-size: 0.86rem; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 6px 0; } .ys-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ys-compare-col { background: var(--cream-2); border: 1px solid var(--border); border-radius: 3px; padding: 20px 22px; } .ys-compare-name { font-family: var(--serif); font-size: 1.3rem; color: var(--text); border-bottom: 3px solid var(--teal); padding-bottom: 8px; margin-bottom: 6px; } .ys-compare-rank { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 12px; } .ys-compare-score { font-family: var(--serif); font-size: 2.6rem; line-height: 1; margin-bottom: 16px; } .ys-compare-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border); font-size: 0.88rem; color: var(--text-secondary); } .ys-compare-row strong { color: var(--text); font-family: var(--sans); } .ys-compare-foot { margin-top: 18px; } /* ---- Actions ---- */ .ys-actions { } .ys-actions-head { margin-bottom: 18px; } .ys-actions-head h3 { font-family: var(--serif); font-size: 1.5rem; color: var(--text); margin: 4px 0 0; } .ys-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; } .ys-action { background: var(--cream-2); border: 1px solid var(--border); border-radius: 4px; padding: 22px 22px 20px; } .ys-action-icon { font-size: 1.4rem; margin-bottom: 8px; color: var(--teal); } .ys-action-headline { font-family: var(--serif); font-size: 1.08rem; line-height: 1.3; color: var(--text); margin: 0 0 8px; } .ys-action-body { font-size: 0.94rem; color: var(--text-secondary); line-height: 1.55; margin: 0; } /* ---- Mobile ---- */ @media (max-width: 840px) { .ys-picker { grid-template-columns: 1fr; } .ys-share-body { grid-template-columns: 1fr; } .ys-share-canvas { max-width: 100%; } .ys-compare-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .ys-result { padding: 28px 24px; } .ys-result-header { grid-template-columns: 100px 1fr; align-items: start; } .ys-result-cover { grid-row: auto; max-width: 100px; } .ys-score-row { justify-self: start; align-items: flex-start; grid-column: 1 / -1; } } /* ---- Voices section ---- */ .voices-player-wrap { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */ background: #000; border-radius: 6px; overflow: hidden; margin-bottom: 24px; } .voices-player-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .voices-strip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .voices-strip::-webkit-scrollbar { height: 4px; } .voices-strip::-webkit-scrollbar-track { background: var(--border); border-radius: 2px; } .voices-strip::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 2px; } .voices-card { flex: 0 0 200px; scroll-snap-align: start; cursor: pointer; border: 2px solid var(--border); border-radius: 6px; overflow: hidden; background: white; transition: border-color .2s, transform .15s; text-align: left; font: inherit; color: inherit; padding: 0; } .voices-card:hover { border-color: var(--teal); transform: translateY(-2px); } .voices-card.is-active { border-color: var(--teal-dark); } .voices-card-thumb { width: 100%; aspect-ratio: 16 / 9; background: var(--cream-2); object-fit: cover; display: block; } .voices-card-thumb-placeholder { width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--teal-dark), var(--plum-dark, #382554)); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); font-size: 1.5rem; } .voices-card-body { padding: 10px 12px 12px; } .voices-card-name { font-family: var(--serif); font-size: 0.92rem; color: var(--text); line-height: 1.2; margin-bottom: 3px; } .voices-card-meta { font-size: 0.76rem; color: var(--text-muted); } .voices-card.is-active .voices-card-name { color: var(--teal-dark); font-weight: 600; } /* Governor embed on state pages */ .gov-video-section { padding: 48px 0 40px; background: var(--cream); border-top: 1px solid var(--border); } .gov-video-wrap { max-width: 760px; margin: 0 auto; } .gov-video-player { position: relative; width: 100%; padding-bottom: 56.25%; background: #000; border-radius: 6px; overflow: hidden; cursor: pointer; } .gov-video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .gov-video-facade { position: absolute; inset: 0; background: linear-gradient(135deg, var(--teal-dark), var(--plum-dark, #382554)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity .2s; } .gov-video-facade:hover { opacity: 0.92; } .gov-video-play-btn { width: 72px; height: 72px; background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .15s; } .gov-video-player:hover .gov-video-play-btn { background: rgba(255,255,255,0.28); transform: scale(1.06); } .gov-video-play-btn svg { margin-left: 4px; } .gov-video-label { font-family: var(--sans, 'Raleway', sans-serif); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.75); } @media (max-width: 720px) { .voices-card { flex: 0 0 160px; } } /* ---- Lead capture: "Request a Briefing" nav CTA ---- */ /* Secondary outline variant of .nav-cta — sits next to the solid white "Download Report" button in the teal header. */ .nav-cta--briefing { background: transparent; color: white !important; border: 1px solid rgba(255,255,255,0.7); } .nav-cta--briefing:hover { background: white; color: var(--teal-darker) !important; border-color: white; } /* ---- Lead capture: gate modal ---- */ .lead-gate-open { overflow: hidden; } #lead-gate[hidden] { display: none; } #lead-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; } .lead-gate-backdrop { position: absolute; inset: 0; background: rgba(10,12,20,0.6); backdrop-filter: blur(2px); } .lead-gate-card { position: relative; background: var(--white, #fff); max-width: 480px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 8px; padding: 32px 32px 26px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); border-top: 4px solid var(--teal); } .lead-gate-eyebrow { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 8px; } .lead-gate-card h2 { font-family: var(--serif); font-size: 1.7rem; line-height: 1.15; color: var(--text); margin: 0 0 8px; } .lead-gate-intro { font-family: var(--sans); color: var(--text-muted); font-size: 0.96rem; line-height: 1.5; margin: 0 0 18px; } .lead-gate-x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--text-mute); padding: 4px 8px; } .lead-gate-x:hover { color: var(--text); } .lead-gate-fine { font-family: var(--sans); font-size: 0.78rem; line-height: 1.5; color: var(--text-mute); margin: 16px 0 0; } .lead-gate-fine a { color: var(--teal-dark); text-decoration: underline; } @media (max-width: 520px) { .lead-gate-card { padding: 26px 22px 22px; } .lead-gate-card h2 { font-size: 1.45rem; } }