/*!
* Summit Taekwondo Lugano — design system
* @layer tokens, base, layout, components, sections, utilities
*/
@layer tokens, base, layout, components, sections, utilities;
/* =========================================================================
TOKENS
========================================================================= */
@layer tokens {
:root {
/* Colors — mirror theme.json's palette so non-block markup (header,
footer, forms, patterns' custom classNames) can use the same values. */
--color-base: #FFFFFF;
--color-ink: #111111;
--color-gray-700: #4A4A4A;
--color-gray-100: #F5F6F7;
--color-line: #E4E6E8;
--color-blue: #207CB0;
--color-blue-hover: #1A6591;
--color-red: #C9242B;
--color-red-hover: #A31E26;
--color-yellow: #EABE28;
--color-green: #0E9546;
--color-blue-text: #1B6A97;
--color-green-text: #0B7538;
--color-yellow-text: #8F6E0A;
--color-navy-dark: #12303F;
--color-error: #B71C22;
--font-display: 'September-Heavy', 'Arial Black', 'Helvetica Neue', sans-serif;
--font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--fs-sm: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
--fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
--fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
--fs-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
--fs-2xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
--fs-display: clamp(2.25rem, 1.4rem + 4.5vw, 4.25rem);
--space-10: 0.25rem;
--space-20: 0.5rem;
--space-30: 0.75rem;
--space-40: 1rem;
--space-50: 1.5rem;
--space-60: clamp(2rem, 1.6rem + 2vw, 3rem);
--space-70: clamp(3rem, 2.2rem + 4vw, 5rem);
--space-80: clamp(4rem, 3rem + 5vw, 7rem);
--container-wide: 1200px;
--container-narrow: 720px;
--container-pad: clamp(1.25rem, 4vw, 2.5rem);
--header-h: 84px;
--radius: 8px;
}
@media (max-width: 39.99em) {
:root { --header-h: 60px; }
}
}
/* =========================================================================
BASE
========================================================================= */
@layer base {
@font-face {
font-family: 'September-Heavy';
src: url('../fonts/september-heavy.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Figtree';
src: url('../fonts/figtree-var.woff2') format('woff2-variations');
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 16px);
/* Reserves the scrollbar gutter consistently so viewport-edge insets
(the mobile drawer's `inset: … 0 0 0`) size against the same box
the page actually renders in — without this, browsers with a
space-reserving scrollbar (classic Windows Chrome/Firefox) make
fixed 0/0 insets ~15-20px wider than the visible page.
NOT overflow-x:hidden here — on the root element that
breaks .site-header's `position: sticky` in most engines (it stops
being sticky relative to the viewport). That guard lives on body. */
scrollbar-gutter: stable;
}
body {
margin: 0;
max-width: 100%;
overflow-x: hidden;
background: var(--color-base);
color: var(--color-ink);
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, picture, video, svg { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
figure { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.6em; font-weight: 400; }
h1, h2 {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.01em;
font-weight: 400;
line-height: 1.08;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-2xl); }
h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xl); line-height: 1.3; }
h4, h5, h6 { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-lg); line-height: 1.35; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a {
color: var(--color-ink);
text-underline-offset: 0.15em;
text-decoration-thickness: 1px;
transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
/* Hover = blue highlight chip with WHITE text, sitewide (owner: nothing
may hover to red/dark text; white-on-color everywhere, matching the
nav treatment). :where() keeps specificity at zero so components with
their own hover styling stay in charge; the :not() list excludes the
contexts that must keep their own treatment (buttons, nav, social,
dark footer/sections, admin bar, logo and skip links).
color !important: see the note at the top of @layer components — WP's
unlayered global link-color rule otherwise wins over @layer rules. */
/* NB: the :not() chain must stay ONE unbroken compound — a line break
inside :where() is a descendant combinator and changes the meaning. */
a:where(:not(.btn):not(.wp-block-button__link):not(.primary-nav__link):not(.social-btn):not(.social-icons__link):not(.subnav__link):not(.skip-link):not(.site-header__logo):not(.contatti-map__directions):not(#wpadminbar *):not(.site-footer *):not(.section--dark *):not(.hero *)):hover {
color: #fff !important;
background: var(--color-blue);
box-shadow: 0 0 0 3px var(--color-blue);
border-radius: 3px;
text-decoration: none;
}
ul, ol { padding-left: 1.25em; margin: 0 0 1em; }
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
/* !important on both: WP core ALSO prints an inline, unlayered
`.screen-reader-text:focus{background-color:#ddd;color:#444}` — and
this link carries both classes — which otherwise beats this
layered rule on both properties (same root cause as the note at
the top of @layer components, here from a second unlayered
source, not just the global link-color rule). Without both
!importants the focused skip-link came out light-gray-on-gray
instead of white-on-ink. */
background: var(--color-ink) !important;
color: #fff !important;
padding: 0.9rem 1.5rem;
border-radius: 0 0 8px 0;
font-weight: 700;
text-decoration: none;
z-index: 10000;
}
.skip-link:focus {
position: fixed;
top: 0; left: 0;
width: auto; height: auto;
margin: 0; overflow: visible;
clip: auto;
white-space: normal;
}
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
outline: 2px solid var(--color-ink);
outline-offset: 2px;
border-radius: 4px;
}
.site-footer :where(a, button):focus-visible,
.section--dark :where(a, button, input, textarea, select):focus-visible,
.hero :where(a, button):focus-visible {
outline-color: #fff;
}
}
/* =========================================================================
LAYOUT
========================================================================= */
@layer layout {
.container {
width: 100%;
max-width: var(--container-wide);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }
.site-main { display: block; }
/* Minimal resets for WP's own block wrappers, used sparingly in patterns
and freely by the owner when editing content. */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.wp-block-button { margin: 0; }
.wp-block-group { display: block; }
}
/* =========================================================================
COMPONENTS
========================================================================= */
@layer components {
/* NOTE on `color … !important` throughout this file (components +
sections layers): WordPress core prints an UNLAYERED
`a:where(:not(.wp-element-button)){color:var(--wp--preset--color--ink)}`
rule (from this theme's theme.json) in `global-styles-inline-css`. Per
the CSS Cascade Layers spec, ANY unlayered author rule beats ANY
`@layer`-scoped rule for normal-weight declarations, regardless of
specificity — so every plain `color` set on an anywhere in this
@layer-wrapped stylesheet was silently losing to that global ink
color (confirmed live: .btn--primary, the nav-cta pill, and footer
links were all rendering ink-black text despite `color: #fff` in
source). `!important` is the standard, minimal countermeasure —
flips the comparison to the important tier, where unlayered is
LOWEST priority, so our declarations win. Applied ONLY to `color` on
real elements whose intended color is visibly non-ink (never to
`background`, which isn't affected, and never to non-anchor
elements like