/*
Theme Name: UM Child
Theme URI: https://ultimatemadrid.com/
Description: Ultimate Madrid child theme on Twenty Twenty-Five. Brand tokens (Madrid red + navy), Archivo + JetBrains Mono typography, fluid type and spacing scales. Replaces the legacy GeneratePress + um-* CSS stack.
Author: Club Deportivo Elemental Ultimate Madrid
Author URI: https://ultimatemadrid.com/
Template: twentytwentyfive
Version: 0.8.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: um-child
Tags: full-site-editing, block-patterns, sports
*/
/* ===============================================================
UM DESIGN V3 · FOUNDATIONS (2026-05-22, Phase 1 of design handoff)
Tokens + base atoms ported verbatim from
docs/design_handoff_ultimate_madrid/styles.css :root + atoms.
Legacy :root + .um-* rules further down stay intact for backward
compat; later phases will collapse the legacy tokens into these.
=============================================================== */
:root {
/* Palette -- navy + red with warm cream neutral and pitch-green tertiary */
--navy-900: #0b1730;
--navy-800: #0f1e3d;
--navy-700: #18294f;
--navy-600: #233864;
--navy-100: #dde3ef;
--red-600: #d8202a; /* primary action */
--red-700: #b91923;
--red-500: #e63946; /* red on dark backgrounds */
--red-50: #fdecee; /* tint */
--cream-50: #f7f3ec; /* section tint, cards on light */
--cream-100: #efe9de;
--cream-200: #e6dfd0;
--ink-900: #0b1730; /* body text on light */
--ink-700: #2b3a5a;
--ink-500: #5a6781; /* secondary text */
--ink-400: #8593ad;
--ink-300: #b6c0d3;
--ink-200: #d8dde8;
--ink-100: #ebeef4;
--ink-50: #f4f6fa;
--field-green: #2e7d4f;
/* Semantic */
--bg: #ffffff;
--bg-tint: var(--cream-50);
--bg-deep: var(--navy-900);
--surface: #ffffff;
--border: rgba(11, 23, 48, 0.10);
--border-strong: rgba(11, 23, 48, 0.18);
--on-deep: #ffffff;
--on-deep-muted: rgba(255, 255, 255, 0.72);
--on-deep-quiet: rgba(255, 255, 255, 0.55);
/* Type */
--font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--headline-weight: 800;
/* Spacing scale (linear 4/8/12/16/24/32/48/64/96/128) */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--sp-10: 128px;
/* Density */
--section-y: 96px;
--container-max: 1200px;
--container-pad: clamp(20px, 4vw, 40px);
/* Radii */
--r-1: 4px;
--r-2: 8px;
--r-3: 12px;
--r-4: 16px;
--r-5: 24px;
/* Motion */
--easing: cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-density="compact"] { --section-y: 72px; }
[data-density="airy"] { --section-y: 128px; }
/* --- Base type tweaks (scoped to opt-in classes -- body resets stay in
theme.json so we don't fight the global cascade). Sizing only --
horizontal alignment is handled by the `__inner` containers that
wrap v3 pattern content (see `.page-head__inner` / `.um-section-inner`). */
.h-hero { font-family: var(--font-sans); font-weight: var(--headline-weight); font-size: clamp(44px, 6.4vw, 88px); letter-spacing: -0.028em; line-height: 0.98; color: var(--navy-900); text-wrap: balance; }
.h-page { font-family: var(--font-sans); font-weight: var(--headline-weight); font-size: clamp(36px, 4.6vw, 60px); letter-spacing: -0.022em; line-height: 1.02; color: var(--navy-900); text-wrap: balance; }
.h-sec { font-family: var(--font-sans); font-weight: var(--headline-weight); font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.018em; line-height: 1.1; color: var(--navy-900); text-wrap: balance; }
.h-card { font-family: var(--font-sans); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; line-height: 1.2; color: var(--navy-900); }
.h-card-lg { font-family: var(--font-sans); font-weight: 700; font-size: 24px; letter-spacing: -0.012em; line-height: 1.15; color: var(--navy-900); }
.lead {
font-family: var(--font-sans);
font-size: clamp(17px, 1.4vw, 19px);
line-height: 1.5;
color: var(--ink-700);
max-width: 62ch;
}
.lead--on-deep { color: var(--on-deep-muted); }
.eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--red-600);
font-weight: 500;
}
.eyebrow--on-deep { color: var(--red-500); }
.eyebrow--muted { color: var(--ink-500); }
.kicker {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-500);
letter-spacing: 0.04em;
}
/* --- Container + sections --- */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
}
.container-wide { max-width: 1360px; }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--bg-tint); }
.section--deep {
background: var(--bg-deep);
color: var(--on-deep);
}
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: var(--on-deep); }
.section--deep p:not(.lead) { color: var(--on-deep-muted); }
.section--deep .lead { color: var(--on-deep-muted); }
/* --- Button system --- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 20px;
border-radius: 999px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
border: 1px solid transparent;
transition: transform 0.15s var(--easing), background 0.15s var(--easing),
border-color 0.15s var(--easing), color 0.15s var(--easing);
white-space: nowrap;
text-decoration: none;
line-height: 1;
box-sizing: border-box;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
background: var(--red-600);
color: #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 20px -10px rgba(216, 32, 42, 0.6);
}
.btn-primary:hover { background: var(--red-700); color: #fff; }
.btn-outline {
background: transparent;
color: var(--navy-900);
border-color: var(--border-strong);
}
.btn-outline:hover { border-color: var(--navy-900); background: #fff; }
.btn-outline--on-deep {
color: #fff;
border-color: rgba(255, 255, 255, 0.28);
}
.btn-outline--on-deep:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.5);
}
.btn-ghost {
background: transparent;
color: var(--navy-900);
padding: 8px 0;
border: 0;
}
.btn-ghost .arrow { transition: transform 0.2s var(--easing); display: inline-block; }
.btn-ghost:hover .arrow { transform: translateX(3px); }
.btn-link {
color: var(--red-600);
font-weight: 600;
display: inline;
border-bottom: 1px solid transparent;
transition: border-color 0.15s var(--easing);
text-decoration: none;
}
.btn-link:hover { border-bottom-color: var(--red-600); }
.btn-link .arrow { transition: transform 0.2s var(--easing); display: inline-block; }
.btn-link:hover .arrow { transform: translateX(3px); }
/* Keep CTA arrow glued to its label so the trailing SVG never orphans onto
its own line. Only links that actually contain a trailing icon flip to
inline-flex + nowrap; long body-text links (no svg) keep `display: inline`
so they can still wrap mid-phrase inside paragraph copy. */
a.btn-link:has(> svg:last-child),
a.btn-link:has(> .arrow:last-child) {
display: inline-flex;
align-items: baseline;
gap: 4px;
white-space: nowrap;
}
/* Long outbound labels (e.g. "...Federación Española de Disco Volador (FEDV)")
overflowed at 390px because the inline-flex + nowrap above turned the whole
link into one unbreakable atom. Under the mobile breakpoint let these links
wrap mid-label; the trailing icon may drop to the next line but the page no
longer overflows. */
@media (max-width: 620px) {
a.btn-link:has(> svg:last-child),
a.btn-link:has(> .arrow:last-child) {
display: inline;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
}
/* Any body-copy .btn-link (with or without icon) can break a long unbroken
URL/label rather than push the viewport. */
.btn-link { overflow-wrap: anywhere; }
/* Generic card-arrow safety net for contexts not covered by .cards-row /
.activity / .club-pillar specific rules (e.g. /contacto/ pillars). */
.card-arrow {
display: inline-flex;
align-items: baseline;
gap: 6px;
white-space: nowrap;
}
.divider {
height: 1px;
background: var(--border);
border: 0;
margin: 0;
}
/* ---------------------------------------------------------------
Design picker variants -- applied via `data-neutral` and
`data-accent` attrs on . Logged-in admins get a picker in
the admin bar (see um_child_design_picker_* in functions.php);
?neutral=warm&accent=orange also works via URL params for share
links. Default state is no attribute = red accent + light cool
bg as defined in :root above.
--------------------------------------------------------------- */
/* Neutral -- shifts page background + tint band warmth */
[data-neutral="warm"] {
--bg: var(--cream-50);
--bg-tint: var(--cream-100);
--wp--preset--color--paper: #f7f3ec;
--wp--preset--color--warm-gray: #efe9de;
}
[data-neutral="cool"] {
--bg: #ffffff;
--bg-tint: #f1f4fa;
--wp--preset--color--paper: #ffffff;
--wp--preset--color--warm-gray: #f1f4fa;
}
/* Accent -- shifts primary action colour (CTAs, links, eyebrows) */
[data-accent="red"] {
--red-600: #d8202a;
--red-700: #b91923;
--red-500: #e63946;
--red-50: #fdecee;
--wp--preset--color--red: #d8202a;
--wp--preset--color--red-dark: #b91923;
--wp--preset--color--red-light: #fdecee;
--wp--preset--color--red-on-navy: #e63946;
}
[data-accent="orange"] {
--red-600: #e8590c;
--red-700: #c1490a;
--red-500: #fb8500;
--red-50: #fdf1e1;
--wp--preset--color--red: #e8590c;
--wp--preset--color--red-dark: #c1490a;
--wp--preset--color--red-light: #fdf1e1;
--wp--preset--color--red-on-navy: #fb8500;
}
[data-accent="fuchsia"] {
--red-600: #c2185b;
--red-700: #98144a;
--red-500: #e91e63;
--red-50: #fde4eb;
--wp--preset--color--red: #c2185b;
--wp--preset--color--red-dark: #98144a;
--wp--preset--color--red-light: #fde4eb;
--wp--preset--color--red-on-navy: #e91e63;
}
[data-accent="amber"] {
--red-600: #b4651e;
--red-700: #8a4d16;
--red-500: #d18837;
--red-50: #fbeed8;
--wp--preset--color--red: #b4651e;
--wp--preset--color--red-dark: #8a4d16;
--wp--preset--color--red-light: #fbeed8;
--wp--preset--color--red-on-navy: #d18837;
}
/* ---------------------------------------------------------------
Hero polish -- bring the existing `.um-hero-club` synced pattern
closer to the prototype hero spec (.h-hero sizing, weight 800,
pill buttons, mono eyebrow + stat label, larger stat numerals).
CSS-only override so the synced pattern in wp-admin stays
editable; Phase 2 will re-author the pattern markup so these
overrides can drop.
--------------------------------------------------------------- */
.um-hero-club .wp-block-cover__inner-container > .wp-block-columns {
gap: var(--sp-7);
}
.um-hero-club h1 {
font-family: var(--font-sans) !important;
font-size: clamp(44px, 6.4vw, 88px) !important;
font-weight: 800 !important;
letter-spacing: -0.028em !important;
line-height: 0.98 !important;
}
.um-hero-club > .wp-block-cover__inner-container p.has-red-on-navy-color {
font-family: var(--font-mono) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.16em !important;
color: var(--red-500) !important;
text-transform: uppercase;
}
.um-hero-club .um-hero-stats {
gap: var(--sp-7) !important;
margin-bottom: var(--sp-7) !important;
}
.um-hero-club .um-hero-stats > .wp-block-group {
gap: var(--sp-1);
}
.um-hero-club .um-hero-stats > .wp-block-group > p:first-child {
font-family: var(--font-sans) !important;
font-size: clamp(36px, 3.4vw, 44px) !important;
font-weight: 800 !important;
letter-spacing: -0.018em !important;
line-height: 1 !important;
}
.um-hero-club .um-hero-stats > .wp-block-group > p:last-child {
font-family: var(--font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
font-weight: 500 !important;
color: var(--on-deep-quiet) !important;
}
.um-hero-club .wp-block-button__link {
border-radius: 999px !important;
padding: 13px 22px !important;
font-family: var(--font-sans) !important;
font-size: 15px !important;
font-weight: 600 !important;
transition: transform 0.15s var(--easing), background 0.15s var(--easing), border-color 0.15s var(--easing) !important;
}
.um-hero-club .wp-block-button__link:hover { transform: translateY(-1px); }
.um-hero-club .wp-block-button.is-style-outline .wp-block-button__link {
border-color: rgba(255, 255, 255, 0.28) !important;
border-width: 1px !important;
}
.um-hero-club .wp-block-button.is-style-outline .wp-block-button__link:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}
/* ---------------------------------------------------------------
Phase 2 atoms · PageHeader (.page-head), Statgrid (.statgrid),
Rules list (.rules). Ported verbatim from
docs/design_handoff_ultimate_madrid/styles.css. Used by the
v3 synced patterns `um-page-header-v3`, `um-statgrid-v3`,
`um-rules-list-v3`.
--------------------------------------------------------------- */
/* PageHeader -- deep navy hero w/ crumbs + eyebrow + h1 + lead + meta */
.page-head {
background: var(--navy-900);
color: var(--on-deep);
padding-top: 56px;
padding-bottom: 64px;
padding-inline: var(--wp--preset--spacing--40);
position: relative;
overflow: hidden;
}
/* Inner caps for v3 patterns -- cap content at theme.json wideSize (1200px)
and center in the viewport. Hero content + body sections now share the
same horizontal bounds as the nav (which also uses wideSize). The outer
container (.page-head or `.um-section`) supplies the gutter via
padding-inline; the inner cap supplies the max-width. Children get
`margin-left: 0` to defeat WP's `.is-layout-constrained > *` auto-center
so all elements snap to the inner's left edge regardless of their own
max-width. */
.page-head__inner,
.um-section-inner {
width: 100%;
max-width: var(--wp--style--global--wide-size, 1200px);
margin-inline: auto;
}
.page-head__inner > *,
.um-section-inner > * {
margin-left: 0 !important;
margin-right: 0 !important;
}
.page-head::after {
content: '';
position: absolute;
right: -120px;
top: -120px;
width: 360px;
height: 360px;
background: radial-gradient(circle at center, rgba(216, 32, 42, 0.18), transparent 65%);
pointer-events: none;
}
/* Photo hero variant: layers a navy scrim over an action photo so the dark
hero gains sport/community proof above the fold while the text keeps its
readable dark treatment. The scrim runs left-heavy (near-opaque behind the
text column, thinning to the right) so the photo genuinely reads as an
image instead of a tint. Each page picks its shot via `--ph-img` on a
`.page-id-N` rule; pages without one get the generic action-shot default. */
.page-head--photo {
--ph-img: url('/wp-content/uploads/um-photos/accion-de-juego-punta-con-dos-jugadores-saltando.jpg');
background-image:
linear-gradient(100deg, rgba(11, 22, 45, 0.95) 0%, rgba(11, 22, 45, 0.86) 45%, rgba(11, 22, 45, 0.45) 100%),
var(--ph-img);
background-size: cover;
background-position: center 32%;
}
.page-id-16 .page-head--photo { --ph-img: url('/wp-content/uploads/um-photos/grupo-escuchando-indicaciones-bajo-focos-en-cocheras-horizontal.jpg'); }
.page-id-13 .page-head--photo { --ph-img: url('/wp-content/uploads/um-photos/clinic-en-patio-de-instituto.jpg'); }
.page-id-11 .page-head--photo { --ph-img: url('/wp-content/uploads/um-photos/plantilla-quijotes-wucc-2026.jpg'); }
.page-id-15 .page-head--photo { --ph-img: url('/wp-content/uploads/um-photos/equipo-en-circulo-manos-al-centro.jpg'); }
.page-id-97 .page-head--photo { --ph-img: url('/wp-content/uploads/um-photos/accion-de-juego-en-estadio.jpg'); }
.page-id-324 .page-head--photo { --ph-img: url('/wp-content/uploads/um-photos/accion-de-juego-bid-de-un-cutter.jpg'); }
.page-id-14 .page-head--photo { --ph-img: url('/wp-content/uploads/um-photos/celebracion-tras-anotar.jpg'); }
.page-id-842 .page-head--photo { --ph-img: url('/wp-content/uploads/um-photos/equipo-femenino-tras-un-punto.jpg'); }
/* Gap pass (2026-07-03): 5 pages were missing the photo hero entirely
(no page-head--photo class in content). que-hacemos + en get their own
shot; prensa reuses el-club's WUCC plantilla (on-topic, prensa is
entirely about the WUCC squad); materiales reuses aprende's hub shot
since it's a child page of /aprende/ -- sharing across a section's
subpages is intentional, not a gap. */
.page-id-12 .page-head--photo { --ph-img: url('/wp-content/uploads/um-photos/circulo-de-calentamiento-al-inicio-del-entrenamiento.jpg'); }
.page-id-99 .page-head--photo { --ph-img: url('/wp-content/uploads/um-photos/equipo-en-el-cerro-de-las-cabezas.jpg'); }
.page-id-158 .page-head--photo { --ph-img: url('/wp-content/uploads/um-photos/plantilla-quijotes-wucc-2026.jpg'); }
.page-id-444 .page-head--photo { --ph-img: url('/wp-content/uploads/um-photos/layout-en-partido-final-ceu-2025.jpg'); }
.page-id-790 .page-head--photo { --ph-img: url('/wp-content/uploads/um-photos/accion-de-juego-bid-de-un-cutter.jpg'); }
/* Palmarés + historia (2026-07-14). Keyed to a modifier the generator emits,
not to .page-id-N like the rules above: these pages are created per
environment by scripts/phase3-build-*.php, so the DB hands out a different
post ID on local, beta and prod, and an ID-keyed rule would match in exactly
one of them. The older pages can use IDs safely because they were migrated
wholesale and kept theirs.
Palmarés takes the CEU 2025 final, the championship it is a record of;
historia reuses el-club's Casa de Campo shot from 2000, the oldest photo we
have and the one the headline lands on. */
.page-head--palmares { --ph-img: url('/wp-content/uploads/um-photos/layout-en-partido-final-ceu-2025.jpg'); }
.page-head--historia { --ph-img: url('/wp-content/uploads/um-photos/quijotes-casa-de-campo-2000-historia.jpg'); }
.page-head h1, .page-head h2, .page-head h3, .page-head h4 { color: var(--on-deep); }
/* Exclude .eyebrow + .crumbs from the muted-paragraph sweep so their own
colour rules (red eyebrow, mono-quiet crumbs) survive specificity. */
.page-head p:not(.lead):not(.eyebrow):not(.crumbs):not(.page-meta) { color: var(--on-deep-muted); }
.page-head .eyebrow {
display: block;
color: var(--red-500);
margin-bottom: 12px;
max-width: 62ch;
}
.page-head h1 { margin-bottom: 16px; }
.page-head .lead { color: var(--on-deep-muted); max-width: 60ch; }
.page-head .crumbs { max-width: 75ch; flex-wrap: nowrap; white-space: nowrap; }
/* No max-width on page-meta -- short items + icons need the full inner
width so they don't wrap to two rows on desktop. */
/* Long trails (the three /aprende/ entrenamiento guides run 4 levels deep)
overflow a 390px viewport when forced onto one line; let them wrap on
small screens instead. */
@media (max-width: 560px) {
.page-head .crumbs { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
}
.crumbs {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--on-deep-quiet);
margin-bottom: 12px;
flex-wrap: wrap;
}
.crumbs a { color: var(--on-deep-muted); transition: color 0.15s var(--easing); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs em { font-style: normal; color: var(--on-deep-quiet); }
.crumbs__sep { color: var(--on-deep-quiet); opacity: 0.6; }
/* Page-updated -- "Última actualización" line injected under each page H1 by
um_child_inject_page_updated() in functions.php. Same mono-uppercase voice
as .crumbs / .eyebrow so it reads as part of the page-head meta cluster. */
/* Hidden visually but left in the DOM so Rank Math can still read the
dateModified into Article JSON-LD. Most pages change rarely enough that
a visible "last updated" label reads as churny and over-promises freshness.
Toggle back on by removing display:none. */
.page-head .page-updated,
.page-updated {
display: none;
}
.page-meta {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
gap: 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding-top: 24px;
}
.page-meta__item {
display: flex;
align-items: baseline;
gap: 8px;
padding: 0 28px 0 0;
margin-right: 28px;
border-right: 1px solid rgba(255, 255, 255, 0.12);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--on-deep-muted);
}
.page-meta__item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.page-meta__item b {
color: #fff;
font-family: var(--font-sans);
font-weight: 700;
font-size: 15px;
letter-spacing: -0.01em;
}
/* Inline v3 SVG icons -- `!important` here beats the legacy
`.entry-content svg[viewbox]:not(.um-icon):not(.um-inline-icon)`
`width: 100%` rule further down in this file (specificity 0,3,1) that
stretches "naked" SVGs to container width for AI-generated diagrams. */
.page-meta__item svg {
width: 16px !important;
height: 16px !important;
stroke: var(--on-deep-quiet);
stroke-width: 1.6;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
position: relative;
top: 2px;
}
.btn-link svg,
.btn svg,
.card-arrow svg {
width: 14px !important;
height: 14px !important;
stroke: currentColor;
stroke-width: 1.6;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
vertical-align: -2px;
margin-left: 4px;
}
.btn svg { width: 16px !important; height: 16px !important; }
/* Statgrid -- 4-up stat cluster w/ vertical dividers + big numerals */
.statgrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 32px;
}
/* WP's `is-layout-flow > *` adds `margin-block-start: 1.2rem` to all items
after the first, which in a grid context shifts items 2-4 visually down
by ~19px. Force margin-top:0 on all grid items so vertical alignment
matches the prototype. */
.statgrid > .statgrid__item {
margin-top: 0 !important;
margin-block-start: 0 !important;
}
.statgrid__item {
padding: 8px 0;
border-right: 1px solid var(--border);
padding-right: 24px;
}
.statgrid__item + .statgrid__item { padding-left: 24px; }
.statgrid__item:last-child { border-right: 0; }
.statgrid__n {
font-size: clamp(36px, 3.6vw, 52px);
font-weight: 800;
letter-spacing: -0.025em;
color: var(--red-600);
line-height: 1;
margin-bottom: 8px;
font-variant-numeric: tabular-nums;
}
.statgrid__l {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-500);
}
/* Statgrid -- on-deep variant (white numerals, dim dividers, tight) */
.section--deep .statgrid,
.page-head .statgrid { margin-top: 16px; }
.section--deep .statgrid__item,
.page-head .statgrid__item {
border-right-color: rgba(255, 255, 255, 0.12);
padding-top: 0;
padding-bottom: 0;
}
.section--deep .statgrid__n,
.page-head .statgrid__n {
color: #fff !important;
font-size: clamp(28px, 2.6vw, 38px) !important;
margin-bottom: 6px;
}
.section--deep .statgrid__l,
.page-head .statgrid__l { color: var(--on-deep-quiet); }
/* Adjacent v3 page sections flush together -- kill the WP layout-flow
1.2rem margin between siblings so navy → tint runs edge-to-edge with
no white sliver between them. */
.um-section + .um-section,
.section + .section,
.section + .um-section,
.um-section + .section { margin-top: 0 !important; }
/* Rules list -- numbered red circle counter (CSS counter, not span) +
bold "b" + body. Pattern markup stays as a clean core/list so editors
can add/remove items without touching markup details. */
.rules {
padding-left: 0;
list-style: none;
border-top: 1px solid var(--border);
margin: 32px 0;
counter-reset: um-rules-counter;
}
.rules li {
list-style: none;
position: relative;
padding: 16px 0 16px 44px;
border-bottom: 1px solid var(--border);
margin: 0;
counter-increment: um-rules-counter;
color: var(--ink-700);
line-height: 1.55;
}
.rules li::before {
content: counter(um-rules-counter);
position: absolute;
left: 0;
top: 17px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--red-600);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
}
/* Counter stays IN-FLOW at the parent's content edge -- no negative
outdent. Body text is offset 44px from the counter (28px circle + 16px
gap). The body indent reads as a standard numbered-list pattern and
keeps the red dot inside the content area at all viewports. */
.rules li b { color: var(--navy-900); font-weight: 700; }
.rules--quiet { border-top: 0; }
.rules--quiet li { padding: 10px 0 10px 44px; }
.rules--quiet li:last-child { border-bottom: 0; }
/* Desktop: vertically center the red counter dot with its row content.
Mobile keeps the original top-aligned 17px offset so multi-line items
don't pull the dot off the first line at narrow widths. */
@media (min-width: 761px) {
.rules li::before {
top: 50%;
transform: translateY(-50%);
}
}
/* Responsive collapse -- mirror prototype @ 760px */
@media (max-width: 760px) {
.statgrid { grid-template-columns: 1fr 1fr; gap: 12px 0; }
/* In a 2-up grid the first column (items 1 + 3) must drop its
padding-left so its content aligns with the parent's left gutter.
`+ selector` only inspects DOM order, not grid row breaks, so use
nth-child(odd/even) to address the column position explicitly. */
.statgrid__item { padding: 16px 16px 16px 0; }
.statgrid__item:nth-child(odd) {
border-right: 1px solid var(--border);
padding-left: 0;
}
.statgrid__item:nth-child(even) {
border-right: 0;
padding-left: 16px;
}
.statgrid__item:nth-child(3), .statgrid__item:nth-child(4) {
border-top: 1px solid var(--border);
padding-top: 16px;
}
.page-meta { gap: 12px 0; }
.page-meta__item { padding-right: 16px; margin-right: 16px; }
}
/* ---------------------------------------------------------------
Phase 2 · Slice 2 atoms · Event strip (.event-strip / .event),
Spirit callout (.spirit), Activity grid (.activity-grid /
.activity). Used by the v3 synced patterns `um-event-strip-v3`,
`um-spirit-callout-v3`, `um-activity-grid-v3`.
--------------------------------------------------------------- */
/* Event strip -- 2-up grid of upcoming session cards */
.event-strip {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 32px;
}
.event {
display: grid;
grid-template-columns: 96px 1fr auto;
align-items: center;
gap: 24px;
padding: 22px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-3);
}
.event__date {
text-align: center;
border-right: 1px solid var(--border);
padding-right: 18px;
}
.event__date__day {
font-family: var(--font-sans);
font-size: 32px;
font-weight: 800;
line-height: 1;
color: var(--navy-900);
letter-spacing: -0.02em;
}
.event__date__mo {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-500);
margin-top: 4px;
}
.event__meta { min-width: 0; }
.event__tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--red-600);
margin-bottom: 6px;
}
.event__title {
font-family: var(--font-sans);
font-weight: 700;
color: var(--navy-900);
margin-bottom: 4px;
}
.event__where {
font-size: 13px;
color: var(--ink-500);
}
/* Spirit callout -- cream-bg call-out with navy icon chip + quote */
.spirit {
background: var(--cream-50);
border-radius: var(--r-4);
padding: 48px;
border: 1px solid var(--cream-200);
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: 36px;
align-items: center;
}
.spirit__icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--navy-900);
color: var(--red-500);
display: grid;
place-items: center;
font-size: 28px;
flex-shrink: 0;
}
.spirit__quote {
font-family: var(--font-sans);
font-size: clamp(20px, 1.8vw, 26px);
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.3;
color: var(--navy-900);
margin-bottom: 12px;
}
/* Activity grid -- 3-up card grid w/ image + tag + title + body */
.activity-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.activity {
border: 1px solid var(--border);
border-radius: var(--r-3);
overflow: hidden;
background: var(--surface);
display: flex;
flex-direction: column;
transition: transform 0.2s var(--easing), box-shadow 0.2s var(--easing), border-color 0.15s var(--easing);
text-decoration: none !important;
color: var(--ink-700) !important;
}
.activity:hover {
transform: translateY(-3px);
box-shadow: 0 18px 50px -24px rgba(11, 23, 48, 0.18);
border-color: var(--border-strong);
}
.activity__img {
aspect-ratio: 16 / 10;
border-radius: 0;
background-color: var(--ink-50);
margin: 0;
}
.activity__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.activity__body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.activity__tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--red-600);
}
.activity h3 {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.012em;
line-height: 1.2;
color: var(--navy-900);
margin: 0;
}
.activity p {
font-size: 14px;
margin: 0;
color: var(--ink-700);
}
.activity .card-arrow {
color: var(--red-600) !important;
font-weight: 700;
margin-top: auto;
padding-top: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.activity .card-arrow svg {
width: 14px !important;
height: 14px !important;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Defeat WP `:root :where(.is-layout-flow) > * { margin-block-start: 1.2rem }`
inside v3 grid/flex atoms. The atom's own `gap` already controls internal
rhythm, so the layout-flow margin compounds with it and produces uneven
first-card heights + tag/title gap drift at different viewport widths. */
.event > *,
.event-strip > *,
.event__meta > *,
.spirit > *,
.spirit > * > *,
.activity > *,
.activity__body > *,
.activity-grid > * {
margin-top: 0 !important;
margin-block-start: 0 !important;
}
/* Event button -- WP outputs a wp-block-button OUTER div + a
wp-block-button__link INNER anchor. The pattern markup only carries a
className on the outer (no way to put one on the anchor through block
attrs), so the existing `.btn` / `.btn-outline` rules style the outer
wrapper while the inner anchor keeps theme.json's default red button.
That stack reads as a round outline floating outside the button. Scope
the button look to the inner anchor and neutralise the outer wrapper. */
/* Selector chained through `.entry-content` + `.wp-block-button` so it
out-specifies the legacy `.entry-content .wp-block-button:not(.is-style-outline)
> .wp-block-button__link` rule (further down in this file) that pins
padding + radius. Both rules use `!important`; specificity is the only
tiebreaker. */
.event .wp-block-button { background: transparent; }
/* `.event.event` doubles the class for +1 specificity over the legacy
`.entry-content .wp-block-button:not(.is-style-outline) > .wp-block-button__link`
rule (both rules use `!important`; source order has legacy later in
this file, so we need higher specificity to win). Apuntarme = red CTA
pill with a soft red glow shadow. */
.entry-content .event.event .wp-block-button > .wp-block-button__link {
background: var(--red-600) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
padding: 9px 18px !important;
font-family: var(--font-sans) !important;
font-weight: 600 !important;
font-size: 13px !important;
letter-spacing: 0.01em !important;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 20px -10px rgba(216, 32, 42, 0.6) !important;
transition: background 0.15s var(--easing), transform 0.15s var(--easing), box-shadow 0.15s var(--easing) !important;
}
.entry-content .event.event .wp-block-button > .wp-block-button__link:hover {
background: var(--red-700) !important;
transform: translateY(-1px);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04), 0 10px 28px -10px rgba(216, 32, 42, 0.7) !important;
}
/* Event meta -- tighten paragraph rhythm so eyebrow/title/where read as a
single cluster instead of three separately-spaced lines. */
.event__tag { margin-bottom: 4px; }
.event__title { margin-bottom: 2px; }
/* Activity body layout:
image → eyebrow → title → body stack at the TOP (fixed positions
across all cards in the grid row); the red CTA link is pinned to
the BOTTOM via `margin-top: auto`. Cards equalize via the grid's
`align-items: stretch`, so any leftover height pools BETWEEN the
body text and the CTA, never between the title and the body. */
.activity__body { gap: 0; }
.activity__body > .activity__tag { margin: 0 0 6px !important; }
.activity__body > h3 { margin: 0 0 10px !important; }
.activity__body > p { margin: 0 !important; }
.activity__body > .activity__cta { margin: auto 0 0 !important; padding-top: 12px; }
.activity__cta .btn-link { font-size: 14px; }
.activity__cta .btn-link .arrow { margin-left: 4px; }
/* Slice 2 responsive collapses -- mirror prototype @ 1024 and 760 */
@media (max-width: 1024px) {
.activity-grid { grid-template-columns: 1fr 1fr; }
.activity-grid > .activity:last-child { grid-column: span 2; }
.activity-grid > .activity:last-child .activity__img { aspect-ratio: 24 / 9; }
/* Event-strip 2-up doesn't have room for the 96+content+auto button
layout once cards drop below ~600px. Collapse to a single column
from 1024 down so each card has full content width. */
.event-strip { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.event-strip { grid-template-columns: 1fr; }
.event { grid-template-columns: 64px 1fr; gap: 16px; padding: 18px; }
/* Apuntarme button spans the full card width on mobile so its label
doesn't squeeze into a vertical strip in the auto-sized third grid
column. Mirror prototype's `.event > .btn { grid-column: span 2 }`. */
.event > .wp-block-buttons { grid-column: 1 / -1; justify-self: stretch; }
.event > .wp-block-buttons .wp-block-button,
.event > .wp-block-buttons .wp-block-button .wp-block-button__link { width: 100%; }
.entry-content .event.event > .wp-block-buttons .wp-block-button > .wp-block-button__link {
display: block !important;
text-align: center !important;
padding: 12px 18px !important;
}
.activity-grid { grid-template-columns: 1fr; }
.activity-grid > .activity:last-child { grid-column: auto; }
.activity-grid > .activity:last-child .activity__img { aspect-ratio: 16 / 10; }
.spirit { grid-template-columns: 1fr; padding: 32px; gap: 20px; text-align: left; }
}
@media (max-width: 480px) {
.spirit { padding: 24px; }
}
/* ---------------------------------------------------------------
Phase 2 · Slice 3 atoms · CTA band (.cta-band / .cta-band--deep),
Sidebar TOC (.toc), Side card (.side-card / .side-card--deep),
Factbox (.factbox). Used by v3 synced patterns
`um-cta-band-v3`, `um-side-card-v3`, `um-sidebar-toc-v3`.
--------------------------------------------------------------- */
/* CTA band -- light tint by default, navy deep variant */
.cta-band {
background: var(--bg-tint);
border-radius: var(--r-4);
padding: 56px;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 32px;
border: 1px solid var(--border);
margin-top: 32px;
}
.cta-band h2 {
font-family: var(--font-sans);
font-size: clamp(28px, 3vw, 40px);
font-weight: 800;
letter-spacing: -0.018em;
line-height: 1.1;
color: var(--navy-900);
margin: 0 0 8px;
}
.cta-band p {
color: var(--ink-700);
margin: 0;
max-width: 60ch;
}
.cta-band--deep {
background: var(--navy-900);
color: #fff;
border-color: transparent;
padding: 40px;
}
.cta-band--deep h2,
.cta-band--deep h3 {
color: #fff;
margin: 0 0 6px;
}
.cta-band--deep p { color: var(--on-deep-muted); }
/* Defeat WP layout-flow margin compounding inside cta-band cells */
.cta-band > * { margin-top: 0 !important; margin-block-start: 0 !important; }
/* CTA band button -- pill CTA, scoped via `.cta-band.cta-band` specificity
to beat the legacy `.entry-content .wp-block-button:not(.is-style-outline)`
!important rule further down in this file. */
.entry-content .cta-band.cta-band .wp-block-button > .wp-block-button__link {
background: var(--red-600) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
padding: 12px 24px !important;
font-family: var(--font-sans) !important;
font-weight: 600 !important;
font-size: 15px !important;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 20px -10px rgba(216, 32, 42, 0.6) !important;
transition: background 0.15s var(--easing), transform 0.15s var(--easing), box-shadow 0.15s var(--easing) !important;
}
.entry-content .cta-band.cta-band .wp-block-button > .wp-block-button__link:hover {
background: var(--red-700) !important;
transform: translateY(-1px);
}
.entry-content .cta-band--deep.cta-band--deep .wp-block-button > .wp-block-button__link {
background: #fff !important;
color: var(--navy-900) !important;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 20px -10px rgba(0, 0, 0, 0.4) !important;
}
.entry-content .cta-band--deep.cta-band--deep .wp-block-button > .wp-block-button__link:hover {
background: var(--cream-50) !important;
}
/* Side cards (sidebar tiles) -- light by default, navy deep variant */
.side-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-3);
padding: 22px;
}
.side-card--deep {
background: var(--navy-900);
color: var(--on-deep);
border-color: transparent;
}
.side-card--deep p { color: var(--on-deep-muted); }
.side-card > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.side-card h4 {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 700;
margin: 0 0 10px;
color: var(--navy-900);
}
.side-card--deep h4 { color: #fff; }
.side-card p { font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.side-card p:last-child { margin-bottom: 0; }
.entry-content .side-card.side-card .wp-block-button { width: 100%; }
.entry-content .side-card.side-card .wp-block-button > .wp-block-button__link {
background: var(--red-600) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
padding: 10px 16px !important;
font-family: var(--font-sans) !important;
font-weight: 600 !important;
font-size: 14px !important;
width: 100% !important;
text-align: center !important;
display: block !important;
}
.entry-content .side-card.side-card .wp-block-button > .wp-block-button__link:hover {
background: var(--red-700) !important;
}
.entry-content .side-card--deep.side-card--deep .wp-block-button > .wp-block-button__link {
background: #fff !important;
color: var(--navy-900) !important;
}
/* Sidebar TOC -- mono throughout (eyebrow + link labels + index numbers) */
.toc { font-size: 14px; font-family: var(--font-mono); }
.toc__lbl {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-500);
margin: 0 0 14px;
font-weight: 500;
}
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li {
padding: 7px 0;
border-bottom: 1px dashed var(--border);
list-style: none;
margin: 0;
}
.toc li:last-child { border-bottom: 0; padding-bottom: 0; }
.toc a {
color: var(--ink-400);
transition: color 0.15s var(--easing);
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
}
.toc a:hover { color: var(--navy-900); }
.toc a > span {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-400);
}
/* Factbox -- cream-bg metrics card (sidebar element) */
.factbox {
background: var(--cream-50);
border-radius: var(--r-3);
padding: 22px;
border: 1px solid var(--cream-200);
}
.factbox > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.factbox h4 {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 700;
color: var(--navy-900);
margin: 0;
}
.factbox__rows { display: flex; flex-direction: column; gap: 12px; margin-top: 14px !important; }
.factbox__rows > div {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 14px;
color: var(--ink-700);
padding-bottom: 12px;
border-bottom: 1px solid var(--cream-200);
}
.factbox__rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.factbox__rows b {
color: var(--red-600);
font-size: 18px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
/* Factbox -- navy variant. Pair with .side-card--deep on sidebar tiles. */
.factbox--deep,
.side-card--deep.factbox {
background: var(--navy-900);
color: var(--on-deep-muted);
border-color: transparent;
}
.factbox--deep h4,
.side-card--deep.factbox h4 { color: #fff; }
.factbox--deep .factbox__rows > div,
.side-card--deep.factbox .factbox__rows > div {
border-bottom-color: rgba(255, 255, 255, 0.12);
color: var(--on-deep-muted);
}
.factbox--deep .factbox__rows b,
.side-card--deep.factbox .factbox__rows b { color: #fff; }
.side-card--deep.factbox p { color: var(--on-deep-muted); }
/* Single-paragraph factbox -- zero the bottom margin on the lone so
container padding stays symmetric (default p has margin-bottom: 0.9em
that shows as visible asymmetry inside a single-child factbox). */
.factbox > p:only-child { margin: 0; }
/* #proximos event row is an inline grid (96px 1fr auto): the fixed date
column + non-shrinking auto button column overflowed 390px viewports.
Stack to a single column under 620px so the CTA drops below the copy. */
@media (max-width: 620px) {
#proximos > div[style*="grid"] {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
#proximos .event__date { border-right: 0 !important; padding-right: 0 !important; }
}
/* Inline icon span inside .factbox prose. Constrain SVG to a sane size
so it doesn't pick up the legacy .entry-content svg width: 100% rule. */
.factbox__icon { display: inline-flex; align-items: center; vertical-align: middle; }
.factbox__icon svg {
width: 16px !important;
height: 16px !important;
stroke: var(--red-600);
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* With-sidebar layout -- main column + 320px sticky right rail */
.with-sidebar {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 80px;
align-items: start;
}
.with-sidebar__main { min-width: 0; }
.with-sidebar > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.sidebar {
position: sticky;
top: 92px;
display: flex;
flex-direction: column;
gap: 16px;
}
.sidebar > * { margin-top: 0 !important; margin-block-start: 0 !important; }
/* Slice 3 responsive collapses */
@media (max-width: 960px) {
.with-sidebar { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; }
}
/* Collapse the main + sidebar rail to one column earlier (was 760px). At
768px the 2-col split left the main column ~373px and the rail ~280px,
both too cramped; single-column at/below 899px keeps tablets readable. */
@media (max-width: 899px) {
.with-sidebar { grid-template-columns: 1fr; gap: 40px; }
.sidebar { position: static; }
}
@media (max-width: 760px) {
.cta-band { grid-template-columns: 1fr; padding: 32px; gap: 20px; }
.cta-band--deep { padding: 28px; }
}
@media (max-width: 480px) {
.cta-band { padding: 24px; }
}
/* Cocheras media pair (photo + locator map) on /donde-jugar/. Grid is
inline-styled (1.4fr 1fr); its children lacked min-width:0, so the fixed
min-height images kept their intrinsic width and pushed the page past the
viewport (~602px at 390px). Release the children and stack under 620px. */
.cocheras-media > * { min-width: 0; max-width: 100%; }
@media (max-width: 620px) {
.cocheras-media { grid-template-columns: 1fr !important; }
/* inline aspect-ratio + min-height:280px forces an intrinsic width
(~448px) wider than the stacked column; drop the min-height so the
child sizes from its (now full-width) box instead. */
.cocheras-media > * { min-height: 0 !important; }
}
/* ---------------------------------------------------------------
Phase 2 · Slice 4 atoms ·
Section head (.sec-head / .sec-head--center) utility
Press-stats (.press-stats) 5-up metrics band
Team cards (.teams-grid / .team-card) 3-up profile cards
Club pillars (.club-pillars / .club-pillar) 3-up icon + text
Footer wordmark (.footer-wordmark) giant signoff
Factbox (.factbox) sidebar metrics card -- CSS lives in slice 3
Used by v3 synced patterns
`um-press-stats-v3`, `um-team-cards-v3`, `um-club-pillars-v3`,
`um-footer-wordmark-v3`, `um-factbox-v3`.
--------------------------------------------------------------- */
/* Section head -- wraps the eyebrow / h2 / lead cluster that sits above
every section. Caps width for readability + adds vertical rhythm. */
.sec-head { margin-bottom: 40px; max-width: 70ch; }
.sec-head--center { margin-left: auto !important; margin-right: auto !important; text-align: center; }
.sec-head > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.sec-head h2 { margin: 10px 0 0; }
.sec-head .lead { margin: 14px 0 0 !important; }
.sec-head--center .lead { margin-left: auto !important; margin-right: auto !important; }
/* Press-stats -- 5-up metrics row w/ vertical dividers, centered numerals */
.press-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
margin-top: 40px;
padding: 28px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.press-stats > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.press-stats__item {
padding: 0 16px;
text-align: center;
border-right: 1px solid var(--border);
}
.press-stats__item:last-child { border-right: 0; }
.press-stats__item > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.press-stats__n {
font-family: var(--font-sans);
font-size: clamp(32px, 3.4vw, 48px);
font-weight: 800;
letter-spacing: -0.025em;
color: var(--red-600);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.press-stats__l {
margin-top: 8px !important;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-500);
}
/* Team cards -- 3-up profile cards (Competir) */
.teams-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.teams-grid > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.team-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-3);
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.15s var(--easing), transform 0.15s var(--easing), box-shadow 0.15s var(--easing);
}
.team-card:hover {
border-color: var(--border-strong);
transform: translateY(-3px);
box-shadow: 0 18px 50px -24px rgba(11, 23, 48, 0.18);
}
.team-card > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.team-card__img {
aspect-ratio: 4 / 5;
background-color: var(--ink-50);
margin: 0;
}
.team-card__body {
padding: 28px;
display: flex;
flex-direction: column;
flex: 1;
gap: 0;
}
.team-card__body > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.team-card__tag {
align-self: flex-start;
font-family: var(--font-mono) !important;
font-size: 10px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase;
color: var(--red-600) !important;
padding: 4px 9px !important;
background: var(--red-50) !important;
border-radius: 999px !important;
font-weight: 500 !important;
margin: 0 0 12px !important;
line-height: 1.4 !important;
}
.team-card h3 {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.012em;
color: var(--navy-900);
margin: 0 0 8px !important;
}
.team-card p { font-size: 14px; color: var(--ink-700); margin: 0; }
.team-card__cta { margin: auto 0 0 !important; padding-top: 12px; }
.team-card__cta .btn-link { font-size: 14px; }
.team-card__cta .btn-link .arrow { margin-left: 4px; }
/* Club pillars -- 3-up icon + bold + body + arrow link */
.club-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 32px;
}
.club-pillars > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.club-pillar {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-3);
padding: 24px;
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color 0.15s var(--easing), transform 0.15s var(--easing), box-shadow 0.15s var(--easing);
}
.club-pillar:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
box-shadow: 0 18px 50px -24px rgba(11, 23, 48, 0.18);
}
.club-pillar > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.club-pillar__icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--red-50) !important;
color: var(--red-600) !important;
display: grid !important;
place-items: center;
margin-bottom: 4px;
font-size: 18px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.club-pillar__icon svg {
width: 20px !important;
height: 20px !important;
stroke: var(--red-600);
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.spirit__icon svg {
width: 32px !important;
height: 32px !important;
stroke: var(--red-500);
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.initi-card__row .initi-card__icon svg {
width: 14px !important;
height: 14px !important;
stroke: var(--red-600);
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: -2px;
}
.initi-card__row .initi-card__icon { display: inline-flex; align-items: center; justify-content: center; }
.club-pillar b {
font-family: var(--font-sans);
font-size: 18px;
color: var(--navy-900);
font-weight: 700;
letter-spacing: -0.01em;
}
.club-pillar p { font-size: 14px; color: var(--ink-700); margin: 0; }
/* CTA paragraph wraps a .card-arrow / .btn-link anchor; the WRAPPER (the
) must carry `margin-top: auto` because it's the direct child of
the `.club-pillar` flex column. The anchor's own margin-top: auto
wouldn't push because the
stays in normal flow above it. */
.club-pillar__cta { margin: auto 0 0 !important; padding-top: 4px; }
.club-pillar .card-arrow,
.club-pillar .btn-link {
color: var(--red-600);
font-weight: 600;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
white-space: nowrap;
}
/* Footer wordmark -- giant condensed signoff w/ red dot separator */
.footer-wordmark {
margin-top: 64px;
display: flex;
align-items: center;
gap: clamp(16px, 3vw, 36px);
width: 100%;
color: rgba(255, 255, 255, 0.08);
font-family: var(--font-sans);
font-weight: 900;
font-size: clamp(56px, 14vw, 200px);
line-height: 0.82;
letter-spacing: -0.04em;
font-stretch: condensed;
text-transform: uppercase;
white-space: nowrap;
user-select: none;
pointer-events: none;
justify-content: space-between;
overflow: hidden;
}
.footer-wordmark__dot {
flex: 0 0 auto;
width: clamp(10px, 1.4vw, 22px);
height: clamp(10px, 1.4vw, 22px);
border-radius: 50%;
background: var(--red-600);
opacity: 0.55;
}
.footer-wordmark > span:not(.footer-wordmark__dot) { flex: 0 0 auto; }
/* Factbox pattern is styled in slice-3 atoms above. */
/* Slice 4 responsive collapses */
@media (max-width: 1024px) {
.teams-grid { grid-template-columns: 1fr 1fr; }
.teams-grid > .team-card:nth-child(3) { grid-column: 1 / -1; }
.teams-grid > .team-card:nth-child(3) .team-card__img { aspect-ratio: 21/9 !important; }
.club-pillars { grid-template-columns: 1fr 1fr; }
.press-stats { grid-template-columns: repeat(5, 1fr); gap: 8px 0; }
.press-stats__item { padding: 0 8px; }
}
@media (max-width: 760px) {
.teams-grid { grid-template-columns: 1fr; gap: 16px; }
.teams-grid > .team-card:nth-child(3) { grid-column: auto; }
.teams-grid > .team-card:nth-child(3) .team-card__img { aspect-ratio: 16/10 !important; }
.club-pillars { grid-template-columns: 1fr; }
/* Tighten the container's vertical padding on mobile -- the 28px top/bottom
from the desktop rule plus each item's 16px top padding gives 44px of
air above/below the first/last numerals, which read as too generous on
a narrow viewport. */
.press-stats {
grid-template-columns: 1fr 1fr;
padding: 8px 0;
}
.press-stats__item {
padding: 12px 8px;
border-right: 0;
border-bottom: 1px solid var(--border);
}
.press-stats__item:nth-child(odd) { border-right: 1px solid var(--border); }
.press-stats__item:nth-child(even) { border-right: 0; }
.press-stats__item:last-child {
border-bottom: 0;
grid-column: span 2;
border-right: 0;
}
}
/* ---------------------------------------------------------------
Phase 2 · Slice 5 atoms ·
Activity stack (.activity-stack / .activity-row) -- stacked
1-up rows with optional red accent rail
Initi-card (.initi-grid / .initi-card) -- iniciación
convocatoria cards w/ red side rail + meta rows
Timeline (.timeline / .timeline__row / .timeline__dot)
-- dashed-border year list
Sponsor tiers (.tiers / .tiers__row + --basic / --escolar /
--premium variants) -- colaboraciones table
Glossary entry (.glossary-list / .glossary-entry / .glossary-tag
+ --en / --es variants) -- 2-col definition list
Used by v3 synced patterns
`um-activity-stack-v3`, `um-initi-cards-v3`, `um-timeline-v3`,
`um-sponsor-tiers-v3`, `um-glossary-entries-v3`.
--------------------------------------------------------------- */
/* Activity stack -- vertical 1-up rows w/ optional left red rail */
.activity-stack {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 24px;
}
.activity-stack > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.activity-row {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-3);
padding: 24px;
position: relative;
}
.activity-row > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.activity-row--accent::before {
content: '';
position: absolute;
left: 0;
top: 24px;
bottom: 24px;
width: 3px;
background: var(--red-600);
border-radius: 0 3px 3px 0;
}
.activity-row__tag {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--red-600);
font-weight: 600;
display: block;
margin: 0 !important;
}
.activity-row__t {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 700;
color: var(--navy-900);
letter-spacing: -0.012em;
margin: 8px 0 !important;
}
.activity-row p { font-size: 14px; color: var(--ink-700); margin: 0; }
/* Initi-card -- 2-up convocatoria cards with red side rail */
.initi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 32px;
}
.initi-grid > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.initi-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-3);
padding: 28px;
display: flex;
flex-direction: column;
position: relative;
}
.initi-card > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.initi-card::before {
content: '';
position: absolute;
left: 0;
top: 28px;
bottom: 28px;
width: 3px;
background: var(--red-600);
border-radius: 0 3px 3px 0;
}
.initi-card h3 {
font-family: var(--font-sans);
font-size: 20px;
font-weight: 700;
color: var(--navy-900);
margin: 0 0 4px !important;
}
.initi-card p { font-size: 14px; color: var(--ink-700); margin: 0 0 12px; }
.initi-card__row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px !important;
font-size: 14px;
color: var(--ink-700);
}
.initi-card__row:first-of-type { margin-top: 14px !important; }
.initi-card__cta { margin-top: 28px !important; }
.initi-card__row b {
color: var(--navy-900);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.initi-card__row .initi-card__icon {
color: var(--red-600);
flex-shrink: 0;
font-size: 14px;
width: 18px;
text-align: center;
}
/* Timeline -- dashed-border year list */
.timeline {
margin: 32px 0 0;
padding-left: 8px;
border-left: 1px dashed var(--border);
list-style: none;
}
.timeline > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.timeline__row {
display: grid;
grid-template-columns: 64px 18px 1fr;
gap: 14px;
align-items: baseline;
padding: 14px 0;
border-bottom: 1px dashed var(--border);
}
.timeline__row > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.timeline__row:last-child { border-bottom: 0; }
.timeline__y {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--red-600);
font-weight: 600;
font-variant-numeric: tabular-nums;
margin: 0;
}
.timeline__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--red-600);
margin-left: -5px;
transform: translateY(3px);
box-shadow: 0 0 0 4px var(--bg);
justify-self: start;
}
.timeline__t {
color: var(--ink-700);
font-size: 15px;
line-height: 1.5;
margin: 0;
}
.timeline__t b { color: var(--navy-900); font-weight: 700; }
/* Sponsor tiers -- 2-col rows (tag column + content column) */
.tiers {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.tiers > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.tiers__row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 18px;
align-items: start;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-3);
padding: 22px 24px;
}
.tiers__row > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.tiers__tag {
font-family: var(--font-mono) !important;
font-size: 10px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
text-align: center !important;
padding: 5px 10px !important;
border-radius: 999px !important;
font-weight: 600 !important;
align-self: center !important;
line-height: 1.4 !important;
margin: 0 !important;
}
.tiers__row--basic .tiers__tag { background: var(--red-50); color: var(--red-600); }
.tiers__row--escolar .tiers__tag { background: var(--cream-50); color: var(--navy-900); border: 1px solid var(--cream-200); }
.tiers__row--premium .tiers__tag { background: var(--navy-900); color: #fff; }
.tiers__row b {
display: block;
color: var(--navy-900);
font-weight: 700;
font-size: 17px;
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.tiers__row p { font-size: 14.5px; color: var(--ink-700); margin: 4px 0 0; }
/* Glossary entry -- 2-col definition list (term + tag | definition) */
.glossary-list { list-style: none; padding: 0; margin: 32px 0 0; }
.glossary-list > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.glossary-entry {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
padding: 18px 0;
border-bottom: 1px solid var(--border);
align-items: start;
list-style: none;
}
.glossary-entry > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.glossary-entry:last-child { border-bottom: 0; }
.glossary-entry__term {
display: flex;
flex-direction: column;
gap: 6px;
}
.glossary-entry__term b {
font-family: var(--font-sans);
font-size: 17px;
font-weight: 700;
color: var(--navy-900);
letter-spacing: -0.01em;
line-height: 1.2;
}
.glossary-term__en {
font-size: 0.85em;
color: var(--ink-500);
font-weight: 400;
margin-left: 0.25em;
}
.glossary-tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
align-self: flex-start;
font-weight: 600;
}
.glossary-tag--en { background: var(--navy-900); color: #fff; }
.glossary-tag--es { background: var(--red-50); color: var(--red-600); }
.glossary-entry__def {
font-size: 14.5px;
color: var(--ink-700);
margin: 0;
line-height: 1.55;
}
/* Slice 5 responsive collapses */
@media (max-width: 760px) {
.initi-grid { grid-template-columns: 1fr; }
.tiers__row { grid-template-columns: 100px 1fr; gap: 14px; padding: 18px 20px; }
.glossary-entry { grid-template-columns: 1fr; gap: 8px; }
.timeline__row { grid-template-columns: 56px 14px 1fr; gap: 10px; padding: 12px 0; }
}
/* ---------------------------------------------------------------
Bring-grid (Iniciación · "Qué necesitas traer") -- 2x2 chip grid
with red-50 icon tile + bold label + secondary text. */
.bring-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 16px;
}
.bring-grid > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.bring-card {
background: var(--cream-50);
border: 1px solid var(--cream-200);
border-radius: var(--r-3);
padding: 16px 18px;
display: flex;
align-items: flex-start;
gap: 14px;
}
.bring-card__icon {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 8px;
background: #fff;
border: 1px solid var(--border);
color: var(--red-600);
/* !important to beat the legacy display:block injected by the
.um-section span reset chain. */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.bring-card__icon > svg { display: block; }
.bring-card__icon svg {
width: 16px !important;
height: 16px !important;
stroke: var(--red-600);
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.bring-card b {
display: block;
color: var(--navy-900);
font-weight: 700;
font-size: 14.5px;
}
.bring-card span {
display: block;
margin-top: 2px;
font-size: 13px;
color: var(--ink-500);
}
@media (max-width: 760px) {
.bring-grid { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------
Image placeholder · diagonal-hatch tile w/ optional caption.
Used until real photography arrives. Pairs with prototype
`.img-ph` + `.img-ph__cap`.
--------------------------------------------------------------- */
.img-ph {
position: relative;
overflow: hidden;
background: var(--ink-50);
border-radius: var(--r-3);
display: flex;
align-items: flex-end;
background-image: repeating-linear-gradient(135deg, rgba(11, 23, 48, 0.045) 0 2px, transparent 2px 14px);
}
.img-ph::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid var(--border);
border-radius: inherit;
pointer-events: none;
}
.img-ph__cap {
position: relative;
margin: 14px;
padding: 8px 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.02em;
background: rgba(255, 255, 255, 0.92);
color: var(--ink-700);
border-radius: 6px;
border: 1px solid var(--border);
max-width: calc(100% - 28px);
}
.img-ph__cap b { color: var(--navy-900); font-weight: 600; }
/* Baked real photo · replaces an .img-ph once a final image is chosen.
Card wrappers keep their original .img-ph (+ collage) classes for
placement and inherit the radius/overflow above; standalone wraps
(hero, split) get them here. Mirrors the staging swap plugin so the
bake renders identically after that plugin is removed. */
.um-img-wrap {
position: relative;
overflow: hidden;
border-radius: var(--r-3);
background: var(--ink-50);
}
.um-img-real {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
/* Team crest overlaid on a team-card photo (e.g. /competir/), mirroring the
Q+D card design. Sits top-right; drop shadow keeps it legible on any photo. */
.team-card__crest {
position: absolute;
top: 10px;
right: 10px;
width: 52px;
height: auto;
z-index: 2;
pointer-events: none;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}
/* ---------------------------------------------------------------
Rules list · `--icons` variant. Replaces the auto-counter with a
span.n carrying an inline SVG icon. Used on /el-club/ palmarés
and any other list where each line wants a topical glyph.
--------------------------------------------------------------- */
.rules--icons li { counter-increment: none; padding-left: 44px; }
.rules--icons li::before { content: none; }
.rules--icons .n {
position: absolute;
left: 0;
top: 14px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--red-600);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rules--icons .n svg {
width: 14px !important;
height: 14px !important;
stroke: #fff !important;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ---------------------------------------------------------------
With-sidebar layout polish
--------------------------------------------------------------- */
/* Zero the top margin on main column's first child so its h2 aligns
with the sidebar's first card (otherwise browser-default h2 margin
pushes main copy 0.83em below the sidebar). */
.with-sidebar__main > :first-child { margin-top: 0 !important; }
/* Side-card CTA -- when using plain `.btn` instead of wp:button, scale
down for sidebar context. */
.side-card .btn {
padding: 15px 16px;
font-size: 14px;
width: 100%;
justify-content: center;
}
/* =============================================================== */
/* END · UM DESIGN V3 FOUNDATIONS */
/* =============================================================== */
/* ========== CDU-96 · FOOTER REDESIGN ==========
Lives in style.css (not um-custom-v2.css) so it survives the
final-gate stop-gap-CSS drop. Pairs with patterns/footer-redesign.php
and parts/footer.html. */
/* UM disc badge -- neutralize WP's image resize class so the SVG
renders at the design-spec 48px regardless of the figure wrapper */
.um-site-footer .um-footer-disc { margin: 0; line-height: 0; }
.um-site-footer .um-footer-disc img { display: block; width: 48px; height: 48px; border-radius: 10px; }
/* Brand row -- UM disc + Ultimate Madrid wordmark.
CDU-238: align-items:flex-start so the "Ultimate Madrid" h3 baseline
sits at the same column-top as the Explorar / Recursos / Conectar h4s
in the adjacent columns. Centering inside the 48px disc row pushed
the h3 down ~12px and broke the header line. */
.um-site-footer .um-footer-brand { gap: 14px; align-items: flex-start; }
/* Bottom row -- copyright left, social chips right; wrap on narrow */
.um-site-footer .um-footer-bottom { row-gap: 16px; }
/* Social chips -- 36x36 rounded, navy-soft bg, paper text, red on hover */
.um-site-footer .um-footer-social { gap: 12px; }
.um-site-footer .um-social-chip { display: inline-flex; }
.um-site-footer .um-social-chip a {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 8px;
background: var(--wp--preset--color--navy-soft, #2d3955);
color: var(--wp--preset--color--paper, #fff);
font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
text-decoration: none;
transition: background-color 120ms ease, color 120ms ease;
}
.um-site-footer .um-social-chip a:hover,
.um-site-footer .um-social-chip a:focus { background: var(--wp--preset--color--red, #c4122f); color: #fff; text-decoration: none; }
.um-site-footer .um-social-chip a:focus-visible { outline: 2px solid var(--wp--preset--color--focus, #ffd54a); outline-offset: 3px; }
/* Footer-link list -- kill the bullet, keep tap targets readable */
.um-site-footer .um-footer-links { list-style: none; margin: 0; padding-left: 0; }
.um-site-footer .um-footer-links li { margin-bottom: 4px; }
/* Responsive -- collapse 4-col → 2-col → 1-col, mirror prototype */
@media (max-width: 960px) {
.um-site-footer .wp-block-columns { flex-wrap: wrap !important; }
.um-site-footer .wp-block-columns > .wp-block-column { flex-basis: 48% !important; }
}
@media (max-width: 600px) {
.um-site-footer .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
.um-site-footer .um-footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ========== CDU-96 · CARD CTA ALIGNMENT (paths-grid + activities-grid) ==========
Cards inside .wp-block-columns already stretch to equal heights at desktop
(flex children inside the columns row). Pin the CTA paragraph to the
bottom of each card so the "Más información →" / outbound links align
across cards regardless of body-copy length. Without this, shorter
descriptions float their CTA up and break the visual rhythm. */
.um-path-card,
.um-activity-card,
.um-activity-card > .wp-block-group {
display: flex;
flex-direction: column;
}
.um-activity-card > .wp-block-group {
/* fill remaining card height so the inner CTA can pin to the bottom */
flex: 1;
}
.um-path-card > p:last-child,
.um-activity-card > .wp-block-group > p:last-child {
/* !important needed: the patterns set an inline `margin-top:var(spacing--30)`
on the CTA paragraph which would otherwise win over the cascade. */
margin-top: auto !important;
padding-top: var(--wp--preset--spacing--30);
}
/* CDU-96 Jetpack contact-form overrides removed 2026-05-21 -- site now uses
Contact Form 7. CF7 inputs/selects/textareas styled inline within
.um-hablemos-card and .um-schools-form sections. */
/* ===============================================================
* CDU-96 · MIGRATED FROM um-custom-v2.css + um-tt25-shim.css
* Stop-gap CSS folded into the child stylesheet so um-custom-v2.css
* and um-tt25-shim.css can be removed (CDU-96 technical AC). The
* rules below preserve the legacy class behavior currently used by
* /iniciacion/ + the inner-page bodies (um-page-body, um-benefits-list,
* um-program-cards, um-school-list, um-materials-grid, um-sidebar-card,
* um-toc-list, um-btn-primary, etc.) until the full block-level
* rewrite lands. Many rules in here are now dead code targeting
* legacy classes that no longer exist on rendered pages -- slated
* for cleanup in a follow-up issue.
* =============================================================== */
/* --- from um-custom-v2.css --- */
/* ==========================================================
Ultimate Madrid -- Custom CSS v2 for GeneratePress
========================================================== */
/* ========== DESIGN TOKENS ========== */
:root {
--red-madrid: #c4122f;
--red-dark: #9e0e26;
--red-light: #fdf2f3;
/* CDU-227: dropped from #ff8b8b (read as pink in CDU-226 review) to #ff5757 -- saturated red, AA-normal ~4.9:1 vs --navy. Supersedes CDU-36 AAA buffer. */
--red-on-navy: #ff5757;
--navy: #1a2744;
/* Solid chip background for use on --navy surfaces (footer social, etc.). */
--navy-chip: #2d3955;
--warm-gray: #f8f6f3;
--mid-gray: #5b616e; /* CDU-36: was #6b7280 (4.48:1 on cream); now 5.6:1 on warm-gray, 6.6:1 on white. */
--light-border: #e8e5e0;
--text-primary: #1a1a1a;
--text-secondary: #4a4a4a;
/* CDU-36: solid muted-on-navy ramp. Replaces rgba(255,255,255,X) shortcuts that
collapse below WCAG AA the moment alpha drops under ~0.5. */
--um-on-navy-strong: #ffffff; /* 16.8:1 primary copy, headings */
--um-on-navy-body: #c9cfd9; /* 9.5:1 body copy, links */
--um-on-navy-muted: #a4a8b7; /* 6.4:1 secondary text, copyright, tagline */
--um-on-navy-subtle: #8c93a1; /* 4.86:1 borders, faintest legible text */
--radius: 12px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
--shadow-md: 0 4px 16px rgba(0,0,0,0.08);
--max-width: 1200px;
}
/* ========== GLOBAL ==========
Body resets handed off to theme.json (font-family, color, line-height,
size). Only the rendering hints stay here -- they're hard to express in
theme.json without leaking into the editor canvas.
h1/h2/h3 sizing is handled by theme.json `styles.elements` plus the new
`.h-hero` / `.h-page` / `.h-sec` classes in the v3 foundations block. */
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ========== BLOCK-THEME HEADER + NAV (CDU-110) ==========
um-child is a block theme; the rendered header is built from
parts/header.html using core/navigation, not GeneratePress classic.
These rules target the block-nav primitives so top-level items and
the CTA never wrap mid-phrase, and the header collapses to one row. */
/* CDU-96: bumped from 0.85rem to 1.5rem (24px) per board AC -- prototype uses
72px nav height; tighter padding made the bar read cramped. */
.um-site-header { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.um-site-header .wp-block-navigation { row-gap: 0; }
.um-site-header .wp-block-navigation .wp-block-navigation-item { white-space: nowrap; }
.um-site-header .wp-block-navigation .wp-block-navigation-item__content,
.um-site-header .wp-block-navigation .wp-block-navigation-item__label {
white-space: nowrap;
letter-spacing: 0.02em;
}
.um-site-header .um-nav-cta .wp-block-button__link { white-space: nowrap; }
/* CDU-289: ES/EN language switcher in the header. Sits between the primary nav
and the Contáctanos CTA on desktop, stays visible (does not collapse into
the hamburger overlay) on mobile so the English gateway is always one tap
away regardless of viewport. Uses the navigation typographic scale for
alignment with the surrounding nav items. */
.um-site-header .um-lang-switcher {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
}
.um-site-header .um-lang-switcher a {
color: var(--wp--preset--color--ink, #1a2744);
text-decoration: none;
padding: 0.25rem 0.35rem;
border-radius: 4px;
transition: color 0.15s ease, background-color 0.15s ease;
}
.um-site-header .um-lang-switcher a:hover,
.um-site-header .um-lang-switcher a:focus-visible {
color: var(--wp--preset--color--red, #c4122f);
}
.um-site-header .um-lang-switcher .um-lang-sep {
color: var(--wp--preset--color--border, #d6d8de);
font-weight: 400;
}
/* Flag + abbreviation treatment for the language link (replaces the spelled-out
"English" / "Español" text): a small flag icon plus the two-letter code,
vertically centered. Applies in both the desktop switcher and the mobile
overlay, overriding their differing base `display` values. */
.lang-flag-link {
display: inline-flex !important;
align-items: center;
gap: 0.4rem;
}
.lang-flag-link .flag-icon {
flex: 0 0 auto;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.lang-flag-link span { letter-spacing: 0.03em; }
/* Flag+EN is a standing CTA into the English funnel, not a toggle: it shows
on every page, including /en/ itself (no Español link, no per-page hiding). */
@media (max-width: 480px) {
.um-site-header .um-lang-switcher { font-size: 0.8rem; gap: 0.25rem; }
.um-site-header .um-lang-switcher a { padding: 0.2rem 0.25rem; }
}
/* Mobile (≤781px): block-nav collapses to overlay; only logo + CTA share the bar.
Tighten CTA padding/letter-spacing so the single-word label stays on one line
at viewports as narrow as 320px. */
@media (max-width: 781px) {
.um-site-header .um-nav-cta .wp-block-button__link {
padding-left: 0.85rem !important;
padding-right: 0.85rem !important;
letter-spacing: 0.02em !important;
}
}
/* CDU-229: mobile nav overlay was unusable. Source nav has justifyContent:right,
which the overlay inherits (align-items: flex-end), pinning items to the right
edge with no padding and 21px tap targets. Override the open responsive
container so links stack full-width, get 48px+ tap targets, and read left-aligned.
Scoped to the open overlay so desktop layout is untouched. */
.um-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
padding: 4.5rem 1.5rem 2rem !important;
align-items: stretch !important;
}
.um-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
align-items: stretch !important;
gap: 0 !important;
width: 100% !important;
}
.um-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.um-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
display: block;
width: 100%;
padding: 1rem 0;
font-size: 1rem !important;
letter-spacing: 0.06em !important;
text-align: left;
}
.um-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
top: 1rem;
right: 1rem;
}
.page .entry-content > .wp-block-group {
max-width: none;
}
/* ========== OVERLINE LABEL ========== */
.um-overline {
font-size: 0.8rem !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--red-madrid) !important;
margin-bottom: 8px !important;
}
/* ========== SECTION SPACING ========== */
.um-section { padding: 80px 0; }
.um-losquijotes-box {
margin-top: 32px; padding: 24px;
background: var(--warm-gray); border-radius: var(--radius);
}
.um-losquijotes-box h3, .um-losquijotes-box h4 {
margin-bottom: 8px;
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
}
.um-losquijotes-box p { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 12px; }
/* Hero stats */
.um-hero-stats,
.um-hero-stats > .wp-block-group__inner-container,
.um-hero-stats.is-layout-flex,
.um-hero-stats .wp-block-group__inner-container.is-layout-flex {
display: flex !important;
flex-wrap: nowrap !important;
gap: 40px !important;
margin-bottom: 36px;
}
/* Override WP flex row gap */
.um-hero-stats .wp-block-group {
margin: 0 !important;
}
/* ========== BUTTONS ========== */
.um-btn-primary {
background: transparent !important;
padding: 0 !important;
border: none !important;
}
.um-btn-primary .wp-block-button__link {
background: var(--red-madrid) !important;
color: white !important;
padding: 14px 32px;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
transition: background 0.2s, transform 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
border: none;
}
.um-btn-primary .wp-block-button__link:hover {
background: var(--red-dark) !important;
transform: translateY(-1px);
color: white !important;
}
.um-path-card {
background: white;
border: 1px solid var(--light-border);
border-radius: var(--radius);
padding: 32px 24px;
transition: all 0.3s;
cursor: pointer;
position: relative;
overflow: hidden;
}
.um-path-card:hover {
border-color: var(--red-madrid);
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
/* Note: removed the decorative `::after` hover arrow that used to appear
bottom-right on hover -- every card already has an inline arrow in its
"Más información →" / "Visitar losquijotes.es ↗" link, so the ::after
rendered as a duplicate. Hover lift is handled further down in the
shared `.um-activity-card, .um-path-card, ...` block. */
/* CDU-112: SVG icon system. Replaces emoji used as decorative icons. */
/* Base utility: any inline icon inherits text color and aligns to baseline. */
.um-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.15em;
flex-shrink: 0;
fill: none;
stroke: currentColor;
}
/* CDU-212: inline body-copy icons used in place of decorative emoji
(e.g. /el-club/ palmarés, /que-hacemos/ "Actividades puntuales"). Slightly
larger than 1em so they read at body-text size, with a small trailing gap
so they don't kiss the following word, and a brand-red accent. */
.um-inline-icon {
width: 1.15em;
height: 1.15em;
margin-right: 0.4em;
vertical-align: -0.2em;
color: var(--red-madrid);
}
/* CDU-231: path-grid icon in a circular red-light chip, matches the school-benefit
chip pattern on /centros-educativos/. Was a bare 40px outline icon (CDU-226).
Icon bumped ~1.3x (40 → 52) and seated in an 80px circular chip. */
.um-path-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--red-light);
margin-bottom: 20px;
color: var(--red-madrid);
line-height: 1;
flex-shrink: 0;
}
.um-path-icon .um-icon { width: 52px; height: 52px; }
.um-path-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.um-path-card p {
font-size: 0.92rem; color: var(--text-secondary); line-height: 1.6;
margin-bottom: 0;
}
.um-activity-card {
border-radius: var(--radius);
overflow: hidden;
background: white;
border: 1px solid var(--light-border);
transition: box-shadow 0.3s, transform 0.3s;
}
.um-activity-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.um-activity-card figure,
.um-activity-card .wp-block-image {
margin: 0 !important;
padding: 0 !important;
width: 100%;
line-height: 0;
}
.um-activity-card img {
aspect-ratio: 16/10;
object-fit: cover;
width: 100% !important;
max-width: none !important;
display: block;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* ========== CDU-241 · GENERIC CARD PRIMITIVES ==========
Reusable card variants for ad-hoc inner-page card grids (e.g. /como-se-juega/,
/donde-jugar-ultimate-madrid/, /centros-educativos/). Specialized cards
(.um-path-card, .um-activity-card) keep their own rules above; these are
the editor-reachable primitives for new grids that don't need a bespoke
class. Sourced from prototype Q+D/ultimatemadrid-prototype.html
(.path-card / .trust-card outline + .school-content tan band). */
.um-card {
border-radius: var(--radius);
padding: 28px 24px;
box-sizing: border-box;
/* When dropped on a wp:column, fill the row so sibling cards line up. */
height: 100%;
}
/* White-bordered hoverable variant: matches prototype .path-card. */
.um-card--outline {
background: #ffffff;
border: 1px solid var(--light-border);
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.um-card--outline:hover {
border-color: var(--mid-gray);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
/* Tan / warm-gray variant: matches prototype .school-content band. */
.um-card--tan {
background: var(--warm-gray);
border: 0;
}
/* When the editor adds both classes (`um-card um-card--outline`) inside a
wp-block-group/column with its own padding, suppress double padding. */
.wp-block-column > .um-card,
.wp-block-group > .um-card { width: 100%; }
/* ========== FEATURE CHECK LIST ========== */
.um-feature-list { list-style: none; display: grid; gap: 12px; padding: 0; }
.um-feature-list li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 0.95rem; color: var(--text-secondary);
}
/* CDU-125: SVG check bullet (replaces ✓ U+2713). Sits on the typographic
baseline like the unicode bullet did and inherits brand red. */
.um-feature-list .um-icon {
color: var(--red-madrid);
width: 1.1em; height: 1.1em;
flex: none; margin-top: 0.15em;
}
/* CDU-125: red-on-red-light icon chip used in school-benefits pattern. */
.um-chip-icon {
display: inline-flex; align-items: center; justify-content: center;
color: var(--red-madrid); line-height: 0;
}
.um-chip-icon .um-icon { width: 1.2rem; height: 1.2rem; }
/* Inner-page navy banner covers should hug their content. WP core sets a default
`.wp-block-cover { min-height: 430px }` for hero usage; the inner-page-header
pattern carries `minHeight:0` which omits an inline override, so the 430px
default leaks through and leaves 100–180px of empty navy on short pages
(Contacto, Qué Hacemos). The home hero (`.um-hero-club`) sets its own
`minHeight:560`, which renders an inline style and is exempt from this reset. */
.entry-content > .wp-block-cover.alignfull:not(.um-hero-club) {
min-height: auto;
/* Global breathing room between the inner-page hero and the first content
section. Authors no longer need to add `padding-top:var(--wp--preset--spacing--60)`
to every page's first `wp:group`; the hero owns this gap. Pages that
already had that inline padding keep working (the next rule zeroes it). */
margin-bottom: var(--wp--preset--spacing--60, 3rem);
}
/* Zero the inline padding-top that legacy pages baked into the first
content section after the hero. Without this, the new hero margin would
stack on top of the existing 60-spacing padding and double the gap. */
.entry-content > .wp-block-cover.alignfull:not(.um-hero-club) + .wp-block-group,
.entry-content > .wp-block-cover.alignfull:not(.um-hero-club) + .wp-block-columns {
padding-top: 0 !important;
}
/* Collapse the default block-gap between any full-bleed colored band and the
block that follows. Without this, the entry-content's paper bg shows through
as a ~19px white strip -- invisible when both sides are white, but glaring
when one side has a bg color (Contacto's warm-gray form band, the home's
navy "Listo para descubrir" CTA → warm-gray Escríbenos band, etc.). */
.entry-content > .wp-block-cover.alignfull:not(.um-hero-club) + *,
.entry-content > .wp-block-group.alignfull[class*="has-"][class*="-background-color"] + .alignfull,
.entry-content > .um-cta-banner + * {
margin-top: 0;
}
/* When an alignwide editorial image sits between the navy banner and the next
bg-colored section (e.g. Contacto's jersey shot, Iniciación's hero photo),
it gets a `spacing-50` margin-top above and a default 19px block-gap below.
At wide viewports those gaps frame the image nicely; at ≤1200px the image
already edges out to the viewport so the gaps just leave white strips. Zero
them at the breakpoint to make the image read as a continuous band. */
@media (max-width: 1200px) {
.entry-content > .wp-block-cover.alignfull + figure.wp-block-image.alignwide {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.entry-content > .wp-block-cover.alignfull + figure.wp-block-image.alignwide + * {
margin-top: 0 !important;
}
}
/* ===== Mobile gutter for alignwide content =====
Pages using the new inner-page pattern (Qué Hacemos, Iniciación, Centros,
El Club, Prensa) have an `alignwide` group as their body wrapper. At wide
viewports it caps at 1200px with viewport-side margins; at ≤781px it
stretches to the viewport edge with no padding, so headings and cards
touch the screen edge. Add a 16px gutter at mobile so text and cards
breathe. Keep `alignfull` blocks edge-to-edge -- they own their own padding
for full-bleed backgrounds (cover banner, warm-gray CTA bands, etc.). */
@media (max-width: 781px) {
body.page .entry-content > .alignwide {
padding-left: 16px;
padding-right: 16px;
}
/* Counter blocks on /prensa/ are wp:columns directly inside an alignwide
group; the columns flatten to single-col stacked at mobile and need
the same gutter. */
body.page .entry-content > .wp-block-columns.alignwide {
padding-left: 16px;
padding-right: 16px;
}
}
/* ========== CANONICAL BUTTON SYSTEM ==========
Patterns, theme.json, and inline editor overrides had drifted to 8 different
heights (44/50/52/54/58/63/83/89) and 8 different padding combinations across
the site. This block locks every action button outside the header nav to one
of two variants: solid (filled red) or outline (transparent + 2px border).
Heights normalize to ~54px regardless of where the button sits -- banner,
body, or sidebar -- so a row of CTAs reads as a single design system. Header
nav button stays smaller (44px) on purpose; it's nav chrome, not page CTA.
`!important` is required to beat the inline `style="padding:…;border-radius:…"`
that the core button block emits when authors set custom values in the editor.
The selectors stay scoped to `.entry-content` and `.wp-block-cover` so we
don't grab the header CTA. */
/* Solid filled (default state). */
.entry-content .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.wp-block-cover .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
padding: 14px 28px !important;
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 1.5 !important;
border: 0 !important;
border-radius: 8px !important;
}
/* Outline variant -- 2px border, transparent bg. Padding shrunk by 2px each side
so the outer box matches the solid variant's height. */
.entry-content .wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link {
padding: 12px 26px !important;
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 1.5 !important;
background: transparent !important;
border: 2px solid currentColor !important;
border-radius: 8px !important;
}
/* The outer .wp-block-button wrapper sometimes carries inline `border-color`
+ `border-width` attributes baked in by the editor (e.g. `Volver al hub`),
which then renders a second outline on top of the inner anchor's border.
Strip the outer border so only the inner anchor draws the outline. */
.entry-content .wp-block-button.is-style-outline,
.wp-block-cover .wp-block-button.is-style-outline {
border: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
/* Header nav CTA: keep smaller, but force radius to match. */
header .wp-block-button__link {
border-radius: 8px !important;
}
/* Materials grid on /centros-educativos/: 6 small cards in a 3-column grid
where every cell shares the row height regardless of label length. The
markup is wp:columns (3) × wp:paragraph (2 each); we flatten the columns
with `display: contents` so the 6 paragraphs participate directly in the
parent grid, then `auto-rows: 1fr` syncs row heights. */
.entry-content .wp-block-columns.um-materials-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 1fr;
gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}
.entry-content .wp-block-columns.um-materials-grid > .wp-block-column {
display: contents;
}
.entry-content .wp-block-columns.um-materials-grid > .wp-block-column > p {
margin: 0 !important;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
}
/* Force the "Próximamente" chip onto its own row above the icon + label,
so each card reads chip-on-top instead of label-then-trailing-meta. */
.entry-content .wp-block-columns.um-materials-grid > .wp-block-column > p > .um-soon {
order: -1;
width: 100%;
margin-top: 0;
margin-bottom: 0.25em;
}
.entry-content .wp-block-columns.um-materials-grid > .wp-block-column > p > br {
display: none;
}
@media (max-width: 600px) {
.entry-content .wp-block-columns.um-materials-grid {
grid-template-columns: 1fr;
}
}
/* ========== INNER PAGE HEADER ========== */
/* CDU-121: pages render the header as `