/* ===================================================================== MSM Markets — New Homepage (dev spec, 2026-09-12). Reuses the exact "Friday Night Lights" brand tokens already defined in event-brand-fnl.css's own :root block (--fnl-navy, --fnl-crimson, --fnl-gold, etc., plus the shared --msm-shadow/--msm-font-sans/ --msm-font-display/--msm-radius-* tokens that file also redeclares) -- loaded alongside this file rather than duplicating those hex values a third time. This page's own hero/stats/city-grid/sponsor-strip/footer sections are entirely separate msm-home-* markup, styled only here. As of the "How It Works, What MSM Is/Isn't, New Player Kit Band, Testimonials" dev spec (2026-09-13), this page ALSO requires four real shared partials (public/templates/parts/how-it-works.php, what-msm- is.php, new-player-kit-band.php, testimonials-section.php) verbatim from the Event page -- their own CSS (.msm-how-section, .msm-idea- section, .msm-npk-band, .msm-rev-section, etc.) lives in event-brand- fnl.css and, for base structure (.msm-wrap, .msm-btn, .msm-section), event-preview.css -- both now loaded by homepage-template.php for real, not just for :root tokens. Nothing in either file is .msm-preview- scoped for these specific selectors, so they render correctly under this page's own body.msm-home just as they do under body.msm-preview on Event/Market pages. Standalone document, no theme/Thrive involvement -- same convention as every other public template in this plugin (event-preview-template.php, market-template.php, registration-template.php, confirmation- template.php all render a complete HTML document rather than calling get_header()/get_footer()). ===================================================================== */ * { box-sizing: border-box; } body.msm-home { margin: 0; background: var(--fnl-cream); color: var(--fnl-navy); font-family: var(--msm-font-sans); -webkit-font-smoothing: antialiased; } .msm-home img { max-width: 100%; display: block; } .msm-home a { color: inherit; } .msm-home .msm-home-wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; } /* ---------- header ---------- */ /* This page calls wp_head()/wp_footer() (standalone-document convention shared with every other public template in this plugin), so the active theme's own stylesheet loads here too -- and it has a bare "header { background: rgb(52,52,52); padding-top/bottom: 10px; text-align: center; }" rule plus a bare "header::before { content: ""; }" clearfix, confirmed live via getComputedStyle (same root cause already fixed once this session on the registration confirmation page's own new
). background already wins here on specificity (a class beats a bare element selector), but padding and text-align were unset by this file and so inherited the theme's values by default, silently adding 10px above/below on top of .msm-home-header-row's own 14px -- explicit resets below neutralize all of it regardless of specificity or load order. */ .msm-home-header { background: var(--fnl-navy); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 0; text-align: left; } .msm-home-header::before, .msm-home-header::after { content: none; } .msm-home-header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; } .msm-home-header-row img.msm-home-logo { height: 40px; width: auto; } .msm-home-nav { display: flex; align-items: center; gap: 30px; } .msm-home-nav a, .msm-home-nav button { color: rgba(255, 255, 255, 0.75); font-weight: 700; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; margin: 0; font-family: var(--msm-font-sans); appearance: none; -webkit-appearance: none; } .msm-home-nav a:hover, .msm-home-nav button:hover { color: #fff; } /* "a.msm-home-btn-register" (element + class), not just ".msm-home-btn-register" (class alone) -- this page's own ".msm-home a { color: inherit; }" base reset is a class+element selector too, which out-specifies a bare single-class rule regardless of source order, so the plain class alone silently lost color: #fff to that reset (confirmed live via getComputedStyle: navy text, not white). Tying the element in matches it and wins on source order instead -- the same proven pattern .msm-home-nav a already uses correctly on this same page. */ a.msm-home-btn-register { background: var(--fnl-crimson); color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 12px 22px; border-radius: 2px; /* Literal, matching the mockup exactly -- deliberately tighter than the shared 4px --msm-radius-sm token used elsewhere on this page. */ text-decoration: none; border: none; cursor: pointer; font-family: var(--msm-font-sans); } a.msm-home-btn-register:hover { background: var(--fnl-crimson-dark); } /* ---------- hero ---------- */ .msm-home-hero { position: relative; overflow: hidden; background: var(--fnl-navy-deep); } .msm-home-hero picture, .msm-home-hero img.msm-home-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .msm-home-hero-noimg { background: linear-gradient(160deg, var(--fnl-navy) 0%, var(--fnl-navy-deep) 100%); } .msm-home-hero .msm-home-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6, 24, 47, 0.92) 0%, rgba(6, 24, 47, 0.72) 42%, rgba(6, 24, 47, 0.32) 68%, rgba(6, 24, 47, 0.8) 100%); } .msm-home-hero-inner { position: relative; padding-block: 56px 44px; } .msm-home-hero-copy { max-width: 640px; } .msm-home-eyebrow { font-family: var(--msm-font-display); font-weight: 900; font-size: 11px; letter-spacing: 4px; color: var(--fnl-gold); text-transform: uppercase; } .msm-home-headline { font-family: var(--msm-font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1; letter-spacing: -1px; color: #fff; margin: 14px 0 0; } .msm-home-headline em { font-style: normal; color: var(--fnl-crimson); } .msm-home-sub { margin: 16px 0 0; font-size: 1rem; line-height: 1.5; color: var(--fnl-muted-on-navy); max-width: 46ch; } .msm-home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* "a.msm-home-action-btn" -- same specificity fix as a.msm-home-btn-register above. */ a.msm-home-action-btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--msm-font-sans); font-weight: 700; font-size: 0.88rem; padding: 13px 20px; border-radius: 2px; /* Literal, matching the mockup exactly -- see a.msm-home-btn-register above. */ text-decoration: none; cursor: pointer; border: none; white-space: nowrap; background: var(--fnl-crimson); color: #fff; } a.msm-home-action-btn:hover { background: var(--fnl-crimson-dark); } .msm-home-watch-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 14px; background: none; border: none; padding: 6px 2px; cursor: pointer; font-family: var(--msm-font-sans); font-weight: 700; font-size: 0.86rem; color: var(--fnl-gold); } .msm-home-watch-link:hover { color: #fff; } /* An inline SVG triangle, not the "▶" character it started as -- this page calls wp_head(), which loads WordPress core's own emoji script; that script was silently converting the plain-text triangle character into an client-side (confirmed live: an actual tag in the rendered DOM, not text), and CSS color has no effect on an image's own pixels -- explaining why the "gold" color below was never actually visible. fill="currentColor" on the SVG path correctly picks up this rule's own color: var(--fnl-gold). */ .msm-home-watch-link .msm-home-watch-dot { width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: var(--fnl-gold); display: inline-flex; align-items: center; justify-content: center; flex: none; border: 1px solid rgba(227, 178, 60, 0.55); } /* ---------- stat strip ---------- */ .msm-home-stats { display: grid; grid-template-columns: repeat(4, 1fr); } .msm-home-stat { padding: 22px 14px; text-align: center; } .msm-home-stat.msm-home-on-red { background: var(--fnl-crimson); } .msm-home-stat.msm-home-on-navy { background: var(--fnl-navy); } .msm-home-stat .msm-home-stat-num { font-family: var(--msm-font-display); font-weight: 900; font-size: clamp(1.3rem, 3vw, 1.7rem); } .msm-home-stat.msm-home-on-red .msm-home-stat-num { color: #fff; } .msm-home-stat.msm-home-on-navy .msm-home-stat-num { color: var(--fnl-gold); } .msm-home-stat .msm-home-stat-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; } .msm-home-stat.msm-home-on-red .msm-home-stat-lbl { color: rgba(255, 255, 255, 0.85); } .msm-home-stat.msm-home-on-navy .msm-home-stat-lbl { color: rgba(255, 255, 255, 0.7); } /* ---------- find your city ---------- */ .msm-home-cities { padding-block: 56px 64px; } .msm-home-section-head { max-width: 60ch; margin-bottom: 30px; } .msm-home-section-head .msm-home-eyebrow { color: var(--fnl-crimson); } .msm-home-section-head h2 { font-family: var(--msm-font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem, 3.4vw, 2.3rem); color: var(--fnl-navy); letter-spacing: -0.5px; margin-top: 8px; } .msm-home-section-head p { color: var(--fnl-text-gray); margin-top: 10px; font-size: 0.98rem; } .msm-home-city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } /* Card is a
, not an -- a card-as-anchor wrapping the icons' own tags would be invalid HTML (nested anchors), and a real browser silently closes the outer anchor at the first inner one, breaking the whole card's layout (confirmed by rendering the mockup and inspecting the resulting DOM). Fix: a full-card absolutely- positioned overlay link (.msm-home-city-card-link, z-index 1) beneath the icon links (.msm-home-city-icons a, z-index 2). */ .msm-home-city-card { position: relative; border-radius: var(--msm-radius-sm); overflow: hidden; box-shadow: var(--msm-shadow); aspect-ratio: 4 / 3; background: var(--fnl-navy); } .msm-home-city-card-link { position: absolute; inset: 0; z-index: 1; } .msm-home-city-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .msm-home-city-card .msm-home-city-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11, 28, 58, 0) 40%, rgba(11, 28, 58, 0.92) 100%); } .msm-home-city-card .msm-home-city-body { position: absolute; left: 14px; right: 14px; bottom: 12px; } .msm-home-city-card .msm-home-city-name { font-family: var(--msm-font-display); font-weight: 900; text-transform: uppercase; font-size: 1.05rem; color: #fff; letter-spacing: -0.2px; } .msm-home-city-icons { display: flex; gap: 6px; margin-top: 6px; } .msm-home-city-icons a { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(227, 178, 60, 0.5); position: relative; z-index: 2; color: var(--fnl-gold); text-decoration: none; } .msm-home-city-icons a:hover { background: var(--fnl-gold); color: var(--fnl-navy-deep); } .msm-home-city-icons svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; } /* Title Sponsor placement (dev spec, 2026-09-13) -- lower-right corner of the card, the opposite corner from the city name / sport icons (.msm-home-city-body itself is already position:absolute, so it's already a containing block for this without an extra rule), so the two never compete for space. Primary treatment: the sponsor's dark- background logo sits directly on the photo/scrim, no box, sized clearly larger than a small badge. ".msm-home-city-card img" (the card's own background photo) and this sponsor would otherwise collide on specificity (both class+element, 0,1,1) -- the extra class in this selector (0,2,1) wins unambiguously regardless of source order, the same defensive-specificity convention already used elsewhere on this page (see a.msm-home-btn-register). */ .msm-home-city-sponsor { position: absolute; right: 0; bottom: 0; /* No z-index, no pointer-events override needed: like the plain .msm-home-city-name text beside it, this sits in normal paint order below the transparent full-card .msm-home-city-card-link, so a click here still reaches that link instead of being swallowed by this purely decorative badge. */ } .msm-home-city-card .msm-home-city-sponsor img { position: static; inset: auto; display: block; width: auto; height: auto; max-width: 130px; max-height: 42px; object-fit: contain; } /* Fallback treatment: only the sponsor's standard (non-dark) logo exists -- a small light chip keeps it legible against the photo without forcing every sponsor to have a second asset made first. Deliberately plainer than the no-box primary treatment above. */ .msm-home-city-sponsor.msm-home-city-sponsor-chip { background: var(--fnl-cream); border-radius: var(--msm-radius-sm); box-shadow: var(--msm-shadow); padding: 6px 10px; } .msm-home-city-card .msm-home-city-sponsor-chip img { max-width: 90px; max-height: 24px; } /* Styled hover tooltip (desktop only via :hover -- no hover state exists on touch, so mobile relies on the icon + direct tap-through), replacing the plain browser-default title-attribute tooltip. Pure CSS. Anchored to the SIDE of the icon, not above it (dev spec, 2026-09-14: "Homepage Settings Own Admin Tab, Sport-Icon Distinction, City Tooltip Overlap") -- an above-anchored tooltip landed directly on top of the city name text, confirmed live: the icon row sits only 6px below the name, nowhere near the ~23px of clearance a tooltip that size needs, and a bigger offset just moves which part of the name it covers rather than clearing it. Vertically centered on the icon instead, so it stays in the icon row's own band the whole time and never reaches the name row above it. */ .msm-home-city-icons a { position: relative; } .msm-home-city-icons a::after { content: attr(aria-label); position: absolute; top: 50%; left: calc(100% + 8px); transform: translateY(-50%) translateX(-4px); background: var(--fnl-navy-deep); color: #fff; font-family: var(--msm-font-sans); font-size: 10.5px; font-weight: 700; white-space: nowrap; padding: 5px 9px; border-radius: var(--msm-radius-sm); opacity: 0; pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease; z-index: 3; } .msm-home-city-icons a:hover::after, .msm-home-city-icons a:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* The last icon in the row opens to the LEFT instead, so its tooltip can never clip past the card's own right edge -- the same "more open space to the side than above" reasoning, applied to the one icon that doesn't have open card space to its own right. Also keeps it clear of the Title Sponsor badge (.msm-home-city-sponsor), which is pinned to the opposite (bottom-right) corner of this same body block. */ .msm-home-city-icons a:last-child::after { left: auto; right: calc(100% + 8px); transform: translateY(-50%) translateX(4px); } .msm-home-city-icons a:last-child:hover::after, .msm-home-city-icons a:last-child:focus-visible::after { transform: translateY(-50%) translateX(0); } /* ---------- sponsor strip (dev spec, 2026-09-13) ---------- */ .msm-home-sponsors { padding-block: 6px 60px; } .msm-home-section-head--center { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; } .msm-home-sponsor-strip { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%); } .msm-home-sponsor-track { display: flex; align-items: center; gap: 56px; width: max-content; /* Duration scales with sponsor count (--msm-sponsor-count, set inline per-render in homepage-template.php) rather than a fixed literal -- a constant, comfortable per-logo pace that never needs retuning as Sponsors are added or removed, unlike .msm-rev-ticker's own fixed-duration comment (event-brand-fnl.css) tied to today's exact quote-pool size. */ animation: msm-home-sponsor-scroll calc(var(--msm-sponsor-count, 6) * 4s) linear infinite; } .msm-home-sponsor-strip:hover .msm-home-sponsor-track, .msm-home-sponsor-strip:focus-within .msm-home-sponsor-track { animation-play-state: paused; } @keyframes msm-home-sponsor-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* No card/box behind any logo, deliberately (dev spec) -- normalizing every logo to one shared height is what makes a wide oval mark, a tall stacked mark, and a plain wordmark read as one cohesive lineup, without needing a uniform card treatment to paper over how differently shaped real sponsor logos are. */ .msm-home-sponsor-logo { flex: none; display: flex; align-items: center; justify-content: center; height: 100px; } .msm-home-sponsor-logo-img { display: block; height: 100%; width: auto; max-width: 180px; object-fit: contain; } .msm-home-sponsor-cta { text-align: center; margin-top: 28px; font-size: 0.9rem; color: var(--fnl-text-gray); } .msm-home-sponsor-cta a { color: var(--fnl-crimson); font-weight: 700; text-decoration: none; } .msm-home-sponsor-cta a:hover { text-decoration: underline; } /* A visitor with this preference sees every Sponsor once, laid out as a plain wrapped row, not a scrolling track frozen mid-motion -- so the animation is fully removed AND the duplicated second half (present only to make the loop's own reset invisible while it's moving) is hidden outright, rather than just pausing the track in place. */ @media (prefers-reduced-motion: reduce) { .msm-home-sponsor-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } .msm-home-sponsor-strip { overflow: visible; -webkit-mask-image: none; mask-image: none; } .msm-home-sponsor-dupe { display: none; } } @media (max-width: 560px) { .msm-home-sponsor-strip { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); } .msm-home-sponsor-track { gap: 36px; } .msm-home-sponsor-logo { height: 70px; } } /* ---------- footer ---------- */ .msm-home-footer { background: var(--fnl-navy-deep); padding-top: 52px; } .msm-home-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; } .msm-home-footer-brand img { height: 34px; width: auto; margin-bottom: 16px; } .msm-home-footer-tagline { font-size: 0.92rem; line-height: 1.6; color: var(--fnl-muted-on-navy); max-width: 34ch; margin: 0; } .msm-home-footer-social { display: flex; gap: 10px; margin-top: 18px; } .msm-home-footer-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; text-decoration: none; } .msm-home-footer-social a:hover { background: var(--fnl-gold); color: var(--fnl-navy-deep); border-color: var(--fnl-gold); } .msm-home-footer-social svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; } .msm-home-footer-contact { margin: 16px 0 0; font-size: 0.88rem; color: var(--fnl-muted-on-navy); } .msm-home-footer-contact a { color: var(--fnl-muted-on-navy); text-decoration: underline; } .msm-home-footer-contact a:hover { color: #fff; } .msm-home-footer-col h3 { font-family: var(--msm-font-sans); font-weight: 700; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; margin: 0 0 14px; } .msm-home-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } /* "button" alongside "a" -- the Company column's "New to MSM?" item is a