/* ============================================================================ CUSTOM / PER-SITE OVERRIDES (generated by the WXR import — first deploy) marker: TRM-CUSTOM-CSS-IMPORTED (delete this file, or this line, to let a future import repopulate it). Loaded after style.css, so these rules override the base shell. Source: in the imported XML. ============================================================================ */ /* ================================================================ TEST custom.css — proves the import path works. Written to the child theme's custom.css, which loads AFTER style.css, so these rules win. Obvious on purpose — remove once you've confirmed it applied. ================================================================ */ /* stateswithslots.com.css - SELF-CONTAINED (flattened by build_site_css.py). Style: slots/statehouse. Edit sources, re-run; never hand-edit this file. */ /* ===== base: site-assets\_base\base.css ===== */ /* ========================================================================== TRM BASE STYLESHEET v1.0 — the fleet standard (any site, any niche) -------------------------------------------------------------------------- Mobile-first, function + layout LOCKED. Clean SEMANTIC class names (NOT a site's legacy taxonomy). New sites use THIS + a thin theme layer; they never piggyback another site's sheet. HOW IT LAYERS: 1. base.css -> structure, components, mobile build, neutral tokens (this file, never edited per-site) 2. theme-.css -> override :root tokens (brand colors, fonts, radius) + any niche flourishes Load order: base.css THEN theme-.css. A reskin is a token edit, not a rewrite. TRACKING: affiliate anchors get class="aff" + data-book / data-slot attributes; the site's click tracker binds to [data-book] (site-neutral, no hardcoded IDs). Rules: mobile-first (base = phone; @media min-width builds up). No !important except to beat third-party inline styles (documented inline). Two breakpoints: 640, 960. ========================================================================== */ /* ---------- 1. Tokens (theme overrides these) ---------- */ :root { --c-brand: #1c0730; /* primary brand */ --c-brand-dk: #1c0730; --c-accent: #18bb51; /* CTA / go */ --c-accent-dk: #0f9a40; --c-warn: #e10507; --c-ink: #1a1a1a; --c-muted: #5a5a63; --c-line: #d9dce1; --c-line-soft: #eef1f4; --c-bg: #ffffff; --c-bg-soft: #f6f8fa; --c-good: #1a8a3c; --c-bad: #c62828; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-sm: 0.875rem; --fs: 1rem; --fs-h3: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); --fs-h2: clamp(1.35rem, 1.15rem + 1vw, 1.75rem); --sp-xs: 0.25rem; --sp-sm: 0.5rem; --sp: 1rem; --sp-lg: 1.5rem; --radius: 6px; --radius-sm: 4px; --shadow: 0 6px 24px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.08); --cta-gradient: linear-gradient(to bottom, var(--c-accent), var(--c-accent-dk)); } /* ---------- 2. Base / reset (mobile-first) ---------- */ *, *::before, *::after { box-sizing: border-box; } img, svg, video { max-width: 100%; height: auto; } .wrap { width: 100%; } .container { max-width: 1200px; margin-inline: auto; padding-inline: var(--sp); } .row-border { border-top: 1px solid var(--c-line-soft); } /* ---------- 3. Buttons ---------- */ .btn, .btn--brand, .btn--warn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 600 var(--fs)/1 var(--font); padding: .65em 1.1em; border: 1px solid transparent; border-radius: var(--radius-sm); color: #fff; text-decoration: none; cursor: pointer; background: var(--c-accent) var(--cta-gradient); transition: filter 120ms ease; } .btn:hover, .btn--brand:hover, .btn--warn:hover { filter: brightness(1.07); color: #fff; } .btn--brand { background: var(--c-brand) linear-gradient(to bottom, var(--c-brand), var(--c-brand-dk)); } .btn--warn { background: var(--c-warn) linear-gradient(to bottom, var(--c-warn), #b30406); } .btn--full { width: 100%; } .btn__icon { display: inline-flex; align-items: center; } .btn__icon svg { width: 1.3em; height: 1.3em; display: block; } /* ---------- 4. Operator / product row (.book-row) — the money component ---------- Mobile: logo+bonus / pitch / features / full-width CTA. Desktop: 5-col row. Markup: .book-row > .book-row__logo|__pitch|__bonus|__features|__cta */ .book-list { margin: 0 0 var(--sp-lg); padding: 0; list-style: none; } .book-row { display: grid; grid-template-areas: "logo bonus" "pitch pitch" "feat feat" "cta cta"; grid-template-columns: minmax(130px, auto) 1fr; align-items: center; gap: var(--sp-sm); padding: var(--sp-sm); margin-bottom: var(--sp-lg); background: var(--c-bg); border-radius: var(--radius); box-shadow: var(--shadow); } .book-row__logo { grid-area: logo; position: relative; display: flex; align-items: center; justify-content: center; width: 130px; height: 60px; margin-inline: auto; background: var(--c-line-soft); border: 1px solid var(--c-line); border-radius: var(--radius-sm); } .book-row__logo img { padding: 3px 12px 0; } .book-row__pitch { grid-area: pitch; min-width: 0; } .book-row__pitch h3 { margin: 0 0 var(--sp-xs); font-size: var(--fs-sm); font-weight: 600; color: var(--c-brand-dk); } .book-row__pitch p { margin: 0; font-size: var(--fs-sm); line-height: 1.35; } .book-row__bonus { grid-area: bonus; text-align: center; max-width: 150px; margin-inline: auto; } .book-row__bonus b, .book-row__bonus span:first-child { display: block; font-weight: 700; } .book-row__bonus .code { display: inline-block; margin-top: 3px; padding: 2px 6px; border: 2px dashed var(--c-accent); background: rgba(24,187,81,.18); border-radius: var(--radius-sm); font-weight: 700; } .book-row__features { grid-area: feat; } .book-row__features ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); } .book-row__features li { display: flex; align-items: center; gap: .4em; padding-block: 2px; line-height: 1.25; } .book-row__features li::before { content: "✓"; color: var(--c-good); font-weight: 700; } .book-row__cta { grid-area: cta; } .book-row__cta .btn { width: 100%; } .rank-badge { position: absolute; left: -14px; top: 10px; min-width: 24px; padding: 5px 3px; text-align: center; font-weight: 700; color: #fff; border-radius: 5px; background: linear-gradient(to bottom right, #051937, #0a234a); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 5px), 0 calc(100% - 10px)); } .rank-badge--top { background: linear-gradient(to bottom, #ee1529, #d10909); } @media (min-width: 960px) { .book-row { grid-template-areas: "logo pitch bonus feat cta"; grid-template-columns: 150px minmax(0,1fr) 120px 210px 150px; gap: 0; } .book-row > * { padding: var(--sp-sm); } .book-row > *:not(:last-child) { border-right: 1px solid var(--c-line-soft); } .book-row__cta .btn { width: 130px; margin-inline: auto; } } /* ---------- 5. Review summary card (.review-card) ---------- */ .review-card { background: var(--c-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp); margin-bottom: var(--sp-lg); } .review-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm); border-bottom: 1px solid var(--c-line-soft); padding-bottom: var(--sp-sm); margin-bottom: var(--sp); } .rank-dot { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; min-height: 2.2em; border-radius: 50%; background: var(--c-brand); color: #fff; font-weight: 700; } /* ---------- 6. Spec box (key/value facts) ---------- */ .spec-box { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp); margin-bottom: var(--sp); } .spec-box p { margin: 0 0 var(--sp-xs); font-size: var(--fs-sm); } /* ---------- 7. CTA band (mid-article) ---------- */ .cta-band { display: grid; grid-template-areas: "logo" "copy" "act"; grid-template-columns: 1fr; gap: var(--sp); align-items: center; background: var(--c-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp); margin-bottom: var(--sp-lg); } .cta-band__logo { grid-area: logo; display: flex; justify-content: center; } .cta-band__copy { grid-area: copy; min-width: 0; } .cta-band__act { grid-area: act; } .cta-band__note { font-size: var(--fs-sm); color: var(--c-muted); margin-top: var(--sp-sm); } @media (min-width: 640px) { .cta-band { grid-template-areas: "logo copy act"; grid-template-columns: auto minmax(0,1fr) auto; } } /* ---------- 8. Pros / cons ---------- */ .pros-cons { display: grid; grid-template-columns: 1fr; gap: var(--sp); margin-bottom: var(--sp); } @media (min-width: 640px) { .pros-cons { grid-template-columns: 1fr 1fr; } } .checklist { list-style: none; margin: 0; padding: 0; } .checklist li { display: flex; align-items: flex-start; gap: .5em; padding-block: .25em; } .checklist--pros li::before { content: "✓"; color: var(--c-good); font-weight: 700; } .checklist--cons li::before { content: "✕"; color: var(--c-bad); font-weight: 700; } /* ---------- 9. Responsive data table (scrolls on phone, never squishes) ---------- */ .data-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--sp); } .data-table table { min-width: 640px; width: 100%; border-collapse: collapse; } .data-table th, .data-table td { border: 1px solid var(--c-line-soft); padding: .5em .65em; font-size: var(--fs-sm); } .data-table thead th { background: var(--c-brand-dk); color: #fff; text-align: left; } /* ---------- 9b. cmp-table: real that becomes stacked cards on mobile (no h-scroll). Row-entity in
; every so mobile shows the label. ---------- */ .cmp-table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp); font-size: var(--fs-sm); } .cmp-table caption { caption-side: top; text-align: left; font-weight: 700; padding-bottom: var(--sp-sm); } .cmp-table th, .cmp-table td { border: 1px solid var(--c-line); padding: .55em .7em; text-align: left; vertical-align: top; } .cmp-table thead th { background: var(--c-brand-dk); color: #fff; } .cmp-table tbody th { background: var(--c-bg-soft); font-weight: 700; } .cmp-table tbody tr:nth-child(even) td { background: var(--c-bg-soft); } .cmp-table tbody tr.is-top th { background: var(--c-accent); color: #fff; } @media (max-width: 640px) { .cmp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: auto; } .cmp-table tr { border: 1px solid var(--c-line); border-radius: var(--radius); margin-bottom: var(--sp-sm); overflow: hidden; } .cmp-table tbody th { background: var(--c-brand-dk); color: #fff; } .cmp-table td { border: 0; border-top: 1px solid var(--c-line-soft); padding-left: 42%; position: relative; background: var(--c-bg) !important; } .cmp-table td::before { content: attr(data-label); position: absolute; left: .7em; top: .55em; width: 36%; font-weight: 600; color: var(--c-muted); } } /* ---------- 9c. table-list: is the card title and each a labelled line beneath it. Two things every selector here has to survive: * `cmp-table` sits on the on most pages but on the wrapping
on a few, so each rule covers both shapes. * the wide-layout rules above set `min-width: 44rem` and `white-space: nowrap`; both have to be undone here or the card keeps the table's old width and hangs off the right edge of the screen. ------------------------------------------------------------------------ */ @media (max-width: 720px) { /* 1. nothing may carry a floor width once it is a stack of cards */ .wp-block-table table, .cmp-table, .cmp-table table, .data-table, .data-table table { min-width: 0; width: 100%; display: block; } .wp-block-table, .table-wrap { overflow-x: visible; border: 0; background: none; border-radius: 0; } /* 2. the column headings move into each cell (see 5.), so the real header row is hidden — reachable to screen readers, not painted */ .wp-block-table thead, .cmp-table thead, .cmp-table table thead, .data-table thead, .data-table table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .wp-block-table tbody, .cmp-table tbody, .data-table tbody, .wp-block-table tr, .cmp-table tr, .data-table tr, .wp-block-table th, .cmp-table th, .data-table th, .wp-block-table td, .cmp-table td, .data-table td { display: block; width: auto; } /* 3. one card per row */ .wp-block-table tbody tr, .cmp-table tbody tr, .data-table tbody tr { border: 1px solid var(--c-line); border-radius: var(--radius); margin: 0 0 var(--sp-sm); overflow: hidden; background: var(--c-bg); } .wp-block-table tbody tr:last-child, .cmp-table tbody tr:last-child, .data-table tbody tr:last-child { margin-bottom: 0; } /* 4. card title = the row header. These run long ("Bitcoin Lightning (Ignition, Slots.lv, Cafe)"), so nowrap has to go. */ .wp-block-table tbody th, .cmp-table tbody th, .data-table tbody th { background: var(--c-brand-dk); color: #fff; white-space: normal; border-top: 0; font-size: var(--fs-body); line-height: 1.35; } /* 5. value lines. The site's tables carry the column heading on each cell as data-label; where they do, it prints as the line's label. The stylesheet this replaces printed that label as an ABSOLUTELY positioned ::before over a 42% left pad. The label is a grid cell here instead, so both of those have to be unwound explicitly or the label lands on top of its own value. */ .wp-block-table tbody td, .cmp-table tbody td, .data-table tbody td { border-top: 1px solid var(--c-line-soft); white-space: normal; position: static; padding: 11px 14px; } .wp-block-table tbody td[data-label], .cmp-table tbody td[data-label], .data-table tbody td[data-label] { display: grid; grid-template-columns: 38% 1fr; gap: .2rem 1rem; align-items: start; } .wp-block-table tbody td[data-label]::before, .cmp-table tbody td[data-label]::before, .data-table tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--c-muted); position: static; left: auto; top: auto; width: auto; } /* 6. the striping above tints whole rows; a card is one row, so drop it (needs the same nth-child specificity to win) */ .wp-block-table tbody tr:nth-child(even) th, .cmp-table tbody tr:nth-child(even) th, .data-table tbody tr:nth-child(even) th { background: var(--c-brand-dk); } .wp-block-table tbody tr:nth-child(even) td, .cmp-table tbody tr:nth-child(even) td, .data-table tbody tr:nth-child(even) td { background: var(--c-bg); } } /* on the narrowest screens the label sits above its value instead of beside it */ @media (max-width: 480px) { .wp-block-table tbody td[data-label], .cmp-table tbody td[data-label], .data-table tbody td[data-label] { grid-template-columns: 1fr; } } /* --- 4.9 CTA band ------------------------------------------------------ */ .cta-band { background: var(--c-brand-dk); color: #dbe6ef; border-radius: var(--radius); padding: var(--sp-lg); margin: var(--sp-xl) 0; display: grid; gap: var(--sp); align-items: center; } .cta-band__copy { min-width: 0; } .cta-band__copy h2, .cta-band__copy h3 { color: #fff; margin: 0 0 .4rem; } .cta-band__copy h2::after { display: none; } .cta-band__copy p { margin: 0; color: #a8c3dc; font-size: var(--fs-sm); } .cta-band__act { display: grid; gap: .4rem; justify-items: stretch; } .cta-band__note { font-size: var(--fs-body); color: #7f9cb5; text-align: center; } .cta-band__logo img { max-height: 34px; width: auto; } /* --- 4.10 tally (status ledger) ---------------------------------------- */ .tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; margin: var(--sp-lg) 0; } .tally__c { background: var(--c-bg); padding: .9rem 1rem; display: flex; gap: .75rem; align-items: flex-start; } .tally__n { font-family: var(--font-head); font-weight: 700; font-size: 2.3rem; line-height: .95; font-variant-numeric: tabular-nums; color: var(--c-brand); } .tally__c--live .tally__n { color: var(--pip-live); } .tally__c--pending .tally__n { color: #9a7200; } .tally__c--none .tally__n { color: var(--pip-none); } .tally__l { font-size: var(--fs-body); line-height: 1.35; color: var(--c-muted); padding-top: .15rem; } .tally__l b { display: block; color: var(--c-ink); font-weight: 600; font-size: var(--fs-body); } /* --- 4.11 misc --------------------------------------------------------- */ .disclosure, .rg-strip { font-size: var(--fs-body); color: var(--c-muted-2); line-height: 1.5; margin: var(--sp) 0; } /* Disclosure notice — its own card with an exclamation mark. Needs the compound `.sec > p.disclosure`: it is a

inside .sec, so the plain `.sec > p` rule (0,1,1) outranks a bare `.disclosure` (0,1,0) — the same trap that kept .rg-strip grey. Icon is an inline SVG data URI: no request, no font-glyph fallback risk, crisp at any zoom. */ .disclosure, .sec > p.disclosure { position: relative; background: var(--c-bg); border: 1px solid var(--c-line); border-left: 3px solid var(--c-warn); border-radius: var(--radius); margin: var(--sp-lg) 0; padding: 1.2rem 1.4rem 1.2rem 3.6rem; font-size: var(--fs-body); font-style: normal; line-height: 1.62; color: var(--c-muted); } .disclosure::before { content: ""; position: absolute; left: 1.3rem; top: 1.28rem; width: 22px; height: 22px; background-repeat: no-repeat; background-size: 22px 22px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2022%2022'%3E%3Ccircle%20cx='11'%20cy='11'%20r='11'%20fill='%23b8860b'/%3E%3Crect%20x='9.9'%20y='4.8'%20width='2.2'%20height='8.2'%20rx='1.1'%20fill='%23fff'/%3E%3Ccircle%20cx='11'%20cy='16.6'%20r='1.35'%20fill='%23fff'/%3E%3C/svg%3E"); } .disclosure strong, .disclosure b { color: var(--c-brand-dk); font-weight: 700; } @media (max-width: 720px) { .disclosure, .sec > p.disclosure { padding: 1.05rem 1.1rem 1.05rem 3.2rem; } .disclosure::before { left: 1rem; top: 1.15rem; } } /* Responsible-gambling strip — full body size in white, not a footnote. The compound `.sec > p.rg-strip` is required: the strip is a

inside .sec, so the plain `.sec > p` rule (0,1,1) outranks a bare `.rg-strip` (0,1,0) and was forcing the muted grey. Size matches the body's 1.0625rem, not --fs (1rem). */ .rg-strip, .sec > p.rg-strip { background: var(--c-brand-dk); color: #fff; border-radius: var(--radius); padding: 1.05rem 1.35rem; text-align: center; font-style: normal; font-size: 1.0625rem; line-height: 1.6; } .rg-strip strong, .rg-strip b { color: #fff; font-weight: 700; } .rg-strip a { color: #fff; text-decoration-thickness: 1px; } .trm-comp-note { font-size: var(--fs-body); color: var(--c-muted-2); font-style: italic; } .card-grid { display: grid; gap: var(--sp); grid-template-columns: 1fr; margin: var(--sp-lg) 0; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* --------------------------------------------- 5. RESPONSIVE BUILD-UP */ @media (min-width: 640px) { .table-list { grid-template-columns: 1fr 1fr; } .pros-cons { grid-template-columns: 1fr 1fr; } .card-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 760px) { .cta-band { grid-template-columns: 1fr auto; } } @media (min-width: 1000px) { .table-list { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 880px) { .hero-inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; } .hero-aside { border-left: 1px solid var(--c-line); padding-left: 2.25rem; } } @media (min-width: 780px) { .book-row { grid-template-columns: 1fr 268px; grid-template-areas: "logo bonus" "pitch bonus" "features cta"; } .book-row__bonus, .book-row__cta { border-top: 0; border-left: 1px solid var(--c-line); } .book-row__bonus { display: flex; flex-direction: column; justify-content: flex-start; padding: 24px 18px 12px; } .book-row__cta { display: flex; align-items: flex-end; padding: 12px 18px 22px; } .book-row__cta .btn { align-self: end; } } @media (min-width: 960px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } } /* review card collapses: offer rail under the prose, then header stacks */ @media (max-width: 900px) { .bc-body { grid-template-columns: 1fr; } .bc-offer { border-left: 0; border-top: 1px solid var(--c-line); } .bc-head { grid-template-columns: auto auto; gap: 14px; } .bc-name, .bc-badge { grid-column: 1 / -1; } .bc-badge { justify-self: start; } } @media (max-width: 560px) { .bc-ledger { grid-template-columns: 1fr; gap: 16px; } .no-link { grid-template-columns: 1fr; gap: 14px; } } /* === 5. navigation — the states menu panels ================================ Two panels hang off the header nav, pasted into Max Mega Menu "Custom HTML" widgets: an A–Z list of all 51 jurisdictions, and a short Licensed States dropdown. Regenerate the markup with scratchpad/gen_megamenu.py whenever a state page is added, then re-paste. This has to do two jobs — style the panels, and undo the box Max Mega Menu puts them in. On the !important below: MMM writes its own stylesheet to uploads/maxmegamenu/style.css and scopes every rule with two IDs (#mega-menu-wrap-primary #mega-menu-primary …). Nothing here can outrank that without hard-coding those same IDs — which would break the day the menu moves to another theme location, and that file is rewritten every time the menu settings are saved. Four targeted !important declarations, on layout only, is the smaller price. Nothing below section 5.1 needs them. ------------------------------------------------------------------------- */ /* --- 5.0 the menu bar itself -------------------------------------------- */ /* Max Mega Menu ships the top-level bar at 14px/400 on its own #333 slab, bunched into a 354px box in the top-right corner. The header is already the brand navy, so the bar mostly has to get out of the way and pick up the site's own type: bold Public Sans, spread across the row beside the logo, gold on hover and while a panel is open. !important throughout, for the reason given at the top of section 5: MMM scopes these very properties with two IDs and would otherwise win. Nothing here touches layout the theme depends on — only the menu's own bar. */ :root { /* gold used ONLY as nav decoration. Deliberately NOT --pip-pending: that amber is a factual status colour (law passed, no market) and must never be borrowed for chrome, or the pip legend stops meaning one thing. */ --c-nav-gold: #e5be4f; /* width of the header's content row — see 5.1 */ --sws-nav-panel: 1260px; } /* the nav takes the width the logo leaves, so items can spread across the row instead of bunching top-right. :has() picks the one nav that holds the menu — GeneratePress prints a second, empty .main-navigation in this header. */ .inside-header > .main-navigation:has([id^="mega-menu-wrap-"]) { flex: 1 1 auto; display: flex; align-items: stretch; } /* GeneratePress right-aligns the menu with margin-left:auto on .inside-navigation, and MMM's reset sets the wrap to width:auto — between them the bar shrinks to its own text and hugs the corner. Both have to give for the row to fill. */ .inside-header > .main-navigation:has([id^="mega-menu-wrap-"]) > .inside-navigation { flex: 1 1 auto; margin-left: 0; max-width: none; } .inside-header [id^="mega-menu-wrap-"] { width: 100% !important; /* MMM paints the bar with its own dark slab, which sat as a black strip across the navy header. The header already IS the brand navy. */ background: transparent !important; } .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] { display: flex !important; /* items run from the left, next to the logo — NOT justified across the row. space-between only looks right at a specific item count; at three it strands them at opposite ends, and the spacing would shift again on every menu edit. A fixed gap reads the same whether there are three items or six. */ justify-content: flex-start; align-items: stretch; gap: clamp(.5rem, 1.6vw, 2rem); /* a little air after the logo, so the first item is not glued to it */ padding-left: clamp(.75rem, 2vw, 2rem) !important; background: transparent !important; } .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link { display: flex !important; align-items: center; gap: .45rem; height: auto !important; min-height: 4.75rem !important; line-height: 1.25 !important; padding: 0 clamp(.35rem, .9vw, .85rem) !important; background: transparent !important; font-family: var(--font) !important; font-size: var(--fs-body) !important; font-weight: 700 !important; color: #fff !important; /* the gold rule under the open item. It has to be an inset shadow: MMM sets a.mega-menu-link::before AND ::after to display:none, so a pseudo-element underline never paints. */ box-shadow: inset 0 -3px 0 transparent !important; transition: color .14s ease, box-shadow .14s ease !important; } .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link:hover, .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link:focus-visible, .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { color: var(--c-nav-gold) !important; background: transparent !important; box-shadow: inset 0 -3px 0 var(--c-nav-gold) !important; } @media (prefers-reduced-motion: reduce) { [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link { transition: none; } } /* the caret. MMM draws it as a dashicon and swaps the glyph for an up-arrow when the panel opens, so it only needs colour and size. */ .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link > span.mega-indicator { color: #9fb6c9 !important; font-size: 1.05rem !important; margin: 0 0 0 .1rem !important; transition: color .14s ease !important; } .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item:hover > a.mega-menu-link > span.mega-indicator, .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator { color: var(--c-nav-gold) !important; } /* the licensed dropdown hangs under its own item rather than spanning the bar: it is a short list, and full-bleed it would read as a second mega panel. Making the item the positioned ancestor is what lets left:0 mean "this item". */ .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item:has(.sws-lic) { /* !important because MMM deliberately keeps mega items position:static — that is how a full-width panel anchors to the wrap. This one item opts out. */ position: relative !important; } .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item:has(.sws-lic) > ul.mega-sub-menu { width: auto !important; min-width: 26rem !important; left: 0 !important; right: auto !important; } /* --- 5.1 undo Max Mega Menu's column cage ------------------------------- */ /* MMM sizes each panel child to width: calc(var(--span) / var(--columns) * 100%) from an inline style, so a widget dropped into a 5-column panel comes out one or two fifths wide with a 15px gutter. The panel is the layout here — the columns are the CSS multi-column below — so the widget takes the whole width and brings its own padding. This also means the panel's column count in the MMM dialog no longer matters. */ .inside-header [id^="mega-menu-wrap-"] li.mega-menu-item-type-widget.widget_custom_html { width: 100% !important; padding: 0 !important; float: none !important; clear: both !important; } .inside-header [id^="mega-menu-wrap-"] .widget_custom_html > .textwidget { width: 100%; } /* MMM also sizes the panel itself to width:100% of the menu WRAP, and the wrap here is only ~354px (the nav is a short row beside the logo), so five columns could never have fitted however the widget was configured. Widen just this panel, and anchor it to the wrap's right edge -- anchored left at 1180px it runs off the right of the screen. :has() keeps the rule tied to the A-Z panel, so the narrow Licensed States dropdown is left alone. */ .inside-header [id^="mega-menu-wrap-"] li.mega-menu-megamenu:has(.sws-mega--alpha) > ul.mega-sub-menu { /* --sws-nav-panel is GeneratePress's container (1280px) less its 10px side padding, so the panel's left edge lands on the logo's left edge and its right edge on the last menu item. Right-anchored, because the wrap starts where the logo ends: anchored left the panel would hang off the screen. */ width: min(var(--sws-nav-panel), calc(100vw - 2rem)) !important; max-width: none !important; left: auto !important; right: 0 !important; } /* --- 5.2 un-do GeneratePress's dropdown treatment ------------------------ */ /* GeneratePress styles ANY list nested inside .main-navigation as a fly-out sub-menu. The full rule (themes/generatepress/assets/css/main.min.css) is: .main-navigation ul ul { position:absolute; left:-99999px; opacity:0; height:0; overflow:hidden; pointer-events:none; float:left; width:200px; box-shadow:1px 1px 0 rgba(0,0,0,.1); transition:opacity 80ms linear } ...plus a theme rule painting .main-navigation ul ul with --base. The A-Z list is a plain list that happens to live in the nav, so all of that applied to it: parked 99999px off-screen, zero opacity, zero height, pointer events off -- present in the DOM, invisible on the page. The zero height also starved the multi-column box, which then spilled one state into each of 51 columns. GP only ever reverses this on `li:hover > ul`, and these lists sit inside a div, so they would never have come back on their own. Two classes outrank GP's one-class-two-element selector, so no !important. */ .sws-mega .sws-alpha, .sws-lic .sws-lic__list { position: static; left: auto; top: auto; height: auto; overflow: visible; opacity: 1; pointer-events: auto; float: none; width: auto; z-index: auto; box-shadow: none; transition: none; /* the theme also paints its dropdowns with --base, which showed as a grey slab behind the states while the legend below sat on the panel white */ background: none; } /* --- 5.3 shared panel surface ------------------------------------------- */ /* MMM's reset hands its children font-size:14px and color:#666, and a panel sits on #f1f1f1. Each panel paints its own surface over all of that, so it reads as part of the site rather than as plugin chrome. */ .sws-mega, .sws-lic { background: var(--c-bg); /* no top rule here on purpose: the accent line in the design is the gold underline drawn on the open nav item (5.0). Two rules stacked at the same edge read as a mistake. */ box-shadow: 0 18px 40px -18px rgba(8, 29, 51, .35); color: var(--c-ink); font-size: 1rem; line-height: 1.6; } .sws-mega { padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2.2vw, 1.9rem); } /* 4px on the dropdown. Both boxes need it: the white surface is .sws-mega, but MMM's own panel sits behind it and its theme sets border-radius:0 — rounding only the inner one would leave the panel's square corners peeking out. The overflow clip makes the inner surface follow the panel's curve. */ .sws-mega, .sws-lic { border-radius: 4px; } .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > ul.mega-sub-menu { border-radius: 4px !important; overflow: hidden; } /* the pip is already defined in 3.3 and needs nothing here — but a menu row must never inherit the glance row's dot-as-::before treatment */ .sws-mega li::before, .sws-lic li::before { content: none; } /* --- 5.4 all states, A–Z ------------------------------------------------ */ /* CSS multi-column, not grid: columns flow the alphabet DOWN each column and continue in the next, which is how an A–Z list is read. A grid runs across the row and would put Alaska beside Illinois. break-inside keeps a row whole at a column boundary. */ .sws-alpha { list-style: none; margin: 0; padding: 0; columns: 5; column-gap: 1.75rem; } .sws-alpha li { display: flex; align-items: baseline; gap: .55rem; padding: .3rem 0; break-inside: avoid; font-size: 1rem; line-height: 1.45; } .sws-alpha a { color: var(--c-brand); text-decoration: none; border-bottom: 1px solid transparent; } .sws-alpha a:hover, .sws-alpha a:focus-visible { color: var(--c-accent-dk); border-bottom-color: currentColor; } /* a state with no page is plain text, so the menu never offers a dead link. Scoped to the direct child: each row now nests .sws-full / .sws-ab inside its link too, and a bare `span:not(.pip)` would grey the linked states as well. */ .sws-alpha > li > .sws-name { color: var(--c-muted-2); } /* every row carries the full name AND the two-letter code; the name shows here, the code takes over in the drawer (5.6). The link's aria-label is always the full name, so a screen reader never reads "AL". */ .sws-alpha .sws-ab { display: none; } .sws-mega__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.2rem 0 0; padding-top: .85rem; border-top: 1px solid var(--c-line); font-size: 1rem; color: var(--c-muted); } .sws-mega__legend > span { display: inline-flex; align-items: baseline; gap: .5rem; } @media (max-width: 1180px) { .sws-alpha { columns: 4; } } @media (max-width: 950px) { .sws-alpha { columns: 3; } } @media (max-width: 720px) { .sws-alpha { columns: 2; } } @media (max-width: 520px) { .sws-alpha { columns: 1; } } /* --- 5.5 licensed states ------------------------------------------------ */ /* Deliberately narrow even when MMM hands it a full-width panel: seven rows with a right-aligned label read as a list, not as a banner. */ .sws-lic { max-width: 30rem; min-width: 19rem; padding: 1.15rem 1.25rem .35rem; } .sws-lic__eyebrow { display: block; font-family: var(--font-num); font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-dk); margin-bottom: .85rem; } .sws-lic__list { list-style: none; margin: 0; padding: 0; } .sws-lic__list li { display: flex; align-items: baseline; gap: .55rem; padding: .45rem 0; font-size: 1.0625rem; line-height: 1.4; } .sws-lic__list a { color: var(--c-brand-dk); font-weight: 600; text-decoration: none; } .sws-lic__list a:hover, .sws-lic__list a:focus-visible { text-decoration: underline; } .sws-lic__nolink { color: var(--c-muted-2); font-weight: 600; } /* the market-shape label sits hard right, quiet, and never wraps mid-phrase */ .sws-lic__meta { margin-left: auto; font-family: var(--font-num); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted-2); white-space: nowrap; } /* Maine is a different KIND of entry, so it gets a rule rather than a heading */ .sws-lic__list--pending { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--c-line); } .sws-lic__cta { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; padding: .8rem 0; border-top: 1px solid var(--c-line); font-family: var(--font-num); font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent-dk); text-decoration: none; } .sws-lic__cta::after { content: "→"; transition: transform .15s ease; } .sws-lic__cta:hover::after { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .sws-lic__cta::after { transition: none; } } /* --- 5.6 mobile: the bar becomes the theme's drawer --------------------- */ /* ONE menu, two presentations. Below GP's 1025px breakpoint Max Mega Menu collapses the header bar behind its own hamburger, and everything here makes that collapsed menu look and behave like the child theme's off-canvas drawer — so there is no second menu to build and keep in step. Every value below is the THEME's own token (--drawer-width, --drawer-bg, --drawer-shadow, --color-border-soft, --color-text-body, --brand-primary, --space-3/5, --text-base), read from generatepress_child/style.css. Nothing is eyeballed, so if the drawer is ever re-themed this follows it. Fallbacks are supplied in case this stylesheet is ever used without that child theme. MMM config this relies on: Responsive Breakpoint = 1025px, mobile toggle bar left ENABLED (it is the hamburger). */ @media (max-width: 1025px) { /* The drawer's close band. It used to be tied to the header height so the first menu row would land on the header line — but the header height is NOT a constant: it follows the logo, which has to shrink on a narrow phone (below), so it measures 100px at some widths and 78px at others. Chasing it produced a band that overshot at one size and undershot at another. It is now a fixed size that simply holds the X, and the closed hamburger centres itself in the header independently (rule 2). */ .inside-header [id^="mega-menu-wrap-"], .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] { --sws-drawer-head: 3.125rem; /* 50px — the same height as a menu row */ } /* MMM's toggle bar on this site carries a "MENU" text button beside the animated icon. Two controls for one action, and together they are 121px wide — enough to sit on top of a 300px logo on a 375px screen. The icon is the affordance; the word is noise. */ .inside-header [id^="mega-menu-wrap-"] .mega-menu-toggle button.mega-toggle-label { display: none !important; } /* The logo must be allowed to shrink, or it collides with the toggle: GP sets it flex:0 0 300px, which on a 375px screen leaves nothing for the icon. */ .inside-header .site-logo { flex: 0 1 auto !important; min-width: 0 !important; max-width: calc(100% - 4.5rem) !important; } .inside-header .site-logo img { max-width: 100% !important; height: auto !important; } /* 1. GP hides .main-navigation at this width. MMM owns mobile now, so the wrap has to stay — otherwise the hamburger goes with it. */ .inside-header > .main-navigation:has([id^="mega-menu-wrap-"]), .inside-header [id^="mega-menu-wrap-"] { display: block !important; } .inside-header > .main-navigation:has([id^="mega-menu-wrap-"]) > .inside-navigation { margin-left: 0; } /* 2. the hamburger: MMM's own dark slab off, header navy through. It must also sit ABOVE the open drawer — the drawer covers the top-right corner of the header, and MMM's animated toggle turns into the X that closes it, so buried under the panel there is no way out. */ /* the nav centres the toggle vertically, so the icon lines up with the logo at ANY header height — sizing the toggle to match the header is what made this brittle before */ .inside-header > .main-navigation:has([id^="mega-menu-wrap-"]) { display: flex !important; align-items: center !important; } .inside-header > .main-navigation:has([id^="mega-menu-wrap-"]) > .inside-navigation { height: auto !important; align-items: center !important; } /* MMM parks the icon block hard right; the icon reads from the left here */ .inside-header [id^="mega-menu-wrap-"] .mega-menu-toggle .mega-toggle-blocks-right { justify-content: flex-start !important; flex: 0 0 auto !important; padding-right: 0 !important; } .inside-header [id^="mega-menu-wrap-"] .mega-menu-toggle { background: transparent !important; height: 3.125rem !important; /* 50px — matches a menu row */ align-items: center !important; /* icon vertically centred in the bar */ justify-content: flex-start !important; /* and hard against its left edge */ position: relative !important; z-index: 100001 !important; /* MMM pins the toggle at z-index 1 from an ID selector */ } /* MMM parks its toggle blocks hard right; the close button reads from the left in this layout. */ .inside-header [id^="mega-menu-wrap-"] .mega-menu-toggle.mega-menu-open .mega-toggle-blocks-right { justify-content: flex-start !important; flex: 0 0 auto !important; padding-right: 0 !important; } .inside-header [id^="mega-menu-wrap-"] .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner, .inside-header [id^="mega-menu-wrap-"] .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner::before, .inside-header [id^="mega-menu-wrap-"] .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner::after { background-color: #fff !important; } @media (prefers-reduced-motion: reduce) { .inside-header [id^="mega-menu-wrap-"] .mega-menu-toggle.mega-menu-open { animation: none !important; } } /* the hamburger / X itself, a touch smaller in both states */ .inside-header [id^="mega-menu-wrap-"] .mega-menu-toggle .mega-toggle-block { transform: scale(.85); transform-origin: center; } /* MMM's own close button is the X in off-canvas mode — it lives above the panel at max int, which is exactly where a close control belongs. Earlier I hid it and rebuilt the X out of the toggle; that fight over z-index is what cost the overlay. Styled, not replaced. */ .inside-header [id^="mega-menu-wrap-"] button.mega-close { color: #fff !important; background: transparent !important; width: 3.5rem !important; height: var(--sws-drawer-head, 3.125rem) !important; /* MMM parks it at the panel's right; the theme's drawer closes from the left. Positioned off the RIGHT edge (as MMM does) minus the drawer width, so it lands just inside the panel's left edge without any 100vw maths — vw would include the scrollbar and drift by ~15px. */ left: auto !important; right: calc(var(--drawer-width, min(86vw, 380px)) - 3.625rem) !important; font-size: 1.75rem !important; /* the glyph, not the button box */ } /* 3. the menu list becomes a right-hand drawer, matching the theme's */ .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] { display: flex !important; flex-direction: column; position: fixed !important; /* left:auto is NOT redundant. Max Mega Menu ships its own slide-from-left mobile menu, and when that is enabled it sets #wrap .mega-menu-toggle.mega-menu-open + #menu { left: 0 } from two IDs. Declaring only top/right/bottom left that untouched, so the drawer opened against the LEFT edge on any site with that MMM setting on (production had it; the clone did not, which is why it never showed up locally). */ top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: var(--drawer-width, min(86vw, 380px)) !important; max-width: none !important; /* z-index deliberately NOT set: MMM puts the off-canvas panel at max int so that its own overlay sits BENEATH it. Pinning it lower floated the overlay over the drawer — which is what made the whole page, menu included, go dark. */ margin: 0 !important; padding: 0 !important; gap: 0; overflow-y: auto !important; -webkit-overflow-scrolling: touch; background: var(--drawer-bg, #fff) !important; box-shadow: var(--drawer-shadow, -10px 0 30px -6px rgba(20, 30, 50, .18)); border-left: 1px solid var(--color-border-soft, #e6ecf0); /* parked off-canvas until the hamburger is tapped. visibility keeps the closed panel out of the tab order rather than only out of sight. */ transform: translateX(100%) !important; visibility: hidden !important; /* !important, or MMM's reset (transition: none, two IDs) wins and the drawer simply appears and disappears. With it, the same transform drives both directions: it slides in from the right and slides back out the same way. visibility is in the transition so it flips only at the END of the close, keeping the panel on screen for the duration of the slide. */ transition: transform .25s ease, visibility .25s !important; } .inside-header [id^="mega-menu-wrap-"] .mega-menu-toggle.mega-menu-open + ul[id^="mega-menu-"] { transform: none !important; visibility: visible !important; } @media (prefers-reduced-motion: reduce) { .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] { transition: none !important; } } /* NO page-dimming scrim. It was tried on the toggle, on the drawer and on the wrap, and each placement fought a different stacking rule — on the toggle it covered the drawer, and on the drawer and wrap the tint landed over the panel instead of beside it. The drawer's own box-shadow already separates it from the page, so the scrim is not worth the fragility. If it is ever wanted back, it needs a real element in the markup rather than a pseudo-element hanging off a box that MMM also positions. */ /* The close band is the drawer's OWN first box, not the toggle's background. That buys two things at once: it slides in and out as part of the panel (painted on the fixed toggle it appeared instantly while the panel travelled), and position:sticky keeps it pinned at the top while the state list scrolls UNDER it — with the toggle transparent, rows were otherwise painting straight into the band. MMM sets #mega-menu-primary:before to display:none, which the !important undoes. */ .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"]::before { content: "" !important; display: block !important; /* !important on position: MMM's reset pins its pseudo-elements, and without it this computed to fixed — out of flow, taking no layout space, so the first rows sat behind the band instead of below it. Sticky DOES occupy space, which is what reserves the strip. */ position: sticky !important; top: 0 !important; z-index: 2; flex: 0 0 auto; width: 100%; height: var(--sws-drawer-head, 6.25rem); background: var(--brand-primary, #334155); border-bottom: 1px solid var(--color-border-soft, #e6ecf0); } /* 4. rows, to the theme's drawer spec */ .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item { width: 100% !important; /* !important: MMM's reset zeroes borders on li.mega-menu-item from a two-ID selector, which silently swallowed this rule — the rows only looked separated because an OPEN row is filled dark. */ border-bottom: 1px solid var(--color-border-soft, #e6ecf0) !important; } .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link { min-height: 0 !important; height: auto !important; line-height: 1.4 !important; padding: .8rem var(--space-5, 1.25rem) !important; font-family: var(--font) !important; font-size: var(--text-base, 1rem) !important; font-weight: 600 !important; color: var(--color-text-body, #222) !important; background: transparent !important; box-shadow: none !important; border-bottom: 0 !important; justify-content: space-between; } /* the theme fills a whole top-level row on hover / while open */ .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link:hover, .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { color: #fff !important; background: var(--brand-primary, #334155) !important; box-shadow: none !important; } .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator, .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link:hover > span.mega-indicator { color: #fff !important; } .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link > span.mega-indicator { color: var(--color-text-body, #222) !important; } /* a bigger caret on touch. 5.0 sets 1.05rem for the desktop bar; this block sits after it in the file, so the same specificity wins here on order. MMM draws the indicator as a dashicons glyph, so font-size IS its size. */ .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link > span.mega-indicator { font-size: 1.5rem !important; /* line-height 1, or the enlarged glyph's line box becomes the tallest thing in the row and drives its height — tightening the label padding then does nothing, which is exactly what happened the first time. */ line-height: 1 !important; } /* the drawer runs edge to edge and full height — the desktop dropdown's 4px corner would read as a mistake here */ .sws-mega, .sws-lic { border-radius: 0; } .inside-header [id^="mega-menu-wrap-"] ul.mega-sub-menu { border-radius: 0 !important; } /* 5. the states panels flow inside the drawer instead of hanging off a bar — each line here undoes a desktop rule from 5.0/5.1 */ .inside-header [id^="mega-menu-wrap-"] li.mega-menu-megamenu:has(.sws-mega--alpha) > ul.mega-sub-menu, .inside-header [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item:has(.sws-lic) > ul.mega-sub-menu, .inside-header [id^="mega-menu-wrap-"] ul.mega-sub-menu { position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; left: auto !important; right: auto !important; } /* on the drawer's own surface the panels are flat: no card, no shadow */ .sws-mega, .sws-lic { box-shadow: none; max-width: none; min-width: 0; padding: var(--space-3, .75rem) var(--space-5, 1.25rem); } /* 51 full names in a drawer is a ~2000px scroll. The same 51 rows as two-letter codes fit a 5-across grid in a few hundred pixels, and the pip still carries the licensing status on every one. The full name stays in the DOM (and in the link's aria-label) — only its display is swapped. */ /* two classes, to outrank GP's .main-navigation ul ul{display:block} — the same selector that had to be undone in 5.2 */ .sws-mega .sws-alpha { columns: auto; display: grid; /* Six across. Dropping the pip frees ~15px per chip; the floor is set from the real available width, not the panel width — the drawer scrolls, and its scrollbar takes ~15px, which is exactly what pushed auto-fill back down to five at 3.1rem. Widest label is two characters, so 2.85rem is still comfortable. */ /* Seven across. The floor is what caps the count, NOT the type — the label is two characters, so the chips have room to narrow while the text stays at 1rem, the site's documented minimum (see --fs-body in section 1). */ grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr)); gap: .3rem; } .sws-mega .sws-alpha li { justify-content: center; align-items: center; gap: 0; min-height: 2.5rem; padding: 0; border: 1px solid var(--color-border-soft, #e6ecf0); border-radius: 4px; } /* The pip dot comes off — but its MEANING does not. Licensing status is a factual claim the legend below depends on, so it moves onto the chip itself: the border and a faint tint, mixed from the same --pip-* values, so the colour code still reads exactly as it does everywhere else on the site. Text colour is left alone, because it is already carrying a different fact — navy means the state has a page, grey means it does not. */ .sws-mega .sws-alpha .pip { display: none; } /* Status is an underline, not a fill. Tinting the whole chip put blocks of colour into a 51-cell grid and it read as busy; a 2px rule under the code says the same thing quietly, and the box stays neutral so every chip reads as the same kind of object. Every state carries one, including "not licensed" — the accent blue rather than --pip-none, so no chip looks unfinished. That is a DRAWER-ONLY substitution: --pip-none grey is a factual value used by the pips on every page, and is not touched. The drawer's own legend key is recoloured to match just below, so the legend always describes what is on screen. */ .sws-mega .sws-alpha li { border-bottom: 2px solid var(--c-accent); } /* 3px, not 2: with 43 blue underlines in the grid the 7 licensed states were reading as just another accent. The extra pixel is what makes them scan. */ .sws-mega .sws-alpha li:has(.pip--live) { border-bottom: 3px solid var(--pip-live); } .sws-mega .sws-alpha li:has(.pip--pending) { border-bottom-color: var(--pip-pending); } .sws-mega .sws-mega__legend .pip:not(.pip--live):not(.pip--pending) { background: var(--c-accent); } .sws-mega .sws-alpha .sws-full { display: none; } .sws-mega .sws-alpha .sws-ab { display: inline; font-family: var(--font-num); font-weight: 700; letter-spacing: .04em; } /* a state with a page still reads as a link, an unlinked one still greys out */ .sws-mega .sws-alpha > li > a { color: var(--c-brand); text-decoration: none; } /* the WHOLE chip is the tap target, not just the two letters. On a phone a 19px-wide word is well under the ~44px minimum for a touch target; the link now fills its 49x40 chip. .sws-name gets the same treatment so linked and unlinked chips centre identically. */ .sws-mega .sws-alpha > li > a, .sws-mega .sws-alpha > li > .sws-name { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; align-self: stretch; width: 100%; } } /* ============================================================================ SPEC LADDER .spec-ladder ---------------------------------------------------------------------------- The site's one standard component for "several entities, same handful of fields". Replaces the ad-hoc .table-list variants (12 instances, 64 rows). Mobile-first: the stacked form IS the base rule and the two-column field grid is the enhancement at 44em, so nothing here undoes a wider-viewport rule. Two forms: .spec-ladder--ranked ordered operators; gutter numerals, leader in solid gold, everything below hollow. Must be an

    . .spec-ladder an unordered set (payment methods, legal statuses); identical typography, no numerals, no implied rank. Colour is confined to the rules and the numerals; the text field stays achromatic. Figures are tabular. Nothing drops below the body size. ========================================================================== */ .spec-ladder { --sl-gutter: 2.6rem; list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: sl; } .spec-ladder__row { display: grid; grid-template-columns: 1fr; gap: 0 1rem; padding: 0.95rem 0; border-top: 1px solid var(--c-line-soft); } .spec-ladder--ranked > .spec-ladder__row { grid-template-columns: var(--sl-gutter) 1fr; } .spec-ladder--ranked > .spec-ladder__row:first-child { border-top: 2px solid var(--c-warn); } .spec-ladder__row:last-child { border-bottom: 1px solid var(--c-line-soft); } /* gutter numeral: hollow, so it orders without shouting; the leader fills in */ .spec-ladder__n { font-family: var(--font-num); font-weight: 600; font-size: 1.5rem; line-height: 1.15; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1px var(--c-warn); text-stroke: 1px var(--c-warn); } .spec-ladder--ranked > .spec-ladder__row:first-child .spec-ladder__n { color: var(--c-warn); -webkit-text-stroke: 0; text-stroke: 0; } /* the numeral is decorative ordering: the
      already carries the order */ .spec-ladder__n[aria-hidden="true"] { user-select: none; } .spec-ladder__name { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-body); margin: 0 0 0.4rem; color: var(--c-brand); } .spec-ladder__f { display: grid; grid-template-columns: 1fr; gap: 0 0.9rem; padding: 0.35rem 0 0; border-top: 1px dotted var(--c-line); } .spec-ladder__f:first-of-type { border-top: 0; padding-top: 0; } .spec-ladder__k { font-family: var(--font-num); color: var(--c-muted); font-size: var(--fs-body); } .spec-ladder__v { font-variant-numeric: tabular-nums; } @media (min-width: 44em) { .spec-ladder__f { grid-template-columns: 13rem 1fr; align-items: baseline; } } /* ============================================================================ SECTION h3 - CHEVRON ---------------------------------------------------------------------------- Production styled h3 with a margin and nothing else, so subheadings vanished in long prose. Scoped to `.sec > h3` on purpose: that is the ~48 headings sitting in raw paragraphs. Both selectors are direct-child, so a heading nested inside a component can never match: FAQ questions, card heads and review-card titles keep their own treatment. `.entry-content > h3` catches the handful of headings that sit outside any section. The marker is the LITERAL character, never a unicode escape sequence - the transfer pipeline strips backslashes from this file and would break the rule. align-items is flex-start, not center, so the chevron stays on the first line of a heading that wraps instead of floating to its vertical middle. ========================================================================== */ .sec > h3, .entry-content > h3 { display: flex; align-items: flex-start; gap: 0.55em; } .sec > h3::before, .entry-content > h3::before { content: "»"; color: var(--c-warn); font-size: 1.05em; font-weight: 700; line-height: inherit; flex-shrink: 0; } /* ============================================================================ RANK BADGE .rank-badge (ribbon tail) ---------------------------------------------------------------------------- Replaces the older corner-tab badge, which was navy on cyan and therefore invisible now that .bc-head is itself dark navy. This one hangs 14px into the left margin with a folded tail beneath it, so the rank sits OUTSIDE the card and never covers the logo or the brand name. Every property the old rule set is restated here, because both rules carry the same specificity and only the later one wins. Three couplings this needs, all below: - .book-card must release `overflow: hidden` or the tag is clipped away - .bc-head therefore has to round its own top corners - .bc-head needs left padding, or the tag lands on the logo tile ========================================================================== */ .rank-badge { position: absolute; top: 14px; left: -14px; z-index: 3; font-family: var(--font-num); font-weight: 700; font-size: var(--fs-body); line-height: 1; color: var(--c-brand-dk); background: var(--c-warn); padding: 0.5em 0.8em 0.5em 0.7em; border-radius: 2px 3px 3px 0; box-shadow: 0 2px 5px rgba(8, 29, 51, 0.22); } /* the fold, tucked under the tail */ .rank-badge::after { content: ""; position: absolute; left: 0; bottom: -7px; border-width: 0 14px 7px 0; border-style: solid; border-color: transparent #8a6408 transparent transparent; } .rank-badge--top { background: var(--c-accent-lt); color: var(--c-brand-dk); } /* A badge the source printed as a WORD rather than a number (methodology labels two rows Unlisted). Slate instead of gold, because that is a status and not a rank, and the head gutter widens to clear the longer tag. */ .rank-badge--label { background: var(--c-muted); color: #fff; letter-spacing: 0.02em; } .rank-badge--label::after { border-right-color: #39424c; } .rank-badge--top::after { border-right-color: var(--c-accent-dk); } /* the badge is absolutely positioned, so the card must be its containing block; production's .book-card sets no position at all */ .book-card { position: relative; overflow: visible; } .book-card > .bc-head { border-radius: var(--radius) var(--radius) 0 0; } .book-card:has(> .rank-badge) > .bc-head { padding-left: 3.4rem; } /* a word-length tag needs more room than a #N tag; declared after the rule above because both selectors carry the same specificity */ .book-card:has(> .rank-badge--label) > .bc-head { padding-left: 6.9rem; } /* one card in ten has only a What-checks-out column (the source listed no watch-outs); the survivor spans the row instead of half of it */ .bc-ledger:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } /* phones: the content column has no 14px margin to spare, so the tag tucks back to the card edge rather than being clipped by the viewport */ @media (max-width: 40em) { .rank-badge { left: -6px; } .book-card:has(> .rank-badge) > .bc-head { padding-left: 2.9rem; } .book-card:has(> .rank-badge--label) > .bc-head { padding-left: 6.4rem; } } /* ============================================================================ CTA BAND .cta-band (full-height logo panel) ---------------------------------------------------------------------------- Rebuilt from a centred bar into a panelled band. Three shapes exist in the content and all three are handled here: 1. logo + copy + action the full plate (three zones) 2. copy + action no logo, so two zones 3. action only one or more buttons, centred - used by the bands that point at several operators at once The logo panel is white and flush to the edges, which is the point: it gives the eye somewhere to land on a page where every other component is navy. ========================================================================== */ .cta-band { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 0; align-items: stretch; padding: 0; overflow: hidden; background: var(--c-brand-dk); border-radius: var(--radius); } .cta-band__logo { background: #fff; display: grid; place-items: center; padding: 18px 20px; } .cta-band__logo img { max-width: 100%; max-height: 46px; width: auto; height: auto; display: block; } .cta-band__copy { align-self: center; padding: 22px 28px; min-width: 0; } .cta-band__copy p { font-family: var(--font-head); font-size: 1.24rem; line-height: 1.45; color: #fff; margin: 0; } .cta-band__act { align-self: center; display: grid; gap: 0.5rem; padding: 20px 26px 20px 0; justify-items: stretch; } .cta-band__note { color: #7f9cb5; text-align: center; } /* the band's own buttons size to their label rather than filling the column */ .cta-band .aff.btn, .cta-band > a.btn { width: auto; margin-top: 0; white-space: nowrap; font-weight: 700; padding: 0.85em 1.7em; } /* shape 2: no logo panel */ .cta-band:not(:has(> .cta-band__logo)) { grid-template-columns: minmax(0, 1fr) auto; } .cta-band:not(:has(> .cta-band__logo)) .cta-band__copy { padding-left: 26px; } /* shape 3: buttons only, with or without an __act wrapper */ .cta-band:not(:has(> .cta-band__copy)) { grid-template-columns: 1fr; justify-items: center; padding: 20px 24px; gap: 0.6rem; } .cta-band:not(:has(> .cta-band__copy)) .cta-band__act { padding: 0; justify-items: center; grid-auto-flow: row; } @media (max-width: 52em) { /* the :not(:has()) shape rules above outrank a bare .cta-band, so each one has to be restated here or that shape never stacks */ .cta-band, .cta-band:not(:has(> .cta-band__logo)), .cta-band:not(:has(> .cta-band__copy)) { grid-template-columns: 1fr; } .cta-band:not(:has(> .cta-band__logo)) .cta-band__copy { padding-left: 26px; } .cta-band__logo { padding: 14px 20px; } .cta-band__act { padding: 0 22px 22px; justify-items: stretch; text-align: center; } .cta-band:not(:has(> .cta-band__copy)) .cta-band__act { padding: 0; } } /* very small screens: a long affiliate label ("Play slots at Cafe Casino") is wider than the column, so nowrap has to give or the band scrolls sideways */ @media (max-width: 26em) { .cta-band .aff.btn, .cta-band > a.btn { white-space: normal; padding: 0.8em 1.1em; } } /* ============================================================================ PROS / CONS LEDGER .pc-ledger and FACT RECORD .fx-record ---------------------------------------------------------------------------- One framed table holding several entities; inside each, pros sit in the left column and cons in the right. Marks are DRAWN in CSS, not typed. The site's older .checklist uses a literal check glyph, which depends on the rendering font having it - the same trap the h3 chevron hit. Two pseudo elements give a filled disc and a stroke, so the mark is identical everywhere. Colour: teal for affirmative, red for negative. NOT green - green is the affiliate CTA colour on this site and must keep meaning "click here". ========================================================================== */ .pc-ledger { border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: var(--c-bg); margin: var(--sp-lg) 0; } .pc-ledger__grp + .pc-ledger__grp { border-top: 1px solid var(--c-line); } .pc-ledger__title { font-family: var(--font-head); font-weight: 600; font-size: 1.14rem; color: #fff; background: var(--c-brand-dk); margin: 0; padding: 13px 20px; } .pc-ledger__cols { display: grid; grid-template-columns: 1fr 1fr; } .pc-ledger__col { padding: 14px 20px 17px; } .pc-ledger__col + .pc-ledger__col { border-left: 1px solid var(--c-line); } .pc-ledger__lab { font-family: var(--font-num); font-size: var(--fs-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.6rem; } .pc-ledger__col--pro .pc-ledger__lab { color: var(--c-good); } .pc-ledger__col--con .pc-ledger__lab { color: var(--c-bad); } .pc-ledger__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .pc-ledger__list li { position: relative; padding-left: 1.75rem; } /* the disc */ .pc-ledger__list li::before { content: ""; position: absolute; left: 0; top: 0.34em; width: 1.1rem; height: 1.1rem; border-radius: 50%; } /* green disc on the pros, per direction - --c-good is the site's own positive green, kept distinct from --c-cta which the buttons use */ .pc-ledger__col--pro li::before { background: var(--c-good); } .pc-ledger__col--con li::before { background: var(--c-bad); } /* the tick, drawn from two borders */ .pc-ledger__col--pro li::after { content: ""; position: absolute; left: 0.38rem; top: 0.6em; width: 0.26rem; height: 0.52rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* the bar */ .pc-ledger__col--con li::after { content: ""; position: absolute; left: 0.26rem; top: 0.82em; width: 0.58rem; height: 2px; background: #fff; } @media (max-width: 44em) { .pc-ledger__cols { grid-template-columns: 1fr; } .pc-ledger__col + .pc-ledger__col { border-left: 0; border-top: 1px solid var(--c-line-soft); } } /* ---------------------------------------------------------------- fact record */ .fx-record { background: var(--c-paper); border: 1px solid var(--c-line); border-top: 3px solid var(--c-accent); border-radius: var(--radius); padding: 20px 24px; margin: var(--sp-lg) 0; } .fx-record__head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--c-line); } /* the seal: a teal disc with a drawn tick, same construction as the pros mark */ .fx-record__seal { position: relative; flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--c-accent-dk); } .fx-record__seal::after { content: ""; position: absolute; left: 0.56rem; top: 0.34rem; width: 0.38rem; height: 0.72rem; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .fx-record__title { font-family: var(--font-head); font-weight: 600; font-size: 1.16rem; color: var(--c-brand-dk); margin: 0; } .fx-record__date { font-family: var(--font-num); font-size: var(--fs-body); color: var(--c-accent-dk); font-weight: 500; } .fx-record p { margin: 0 0 0.8rem; color: var(--c-muted); } .fx-record p:last-child { margin-bottom: 0; } /* ============================================================================ GUIDE HERO BADGE .hero-badge ---------------------------------------------------------------------------- Occupies the slot the state pages give the state flag, so a guide hero and a state hero read as siblings: same 72px circle, same position beside the at-a-glance label, in the .st-ahead grid (which is unscoped, so it is reused rather than duplicated). One generic mark for all 26 guides, not a per-page illustration. Drawn as a masked SVG data URI, URL-encoded - no backslash for the transfer pipeline to strip, and no dependence on a font carrying a glyph. ========================================================================== */ .hero-badge { width: 72px; aspect-ratio: 1; border-radius: 50%; background: var(--c-brand-dk); color: #fff; display: grid; place-items: center; flex: none; } .hero-badge::before { content: ""; width: 34px; height: 34px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cline x1='10' y1='22' x2='14' y2='22'/%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cline x1='10' y1='22' x2='14' y2='22'/%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'/%3E%3C/svg%3E") center/contain no-repeat; } @media (max-width: 52em) { .hero-badge { width: 56px; } .hero-badge::before { width: 27px; height: 27px; } } /* --- variant: an info mark, for guides where "did you know" overstates. A literal glyph in the serif face, the same construction the money card already uses for content:"$" - no data URI needed. --- */ .hero-badge--info::before { -webkit-mask: none; mask: none; background-color: transparent; width: auto; height: auto; content: "i"; font-family: var(--font-head); font-weight: 700; font-size: 40px; line-height: 1; } @media (max-width: 52em) { .hero-badge--info::before { font-size: 31px; } } /* ============================================================================ STATE CARDS .state-cards / .state-card ---------------------------------------------------------------------------- A 50-state reference list rendered as cards, each headed by the state's own flag in a rounded crop - the same treatment .st-flag gives the hero flag, so the crop is object-fit:cover (library flags run 305-480px wide at a fixed 240 tall and would otherwise distort). Two columns on desktop rather than three: these rows carry full sentences, and three columns squeezed them to four words a line. ========================================================================== */ .state-cards { list-style: none; margin: var(--sp-lg) 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; } .state-card { border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg); overflow: hidden; } .state-card__head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; /* Washington DC has no flag in the synced library, so its header would sit 22px shorter than every other card - this keeps the row height equal. */ min-height: 62px; background: var(--c-paper); border-bottom: 1px solid var(--c-line); } .state-card__flag { width: 38px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; flex: none; background: #fff; border: 1px solid var(--c-state-line); display: block; } .state-card__flag img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .state-card__name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: var(--c-brand-dk); margin: 0; } .state-card__rows { list-style: none; margin: 0; padding: 4px 16px 10px; } .state-card__rows li { display: grid; grid-template-columns: 1fr; gap: 1px 12px; padding: 8px 0; border-top: 1px solid var(--c-line-soft); } .state-card__rows li:first-child { border-top: 0; } .state-card__k { font-family: var(--font-num); font-size: var(--fs-body); color: var(--c-muted); } .state-card__v { font-variant-numeric: tabular-nums; } @media (min-width: 34em) { .state-card__rows li { grid-template-columns: 10.5rem 1fr; align-items: baseline; } } @media (min-width: 60em) { .state-cards { grid-template-columns: 1fr 1fr; } } /* REVIEW CARD .rv-card - a long-form brand review, framed per brand with the verdict in its own tinted strip. Deliberately lighter than .book-card (the compact ranked card, navy head) so two frames on one page do not compete. The closing CTA is a .cta-band inset in the foot - that is where an affiliate button the source stranded mid-sentence ends up. */ .rv-card { border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-bg); margin: var(--sp-lg) 0; overflow: hidden; } .rv-head { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--c-paper); border-bottom: 1px solid var(--c-line); } /* same treatment the ranked card gives an operator logo */ .rv-logo { width: 44px; height: 44px; flex: none; display: block; } .rv-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; background: #fff; border: 1px solid var(--c-line-soft); display: block; } .rv-name { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--c-brand-dk); margin: 0; } /* the verdict paragraph is carried verbatim, its "Verdict." lead included - the lead is only promoted to a label, never reworded or removed */ .rv-verdict { margin: 0; padding: 15px 20px; background: #f2f8fb; border-bottom: 1px solid var(--c-state-line); color: var(--c-ink); font-size: var(--fs-body); } .rv-verdict strong { display: block; font-family: var(--font-num); font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-accent-dk); margin-bottom: 0.15rem; } .rv-body { padding: 18px 20px 2px; } .rv-body > *:last-child { margin-bottom: 16px; } /* a callout or ladder inside a review should not double the framing */ .rv-body > .default-card, .rv-body > .spec-ladder { margin-left: 0; margin-right: 0; } /* the band is inset from the card edges rather than flush to them */ .rv-card > .cta-band { margin: 0 20px 20px; } /* the cards whose source carried no closing sentence get a plain CTA row instead of a band - a full navy band per card would outshout the prose */ .rv-foot { display: flex; justify-content: flex-end; padding: 0 20px 18px; } .rv-foot .aff.btn { width: auto; margin-top: 0; white-space: nowrap; } @media (max-width: 40em) { .rv-head { padding: 11px 15px; gap: 11px; } .rv-verdict { padding: 13px 15px; } .rv-body { padding: 15px 15px 2px; } .rv-card > .cta-band { margin: 0 15px 15px; } .rv-foot { padding: 0 15px 15px; } .rv-foot .aff.btn { width: 100%; text-align: center; } } /* SPEC CARDS .spec-cards/.spec-card - a set of comparable items each carrying a few short specs (coins with min / max / ceiling, methods with fee + time). As a .spec-ladder each item is one full-width row using a quarter of it, so nine of them scroll for a screen and a half. Three up, the name in the head, the figures beneath. Keep .spec-ladder for long values or a single long row. */ .spec-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:var(--sp-lg) 0;padding:0;list-style:none} .spec-card{border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-bg);overflow:hidden} .spec-card__head{padding:10px 15px;background:var(--c-paper);border-bottom:1px solid var(--c-line)} .spec-card__name{margin:0;font-family:var(--font-head);font-weight:700;font-size:1.1rem;line-height:1.25;color:var(--c-brand-dk)} .spec-card__rows{list-style:none;margin:0;padding:4px 15px 9px} .spec-card__rows li{display:grid;grid-template-columns:1fr auto;gap:1px 12px;align-items:baseline;padding:7px 0;border-top:1px solid var(--c-line-soft)} .spec-card__rows li:first-child{border-top:0} .spec-card__k{font-family:var(--font-num);font-size:1rem;color:var(--c-muted)} .spec-card__v{font-variant-numeric:tabular-nums;text-align:right} /* .spec-cards--stacked - the same cards for fields whose VALUE is a short phrase rather than a figure. The default row is a 1fr/auto grid with the value right-aligned, which is right for ",500" and wrong for "Photo ID, both sides of every deposit card, address document" - that wraps into a narrow right column and reads as ragged. Stacked puts the label above its value, both left-aligned, so a phrase gets the full card width. */ .spec-cards--stacked .spec-card__rows li{grid-template-columns:minmax(0,1fr);gap:2px} .spec-cards--stacked .spec-card__v{text-align:left;line-height:1.4} @media (max-width:60em){.spec-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:34em){.spec-cards{grid-template-columns:minmax(0,1fr)}} /* WEIGHT GRID .wt-grid/.wt-card - a spec list whose rows carry ONE field (a bonus contribution chart). As a .spec-ladder those rows repeat one label across the full width and bury the number; here the figure leads. --full = counts in full, --zero = nil weight. Multi-field rows stay .spec-ladder. */ .wt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:var(--sp-lg) 0;padding:0;list-style:none} .wt-card{border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-bg);padding:15px 17px 16px} .wt-card__pct{display:block;font-family:var(--font-head);font-size:2.05rem;font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--c-brand-dk);font-variant-numeric:tabular-nums} .wt-card__name{margin:.5rem 0 0;font-size:1rem;line-height:1.35;color:var(--c-muted)} .wt-card--full{border-color:var(--c-accent);background:#f2f8fb} .wt-card--full .wt-card__pct{color:var(--c-accent-dk)} .wt-card--full .wt-card__name{color:var(--c-ink)} .wt-card--zero .wt-card__pct{color:var(--c-muted)} @media (max-width:52em){.wt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* TIER LADDER .wt-grid--tiers - the same weight card carrying a tier name, the threshold that reaches it, and what the threshold buys. A rewards ladder is a set of comparable rungs, so it is a card grid and not a .spec-ladder; the long "what unlocks" value is why it cannot be .spec-cards, whose value column is right-aligned in a 1fr/auto row. Seven tiers over three columns strand one card, so the entry tier - which also carries by far the longest unlock list - takes the whole first row and the six above it sit three up. */ .wt-card--wide{grid-column:1/-1} .wt-card__tier{margin:0 0 .45rem;font-family:var(--font-head);font-weight:700;font-size:1.1rem;line-height:1.25;color:var(--c-brand-dk)} .wt-card__k{display:block;font-family:var(--font-num);font-size:1rem;line-height:1.3;color:var(--c-muted)} .wt-card__k--unlock{margin-top:.75rem} .wt-grid--tiers .wt-card__pct{font-size:1.5rem;color:var(--c-accent-dk)} .wt-grid--tiers .wt-card__name{margin-top:.2rem;color:var(--c-ink)} @media (max-width:40em){.wt-grid--tiers{grid-template-columns:minmax(0,1fr)}} /* MEGA PANELS Guides #98580, Reviews #98642. Two shapes from one rule set, switched on MMM's .mega-menu-item-has-children: an item WITH children is a column heading over its list, one WITHOUT is styled as a link. Three ids per selector (MMM's own are 2 ids + 2 classes). Everything that REVEALS the panel is gated on li.mega-toggle-on, or GeneratePress's undone left:-99999px leaves an invisible hit-testable copy over the page. Note: menu/README.md */ #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu{box-sizing:border-box;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 26px;padding:24px 28px 20px;background:var(--c-bg);box-shadow:0 10px 26px rgba(8,29,51,.18);border-radius:0 0 var(--radius) var(--radius)} /* a panel of bare links needs neither 4 columns nor MMM's full 960px, and it hugs the right edge so it sits under its own trigger */ /* A panel of bare links (Reviews) is narrow, so unlike the full-width Guides panel it has to sit under its OWN trigger. Right-anchoring it to the menu wrap put it 204px to the right of its link, which read as misaligned. Centred via left:50% + a negative margin, NOT a transform: MMM owns transform for its fade_up effect (translate(0,10px)) and overwriting it kills the open animation. The li needs position:relative so 50% resolves against the item rather than the wrap. Desktop only - the drawer rules below reset all of this. */ @media (min-width:1025px){ #mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-98642{position:relative} #mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-98642>ul.mega-sub-menu:not(:has(>li.mega-menu-item-has-children)){grid-template-columns:repeat(2,minmax(0,1fr));width:min(480px,calc(100vw - 2rem)) !important;left:50% !important;right:auto !important;margin-left:-240px !important} } #mega-menu-wrap-primary #mega-menu-primary li.mega-toggle-on:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu{display:grid} #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item{width:auto !important;float:none !important;min-width:0;padding:0} #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item-has-children>a.mega-menu-link{display:block;margin:0 0 11px;padding:0 0 7px;border-bottom:2px solid var(--c-accent);font-family:var(--font-num);font-size:1rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c-accent-dk);line-height:1.4;background:none} #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item-has-children>a.mega-menu-link .mega-indicator{display:none} #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link,#mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-menu-item-has-children)>a.mega-menu-link{display:block;padding:7px 0;border-bottom:1px solid var(--c-line-soft);color:var(--c-ink);font-size:1rem;font-weight:400;font-family:inherit;text-transform:none;letter-spacing:normal;line-height:1.4;background:none} #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu ul.mega-sub-menu>li.mega-menu-item:last-child>a.mega-menu-link{border-bottom:0} #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:hover,#mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link:focus,#mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-menu-item-has-children)>a.mega-menu-link:hover,#mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-menu-item-has-children)>a.mega-menu-link:focus{color:var(--c-accent-dk);border-left-color:var(--c-accent-dk);text-decoration:underline;background:none} #mega-menu-wrap-primary #mega-menu-primary li.mega-toggle-on:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu ul.mega-sub-menu{position:static !important;left:auto !important;opacity:1 !important;visibility:visible !important;height:auto !important;width:auto !important;float:none !important;overflow:visible;box-shadow:none !important;background:none;display:block;pointer-events:auto} /* trust strip: a 5th-and-last HEADED column, or one given .swsm-foot. It must require children, or a flat panel's 5th link would be swallowed into it. */ #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item-has-children:nth-child(5):last-child,#mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.swsm-foot{grid-column:1/-1;margin-top:16px;padding-top:13px;border-top:1px solid var(--c-line)} #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item-has-children:nth-child(5):last-child>a.mega-menu-link,#mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.swsm-foot>a.mega-menu-link{display:none} #mega-menu-wrap-primary #mega-menu-primary li.mega-toggle-on:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item-has-children:nth-child(5):last-child>ul.mega-sub-menu,#mega-menu-wrap-primary #mega-menu-primary li.mega-toggle-on:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.swsm-foot>ul.mega-sub-menu{display:flex;flex-wrap:wrap;gap:6px 26px} #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item-has-children:nth-child(5):last-child>ul>li>a.mega-menu-link,#mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.swsm-foot>ul>li>a.mega-menu-link{border-bottom:0;border-left:0;padding:0;color:var(--c-muted)} /* MMM's mobile accordion, below its own 1024px breakpoint. MMM leaves the panel absolutely positioned so it shrank to its content (239px in a 335px drawer) and separators stopped short; static + 100% fills the drawer. */ @media only screen and (max-width:1024px){ #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu,#mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu:not(:has(>li.mega-menu-item-has-children)){position:static !important;left:auto !important;right:auto !important;width:100% !important;grid-template-columns:minmax(0,1fr);padding:12px 5px 16px;gap:0;box-shadow:none} #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item{margin-bottom:16px} #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-menu-item-has-children){margin-bottom:0} #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item-has-children>a.mega-menu-link{margin:0 0 11px;padding:0 0 7px} /* the rule in front of each link is a mobile-only marker */ #mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link,#mega-menu-wrap-primary #mega-menu-primary li:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item:not(.mega-menu-item-has-children)>a.mega-menu-link{margin:0;padding:7px 0 7px 11px;border-left:2px solid var(--c-accent-lt)} #mega-menu-wrap-primary #mega-menu-primary li.mega-toggle-on:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.mega-menu-item-has-children:nth-child(5):last-child>ul.mega-sub-menu,#mega-menu-wrap-primary #mega-menu-primary li.mega-toggle-on:is(#mega-menu-item-98580,#mega-menu-item-98642)>ul.mega-sub-menu>li.swsm-foot>ul.mega-sub-menu{flex-direction:column;gap:9px} } /* ============================================================================ Moved here from Appearance > Customize > Additional CSS on 2026-08-28. Generated by menu/build_states_menu_css.py - edit that, not this block. NOTE: a css push does not write this file until an Apply runs on the site. ========================================================================== */ /* ============================================================================ STATES PANEL the A-Z dropdown, built from ORDINARY menu items ---------------------------------------------------------------------------- Replaces the custom-HTML widget. The look is unchanged; what moved is where the markup comes from. Scope: the class swsm-states on the top-level item. Keyed on href, so adding the 51 pages to the menu is the whole job - there is no per-item class to type. ========================================================================== */ /* --- the panel surface: what .sws-mega used to paint ---------------------- */ #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu { box-sizing: border-box; background: var(--c-bg); box-shadow: 0 18px 40px -18px rgba(8, 29, 51, .35); color: var(--c-ink); font-size: 1rem; line-height: 1.6; padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2.2vw, 1.9rem); /* NB: width/left/right are NOT set here - see the gated rule below. Set ungated they cancel the left:-99999px that parks a CLOSED dropdown off-screen, and the closed panel then sits under the header catching the mouse. The Guides panel does not fight its hiding, which is why it behaves and this one did not. */ /* multi-column, not grid: the alphabet flows DOWN each column and continues in the next. A grid runs across and would put Alaska beside Illinois. */ columns: 5; column-gap: 1.75rem; } /* layout + reveal, only while open */ #mega-menu-wrap-primary #mega-menu-primary li.swsm-states.mega-toggle-on > ul.mega-sub-menu { width: min(var(--sws-nav-panel), calc(100vw - 2rem)) !important; max-width: none !important; left: auto !important; right: 0 !important; } /* MMM sizes second-level items as columns (a width:calc plus a float). Here they are 51 rows in a multi-column flow, so both are released. */ #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.mega-menu-item { width: auto !important; float: none !important; min-width: 0; display: flex; align-items: baseline; gap: .55rem; padding: .3rem 0; break-inside: avoid; font-size: 1rem; line-height: 1.45; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.mega-menu-item::before { content: none; } /* --- the link, and the pip in front of it -------------------------------- */ #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { display: inline-flex; align-items: baseline; gap: .55rem; padding: 0; background: none; color: var(--c-brand); font-size: 1rem; font-weight: 400; line-height: 1.45; text-transform: none; letter-spacing: normal; border-bottom: 1px solid transparent; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus-visible { color: var(--c-accent-dk); border-bottom-color: currentColor; background: none; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--pip-none); flex: 0 0 auto; align-self: center; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link .mega-indicator { display: none; } /* --- status: grey is the default, a class overrides it -------------------- */ /* Two rules instead of two lists of href selectors. The point is not the 2 KB: a status change is now a class in the menu editor rather than an edit to this stylesheet, and adding a state needs no css at all. */ #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-live > a.mega-menu-link::before { background: var(--pip-live); } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-pending > a.mega-menu-link::before { background: var(--pip-pending); } /* --- a state with no page yet: a custom link whose URL is #xx ------------ */ #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link[href^="#"], #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link[href*="/#"] { color: var(--c-muted-2); pointer-events: none; cursor: default; border-bottom-color: transparent; } /* --- the two-letter codes: hidden here, swapped in by the drawer --------- */ #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::after { display: none; } /* --- the legend: one item, three keys nested under it -------------------- */ /* Nested rather than three siblings: three items each column-span:all would stack as three full-width rows instead of one row of three. */ #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend { column-span: all; width: auto !important; float: none !important; display: block; margin-top: 1.2rem; padding-top: .85rem; border-top: 1px solid var(--c-line); } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend > a.mega-menu-link { display: none; } /* GATED on open. Ungated, these overrode the closed panel's hidden state for this subtree and left a transparent, hit-testable box under the header - hovering anywhere near the hero opened the dropdown. Same hazard that forced the guides panel to gate its reveal. */ #mega-menu-wrap-primary #mega-menu-primary li.swsm-states.mega-toggle-on > ul.mega-sub-menu > li.sws-legend > ul.mega-sub-menu { position: static !important; left: auto !important; right: auto !important; opacity: 1 !important; visibility: visible !important; height: auto !important; width: auto !important; float: none !important; overflow: visible; box-shadow: none !important; background: none; padding: 0; display: flex !important; flex-wrap: wrap; gap: .5rem 1.5rem; pointer-events: auto; } /* appearance only, safe while closed - it reveals nothing */ #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend > ul.mega-sub-menu { box-shadow: none !important; background: none; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend ul.mega-sub-menu > li.mega-menu-item { width: auto !important; float: none !important; display: inline-flex; align-items: baseline; padding: 0; break-inside: avoid; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend ul.mega-sub-menu > li > a.mega-menu-link { display: inline-flex; align-items: baseline; gap: .5rem; padding: 0; background: none; border-bottom: 0; font-size: 1rem; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--c-muted); pointer-events: none; cursor: default; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend ul.mega-sub-menu > li > a.mega-menu-link::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--pip-none); flex: 0 0 auto; align-self: center; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend ul.mega-sub-menu > li.sws-live > a.mega-menu-link::before { background: var(--pip-live); } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend ul.mega-sub-menu > li.sws-pending > a.mega-menu-link::before { background: var(--pip-pending); } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend ul.mega-sub-menu > li > a.mega-menu-link::after { display: none; } /* --- narrower desktop: fewer columns, exactly as before ------------------ */ @media (max-width: 1180px) { #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu { columns: 4; } } @media (max-width: 950px) { #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu { columns: 3; } } @media (max-width: 720px) { #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu { columns: 2; } } /* --- MMM's mobile drawer, below its own 1024px breakpoint ---------------- */ /* Ported from the widget's own drawer rules: the pip is HIDDEN and licensing status moves onto a coloured bottom border of a bordered chip. 51 full names is a ~2000px scroll; 51 two-letter chips is a few hundred. */ @media (max-width: 1024px) { #mega-menu-wrap-primary #mega-menu-primary li.swsm-states.mega-toggle-on > ul.mega-sub-menu { position: static !important; /* 100%, NOT auto: auto lets this shrink-to-fit, and it wrapped to its widest child - the legend's 191px key - leaving a 231px panel with room for only 5 chips instead of 8. min-width:0 stops any descendant from setting the panel's width again. */ width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; max-width: none !important; left: auto !important; right: auto !important; box-shadow: none; border-radius: 0 !important; padding: var(--space-3, .75rem) var(--space-5, 1.25rem); /* !important on all four: the original put this grid on an inner
        inside the panel, so it never contended. The panel IS that ul now, and MMM's own mobile rule sets display on it - without !important the panel stayed display:block and every chip ran full width. */ columns: auto !important; /* a two-character label leaves room to narrow while the type stays at 1rem, the site's documented minimum. Seven across at 375px. */ grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr)) !important; gap: .3rem !important; } /* display is the one drawer property that must be GATED: forcing grid unconditionally overrode whatever MMM uses to hide the closed panel. The grid-template/gap above are inert until display is grid, so they are safe ungated. Failure direction is a block panel with wide chips - the old cosmetic bug - never an invisible hit target. */ #mega-menu-wrap-primary #mega-menu-primary li.swsm-states.mega-toggle-on > ul.mega-sub-menu { display: grid !important; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.mega-menu-item { justify-content: center; align-items: center; gap: 0; min-height: 2.5rem; padding: 0; border: 1px solid var(--color-border-soft, #e6ecf0); border-radius: 4px; border-bottom: 2px solid var(--c-accent); } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 0; border-bottom: 0; /* zeroed, not removed, so the name stays in the accessibility tree */ font-size: 0; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::before { display: none; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::after { display: inline; font-size: 1rem; font-family: var(--font-num); font-weight: 700; letter-spacing: .04em; } /* status on the border instead of the dot - same classes, which also drops the :has() the href version needed */ #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-live { border-bottom: 3px solid var(--pip-live); } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-pending { border-bottom-color: var(--pip-pending); } /* Verified in the browser: MMM styles the wrap's ::after but never the link's, so nothing competes on `content` here and a single class is enough - keeping the long prefix on 51 rules cost 3.6 KB for nothing. display is still switched by the two-id rules above. */ .swsm-states a[href$="/alabama/"]::after { content: "AL"; } .swsm-states a[href$="/alaska/"]::after { content: "AK"; } .swsm-states a[href$="/arizona/"]::after { content: "AZ"; } .swsm-states a[href$="/arkansas/"]::after { content: "AR"; } .swsm-states a[href$="/california/"]::after { content: "CA"; } .swsm-states a[href$="/colorado/"]::after { content: "CO"; } .swsm-states a[href$="/connecticut/"]::after { content: "CT"; } .swsm-states a[href$="/delaware/"]::after { content: "DE"; } .swsm-states a[href$="/washington-dc/"]::after { content: "DC"; } .swsm-states a[href$="/florida/"]::after { content: "FL"; } .swsm-states a[href$="/georgia/"]::after { content: "GA"; } .swsm-states a[href$="/hawaii/"]::after { content: "HI"; } .swsm-states a[href$="/idaho/"]::after { content: "ID"; } .swsm-states a[href$="/illinois/"]::after { content: "IL"; } .swsm-states a[href$="/indiana/"]::after { content: "IN"; } .swsm-states a[href$="/iowa/"]::after { content: "IA"; } .swsm-states a[href$="/kansas/"]::after { content: "KS"; } .swsm-states a[href$="/kentucky/"]::after { content: "KY"; } .swsm-states a[href$="/louisiana/"]::after { content: "LA"; } .swsm-states a[href$="/maine/"]::after { content: "ME"; } .swsm-states a[href$="/maryland/"]::after { content: "MD"; } .swsm-states a[href$="/massachusetts/"]::after { content: "MA"; } .swsm-states a[href$="/michigan/"]::after { content: "MI"; } .swsm-states a[href$="/minnesota/"]::after { content: "MN"; } .swsm-states a[href$="/mississippi/"]::after { content: "MS"; } .swsm-states a[href$="/missouri/"]::after { content: "MO"; } .swsm-states a[href$="#mt"]::after { content: "MT"; } .swsm-states a[href$="#ne"]::after { content: "NE"; } .swsm-states a[href$="#nv"]::after { content: "NV"; } .swsm-states a[href$="#nh"]::after { content: "NH"; } .swsm-states a[href$="/new-jersey/"]::after { content: "NJ"; } .swsm-states a[href$="#nm"]::after { content: "NM"; } .swsm-states a[href$="/new-york/"]::after { content: "NY"; } .swsm-states a[href$="/north-carolina/"]::after { content: "NC"; } .swsm-states a[href$="#nd"]::after { content: "ND"; } .swsm-states a[href$="/ohio/"]::after { content: "OH"; } .swsm-states a[href$="#ok"]::after { content: "OK"; } .swsm-states a[href$="/oregon/"]::after { content: "OR"; } .swsm-states a[href$="/pennsylvania/"]::after { content: "PA"; } .swsm-states a[href$="/rhode-island/"]::after { content: "RI"; } .swsm-states a[href$="/south-carolina/"]::after { content: "SC"; } .swsm-states a[href$="/south-dakota/"]::after { content: "SD"; } .swsm-states a[href$="/tennessee/"]::after { content: "TN"; } .swsm-states a[href$="/texas/"]::after { content: "TX"; } .swsm-states a[href$="/utah/"]::after { content: "UT"; } .swsm-states a[href$="/vermont/"]::after { content: "VT"; } .swsm-states a[href$="/virginia/"]::after { content: "VA"; } .swsm-states a[href$="/washington/"]::after { content: "WA"; } .swsm-states a[href$="/west-virginia/"]::after { content: "WV"; } .swsm-states a[href$="/wisconsin/"]::after { content: "WI"; } .swsm-states a[href$="/wyoming/"]::after { content: "WY"; } /* The legend keeps its full words and its dots, and stacks: three keys side by side do not fit 375px. MMM's drawer css gives this li a FIXED height (98.5px measured), so its own
          rendered below its box and spilled onto the next menu item - height:auto and a column flex is what puts the content back inside. */ #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend { grid-column: 1 / -1; display: flex !important; flex-direction: column; height: auto !important; float: none !important; position: static !important; overflow: visible; border-left: 0; border-right: 0; border-bottom: 0; min-height: 0; min-width: 0 !important; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend > ul.mega-sub-menu { display: flex !important; flex-direction: column; gap: .35rem; width: 100% !important; height: auto !important; float: none !important; position: static !important; padding: 0; margin: 0; min-width: 0 !important; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend ul.mega-sub-menu > li.mega-menu-item { display: flex !important; width: 100% !important; float: none !important; border: 0; min-height: 0; min-width: 0 !important; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend ul.mega-sub-menu > li > a.mega-menu-link { font-size: 1rem; width: auto; height: auto; min-width: 0 !important; white-space: normal; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend ul.mega-sub-menu > li > a.mega-menu-link::before { display: inline-block; } #mega-menu-wrap-primary #mega-menu-primary li.swsm-states > ul.mega-sub-menu > li.sws-legend ul.mega-sub-menu > li > a.mega-menu-link::after { display: none; } } /* END trm-redesign-studio */