/*
* Supplementary CSS for Solid Series.
* Use sparingly — anything theme.json can express belongs there, not here.
* This file is for brand-system pieces theme.json's schema cannot reach.
*/
/* Diamond hard-offset shadow utility. Brand system's only shadow. */
.has-shadow-diamond {
box-shadow: 5px 5px 0 0 var(--wp--preset--color--ink-black);
}
.has-shadow-diamond-navy {
box-shadow: 5px 5px 0 0 var(--wp--preset--color--solid-navy);
}
.has-shadow-diamond-white {
box-shadow: 5px 5px 0 0 var(--wp--preset--color--mat-white);
}
/* Mono eyebrow — wide tracked all-caps. */
.solid-eyebrow {
font-family: var(--wp--preset--font-family--jetbrains-mono);
font-size: 0.6875rem;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
line-height: 1.4;
}
/* Tight letter-spacing for display headings (theme.json applies -0.02em
globally; this nudges further for the largest sizes). */
.has-display-font-size,
.has-display-xl-font-size {
letter-spacing: -0.04em;
}
/* Solid Series wordmark spacing pattern. */
.solid-wordmark {
font-family: var(--wp--preset--font-family--hanken-grotesk);
font-weight: 900;
letter-spacing: 0.4em;
text-transform: uppercase;
}
/* Style guide layout helpers — only on the style-guide template. */
.page-template-page-style-guide .swatch {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.5rem 1rem 1rem;
border: 1px solid var(--wp--preset--color--ink-black);
min-height: 180px;
font-family: var(--wp--preset--font-family--jetbrains-mono);
font-size: 0.6875rem;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.page-template-page-style-guide .swatch__hex {
margin-top: auto;
font-weight: 700;
}
.page-template-page-style-guide .type-sample {
border-top: 1px solid var(--wp--preset--color--ink-black);
padding-top: 1rem;
margin-top: 1rem;
}
.page-template-page-style-guide .type-sample__meta {
font-family: var(--wp--preset--font-family--jetbrains-mono);
font-size: 0.6875rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--wp--preset--color--ink-black);
opacity: 0.65;
margin-bottom: 0.5rem;
display: block;
}
.page-template-page-style-guide .spacing-bar {
background: var(--wp--preset--color--ink-black);
height: 28px;
display: block;
}
.page-template-page-style-guide .spacing-row {
display: grid;
grid-template-columns: 140px 1fr 80px;
align-items: center;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--wp--preset--color--bone);
font-family: var(--wp--preset--font-family--jetbrains-mono);
font-size: 0.6875rem;
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* =========================================================
* Header nav dropdown — Event Info submenu.
* Wraps the "Event Info" link in .site-header__item-has-sub so the
* absolute-positioned .site-header__sub can drop below it. Submenu
* shows on hover or keyboard focus-within; parent link still routes
* to /event-info/. Whole nav is hidden ≤900px by the rule below, so
* no separate mobile pattern is needed (matches the brief's "do not
* build a hamburger if one doesn't already exist").
* =========================================================*/
.site-header__item-has-sub {
position: relative;
}
.site-header__item-has-sub > a::after {
content: "\25BE";
display: inline-block;
margin-left: 0.3em;
font-size: 0.85em;
line-height: 1;
transition: transform 0.15s ease;
}
.site-header__item-has-sub:hover > a::after,
.site-header__item-has-sub:focus-within > a::after {
transform: rotate(180deg);
}
.site-header__sub {
position: absolute;
top: 100%;
left: -16px;
min-width: 220px;
background: var(--navy-deep);
display: none;
flex-direction: column;
padding: 12px 0;
z-index: 50;
}
.site-header__item-has-sub:hover .site-header__sub,
.site-header__item-has-sub:focus-within .site-header__sub {
display: flex;
}
.site-header__sub a {
display: block;
padding: 10px 20px;
color: var(--white);
font-family: var(--font);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
transition: opacity 0.15s ease;
}
.site-header__sub a:hover,
.site-header__sub a:focus {
opacity: 0.7;
}
/* =========================================================
* Mobile navigation.
* Hamburger + full-width dropdown panel below the header bar.
* Hidden by default; shown at ≤900px (matches the breakpoint where
* desktop links collapse, so the 769–900px range gets a hamburger
* instead of going nav-less). JS (mobile-nav.js) toggles `.nav-open`
* on `.site-header` to open/close the panel and morph the bars into an ×.
* =========================================================*/
.site-header__hamburger {
display: none;
background: transparent;
border: 0;
padding: 8px;
margin: 0;
width: 40px;
height: 40px;
cursor: pointer;
color: var(--navy);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
}
.site-header__hamburger-bar {
display: block;
width: 22px;
height: 2px;
background: currentColor;
border-radius: 1px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-header.nav-open .site-header__hamburger-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .site-header__hamburger-bar:nth-child(2) {
opacity: 0;
}
.site-header.nav-open .site-header__hamburger-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.site-header__mobile {
display: none;
background: var(--navy-deep);
}
.site-header__mobile a {
display: flex;
align-items: center;
min-height: 48px;
padding: 14px 24px;
color: var(--white);
font-family: var(--font);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-sizing: border-box;
}
.site-header__mobile a:last-child {
border-bottom: 0;
}
.site-header__mobile a:hover,
.site-header__mobile a:focus {
background: rgba(255, 255, 255, 0.04);
outline: none;
}
.site-header__mobile-sub {
padding-left: 48px !important;
font-size: 11px !important;
opacity: 0.85;
}
/* =========================================================
* Brief 09 — Mobile nav: collapsible "Event Info" submenu.
* Wraps the Event Info link + a chevron toggle button in a
* single row; sub-items live in a list that starts hidden
* and is toggled by JS via the `hidden` attribute + the
* button's aria-expanded state (mobile-nav.js). The chevron
* rotates 180° when the submenu is open.
* =========================================================*/
.site-header__mobile-row {
display: flex;
align-items: stretch;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header__mobile-row > a {
flex: 1;
border-bottom: 0;
}
.site-header__mobile-sub-toggle {
background: transparent;
border: 0;
border-left: 1px solid rgba(255, 255, 255, 0.08);
margin: 0;
padding: 0 24px;
color: var(--white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
min-width: 56px;
}
.site-header__mobile-sub-toggle:hover,
.site-header__mobile-sub-toggle:focus {
background: rgba(255, 255, 255, 0.04);
outline: none;
}
.site-header__mobile-sub-toggle svg {
display: block;
width: 16px;
height: 16px;
transition: transform 0.2s ease;
}
.site-header__mobile-sub-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.site-header__mobile-sub-list[hidden] {
display: none;
}
@media (max-width: 900px) {
.site-header .site-header__bar {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
gap: 12px !important;
position: relative;
}
.site-header__hamburger {
display: flex;
justify-self: start;
}
.site-header .site-header__bar > a[href="/"] {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.site-header .site-header__bar > a[href="/"] > span:not(.ss-mark) {
display: none;
}
.site-header .site-header__bar > a[href="/"] > span.ss-mark {
width: 40px !important;
height: 40px !important;
}
.site-header .site-header__bar > button[data-modal="registration"] {
justify-self: end;
grid-column: 3;
}
.site-header .site-header__links {
display: none !important;
}
.site-header.nav-open .site-header__mobile {
display: block;
}
}
/* =========================================================
* Homepage responsive overrides.
* Inline styles in section patterns are calibrated for 1440px.
* These media queries collapse them gracefully on smaller viewports.
* =========================================================*/
@media (max-width: 900px) {
.home-hero .home-hero__nav,
.home-hero .home-hero__copy,
.stat-row,
.dual-cards,
.event-detail > div,
.registration,
.home-footer .ss-surface-paper,
.home-footer .ss-surface-black,
.site-header .site-header__bar,
.page-hero {
padding-left: 24px !important;
padding-right: 24px !important;
}
/* Inner page heroes that use 1.3fr / 1fr split layouts. */
.page-hero > div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
/* Header collapse — hide secondary links, keep logo + register. */
.site-header .site-header__links {
display: none !important;
}
.home-hero .home-hero__nav-links {
display: none !important;
}
.home-hero .home-hero__row > div:last-child {
text-align: left !important;
max-width: none !important;
}
.home-hero .home-hero__strip {
grid-template-columns: 1fr 1fr !important;
}
.stat-row .stat-row__grid {
grid-template-columns: 1fr 1fr !important;
}
.stat-row .stat-row__grid > div {
border-right: none !important;
border-bottom: 1px solid var(--line-strong);
}
.dual-cards .dual-cards__grid {
grid-template-columns: 1fr !important;
}
.dual-cards .dual-cards__head {
flex-direction: column !important;
align-items: flex-start !important;
}
.dual-cards .dual-cards__head > div:last-child {
text-align: left !important;
}
.event-detail .event-detail__body {
grid-template-columns: 1fr !important;
}
.event-detail .event-detail__strip {
grid-template-columns: 1fr 1fr !important;
gap: 20px !important;
}
.registration .registration__body {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
.registration .registration__body > div:first-child {
padding-right: 0 !important;
}
.registration .registration__head {
flex-direction: column !important;
align-items: flex-start !important;
}
.registration .registration__head > div:last-child {
text-align: left !important;
}
.home-footer .home-footer__news {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.home-footer .home-footer__cols {
grid-template-columns: 1fr 1fr !important;
gap: 32px !important;
}
.home-footer .home-footer__cols > div:first-child {
grid-column: 1 / -1 !important;
}
}
/* =========================================================
* Hero photo treatment override.
* The default ss-photo-darken gradient is light at the top — fine when
* a photo lives below text, but the home hero stacks nav + eyebrow +
* massive headline + buttons all on top of the photo. Strengthen the
* top + bottom fades so type stays legible without losing the photo
* entirely.
* =========================================================*/
.home-hero .home-hero__zone .ss-photo-darken::after {
background:
linear-gradient(180deg,
rgba(0, 17, 56, 0.78) 0%,
rgba(0, 17, 56, 0.28) 22%,
rgba(0, 17, 56, 0.32) 55%,
rgba(0, 17, 56, 0.92) 100%
);
}
/* Strip photo treatment + tag legibility.
* Default ss-photo-tag is 78% white on a raw photo — invisible on
* light/busy backgrounds. Force darken on strip photos and lift tag
* contrast with a text shadow. */
.home-hero__strip .ss-photo {
position: relative;
}
.home-hero__strip .ss-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 17, 56, 0.55) 100%);
pointer-events: none;
}
.home-hero__strip .ss-photo-tag {
color: #FFFFFF;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 3;
}
/* Subtle text shadow on hero copy so even a busy underlying photo
* doesn't lose the brand voice. */
.home-hero .home-hero__copy .ss-mega,
.home-hero .home-hero__copy .ss-mono,
.home-hero .home-hero__copy .ss-badge {
text-shadow: 0 2px 12px rgba(0, 17, 56, 0.4);
}
.home-hero .home-hero__copy .ss-badge {
text-shadow: none;
}
/* Sponsor logo grid: grayscale by default, full color on hover. */
.sponsors-tier__grid a:hover img,
.sponsors-tier__grid a:hover {
filter: none !important;
}
.sponsors-tier__grid a:hover {
background: var(--wp--preset--color--mat-white) !important;
border-color: var(--wp--preset--color--solid-navy) !important;
}
/* Deep-navy surface override for buttons.
* Default .ss-btn-primary-on-dark casts a --navy-deep offset shadow,
* which is invisible on a --navy-deep surface (MT event-detail).
* Swap to black shadow in that context. */
.ss-surface-navy-deep .ss-btn-primary-on-dark {
box-shadow: 5px 5px 0 0 var(--black);
}
/* =========================================================
* Muay Thai Scrimmage Info — mobile collapse (≤768px).
* Inline grids in patterns/page-mt-scrimmage-info.php are sized for
* desktop. At narrow widths the columns get unreadable, so we stack
* everything and trim section padding for legibility.
* =========================================================*/
@media (max-width: 768px) {
.mt-scrimmage-wristbands,
.mt-scrimmage-schedule,
.mt-scrimmage-equipment,
.mt-scrimmage-duration,
.mt-scrimmage-rules,
.mt-scrimmage-venue,
.mt-scrimmage-reg-cta {
padding-left: 24px !important;
padding-right: 24px !important;
}
/* Venue: shrink Google Maps iframe so the embed reads at small viewports. */
.mt-scrimmage-venue__map iframe {
height: 280px;
}
/* Rules section 2-col card pairs (Allowed/Restricted, Clinch/Sweeps)
* collapse to single column to prevent text overflowing tiny cards. */
.mt-scrimmage-rules__pair {
grid-template-columns: 1fr !important;
}
/* Wristbands & Check-In: 3 cards stack; vertical dividers become horizontal. */
.mt-scrimmage-wristbands__grid {
grid-template-columns: 1fr !important;
}
.mt-scrimmage-wristbands__grid > div {
border-right: 0 !important;
border-bottom: 1px solid var(--line-strong);
}
.mt-scrimmage-wristbands__grid > div:last-child {
border-bottom: 0;
}
/* Schedule of Events: time stacks above title/body. */
.mt-scrimmage-schedule__row {
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 24px 20px !important;
}
/* Equipment & Attire: Adult / Youth articles stack. */
.mt-scrimmage-equipment__grid {
grid-template-columns: 1fr !important;
}
/* Duration of Bouts: 3-col rows stack into single-col blocks. */
.mt-scrimmage-duration__row {
grid-template-columns: 1fr !important;
gap: 6px !important;
padding: 20px !important;
}
/* Event Info dispatch cards: two cards stack to one column, and the
* section padding trims to match the other ≤768px inner-page rules. */
.event-info-hero,
.event-info-cards {
padding-left: 24px !important;
padding-right: 24px !important;
}
.event-info-cards .event-info-cards__grid {
grid-template-columns: 1fr !important;
}
/* =========================================================
* BJJ Event Info — mobile collapse (≤768px).
* Mirrors the mt-scrimmage-* rules above. Shared layouts
* (wristbands 3-col, schedule rows) already collapse via
* the mt-scrimmage-* classes the pattern reuses; these
* cover the BJJ-only sections.
* =========================================================*/
.bjj-eventinfo-hero,
.bjj-eventinfo-intro,
.bjj-eventinfo-venue,
.bjj-eventinfo-wristbands,
.bjj-eventinfo-weighins,
.bjj-eventinfo-schedule,
.bjj-eventinfo-eventday,
.bjj-eventinfo-smoothcomp,
.bjj-eventinfo-spirit {
padding-left: 24px !important;
padding-right: 24px !important;
}
/* Weigh-Ins: when/locations panels stack; locations grid → single column. */
.bjj-eventinfo-weighins__panels {
grid-template-columns: 1fr !important;
}
.bjj-eventinfo-weighins__panels ul {
grid-template-columns: 1fr !important;
}
/* Event Day: paired cards (Match Time / Mat-Side, Athletes / Coaches). */
.bjj-eventinfo-eventday__pair {
grid-template-columns: 1fr !important;
}
/* Smoothcomp: bracket table + solo-bracket card stack; iOS/Android stack. */
.bjj-eventinfo-smoothcomp__brackets,
.bjj-eventinfo-smoothcomp__platforms {
grid-template-columns: 1fr !important;
}
/* Spirit of the Event: parents/coaches cards stack. */
.bjj-eventinfo-spirit__pair {
grid-template-columns: 1fr !important;
}
/* Footer newsletter form: the email 's default min-content
* (placeholder + 22px L/R padding) plus the Subscribe button forces
* the slab to ~406px wide at narrow viewports, causing 16px of body
* horizontal scroll. Letting the children shrink below their
* intrinsic min lets the slab fit. The wrapper is a when
* Mailchimp isn't wired and a