/* Display face, embedded so it also loads when the pages are opened as local files (Safari treats a local file as having no origin and blocks font files, not data URIs). Latin subset, weight 700 only; ~20 KB base64. */ @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(data:font/woff2;base64,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) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================= Futsal Development Academy — site stylesheet Pure CSS. No framework. Mobile-first. Cascade layers manage specificity so nothing here needs !important. ========================================================================= */ @layer reset, tokens, base, layout, components, utilities; /* ========================================================================= RESET ========================================================================= */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100svh; } img, picture, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; } table { border-collapse: collapse; } } /* ========================================================================= TOKENS — design system ========================================================================= */ @layer tokens { :root { color-scheme: light; /* ---- Brand colour (OKLCH: near-black + white + warm red-orange accent) ---- */ --color-ink: oklch(19% 0 0); /* #141414 — body text on paper */ --color-ink-muted: oklch(32% 0.01 260); /* #303338 — secondary text on paper */ --color-paper: oklch(98.5% 0.003 95); /* #fbfaf8 — page background */ --color-surface: oklch(96.5% 0.004 95); /* card surfaces on paper */ --color-border: oklch(88% 0.004 95); /* hairline borders on paper */ --color-dark: oklch(14% 0.006 260); /* #08090c — header, footer, dark bands */ --color-dark-surface: oklch(20% 0.008 260); /* raised surfaces on dark */ --color-dark-border: oklch(30% 0.01 260); /* hairline borders on dark */ --color-on-dark: oklch(100% 0 0); /* white text on dark */ --color-on-dark-muted:oklch(72% 0.01 95); /* #a6a59e — de-emphasised text on dark */ --color-accent: oklch(55% 0.20 33); /* #cc2c05 — CTAs, active nav, highlights */ --color-accent-hover: oklch(from var(--color-accent) calc(l - 0.06) c h); /* l is a 0-1 number in relative colour syntax; a % here invalidates the whole value */ --color-accent-contrast: oklch(100% 0 0); /* text placed on accent fills */ /* ---- Spacing (fluid where it helps, fixed scale otherwise) ---- */ --gutter: clamp(1rem, 4vw, 2.5rem); --content-width: 75rem; --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: clamp(3rem, 5vw + 1rem, 5rem); --space-2xl: clamp(3.5rem, 6vw + 1rem, 7rem); /* ---- Radii — small, not pills ---- */ --radius-sm: 4px; --radius-md: 8px; /* ---- Shadows ---- */ --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.06); --shadow-md: 0 12px 28px -8px oklch(0% 0 0 / 0.22); /* ---- Type ---- */ --font-display: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --line-height-tight: 1.1; --line-height-base: 1.6; --step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); --step-0: 1rem; --step-1: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); --step-2: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem); --step-3: clamp(1.625rem, 1.4rem + 1vw, 2.125rem); --step-4: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); --step-5: clamp(2.5rem, 1.85rem + 2.8vw, 4.25rem); /* ---- Motion ---- */ --transition-fast: 150ms ease; --transition-base: 220ms ease; /* ---- Misc ---- */ --header-height: 4.5rem; } } /* ========================================================================= BASE — element defaults ========================================================================= */ @layer base { html { scroll-padding-top: var(--header-height); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--step-0); line-height: var(--line-height-base); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: var(--line-height-tight); text-wrap: balance; color: var(--color-ink); } h1 { font-size: var(--step-5); } h2 { font-size: var(--step-4); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p { max-width: 65ch; } p + p { margin-block-start: var(--space-sm); } a { text-underline-offset: 0.15em; } main a:not([class]) { color: var(--color-accent); text-decoration-thickness: from-font; } main a:not([class]):hover { color: var(--color-accent-hover); } ul, ol { padding-inline-start: 1.25em; } ul:not([class]) li + li, ol:not([class]) li + li { margin-block-start: 0.4em; } ul:not([class])::marker { color: var(--color-accent); } strong { font-weight: 700; } address { font-style: normal; } /* Focus management — never removed, only enhanced */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } } /* ========================================================================= LAYOUT — structure shared by every page ========================================================================= */ @layer layout { .skip-link { position: absolute; top: -3rem; inset-inline-start: var(--space-sm); z-index: 100; background: var(--color-accent); color: var(--color-accent-contrast); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-sm); font-weight: 600; transition: top var(--transition-fast); } .skip-link:focus-visible { top: var(--space-sm); } .container { width: min(100% - (2 * var(--gutter)), var(--content-width)); margin-inline: auto; } .section { padding-block: var(--space-2xl); } .section--tight { padding-block: var(--space-xl); } .section--dark { background: var(--color-dark); color: var(--color-on-dark); } .section--surface { background: var(--color-surface); } .section__header { max-width: 44rem; margin-block-end: var(--space-lg); } .section__header p { color: var(--color-ink-muted); font-size: var(--step-1); } .section--dark .section__header p { color: var(--color-on-dark-muted); } .section--dark :is(h1, h2, h3, h4), .hero :is(h1, h2, h3, h4) { color: var(--color-on-dark); } /* ---- Site header ---- */ .site-header { position: relative; z-index: 20; background: var(--color-dark); color: var(--color-on-dark); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--header-height); } .brand { display: inline-flex; align-items: center; gap: var(--space-2xs); text-decoration: none; flex-shrink: 0; } .brand__mark { width: 2.5rem; height: 2.5rem; } .brand__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--step-1); white-space: nowrap; } /* ---- Primary nav: small screens get a toggled dropdown ---- */ .nav-toggle { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); flex-shrink: 0; } .nav-toggle__icon, .nav-toggle__icon::before, .nav-toggle__icon::after { display: block; width: 1.375rem; height: 2px; background: currentColor; border-radius: 1px; transition: transform var(--transition-fast), opacity var(--transition-fast); } .nav-toggle__icon { position: relative; } .nav-toggle__icon::before, .nav-toggle__icon::after { content: ""; position: absolute; inset-inline-start: 0; } .nav-toggle__icon::before { transform: translateY(-6px); } .nav-toggle__icon::after { transform: translateY(6px); } .nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(0) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: translateY(0) rotate(-45deg); } .nav-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; } .nav-list a { display: block; padding-block: 0.875rem; min-height: 44px; font-weight: 600; text-decoration: none; border-inline-start: 3px solid transparent; padding-inline-start: var(--space-sm); } .nav-list a[aria-current="page"] { border-inline-start-color: var(--color-accent); color: var(--color-on-dark); } .nav-list a:hover { border-inline-start-color: var(--color-on-dark-muted); background: var(--color-dark-surface); } @media (max-width: 56.1875em) { .primary-nav { position: absolute; inset-inline: 0; top: 100%; background: var(--color-dark); max-height: 0; overflow: hidden; box-shadow: var(--shadow-md); transition: max-height var(--transition-base); } body:has(.primary-nav.is-open) { overflow: hidden; } .primary-nav.is-open { max-height: 32rem; } .nav-list { padding: var(--space-sm) var(--gutter) var(--space-lg); } } @media (min-width: 56.25em) { .nav-toggle { display: none; } .primary-nav { max-height: none; overflow: visible; } .nav-list { flex-direction: row; align-items: center; gap: var(--space-sm); } .nav-list a { padding-inline: var(--space-2xs); border-inline-start: none; border-block-end: 3px solid transparent; } .nav-list a[aria-current="page"] { border-inline-start: none; border-block-end-color: var(--color-accent); } .nav-list a:hover { background: none; border-block-end-color: var(--color-on-dark-muted); } .nav-list a[aria-current="page"]:hover { border-block-end-color: var(--color-accent); } } /* ---- Breadcrumb ---- */ .breadcrumb { padding-block-start: var(--space-md); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-3xs); list-style: none; padding: 0; font-size: var(--step--1); color: var(--color-ink-muted); } .breadcrumb li:not(:last-child)::after { content: "/"; margin-inline-start: var(--space-3xs); color: var(--color-border); } .breadcrumb a { color: var(--color-ink-muted); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--color-ink); font-weight: 600; } /* ---- Site footer ---- */ .site-footer { background: var(--color-dark); color: var(--color-on-dark-muted); } .footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-lg); padding-block: var(--space-2xl) var(--space-lg); } .footer__heading { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--step--1); color: var(--color-on-dark); margin-block-end: var(--space-sm); } .footer__brand { display: inline-flex; align-items: center; gap: var(--space-2xs); text-decoration: none; color: var(--color-on-dark); margin-block-end: var(--space-2xs); } .footer__brand img { width: 2.25rem; height: 2.25rem; } .footer__brand span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--step-1); } .footer__tagline { max-width: 32ch; } .footer__list { list-style: none; padding: 0; display: grid; gap: var(--space-2xs); } .footer__list a { text-decoration: none; display: inline-block; min-height: 44px; display: inline-flex; align-items: center; } .footer__list a:hover, .footer__bottom a:hover { color: var(--color-on-dark); } .footer__bottom { border-block-start: 1px solid var(--color-dark-border); padding-block: var(--space-sm); display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: space-between; font-size: var(--step--1); } } /* ========================================================================= COMPONENTS ========================================================================= */ @layer components { /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 44px; padding-block: 0.75em; padding-inline: 1.5em; border-radius: var(--radius-md); font-weight: 600; font-size: var(--step-0); text-decoration: none; border: 1px solid transparent; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .btn--primary { background: var(--color-accent); color: var(--color-accent-contrast); &:hover { background: var(--color-accent-hover); } } .btn--secondary { background: transparent; color: inherit; border-color: currentColor; &:hover { background: color-mix(in oklch, currentColor 12%, transparent); } } /* ---- Kicker ---- */ .kicker { display: inline-block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: var(--step--1); color: var(--color-accent); margin-block-end: var(--space-2xs); } .kicker--on-dark { color: var(--color-on-dark); } .kicker--on-dark::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; background: var(--color-accent); margin-inline-end: 0.5em; border-radius: 1px; } /* ---- TODO placeholder flag ---- */ mark.todo { background: color-mix(in oklch, var(--color-accent) 16%, var(--color-paper)); color: var(--color-ink); padding-inline: 0.3em; border-radius: 2px; border-block-end: 2px dashed var(--color-accent); font-weight: 600; } .section--dark mark.todo, .hero mark.todo { background: color-mix(in oklch, var(--color-accent) 30%, var(--color-dark)); color: var(--color-on-dark); } /* Standalone text links (section "more" links, phone, email): give them a comfortable tap area on touch screens without changing their inline look. */ @media (pointer: coarse) { p > a:only-child, a[href^="tel:"], a[href^="mailto:"] { display: inline-block; padding-block: 0.65rem; margin-block: -0.65rem; } } /* ---- Hero ---- */ .hero { position: relative; isolation: isolate; background: var(--color-dark); color: var(--color-on-dark); overflow: hidden; } /* Photo band sits in normal flow above the copy; a short fade at its foot blends into the panel. Selectors carry the parent so they beat the shared .hero__media/.evaluation-band__media rules below. */ /* Explicit height rather than aspect-ratio + max-height: when the cap applies, WebKit preserves the ratio by shrinking the WIDTH, leaving a gap on wide windows. */ .hero > .hero__media { position: relative; inset: auto; width: 100%; height: min(56.25vw, 60svh, 36rem); /* 16:9 until the viewport cap wins */ } @media (min-width: 48em) { .hero > .hero__media { height: min(42.86vw, 60svh, 36rem); } /* 21:9 */ } .hero > .hero__media img { position: absolute; inset: 0; object-position: center 30%; } .hero > .hero__media::after { background: linear-gradient(180deg, oklch(14% 0.006 260 / 0) 60%, var(--color-dark) 100%); } /* Stacking inside .hero / .evaluation-band (both isolate): media 0, overlay 1, copy 2. The overlay must be a positive layer above the img, or it paints behind the photo. */ .hero__media, .evaluation-band__media { position: absolute; inset: 0; z-index: 0; } .hero__media img, .evaluation-band__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .hero__media::after, .evaluation-band__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, oklch(14% 0.006 260 / 0.35) 0%, oklch(14% 0.006 260 / 0.68) 32%, oklch(14% 0.006 260 / 0.89) 58%, oklch(14% 0.006 260 / 0.92) 100% ); } .hero__content { position: relative; z-index: 2; padding-block: var(--space-lg) var(--space-xl); } .hero h1 { max-width: 16ch; } @media (min-width: 64em) { .hero__content { padding-block: var(--space-lg) var(--space-xl); } .hero__subhead { max-width: 48ch; } } .hero h1 { color: var(--color-on-dark); font-size: var(--step-5); } .hero__subhead { font-size: var(--step-1); margin-block-start: var(--space-sm); max-width: 38ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-lg); } /* ---- Trust strip ---- */ .trust-strip { background: var(--color-dark); color: var(--color-on-dark-muted); border-block-start: 1px solid var(--color-dark-border); list-style: none; margin: 0; padding-block: var(--space-sm); padding-inline: max(var(--gutter), calc((100vw - var(--content-width)) / 2)); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .trust-strip li { display: flex; align-items: center; gap: var(--space-sm); } @media (max-width: 47.9375em) { .trust-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-md); } } @media (min-width: 48em) { .trust-strip li:not(:last-child)::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); margin-inline-start: var(--space-sm); } } /* ---- Card grids with subgrid row-alignment ---- */ .pillars, .program-cards, .coach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-lg); } .pillar-card, .program-card, .coach-card { display: grid; gap: var(--space-2xs); padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius-md); container-type: inline-size; } /* Pillars: title row, body row */ .pillars { grid-template-rows: auto 1fr; margin-block-start: var(--space-2xl); } .coach-grid + p { margin-block-start: var(--space-lg); } .pillar-card { grid-row: span 2; grid-template-rows: subgrid; } .pillar-card__title { grid-row: 1; } .pillar-card__body { grid-row: 2; } /* Program cards: media row, title row, body row */ .program-cards { grid-template-rows: auto auto 1fr; } .program-card { position: relative; grid-row: span 3; grid-template-rows: subgrid; } .program-card__media { grid-row: 1; } .program-card__title { grid-row: 2; } .program-card__body { grid-row: 3; } .program-card__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; border-radius: var(--radius-sm); } .program-card__title a { text-decoration: none; color: var(--color-ink); } .program-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .program-card:hover { box-shadow: var(--shadow-sm); } /* Coach grid: media row, name row, role row, bio row */ .coach-grid { grid-template-rows: auto auto auto 1fr; } .coach-card { grid-row: span 4; grid-template-rows: subgrid; } .coach-card__name { grid-row: 2; } .coach-card__role { grid-row: 3; } .coach-card__bio { grid-row: 4; } /* Team page: eight people with very different bio lengths and an extra "Off the court" line, so cards flow naturally instead of sharing subgrid rows (which stretched the short cards into big gaps). */ .coach-grid--flow { align-items: start; } .coach-grid--flow .coach-card { grid-row: auto; grid-template-rows: none; align-content: start; } .coach-grid--flow .coach-card > * { grid-row: auto; } .coach-card__role { font-weight: 600; color: var(--color-accent); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.03em; } @container (min-width: 18rem) { .pillar-card__title { font-size: var(--step-2); } } /* ---- Two-up media/content blocks (About, Why futsal) ---- */ .split { display: grid; gap: var(--space-lg); align-items: center; } .split__media img { border-radius: var(--radius-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; } @media (min-width: 48em) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } .split--media-end .split__media { order: 2; } .split--media-end .split__content { order: 1; } } /* ---- Coach featured ---- */ .coach-featured { display: grid; gap: var(--space-lg); margin-block-end: var(--space-xl); align-items: start; } .coach-featured__media img { border-radius: var(--radius-md); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; } .coach-featured__role { color: var(--color-accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--step--1); } @media (min-width: 48em) { .coach-featured { grid-template-columns: minmax(14rem, 20rem) 1fr; } } .coach-card__media { grid-row: 1; } .coach-card__media img { border-radius: var(--radius-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; } /* ---- Evaluation CTA band ---- */ .evaluation-band { position: relative; isolation: isolate; overflow: hidden; text-align: start; border-block-start: 3px solid var(--color-accent); } .evaluation-band__media::after { background: linear-gradient( 90deg, oklch(14% 0.006 260 / 0.95) 0%, oklch(14% 0.006 260 / 0.88) 50%, oklch(14% 0.006 260 / 0.55) 100% ); } .evaluation-band__media img { object-position: center 25%; } .evaluation-band__content { position: relative; z-index: 2; max-width: 42rem; } .evaluation-band__meta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); font-weight: 700; margin-block: var(--space-md); } /* ---- Programs page: alternating media/content ---- */ .jump-nav { background: var(--color-surface); border-radius: var(--radius-md); margin-block-end: var(--space-2xl); } .jump-nav__list { list-style: none; padding: var(--space-2xs); margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .jump-nav__list a { display: flex; align-items: center; min-height: 44px; padding-inline: var(--space-sm); text-decoration: none; font-weight: 600; border-radius: var(--radius-sm); } .jump-nav__list a:hover { background: var(--color-paper); } @media (min-width: 48em) { .jump-nav { position: sticky; top: var(--space-sm); z-index: 10; } .jump-nav__list { flex-wrap: nowrap; } } .program-section { container-type: inline-size; padding-block: var(--space-2xl); border-block-end: 1px solid var(--color-border); } .program-section:last-of-type { border-block-end: none; } .program-section__grid { display: grid; gap: var(--space-lg); } .program-section__media { order: 1; } .program-section__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); } .program-section__content { order: 2; } .program-section__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-block-start: var(--space-md); } @container (min-width: 40rem) { .program-section__grid { grid-template-columns: 1fr 1fr; align-items: center; } .program-section:nth-of-type(even) .program-section__media { order: 2; } .program-section:nth-of-type(even) .program-section__content { order: 1; } } /* ---- Comparison table ---- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); border: 1px solid var(--color-border); } .comparison-table { width: 100%; min-width: 42rem; font-size: var(--step--1); } .comparison-table th, .comparison-table td { text-align: start; padding: var(--space-sm); border-block-end: 1px solid var(--color-border); } .comparison-table thead th { background: var(--color-dark); color: var(--color-on-dark); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; } .comparison-table tbody tr:nth-child(even) { background: var(--color-surface); } /* ---- Forms ---- */ .contact-form { display: grid; gap: var(--space-md); } .form-row { display: grid; gap: var(--space-md); } @media (min-width: 40em) { .form-row--2up { grid-template-columns: 1fr 1fr; } } .form-field { display: grid; gap: var(--space-3xs); } .form-field label { font-weight: 600; font-size: var(--step--1); } .form-field .hint { font-weight: 400; color: var(--color-ink-muted); text-transform: none; letter-spacing: normal; } .form-field:has(:required) label::after { content: " *"; color: var(--color-accent); } .form-field input, .form-field textarea { min-height: 44px; padding: var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-paper); } .form-field textarea { min-height: 8rem; resize: vertical; } .form-field input:focus-visible, .form-field textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-color: var(--color-accent); } .form-note { font-size: var(--step--1); color: var(--color-ink-muted); } .required-note { font-size: var(--step--1); color: var(--color-ink-muted); } /* ---- How-to-join callout ---- */ .callout { background: var(--color-surface); border-inline-start: 3px solid var(--color-accent); border-radius: var(--radius-sm); padding: var(--space-md); margin-block-start: var(--space-lg); } .callout__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin-block-start: var(--space-sm); font-weight: 600; } .split--start { align-items: start; } .contact-aside :is(h2, h3) { font-size: var(--step-2); margin-block: var(--space-md) var(--space-xs); } .contact-aside :is(h2, h3):first-child { margin-block-start: 0; } .steps { margin: 0; padding-inline-start: 1.5rem; display: grid; gap: var(--space-xs); } .steps li::marker { color: var(--color-accent); font-family: var(--font-display); font-weight: 700; } .inline-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); font-weight: 600; } /* ---- Contact details ---- */ .contact-details { display: grid; gap: var(--space-2xs); margin-block-end: var(--space-lg); } .contact-details a { text-decoration: underline; } /* ========================================================================= Phase 2 additions — about, why-futsal, how-to-join, our-team, player-evaluation. Appended rather than folded into the rules above so the Phase 1 components stay untouched. ========================================================================= */ /* ---- Stat strip: compact stats inline in a light section (about.html) ---- */ .stat-strip { list-style: none; margin: var(--space-lg) 0 0; padding-block-start: var(--space-lg); border-block-start: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; font-size: var(--step--1); color: var(--color-ink-muted); } .stat-strip li { display: flex; align-items: center; gap: var(--space-lg); } .stat-strip li:not(:last-child)::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); } /* ---- Numbered pillar variant (about.html "Our mission") ---- */ /* Numbers come from data-n on each title. CSS counters cannot be used here: .pillar-card is a size container, and container-type implies style containment, which gives every card its own counter scope (every card would read "1"). */ .pillars--numbered .pillar-card__title[data-n]::before { content: attr(data-n) ". "; color: var(--color-accent); } /* ---- Pull quote (about.html "Our philosophy", why-futsal.html essay) ---- */ .pull-quote { border-inline-start: 3px solid var(--color-accent); padding-inline-start: var(--space-md); margin-block: var(--space-md) 0; } .pull-quote p { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: var(--line-height-tight); color: var(--color-ink); max-width: 28ch; } .section--dark .pull-quote, .section--dark .pull-quote p { color: var(--color-on-dark); } /* ---- Long-form prose measure (why-futsal.html founder essay) ---- */ .prose { max-width: 65ch; } .prose > * + * { margin-block-start: var(--space-md); } .prose .pull-quote { margin-block: var(--space-lg); } /* Essay + companion photo: photo first on phones, sticky right column on wide screens */ .essay { display: grid; gap: var(--space-lg); } .essay__media { order: -1; margin: 0; } .essay__media img { width: 100%; height: auto; border-radius: var(--radius-md); } @media (min-width: 64em) { .essay { grid-template-columns: minmax(0, 65ch) minmax(16rem, 1fr); gap: var(--space-2xl); align-items: start; } .essay__media { order: 0; position: sticky; top: calc(var(--header-height) + var(--space-md)); } } /* ---- Generic button row for text-only CTA sections (no photo band) ---- */ .cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); margin-block-start: var(--space-lg); } /* ---- Numbered step cards: larger variant of .steps for content-heavy steps that carry a heading, body copy, and sometimes a button (how-to-join.html "Three steps") ---- */ .step-cards { list-style: none; counter-reset: step; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-lg); } .step-card { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); padding: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-md); } .step-card::before { content: counter(step); font-family: var(--font-display); font-weight: 700; font-size: var(--step-4); line-height: 1; color: var(--color-accent); } .step-card__body > * + * { margin-block-start: var(--space-xs); } .step-card__body .btn { margin-block-start: var(--space-sm); } @media (max-width: 26.25em) { .step-card { grid-template-columns: 1fr; } .step-card::before { font-size: var(--step-2); } } /* ---- FAQ: details/summary styled as a real control (how-to-join.html "Common questions") ---- */ .faq { display: grid; gap: var(--space-sm); margin-block-start: var(--space-lg); } .faq-item { background: var(--color-surface); border-radius: var(--radius-md); padding-inline: var(--space-md); } .faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 44px; padding-block: var(--space-sm); font-weight: 600; font-size: var(--step-1); transition: color var(--transition-fast); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; font-size: var(--step-1); color: var(--color-accent); transition: transform var(--transition-fast); } .faq-item summary:hover { color: var(--color-accent); } .faq-item summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } .faq-item[open] summary { border-block-end: 1px solid var(--color-border); margin-block-end: var(--space-sm); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { padding-block-end: var(--space-md); color: var(--color-ink-muted); } /* ---- Fact grid: key-facts row, e.g. Date / Fee / Location (player-evaluation.html) ---- */ .fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0 0; } .fact-grid__item { padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius-md); border-inline-start: 3px solid var(--color-accent); } .fact-grid__item dt { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; font-size: var(--step--1); color: var(--color-ink-muted); } .fact-grid__item dd { margin: 0; margin-block-start: var(--space-3xs); font-size: var(--step-2); font-weight: 600; } /* ---- Coach "off the court" fact line (our-team.html) ---- */ .coach-fact { font-size: var(--step--1); color: var(--color-ink-muted); margin-block-start: var(--space-2xs); } /* ---- Per-photo focal point for tight head crops (our-team.html: Carlos Sanchis' tall photo, Art Termkolli's square photo). Falls back to dead centre when --photo-focus isn't set inline, so every other coach photo is unaffected. ---- */ .coach-card__media img { object-position: center var(--photo-focus, 50%); } } /* ========================================================================= UTILITIES ========================================================================= */ @layer utilities { .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } }