/* ============================================================================ EASTON · Location-page redesign (Arvada design, 2026-07-02) — the small CSS remainder inline styles can't express (media-query-responsive grids + press affordances). EVERY rule is scoped under `.eb-loc-hero` or `.eb-loc-band` (NO bare html/body rules — this stylesheet loads on GeneratePress-rendered location pages, so a bare-tag rule would bleed into the whole page). The section markup is otherwise 100% inline-styled, so it is immune to GeneratePress + header.css and cannot leak out. ============================================================================ */ /* — Full-bleed: break the hero + every brand band OUT of GeneratePress's contained content area (`.inside-article` 30px padding inside the max-width `.container`), so they span edge-to-edge like the home hero. `--eb-vw` is set by JS to the scrollbar-excluded viewport width, which avoids the `100vw` vertical-scrollbar overshoot; it falls back to `100vw` with no JS. --------------------------- */ .eb-loc-hero, .eb-loc-band { width: var(--eb-vw, 100vw); margin-left: calc(50% - var(--eb-vw, 100vw) / 2); margin-right: calc(50% - var(--eb-vw, 100vw) / 2); } /* Vertical flush (Execution Brief 2026-07-02 §A). The bands break out horizontally above, but the GeneratePress content chrome still boxed them vertically: the `.inside-article` 40px padding + the `.site-main` 20px top/bottom margins pushed the hero ~30px below the header and the final CTA ~30px above the footer, and the mobile sticky-CTA reserve (`body` padding-bottom:72px) left dead space below the footer on desktop. This sheet AND the `.easton-loc-page` body class both load ONLY on academy pages, so we neutralise that chrome directly — no fragile negative-margin math that breaks when GP's padding changes at a breakpoint. */ .easton-loc-page .site-main { margin-top: 0; margin-bottom: 0; } .easton-loc-page .inside-article { padding-top: 0; padding-bottom: 0; } /* Desktop shows no mobile sticky CTA, so its body reserve is pure dead space below the footer — reclaim it (kept on mobile, where the fixed bar needs the room). */ @media (min-width: 769px) { .easton-loc-page.easton-has-sticky-cta { padding-bottom: 0; } } /* — Scoped reset boundary — nothing inherits in, nothing leaks out ---------- */ .eb-loc-hero, .eb-loc-band, .eb-loc-hero *, .eb-loc-band *, .eb-loc-hero *::before, .eb-loc-hero *::after, .eb-loc-band *::before, .eb-loc-band *::after { box-sizing: border-box; } .eb-loc-hero { color: #0d0d0c; font-family: 'Barlow', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Neutralise bare-tag UA/GP defaults so they can't show through a gap. */ .eb-loc-hero h1, .eb-loc-hero h2, .eb-loc-hero h3, .eb-loc-hero h4, .eb-loc-hero p, .eb-loc-hero figure, .eb-loc-hero blockquote, .eb-loc-band h1, .eb-loc-band h2, .eb-loc-band h3, .eb-loc-band h4, .eb-loc-band p, .eb-loc-band figure, .eb-loc-band blockquote { margin: 0; } .eb-loc-hero a, .eb-loc-band a { color: inherit; text-decoration: none; } .eb-loc-hero button { font: inherit; color: inherit; background: none; border: 0; } .eb-loc-hero img, .eb-loc-band img { display: block; max-width: 100%; } .eb-loc-hero ul, .eb-loc-hero ol { margin: 0; padding: 0; list-style: none; } /* — Artboard switch: one hero tree per breakpoint (faithful per-artboard) ---- */ .eb-loc-hero .eb-desktop { display: block; } .eb-loc-hero .eb-mobile { display: none; } @media (max-width: 768px) { .eb-loc-hero .eb-desktop { display: none; } .eb-loc-hero .eb-mobile { display: block; max-width: 480px; margin-inline: auto; } } /* — Button / card press hooks ---------------------------------------------- */ .eb-loc-hero .ebh-btn, .eb-loc-band .ebh-btn { transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; } .eb-loc-hero .ebh-btn:hover, .eb-loc-band .ebh-btn:hover { filter: brightness(1.04); transform: translateY(-1px); } .eb-loc-hero .ebh-btn:active, .eb-loc-band .ebh-btn:active { transform: translateY(0); } .eb-loc-hero .ebh-card { transition: transform .18s ease, box-shadow .18s ease; } .eb-loc-hero .ebh-card:active { transform: translateY(0); } /* Secondary hero CTA — the "Schedules" text/ghost link (Execution Brief 2026-07-03). Clearly subordinate to the filled red Book button; tints red on hover/focus, and the mobile outline variant's border tints with it. The underline lives on the label. */ .eb-loc-hero .ebh-schedlink { transition: color .15s ease, border-color .15s ease; } .eb-loc-hero .ebh-schedlink__t { transition: border-color .15s ease; } .eb-loc-hero .ebh-schedlink:hover { color: #f04137; border-color: rgba(240,65,55,0.5); } .eb-loc-hero .ebh-schedlink:hover .ebh-schedlink__t { border-bottom-color: currentColor; } .eb-loc-band .ebh-card { transition: transform .18s ease, box-shadow .18s ease; } .eb-loc-band .ebh-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(13,13,12,0.06), 0 34px 60px -38px rgba(13,13,12,0.6); } .eb-loc-band .ebh-card:active { transform: translateY(0); } /* A team card with no destination (the GM card; an unfilled seat — Execution Brief 2026-08-14 §3) renders as a
, so it already has no pointer and no tab stop. The hover LIFT above is a :hover rule and cannot be inlined away on a band that is otherwise 100% inline-styled, and a card that rises under the cursor and then does nothing is a false affordance — so it is cancelled here, on the one class that marks those cards. */ .eb-loc-band .eb-loc-coach--static:hover { transform: none; box-shadow: 0 1px 0 rgba(13,13,12,0.06), 0 24px 48px -38px rgba(13,13,12,0.5); } .eb-loc-band a:focus-visible, .eb-loc-hero a:focus-visible { outline: 3px solid #f04137; outline-offset: 3px; border-radius: 3px; } /* — Hero arena: program-image crossfade on toggle + capped hover zoom ------- */ @keyframes ebLocFade { from { opacity: 0; } to { opacity: 1; } } .eb-loc-hero .i-fade { animation: ebLocFade .35s ease; } .eb-loc-hero .eb-arena-img { transition: transform .42s cubic-bezier(.4,0,.2,1); transform-origin: 50% 50%; } .eb-loc-hero .eb-arena-link:hover .eb-arena-img, .eb-loc-hero .eb-arena-link:focus-visible .eb-arena-img { transform: scale(1.018); } .eb-loc-hero .eb-arena-link:focus-visible { outline: 3px solid #fff; outline-offset: -3px; } .eb-loc-hero .ebh-tab:focus-visible { outline: 3px solid #f04137; outline-offset: 3px; border-radius: 2px; } /* Hide the horizontal rail's scrollbar (descendants only). */ .eb-loc-hero .ebh-rail::-webkit-scrollbar { width: 0; height: 0; } /* — Reduced motion --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .eb-loc-hero .ebh-btn, .eb-loc-band .ebh-btn, .eb-loc-hero .ebh-card, .eb-loc-band .ebh-card, .eb-loc-hero .i-fade, .eb-loc-hero .eb-arena-img { transition: none !important; animation: none !important; } .eb-loc-hero .eb-arena-link:hover .eb-arena-img, .eb-loc-hero .eb-arena-link:focus-visible .eb-arena-img { transform: none !important; } } /* ============================================================================ REDESIGN BAND GRIDS (inc/location-stack.php + inc/location-sections.php). Section markup is otherwise 100% inline-styled; these carry only the bits inline styles can't express: media-query-responsive grids. All scoped under `.eb-loc-band`. ============================================================================ */ /* §1.5 Trust bar — REVERTED to the homepage slim `eb_trust()` band (§B), which carries its own flex layout inline; no grid rule needed here anymore. */ /* §2 Programs — equal adult cards. Count-driven so a JJ-only city (1 card) does not stretch to a banner, while a 3-program city is a clean 3-up. */ .eb-loc-prog-grid { display: grid; gap: 24px; align-items: stretch; } .eb-loc-prog-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); } .eb-loc-prog-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); max-width: 800px; } .eb-loc-prog-grid[data-count="1"] { grid-template-columns: minmax(0, 460px); } .eb-loc-prog-card { height: 100%; } /* Kids row — up to 2 cards, left-aligned, capped so a single card stays card-sized. */ .eb-loc-kids-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 800px; } /* §2 THE 50/50 DESKTOP PROGRAM ROW (Execution Brief 2026-09-15b §B). Emitted by easton_loc_programs() for ONE academy — Lowry, where a single adult card and a single kids card sat in two stacked full-width sections and left most of both rows empty. Below the breakpoint there is deliberately NO rule at all: the two columns are plain block divs and the page stacks exactly as it always has, which is a smaller promise to keep than a one-column grid that merely computes the same. The breakpoint is the complement of the ≤1024 tablet query above, so "desktop" means the same width here as it does everywhere else in this file. */ @media (min-width: 1025px) { .eb-loc-band .eb-loc-prog-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; /* the .eb-loc-about two-column gutter, reused */ /* STRETCH, not start (Execution Brief 2026-09-15c §2). `start` left each column at its own content height, so there was no common bottom edge for the cards to be pushed down to. Stretch gives both columns the taller one's height, which is what makes the `margin-top:auto` below resolve to a real distance. */ align-items: stretch; } /* Each column becomes a flex column so its card grid can be pushed to the bottom. The two heads are NOT the same height — the adult intro wraps to three lines and the kids intro to two, a 28px difference — so aligning the cards by aligning the text above them is not available; the cards have to be positioned from the bottom of equal-height columns instead. */ .eb-loc-band .eb-loc-prog-split__col { display: flex; flex-direction: column; } /* …and so does the kids block's own wrapper, which sits between the column and the grid and would otherwise swallow the auto margin in a block formatting context (`margin-top:auto` resolves to 0 there, not to the free space). `flex:1` makes the wrapper fill the stretched column so the space is actually inside it to give. */ .eb-loc-band .eb-loc-prog-split__col--kids > div { display: flex; flex-direction: column; flex: 1; } /* The card fills its column. Both caps below exist to stop ONE card ballooning across a full-width row; inside a half-width column that job is already done, and leaving them on would reproduce the empty row the split exists to remove. */ .eb-loc-band .eb-loc-prog-split .eb-loc-prog-grid[data-count="1"], .eb-loc-band .eb-loc-prog-split .eb-loc-kids-grid { grid-template-columns: minmax(0, 1fr); max-width: none; /* The second half of the alignment. Both grids carry an inline `margin-top:8px` (hence !important — this band is 100% inline-styled), and auto replaces it with whatever space is left at the top of the stretched column. In the TALLER column there is none to take, so its card does not move at all; the shorter column's card drops the 28px difference and lands on the same line. The 8px gap under the head survives on the column that sets the height, because the head's own 40px bottom margin is what separates them there. */ margin-top: auto !important; } /* The equal-height rule the alignment needs. A kids card's photo is 200px and an adult card's is 220px — `$kids ? 200 : 220`, inline, in easton_loc_program_card(), which is the ONLY reason the two cards differ in height (both bodies measure 200px and both intros wrap to two lines). Bottom-aligned cards of unequal height have unequal tops, so the photos have to agree before the tops can. It is fixed here and not in PHP because that inline value is shared by every program card on all nine location pages, and those eight others must stay byte-identical. */ .eb-loc-band .eb-loc-prog-split .eb-loc-kids-grid .eb-loc-prog-card > div:first-child { height: 220px !important; } /* The kids block's 64px margin + hairline + 56px padding are the STACKED layout's divider between two sections that follow one another. Side by side they would draw a rule above the right-hand column only. They are inline styles on the element (this band is 100% inline-styled), so !important is the only thing that reaches them — the same idiom as the reviews-card overrides further down this file. */ .eb-loc-band .eb-loc-prog-split__col--kids > div { margin-top: 0 !important; border-top: 0 !important; padding-top: 0 !important; } } /* §2b/§F Meet the [City] Team. All team members render as equal coach cards in a count-driven grid (Execution Brief round 3 §2: the GM is the LAST card, same treatment as a coach — no featured/highlighted leadership card). THE COUNT IS NO LONGER BOUNDED (Execution Brief 2026-09-06 §2). These rules used to enumerate data-count 1 through 6 and stop, because 6 was arithmetically the most the band could hold: five programs plus the GM. Wave 5 made the band a ROSTER — one card per person, N cards — and Boulder immediately rendered ten. data-count="10" matched no rule, grid-template-columns fell back to `none`, and the band silently became a single column of ten 1400px-tall cards, ~15,500px of page. Nothing in the MARKUP was wrong, which is why this is a CSS bug that a DOM assertion cannot see and only a rendered measurement catches. So 3-up is now the DEFAULT and the enumerated rules are only the narrow cases that genuinely need a max-width (1 and 2 cards, which would otherwise stretch). Any count from 3 upward gets three columns and wraps, at every breakpoint. */ .eb-loc-coach-grid { display: grid; gap: 24px; align-items: stretch; grid-template-columns: repeat(3, 1fr); } .eb-loc-coach-grid[data-count="1"] { grid-template-columns: minmax(0, 360px); } .eb-loc-coach-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); max-width: 760px; } /* §3 Class schedule — on-tone fix (redesign §3): the embedded schedule must inherit the cream band and lose its stray left/right gutters (it was rendering off-grey with side spacing). Scoped to the schedule band so the standalone /schedule/ page is untouched. */ .eb-loc-band--schedule .eb-sched, .eb-loc-band--schedule .eb-sched--embedded { background: transparent !important; } /* Anchor target for the hero's secondary "Schedules" CTA (#schedule). The section's own 96px top padding already clears the sticky header; this small margin keeps the band's top edge off the very top of the scrollport on the jump. */ .eb-loc-band--schedule { scroll-margin-top: 24px; } /* Higher specificity than schedule.css `.eb-sched--embedded .eb-sched__wrap` (720px) so the embedded schedule fills the band and loses its stray L/R gutters. */ .eb-loc-band--schedule .eb-sched--embedded .eb-sched__wrap { max-width: 1200px; margin: 0 auto; padding: 24px 40px 0; } /* §G — the scoped `.eb-loc-band a { color: inherit }` reset (above) has higher specificity than schedule.css's `.eb-sched-cta__btn { color:#fff }`, so it was dragging the red CTA's label to ink (black-on-red, unreadable). Restore white. */ .eb-loc-band--schedule .eb-sched-cta__btn { color: #fff; } /* §4 Proof / reviews — the FULL-BLEED edge-to-edge photo band that still rides under the reviews band on the location page + the hubs. (`.eb-loc-proof-grid` is the retired copy+rotator split; kept only until no surface references it.) */ .eb-loc-proof-grid { display: grid; grid-template-columns: 1fr 0.78fr; gap: 64px; align-items: center; } .eb-loc-proof-band { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 300px; gap: 4px; } /* — REVIEWS BAND (Execution Brief 2026-08-09, Variant A) -------------------- The shared proof atom on spokes, location pages and program hubs (inc/reviews-band.php). Everything about a card is inline-styled; the only thing that needs a stylesheet is the column count, which is the one thing inline styles cannot express. Featured card LEFT, two stacked RIGHT, collapsing to one column at the mockup's 900px. The stacked cards keep their natural height — the featured card sets the row, exactly as the approved reference does. ------------------------- */ /* Both columns fill the row, and every card CENTRES its own content. The mockup gets away with `flex:1` on the quote because its featured quote is its longest, so the featured card sets the height. Real curation is the other way round about half the time (17 of 35 spoke groups have a featured review shorter than the two stacked side cards — Arvada BJJ is 57 words beside two 60-word cards), and either a stretched card with a growing quote (a 250px void above the attribution row) or natural heights (a 250px ragged bottom) looks like a bug. Centred content in a filled card does not. */ .eb-loc-band .eb-reviews { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } .eb-loc-band .eb-reviews__col { display: flex; flex-direction: column; gap: 24px; } .eb-loc-band .eb-reviews__col > .eb-reviews__card { flex: 1 1 auto; } .eb-loc-band .eb-reviews__card { justify-content: center; } /* A one-card band (a group with a single curated review) keeps a readable measure instead of stretching one card across the whole 1200 container. */ .eb-loc-band .eb-reviews[data-count="1"] { grid-template-columns: minmax(0, 720px); } /* §1 Areas We Serve — cream copy + chips (LEFT) / black GBP panel (RIGHT). The panel folds in the retired Visit-Us map + NAP + hours + CTA + socials. The panel is given the dominant width so its own map|info split reads as two even halves. */ .eb-loc-areas { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.4fr); gap: 48px; align-items: start; } .eb-loc-areas__copy { align-self: center; } /* The GBP panel itself is a MAP | INFO split (brief 2026-07-03 §1): real Google map on the LEFT half, the info column (NAP · hours · CTA · socials) on the RIGHT half — side-by-side on desktop, stacked only on mobile. The map cell stretches to the info column's height (align-items: stretch) and the iframe absolute-fills it. */ .eb-loc-areas__panel { align-self: start; } .eb-loc-gbp { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; } .eb-loc-gbp__map { min-height: 260px; } .eb-loc-gbp__map iframe { display: block; } /* §2a About Easton [City] (Execution Brief 2026-07-03) — image (LEFT) / content (RIGHT) two-column, reusing the Areas split idiom. A ~4:5 portrait interior/training photo + prose + a red-check feature checklist. Sits between the Kids-programs band and Meet-the-[City]-Team. `align-items: center` centres the shorter column against the taller one. */ .eb-loc-about { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; } /* §2 Locations "Not your closest?" — the homepage photo-card treatment (brief 2026-07-03 §2 follow-up REVERSES the round-3 map+list). A tight 3-up card grid of the 9 academies (photo + city + address + gold stars + real review count), every sibling a crawlable ``; the current academy is a non-link card badged "You are here". The schematic Front-Range hover map is gone. */ .eb-loc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* The current-academy card is not a link — suppress the shared card hover-lift. */ .eb-loc-card--here { cursor: default; } .eb-loc-band .eb-loc-card--here:hover { transform: none; box-shadow: 0 1px 0 rgba(13, 13, 12, 0.06), 0 24px 48px -38px rgba(13, 13, 12, 0.5); } /* The reused quote-rotator pagination dots render as a 3px visual bar (too small a tap target, WCAG 2.5.8). Grow the BUTTON box to 24px, clip the bar to the content box so the visible bar stays ~4px while the tap area is 24px. */ .eb-loc-band [data-eb-dot] { box-sizing: border-box !important; min-width: 24px !important; min-height: 24px !important; padding: 10px 0 !important; background-clip: content-box !important; } /* — Tablet ----------------------------------------------------------------- */ @media (max-width: 1024px) { .eb-loc-prog-grid[data-count="3"] { grid-template-columns: repeat(2, 1fr); } .eb-loc-coach-grid { grid-template-columns: repeat(2, 1fr); } /* §2 Locations cards → 2-up (matches the homepage grid breakpoint). */ .eb-loc-cards { grid-template-columns: repeat(2, 1fr); } /* §1 GBP panel map|info stacks on tablet (map above info) so the info column never gets cramped while the outer copy|panel split is still side-by-side. */ .eb-loc-gbp { grid-template-columns: 1fr; } .eb-loc-gbp__map { height: 240px; min-height: 0; } } /* — Reviews band: the mockup's own collapse point, ahead of the page breakpoints. */ @media (max-width: 900px) { .eb-loc-band .eb-reviews, .eb-loc-band .eb-reviews[data-count="1"] { grid-template-columns: minmax(0, 1fr); } } /* — Mobile ----------------------------------------------------------------- */ @media (max-width: 768px) { .eb-loc-proof-grid { grid-template-columns: 1fr; gap: 32px; } /* Reviews cards: 34px of inline card padding costs a third of a 390 viewport, and the featured card's 20px quote runs ~30 characters a line inside it. Both are inline styles on the element, so both need the override. */ .eb-loc-band .eb-reviews, .eb-loc-band .eb-reviews__col { gap: 16px; } .eb-loc-band .eb-reviews__card { padding: 26px 22px 22px !important; } .eb-loc-band .eb-reviews__card--featured > p { font-size: 18px !important; } .eb-loc-proof-quote { border-left: 0 !important; padding-left: 0 !important; } /* §1 Areas stacks: copy + chips first, then the black GBP panel below (the panel's own map|info split already stacks from the ≤1024 tablet breakpoint above). */ .eb-loc-areas { grid-template-columns: 1fr; gap: 36px; } /* §2a About stacks: the portrait photo first, then the copy + checklist below. Cap the photo width so the 4:5 frame does not tower on a narrow viewport. */ .eb-loc-about { grid-template-columns: 1fr; gap: 32px; } .eb-loc-about__media { max-width: 420px; justify-self: center; width: 100%; } /* §2 Locations cards stack 1-up on mobile (matches the homepage grid). */ .eb-loc-cards { grid-template-columns: 1fr; gap: 20px; } .eb-loc-band__inner { padding-left: 22px !important; padding-right: 22px !important; } .eb-loc-band--schedule .eb-sched--embedded .eb-sched__wrap { padding-left: 22px; padding-right: 22px; } } @media (max-width: 640px) { .eb-loc-prog-grid, .eb-loc-prog-grid[data-count="1"], .eb-loc-prog-grid[data-count="2"], .eb-loc-prog-grid[data-count="3"], .eb-loc-kids-grid, .eb-loc-coach-grid, .eb-loc-coach-grid[data-count="1"], .eb-loc-coach-grid[data-count="2"] { grid-template-columns: 1fr; max-width: none; } .eb-loc-proof-band { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; } } /* ============================================================================ PROGRAMMATIC INTERNAL LINKING (Execution Brief 2026-09-09) — the keyword link rows (§4.1 city index · §4.2 siblings · §4.3 same discipline near you) and the breadcrumb strip (§4.4). Same scoping contract as everything above: every rule sits under `.eb-loc-band` (which the breadcrumb `