/* ============================================================ Mid Somerset RTC - styles.css ============================================================ */ /* Google Fonts are loaded via in each HTML - not here */ /* ── CSS Custom Properties ── */ :root { /* Colours - JPL Brand Palette */ --color-navy-deep: #1D263F; --color-navy-mid: #252f50; --color-blue: #5ECFF5; --color-teal: #03FFFF; --color-black: #0a0a0a; --color-white: #FFFFFF; --color-grey-light: #F1F5F9; --color-grey-mid: #CBD5E1; --color-grey-text: #5C6878; --color-blue-light: #B2EFFC; --color-blue-label: #93c5fd; /* accent label colour used on dark backgrounds */ --color-blue-royal: #2563EB; /* secondary blue for glows, focus rings, gradients */ --color-gold: #F7EA2F; --color-success-bg: #dcfce7; --color-success-border: #16a34a; --color-success-text: #15803d; --color-error-bg: #fef2f2; --color-error-border: #dc2626; --color-error-text: #b91c1c; --color-navy-banner: #060f1f; /* deep nav used in champions banner */ --color-camp-start: #0B2447; /* camp banner gradient start */ /* Typography */ --font-family: 'Montserrat', sans-serif; --font-display: 'League Gothic', sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; --font-size-6xl: 3.75rem; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Borders */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.15); --shadow-lg: 0 10px 30px rgba(0,0,0,0.2); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* Navbar height */ --navbar-height: 80px; } /* ============================================================ Reset & Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-family); font-size: var(--font-size-base); font-weight: 400; line-height: 1.6; color: var(--color-black); background-color: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font-family: var(--font-family); cursor: pointer; border: none; background: none; } input, textarea, select { font-family: var(--font-family); font-size: var(--font-size-base); } h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; text-wrap: balance; } /* ============================================================ Utilities ============================================================ */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-6); } .section { padding-block: var(--space-20); } .section--grey { background-color: var(--color-grey-light); } .section--dark { background-color: var(--color-navy-deep); color: var(--color-white); } .section-label { display: inline-block; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-navy-deep); margin-bottom: var(--space-4); line-height: 1; } .section--dark .section-label { color: var(--color-teal); } .section-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4rem); font-weight: 400; color: var(--color-navy-deep); margin-bottom: var(--space-4); letter-spacing: 0.02em; line-height: 1; } .section--dark .section-title { color: var(--color-white); } .section-subtitle { font-size: var(--font-size-lg); color: var(--color-grey-text); max-width: 600px; margin-bottom: var(--space-12); } .section--dark .section-subtitle { color: rgba(255,255,255,0.75); } .text-center { text-align: center; } .text-center .section-subtitle { margin-inline: auto; } /* Grid helpers */ .grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } .grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } .grid-4 { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } /* ============================================================ Navbar ============================================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--navbar-height); background-color: var(--color-navy-deep); border-bottom: 1px solid rgba(255,255,255,0.08); transition: box-shadow var(--transition-normal), background-color var(--transition-normal); } .navbar.scrolled { background-color: rgba(29, 38, 63, 0.97); box-shadow: 0 4px 20px rgba(0,0,0,0.35); } .navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding-inline: var(--space-6); max-width: 1200px; margin-inline: auto; } .navbar__logo { text-decoration: none; display: flex; align-items: center; } .navbar__logo-img { height: 72px; width: auto; display: block; } .navbar__nav { display: none; align-items: center; gap: var(--space-1); } .navbar__link { display: block; padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); font-weight: 600; color: rgba(255,255,255,0.8); border-radius: var(--radius-md); transition: color var(--transition-fast), background-color var(--transition-fast); text-decoration: none; } .navbar__link:hover { color: var(--color-white); background-color: rgba(255,255,255,0.1); } .navbar__link.active { color: var(--color-white); background-color: var(--color-blue); } .navbar__cta { display: none; } .navbar__cta .btn-primary { padding: var(--space-2) var(--space-5); font-size: var(--font-size-sm); } /* Hamburger */ .navbar__hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; cursor: pointer; background: none; border: none; padding: var(--space-2); border-radius: var(--radius-md); transition: background-color var(--transition-fast); } .navbar__hamburger:hover { background-color: rgba(255,255,255,0.1); } .navbar__hamburger span { display: block; width: 22px; height: 2px; background-color: var(--color-white); border-radius: 2px; transition: transform var(--transition-normal), opacity var(--transition-normal); transform-origin: center; } .navbar__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar__hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .navbar__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu */ .navbar__mobile-menu { display: none; position: fixed; top: var(--navbar-height); left: 0; right: 0; background-color: var(--color-navy-deep); border-top: 1px solid rgba(255,255,255,0.1); padding: var(--space-4) var(--space-6); flex-direction: column; gap: var(--space-1); box-shadow: 0 8px 20px rgba(0,0,0,0.3); z-index: 999; } .navbar__mobile-menu.open { display: flex; } .navbar__mobile-menu .navbar__link { padding: var(--space-3) var(--space-4); font-size: var(--font-size-base); border-radius: var(--radius-md); } .navbar__mobile-menu .btn-primary { margin-top: var(--space-3); text-align: center; padding: var(--space-3) var(--space-6); } /* Page offset for fixed navbar */ main { padding-top: var(--navbar-height); } /* ============================================================ Buttons ============================================================ */ .btn-primary, .btn-secondary, .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-8); font-size: var(--font-size-base); font-weight: 700; border-radius: var(--radius-md); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); letter-spacing: 0.01em; cursor: pointer; text-decoration: none; border: 2px solid transparent; white-space: nowrap; flex-shrink: 0; } .btn-primary { background-color: var(--color-teal); color: var(--color-navy-deep); border-color: var(--color-teal); } .btn-primary:hover { background-color: #00e5e5; border-color: #00e5e5; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(3,255,255,0.35); } .btn-secondary { background-color: var(--color-white); color: var(--color-navy-deep); border-color: var(--color-white); } .btn-secondary:hover { background-color: var(--color-grey-light); border-color: var(--color-grey-light); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-outline { background-color: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.6); } .btn-outline:hover { background-color: rgba(255,255,255,0.1); border-color: var(--color-white); transform: translateY(-2px); } .btn-outline--dark { color: var(--color-navy-deep); border-color: var(--color-navy-deep); } .btn-outline--dark:hover { background-color: var(--color-navy-deep); color: var(--color-white); } .btn-sm { padding: var(--space-2) var(--space-5); font-size: var(--font-size-sm); } /* ============================================================ Hero - Full viewport (Home) ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; background-color: var(--color-navy-deep); overflow: hidden; padding-top: var(--navbar-height); } .hero__bg { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(11,36,71,0.72) 0%, rgba(25,55,109,0.58) 60%, rgba(30,58,138,0.65) 100%), url('https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=1600&auto=format&fit=crop&q=80') center/cover no-repeat; z-index: 0; } .hero__glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,0.18) 0%, transparent 70%); top: -100px; right: -100px; z-index: 0; } .hero__glow--2 { width: 400px; height: 400px; bottom: -80px; left: -80px; top: auto; right: auto; background: radial-gradient(circle, rgba(37,99,235,0.12) 0%, transparent 70%); } .hero__content { position: relative; z-index: 1; text-align: center; padding-block: var(--space-20); } .hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-6); } .hero__badge { display: inline-flex; align-items: center; gap: var(--space-2); background-color: var(--color-teal); color: var(--color-navy-deep); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); white-space: nowrap; } .hero__badge--outline { background-color: transparent; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.35); } .hero__title { font-family: var(--font-display); font-size: clamp(3.5rem, 12vw, 8rem); font-weight: 400; color: var(--color-white); line-height: 0.92; margin-bottom: var(--space-6); letter-spacing: 0.02em; } .hero__title span { color: var(--color-blue); display: block; } .hero__tagline { font-size: var(--font-size-xl); font-weight: 600; color: rgba(255,255,255,0.75); margin-bottom: var(--space-10); letter-spacing: 0.01em; } .hero__ctas { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: center; justify-content: center; } .hero__text-cta { display: inline-flex; align-items: center; gap: var(--space-2); color: rgba(255,255,255,0.82); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.02em; transition: color var(--transition-fast), gap var(--transition-fast); text-decoration: none; } .hero__text-cta:hover { color: var(--color-white); gap: var(--space-3); } /* ============================================================ Hero - Page variant (inner pages) ============================================================ */ .page-hero { position: relative; height: 400px; display: flex; align-items: center; background-color: var(--color-navy-deep); overflow: hidden; } .page-hero__bg { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(11,36,71,0.85) 0%, rgba(25,55,109,0.8) 100%), url('https://images.unsplash.com/photo-1551958219-acbc395d4056?w=1400&auto=format&fit=crop&q=80') center/cover no-repeat; z-index: 0; } .page-hero__content { position: relative; z-index: 1; } .page-hero__label { display: inline-block; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-blue-label); margin-bottom: var(--space-3); } .page-hero__title { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 6rem); font-weight: 400; color: var(--color-white); letter-spacing: 0.02em; line-height: 0.95; } .page-hero__subtitle { font-size: var(--font-size-lg); color: rgba(255,255,255,0.7); margin-top: var(--space-4); max-width: 560px; } /* ============================================================ Stat Boxes ============================================================ */ .stats-row { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-10); } .stat-box { background-color: var(--color-grey-light); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); text-align: center; border: 2px solid transparent; transition: border-color var(--transition-normal), transform var(--transition-normal); } .stat-box:hover { border-color: var(--color-blue); transform: translateY(-4px); } .stat-box__value { font-size: var(--font-size-3xl); font-weight: 800; color: var(--color-navy-deep); margin-bottom: var(--space-1); } .stat-box__label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-grey-text); text-transform: uppercase; letter-spacing: 0.08em; } /* ============================================================ Cards - Programme / Feature ============================================================ */ .card { background-color: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm); border: 1px solid var(--color-grey-mid); transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--color-blue); } .card__icon { font-size: 1.75rem; color: var(--color-teal); margin-bottom: var(--space-5); line-height: 1; } .card--dark .card__icon { color: var(--color-teal); } .card__title { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-navy-deep); margin-bottom: var(--space-3); } .card__text { font-size: var(--font-size-base); color: var(--color-grey-text); line-height: 1.7; } /* Dark card variant */ .card--dark { background-color: var(--color-navy-mid); border-color: rgba(255,255,255,0.1); color: var(--color-white); } .card--dark .card__title { color: var(--color-white); } .card--dark .card__text { color: rgba(255,255,255,0.7); } .card--dark:hover { border-color: var(--color-blue); background-color: var(--color-blue-royal); } /* ============================================================ News / Article Cards ============================================================ */ .news-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } .news-card { background-color: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--color-grey-mid); transition: transform var(--transition-normal), box-shadow var(--transition-normal); display: flex; flex-direction: column; } .news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .news-card__image { height: 200px; background: linear-gradient(135deg, var(--color-navy-deep) 0%, var(--color-blue) 100%); position: relative; overflow: hidden; } .news-card__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,36,71,0.4) 0%, transparent 60%); } .news-card__image--variant-1 { background: url('https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=600&auto=format&fit=crop&q=80') center/cover no-repeat; } .news-card__image--variant-2 { background: url('https://images.unsplash.com/photo-1431324155629-1a6deb1dec8d?w=600&auto=format&fit=crop&q=80') center/cover no-repeat; } .news-card__image--variant-3 { background: url('https://images.unsplash.com/photo-1517927033932-b3d18e61fb3a?w=600&auto=format&fit=crop&q=80') center/cover no-repeat; } .news-card__image--variant-4 { background: url('https://images.unsplash.com/photo-1529900748604-07564a03e7a6?w=600&auto=format&fit=crop&q=80') center/cover no-repeat; } .news-card__image--variant-5 { background: url('https://images.unsplash.com/photo-1606925797300-0b35e9d1794e?w=600&auto=format&fit=crop&q=80') center/cover no-repeat; } .news-card__image--variant-6 { background: url('https://images.unsplash.com/photo-1518604666860-9ed391f76460?w=600&auto=format&fit=crop&q=80') center/cover no-repeat; } .news-card__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; } .news-card__meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; } .news-card__tag { display: inline-block; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background-color: var(--color-blue-light); color: var(--color-blue); } .news-card__date { font-size: var(--font-size-xs); color: var(--color-grey-text); font-weight: 600; } .news-card__title { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-navy-deep); margin-bottom: var(--space-3); line-height: 1.3; } .news-card__excerpt { font-size: var(--font-size-sm); color: var(--color-grey-text); line-height: 1.7; flex: 1; margin-bottom: var(--space-5); } .news-card__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: 700; color: var(--color-blue); text-decoration: none; transition: gap var(--transition-fast), color var(--transition-fast); } .news-card__link:hover { gap: var(--space-3); color: var(--color-blue-royal); } .news-card__link::after { content: '→'; } /* ============================================================ Team Cards ============================================================ */ .team-card { background-color: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--color-grey-mid); transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); } .team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--color-blue); } .team-card__header { background: linear-gradient(135deg, var(--color-navy-deep), var(--color-navy-mid)); padding: var(--space-8) var(--space-6); text-align: center; } .team-card__age { font-size: var(--font-size-3xl); font-weight: 800; color: var(--color-white); letter-spacing: -0.02em; } .team-card__body { padding: var(--space-6); } .team-card__training { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-blue); margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3); background-color: var(--color-blue-light); border-radius: var(--radius-sm); width: fit-content; } .team-card__desc { font-size: var(--font-size-sm); color: var(--color-grey-text); line-height: 1.7; margin-bottom: var(--space-6); } /* ============================================================ Coach Cards ============================================================ */ .coach-card { background-color: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-8); text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--color-grey-mid); transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .coach-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .coach-card__avatar { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--color-navy-deep), var(--color-blue)); margin: 0 auto var(--space-5); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--color-white); font-weight: 700; border: 4px solid var(--color-blue-light); } .coach-card__name { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-navy-deep); margin-bottom: var(--space-1); } .coach-card__role { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-blue); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-4); } .coach-card__bio { font-size: var(--font-size-sm); color: var(--color-grey-text); line-height: 1.7; } /* ============================================================ CTA Strip ============================================================ */ .cta-strip { background: linear-gradient(135deg, var(--color-navy-deep), var(--color-navy-mid)); padding-block: var(--space-20); text-align: center; position: relative; overflow: hidden; } .cta-strip::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( -55deg, transparent, transparent 40px, rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 42px ); } .cta-strip__content { position: relative; z-index: 1; } .cta-strip__title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 400; color: var(--color-white); margin-bottom: var(--space-4); letter-spacing: 0.02em; line-height: 1; } .cta-strip__text { font-size: var(--font-size-lg); color: rgba(255,255,255,0.75); max-width: 560px; margin-inline: auto; margin-bottom: var(--space-10); } .cta-strip__buttons { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; } /* ============================================================ About - Story Section ============================================================ */ .story-image { width: 100%; min-height: 350px; border-radius: var(--radius-xl); background: url('https://images.unsplash.com/photo-1560272564-c83b66b1ad12?w=800&auto=format&fit=crop&q=80') center/cover no-repeat; overflow: hidden; } .story-image__icon { display: none; } /* ============================================================ Offer List ============================================================ */ .offer-list { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } .offer-item { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) var(--space-6); background-color: var(--color-white); border-radius: var(--radius-md); border: 1px solid var(--color-grey-mid); transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .offer-item:hover { border-color: var(--color-blue); box-shadow: var(--shadow-sm); } .offer-item__icon { width: 44px; height: 44px; min-width: 44px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-navy-deep), var(--color-blue)); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--color-white); box-shadow: 0 3px 10px rgba(37,99,235,0.3); } .offer-item__icon i { line-height: 1; } .offer-item__text { font-size: var(--font-size-base); font-weight: 600; color: var(--color-navy-deep); } .offer-item__sub { font-size: var(--font-size-sm); color: var(--color-grey-text); margin-top: var(--space-1); } /* ============================================================ Contact / Form ============================================================ */ .contact-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-12); } .form-card { background-color: var(--color-white); border-radius: var(--radius-xl); padding: var(--space-10); box-shadow: var(--shadow-md); border: 1px solid var(--color-grey-mid); } .form-title { font-size: var(--font-size-2xl); font-weight: 800; color: var(--color-navy-deep); margin-bottom: var(--space-2); } .form-subtitle { font-size: var(--font-size-sm); color: var(--color-grey-text); margin-bottom: var(--space-8); } .form-group { margin-bottom: var(--space-5); } .form-label { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-navy-deep); margin-bottom: var(--space-2); } .form-label span { color: var(--color-blue); } .form-input, .form-select, .form-textarea { width: 100%; padding: var(--space-3) var(--space-4); font-size: var(--font-size-base); font-family: var(--font-family); color: var(--color-black); background-color: var(--color-grey-light); border: 2px solid var(--color-grey-mid); border-radius: var(--radius-md); outline: 2px solid transparent; /* visible in Windows High Contrast Mode */ transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), outline-color var(--transition-fast); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-blue); background-color: var(--color-white); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); outline-color: var(--color-teal); } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-grey-text); } .form-textarea { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } .form-submit { width: 100%; padding: var(--space-4) var(--space-8); font-size: var(--font-size-base); font-weight: 700; margin-top: var(--space-3); } .form-success { display: none; padding: var(--space-5) var(--space-6); background-color: var(--color-success-bg); border: 2px solid var(--color-success-border); border-radius: var(--radius-md); color: var(--color-success-text); font-weight: 600; font-size: var(--font-size-base); text-align: center; margin-top: var(--space-5); } .form-success.visible { display: block; } /* Contact info boxes */ .contact-info { display: flex; flex-direction: column; gap: var(--space-5); } .contact-info__title { font-size: var(--font-size-2xl); font-weight: 800; color: var(--color-navy-deep); margin-bottom: var(--space-6); } .info-box { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) var(--space-6); background-color: var(--color-white); border-radius: var(--radius-lg); border: 1px solid var(--color-grey-mid); box-shadow: var(--shadow-sm); transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .info-box:hover { border-color: var(--color-blue); box-shadow: var(--shadow-md); } .info-box__icon { width: 48px; height: 48px; min-width: 48px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-navy-deep), var(--color-blue)); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .info-box__label { font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-grey-text); margin-bottom: var(--space-1); } .info-box__value { font-size: var(--font-size-base); font-weight: 600; color: var(--color-navy-deep); } .info-box__sub { font-size: var(--font-size-sm); color: var(--color-grey-text); margin-top: var(--space-1); } /* ============================================================ Footer ============================================================ */ .footer { background-color: var(--color-navy-deep); color: rgba(255,255,255,0.7); padding-top: var(--space-16); padding-bottom: var(--space-8); } .footer__top { display: grid; grid-template-columns: 1fr; gap: var(--space-10); padding-bottom: var(--space-12); border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: var(--space-8); } .footer__brand { max-width: 320px; } .footer__logo { margin-bottom: var(--space-3); } .footer__logo-img { height: 64px; width: auto; display: block; } .footer__tagline { font-size: var(--font-size-sm); font-weight: 600; color: rgba(255,255,255,0.8); letter-spacing: 0.05em; } .footer__desc { font-size: var(--font-size-sm); color: rgba(255,255,255,0.75); line-height: 1.7; margin-top: var(--space-4); } .footer__nav-title { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-white); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-4); } .footer__nav-links { display: flex; flex-direction: column; gap: var(--space-2); } .footer__nav-link { font-size: var(--font-size-sm); color: rgba(255,255,255,0.78); transition: color var(--transition-fast); text-decoration: none; } .footer__nav-link:hover { color: var(--color-white); } .footer__bottom { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; text-align: center; } .footer__copy { font-size: var(--font-size-sm); color: rgba(255,255,255,0.75); } .footer__badge { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); font-weight: 600; color: rgba(255,255,255,0.75); } /* ============================================================ Misc - Divider, Intro text ============================================================ */ .intro-text { font-size: var(--font-size-lg); color: var(--color-grey-text); max-width: 720px; line-height: 1.8; } .intro-text + .intro-text { margin-top: var(--space-4); } .prose p { color: var(--color-grey-text); line-height: 1.8; margin-bottom: var(--space-5); } .prose p:last-child { margin-bottom: 0; } /* ============================================================ Responsive - 768px+ ============================================================ */ @media (min-width: 768px) { /* Grid */ .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } /* Stats row */ .stats-row { grid-template-columns: repeat(3, 1fr); } /* CTA strip */ .cta-strip__buttons { flex-direction: row; justify-content: center; } /* News */ .news-grid { grid-template-columns: repeat(2, 1fr); } /* Form */ .form-row { grid-template-columns: 1fr 1fr; } /* Footer */ .footer__top { grid-template-columns: 2fr 1fr 1fr; } .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; } /* Offer list */ .offer-list { grid-template-columns: 1fr 1fr; } /* Navbar */ .navbar__hamburger { display: none; } .navbar__nav { display: flex; } .navbar__cta { display: block; } } /* ============================================================ Responsive - 1200px+ ============================================================ */ @media (min-width: 1200px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } /* Contact layout */ .contact-layout { grid-template-columns: 3fr 2fr; } /* Story section */ .story-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } } /* ============================================================ Animations ============================================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .hero__badge, .hero__title, .hero__tagline, .hero__ctas { animation: fadeInUp 0.7s ease both; } .hero__badge { animation-delay: 0.1s; } .hero__title { animation-delay: 0.25s; } .hero__tagline { animation-delay: 0.4s; } .hero__ctas { animation-delay: 0.55s; } @media (prefers-reduced-motion: reduce) { .hero__badge, .hero__title, .hero__tagline, .hero__ctas { animation: none; opacity: 1; transform: none; } } /* ============================================================ Accessibility ============================================================ */ :focus-visible { outline: 3px solid var(--color-blue); outline-offset: 3px; } .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; } /* ============================================================ PREMIUM VISUAL UPGRADES - Mid Somerset JPL Talent Centre ============================================================ */ /* ── Gold accent (declared in :root above) ── */ :root { --color-gold-light: #FDE68A; } /* ── Solid section title accent (replaced gradient-text - gradients are decorative noise) ── */ .gradient-text { color: var(--color-navy-deep); } .gradient-text--teal { color: var(--color-teal); } /* ── JPL brand section label ── */ .section-label--brand { color: var(--color-teal); } /* ── JPL diagonal brand stripe - dynamic form element ── */ .brand-stripe { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .brand-stripe::before, .brand-stripe::after { content: ''; position: absolute; background: var(--color-teal); opacity: 0.06; transform: skewX(-18deg); } .brand-stripe::before { width: 120px; top: -20%; bottom: -20%; right: 18%; } .brand-stripe::after { width: 60px; top: -20%; bottom: -20%; right: 22%; opacity: 0.04; } /* ── Teal accent divider line ── */ .teal-divider { display: block; width: 48px; height: 3px; background: var(--color-teal); margin-bottom: var(--space-6); border-radius: 2px; } /* ── Teal tag/badge ── */ .tag--teal { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-navy-deep); background: var(--color-teal); border-radius: var(--radius-full); padding: var(--space-1) var(--space-4); } /* ── Teal bottom-border on navbar active link ── */ .navbar__link.active { color: var(--color-teal); background-color: transparent; border-bottom: 2px solid var(--color-teal); border-radius: 0; } /* ── Outline / stroke decorative text ── */ .outline-text { -webkit-text-stroke: 2px rgba(37,99,235,0.18); color: transparent; font-size: clamp(5rem, 14vw, 12rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; pointer-events: none; user-select: none; } /* ── Diagonal stripe pattern on light sections ── */ .section--striped { background-color: var(--color-grey-light); background-image: repeating-linear-gradient( -55deg, transparent, transparent 30px, rgba(37,99,235,0.04) 30px, rgba(37,99,235,0.04) 32px ); } /* ── Section clip-path dividers ── */ .section--clip-top { clip-path: polygon(0 3%, 100% 0%, 100% 100%, 0% 100%); margin-top: -2px; padding-top: calc(var(--space-20) + 3vw); } .section--clip-both { clip-path: polygon(0 3%, 100% 0%, 100% 97%, 0% 100%); margin-top: -2px; padding-top: calc(var(--space-20) + 3vw); padding-bottom: calc(var(--space-20) + 3vw); } /* ── Radial mesh / conic overlay for hero & dark sections ── */ .hero__mesh { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(37,99,235,0.22) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(96,165,250,0.14) 0%, transparent 45%), conic-gradient(from 210deg at 50% 120%, rgba(37,99,235,0.08) 0deg, transparent 60deg); z-index: 0; pointer-events: none; } /* ── Hero ticker / marquee ── */ .hero__ticker { position: absolute; bottom: 0; left: 0; right: 0; background: var(--color-teal); overflow: hidden; height: 40px; display: flex; align-items: center; z-index: 2; } .hero__ticker-track { display: flex; white-space: nowrap; animation: ticker-scroll 28s linear infinite; } .hero__ticker-track span { display: inline-block; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-navy-deep); padding-inline: var(--space-8); } .hero__ticker-track span.sep { color: var(--color-navy-deep); opacity: 0.4; padding-inline: 0; } @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ── Glassmorphism stat cards ── */ .stats-glass-row { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-10); } .stat-glass { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); text-align: center; position: relative; overflow: hidden; transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .stat-glass:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); } .stat-glass__value { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5rem); font-weight: 400; color: var(--color-white); margin-bottom: var(--space-1); letter-spacing: 0.02em; line-height: 1; } .stat-glass__label { font-size: var(--font-size-xs); font-weight: 700; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.12em; } .stat-glass__icon { font-size: 2.2rem; margin-bottom: var(--space-4); color: var(--color-gold); } /* ── Card shimmer/gloss effect ── */ .card, .news-card, .team-card, .coach-card { position: relative; overflow: hidden; } .card::before, .news-card::before, .team-card::before, .coach-card::before { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100% ); transform: translateX(-175%) skewX(-20deg); transition: transform 0.55s ease; z-index: 2; pointer-events: none; } .card:hover::before, .news-card:hover::before, .team-card:hover::before, .coach-card:hover::before { transform: translateX(225%) skewX(-20deg); } /* Gradient border on card hover */ .card:hover, .team-card:hover { border-color: transparent; background-clip: padding-box; box-shadow: 0 0 0 2px var(--color-blue), var(--shadow-lg); } /* ── Locations section ── */ .locations-section { background: var(--color-navy-deep); background-image: radial-gradient(ellipse at 10% 50%, rgba(3,255,255,0.08) 0%, transparent 55%), radial-gradient(ellipse at 90% 80%, rgba(94,207,245,0.1) 0%, transparent 55%); padding-block: var(--space-20); position: relative; overflow: hidden; } .locations-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-12); } .location-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); text-align: center; transition: transform var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); position: relative; overflow: hidden; } .location-card:hover { transform: translateY(-6px); background: rgba(37,99,235,0.18); box-shadow: 0 12px 36px rgba(0,0,0,0.3); } .location-card__icon { font-size: 2.5rem; color: var(--color-gold); margin-bottom: var(--space-4); } .location-card__venue { font-size: var(--font-size-lg); font-weight: 800; color: var(--color-white); margin-bottom: var(--space-1); } .location-card__town { font-size: var(--font-size-sm); color: rgba(255,255,255,0.65); margin-bottom: var(--space-4); } .location-card__days { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold); background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); border-radius: var(--radius-full); padding: var(--space-1) var(--space-4); } /* ── Champions banner ── */ .champions-banner { position: relative; background: var(--color-navy-banner); padding-block: var(--space-20); text-align: center; overflow: hidden; } .champions-banner__bg-mesh { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(245,158,11,0.12) 0%, transparent 60%), radial-gradient(ellipse at 70% 30%, rgba(37,99,235,0.1) 0%, transparent 55%); pointer-events: none; z-index: 0; } .champions-banner__bg-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; pointer-events: none; overflow: hidden; } .champions-banner__bg-text span { font-family: var(--font-display); -webkit-text-stroke: 2px rgba(245,158,11,0.10); color: transparent; font-size: clamp(6rem, 18vw, 16rem); font-weight: 400; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; user-select: none; } .champions-banner__content { position: relative; z-index: 1; } .champions-banner__trophy { font-size: 4rem; margin-bottom: var(--space-4); display: block; filter: drop-shadow(0 4px 16px rgba(245,158,11,0.5)); } .champions-banner__year { display: inline-block; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.4); border-radius: var(--radius-full); padding: var(--space-2) var(--space-6); margin-bottom: var(--space-6); } .champions-banner__title { font-family: var(--font-display); font-size: clamp(4rem, 10vw, 8rem); font-weight: 400; color: var(--color-gold); letter-spacing: 0.02em; line-height: 0.95; margin-bottom: var(--space-4); text-shadow: 0 0 40px rgba(245,158,11,0.4); } .champions-banner__subtitle { font-size: var(--font-size-lg); color: rgba(255,255,255,0.7); max-width: 520px; margin-inline: auto; } /* ── Glowing pulse CTA buttons - uses transform (compositor-friendly); stops after 3 beats ── */ @keyframes btn-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.035); } 100% { transform: scale(1); } } .btn-primary.btn-pulse { animation: btn-pulse 1.8s ease-out 3; } @media (prefers-reduced-motion: reduce) { .btn-primary.btn-pulse { animation: none; } } /* ── Easter camp promo banner ── */ .camp-banner { background: linear-gradient(135deg, var(--color-camp-start), var(--color-blue-royal)); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-8); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); } .camp-banner::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( -55deg, transparent, transparent 28px, rgba(255,255,255,0.03) 28px, rgba(255,255,255,0.03) 30px ); } .camp-banner__label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gold); background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.35); border-radius: var(--radius-full); padding: var(--space-1) var(--space-4); position: relative; z-index: 1; } .camp-banner__title { font-size: var(--font-size-2xl); font-weight: 800; color: var(--color-white); line-height: 1.2; position: relative; z-index: 1; } .camp-banner__details { font-size: var(--font-size-sm); color: rgba(255,255,255,0.75); line-height: 1.7; position: relative; z-index: 1; } .camp-banner__price { display: inline-flex; align-items: center; gap: var(--space-3); position: relative; z-index: 1; flex-wrap: wrap; } .camp-banner__price-item { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); font-weight: 700; color: var(--color-white); } /* ── Responsive updates for new elements ── */ @media (min-width: 768px) { .stats-glass-row { grid-template-columns: repeat(2, 1fr); } .locations-grid { grid-template-columns: repeat(3, 1fr); } .camp-banner { flex-direction: row; align-items: center; justify-content: space-between; } } @media (min-width: 900px) { .section-two-col { grid-template-columns: 1fr 1fr; } } @media (min-width: 1200px) { .stats-glass-row { grid-template-columns: repeat(4, 1fr); } } /* ── GIRLS TIMELINE ─────────────────────────────────────────────────────── */ .girls-timeline { --tl-gutter: 2rem; /* distance from left edge to timeline bar */ position: relative; display: flex; flex-direction: column; gap: 0; padding-left: var(--tl-gutter); } .girls-timeline::before { content: ''; position: absolute; left: 0; top: 1.25rem; bottom: 1.25rem; width: 2px; background: linear-gradient(to bottom, var(--color-teal), var(--color-blue)); border-radius: 2px; } .girls-timeline__item { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-6); align-items: start; padding-bottom: var(--space-10); position: relative; opacity: 0; transform: translateX(-16px); transition: opacity 0.5s ease, transform 0.5s ease; } .girls-timeline__item.in-view { opacity: 1; transform: translateX(0); } .girls-timeline__item--last { padding-bottom: 0; } .girls-timeline__marker { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); padding-top: var(--space-2); position: relative; } .girls-timeline__dot { position: absolute; right: -2.6rem; top: 0.25rem; width: 14px; height: 14px; border-radius: 50%; background: var(--color-teal); box-shadow: 0 0 0 3px rgba(3,255,255,0.25), 0 0 12px rgba(3,255,255,0.5); z-index: 1; } .girls-timeline__age { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--color-teal); text-align: right; line-height: 1; white-space: nowrap; } .girls-timeline__card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-8); transition: background 0.3s ease, border-color 0.3s ease; } .girls-timeline__card:hover { background: rgba(3,255,255,0.07); border-color: rgba(3,255,255,0.25); } .girls-timeline__title { font-size: var(--font-size-lg); font-weight: 800; color: var(--color-white); margin-bottom: var(--space-2); } .girls-timeline__text { color: rgba(255,255,255,0.65); font-size: var(--font-size-sm); line-height: 1.7; margin: 0; } @media (max-width: 600px) { .girls-timeline { --tl-gutter: 1.25rem; padding-left: var(--tl-gutter); } .girls-timeline__item { grid-template-columns: 1fr; } .girls-timeline__marker { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--space-3); } .girls-timeline__dot { position: static; margin-left: -1.75rem; flex-shrink: 0; } .girls-timeline__age { text-align: left; } } @media (prefers-reduced-motion: reduce) { .girls-timeline__item { opacity: 1; transform: none; transition: none; } } /* ── Trophy Photo Carousel ──────────────────────────────── */ .trophy-carousel { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16/7; background: var(--color-navy-deep); user-select: none; } .trophy-carousel__track { display: flex; height: 100%; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .trophy-carousel__slide { flex: 0 0 100%; height: 100%; overflow: hidden; } .trophy-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; pointer-events: none; } .trophy-carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(29,38,63,0.75); color: var(--color-white); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: background 0.2s, transform 0.2s; z-index: 2; } .trophy-carousel__btn:hover { background: var(--color-teal); color: var(--color-navy-deep); transform: translateY(-50%) scale(1.08); } .trophy-carousel__btn--prev { left: var(--space-4); } .trophy-carousel__btn--next { right: var(--space-4); } .trophy-carousel__dots { position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-2); z-index: 2; } .trophy-carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); border: none; cursor: pointer; transition: background 0.25s, transform 0.25s; padding: 0; } .trophy-carousel__dot.active { background: var(--color-teal); transform: scale(1.3); } @media (max-width: 640px) { .trophy-carousel { aspect-ratio: 4/3; } } @media (prefers-reduced-motion: reduce) { .trophy-carousel__track { transition: none; } } /* ── Player zigzag layout ──────────────────────────────────── */ .player-zigzag { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; max-width: 860px; margin: 0 auto; padding: 0 var(--space-6); } .player-zigzag__item { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid rgba(3,255,255,0.12); } .player-zigzag__item--flip { direction: rtl; } .player-zigzag__item--flip > * { direction: ltr; } .player-zigzag__photo-wrap { overflow: hidden; position: relative; aspect-ratio: 1 / 1; } .player-zigzag__photo-wrap--icon { display: flex; align-items: center; justify-content: center; background: rgba(3,255,255,0.06); font-size: 5rem; color: var(--color-teal); } .player-zigzag__photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .player-zigzag__item:hover .player-zigzag__photo { transform: scale(1.04); } .player-zigzag__text { display: flex; flex-direction: column; justify-content: center; padding: var(--space-6) var(--space-8); background: var(--color-navy-deep); } .player-zigzag__club { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-teal); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .player-zigzag__name { font-family: var(--font-display); font-size: clamp(1.6rem, 2.5vw, 2.4rem); color: var(--color-white); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; margin-bottom: var(--space-4); } .player-zigzag__story { color: rgba(255,255,255,0.68); font-size: var(--font-size-sm); line-height: 1.7; max-width: 44ch; } @media (max-width: 700px) { .player-zigzag__item, .player-zigzag__item--flip { grid-template-columns: 1fr; direction: ltr; min-height: auto; } .player-zigzag__item--flip > * { direction: ltr; } .player-zigzag__photo-wrap { min-height: 260px; } .player-zigzag__text { padding: var(--space-8) var(--space-6); } .player-zigzag__story { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .player-zigzag__photo { transition: none; } } /* ── Player expand cards ───────────────────────────────────── */ .player-card { background: var(--color-navy-deep); border: 1px solid rgba(3,255,255,0.12); border-radius: var(--radius-xl); overflow: hidden; cursor: pointer; user-select: none; transition: border-color 0.25s; } .player-card:hover, .player-card:focus-visible { border-color: var(--color-teal); outline: none; } .player-card__row { display: grid; grid-template-columns: 160px 1fr; } .player-card__photo { width: 160px; height: 160px; object-fit: cover; display: block; flex-shrink: 0; transition: transform 0.4s ease; } .player-card:hover .player-card__photo { transform: scale(1.04); } .player-card__photo--icon { display: flex; align-items: center; justify-content: center; background: rgba(3,255,255,0.08); color: var(--color-teal); font-size: 2.5rem; } .player-card__right { display: flex; flex-direction: column; border-left: 1px solid rgba(3,255,255,0.1); } .player-card__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); flex: 1; } .player-card__name { color: var(--color-white); font-weight: 700; font-size: var(--font-size-lg); line-height: 1.2; margin-bottom: var(--space-1); } .player-card__club { color: var(--color-blue); font-size: var(--font-size-sm); font-weight: 600; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .player-card__badge { background: rgba(94,207,245,0.12); border: 1px solid rgba(94,207,245,0.25); border-radius: var(--radius-full); padding: 1px var(--space-2); font-size: var(--font-size-xs); font-weight: 700; color: var(--color-blue); white-space: nowrap; } .player-card__badge--teal { background: rgba(3,255,255,0.1); border-color: rgba(3,255,255,0.25); color: var(--color-teal); } .player-card__chevron { color: rgba(255,255,255,0.3); font-size: 1rem; flex-shrink: 0; transition: transform 0.3s ease, color 0.25s; } .player-card.active .player-card__chevron { transform: rotate(90deg); color: var(--color-teal); } .player-card__body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; border-top: 1px solid transparent; padding: 0 var(--space-6); } .player-card.active .player-card__body { max-height: 200px; border-top-color: rgba(3,255,255,0.1); padding: var(--space-4) var(--space-6) var(--space-5); } .player-card__story { color: rgba(255,255,255,0.72); font-size: var(--font-size-sm); line-height: 1.75; } @media (max-width: 600px) { .player-card__row { grid-template-columns: 100px 1fr; } .player-card__photo { width: 100px; height: 100px; } .player-card__photo--icon { width: 100px; height: 100px; } } @media (prefers-reduced-motion: reduce) { .player-card__photo, .player-card__body, .player-card__chevron { transition: none; } } /* ── Coach reveal cards ────────────────────────────────────── */ .coach-reveal { position: relative; border-radius: var(--radius-xl); overflow: hidden; cursor: pointer; user-select: none; border: 2px solid transparent; transition: border-color 0.25s; } .coach-reveal:hover, .coach-reveal:focus-visible { border-color: var(--color-teal); outline: none; } .coach-reveal__photo { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; transition: transform 0.4s ease; } .coach-reveal:hover .coach-reveal__photo { transform: scale(1.03); } .coach-reveal__namebar { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-10) var(--space-6) var(--space-5); background: linear-gradient(to top, rgba(15,22,42,0.92) 0%, transparent 100%); pointer-events: none; } .coach-reveal__role { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-teal); margin-bottom: var(--space-1); } .coach-reveal__name { font-family: var(--font-display); font-size: clamp(1.4rem, 2vw, 2rem); color: var(--color-white); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1; } .coach-reveal__overlay { position: absolute; inset: 0; background: rgba(15,22,42,0.93); display: flex; align-items: flex-start; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; overflow-y: auto; } .coach-reveal.active .coach-reveal__overlay { opacity: 1; pointer-events: auto; } .coach-reveal__overlay-inner { padding: var(--space-8) var(--space-6); } .coach-reveal__overlay-role { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-teal); margin-bottom: var(--space-2); } .coach-reveal__overlay-name { font-family: var(--font-display); font-size: clamp(1.6rem, 2.5vw, 2.2rem); color: var(--color-white); text-transform: uppercase; line-height: 1; margin-bottom: var(--space-3); } .coach-reveal__overlay-subtitle { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-bottom: var(--space-5); } .coach-reveal__overlay-bio { font-size: var(--font-size-sm); color: rgba(255,255,255,0.82); line-height: 1.75; } .coach-reveal__overlay-bio + .coach-reveal__overlay-bio { margin-top: var(--space-3); } @media (prefers-reduced-motion: reduce) { .coach-reveal__photo, .coach-reveal__overlay { transition: none; } } /* ══════════════════════════════════════════════════════════════ WELCOME NOTE - trial form success state A personal message from Paul once a parent has enquired. Goes dark against the light striped form section: the tonal shift marks arrival, and the golden-hour portrait reads warmer on navy. ══════════════════════════════════════════════════════════════ */ .welcome-note { background: linear-gradient(160deg, var(--color-navy-deep) 0%, var(--color-navy-banner) 100%); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 5vw, var(--space-16)) clamp(var(--space-6), 5vw, var(--space-12)); margin-top: var(--space-8); text-align: center; box-shadow: 0 24px 60px -20px rgba(6, 15, 31, 0.5); overflow: hidden; } .welcome-note__title { font-family: var(--font-display); font-weight: 400; /* Sized to sit on one line at full width. League Gothic is condensed enough to carry the whole phrase; it still wraps on narrow screens, where one line would mean unreadably small type. */ font-size: clamp(1.75rem, 6.4vw, 3.5rem); line-height: 1.05; letter-spacing: 0.01em; color: var(--color-white); text-wrap: balance; margin: 0 auto var(--space-8); } .welcome-note__portrait { width: clamp(112px, 22vw, 148px); height: clamp(112px, 22vw, 148px); border-radius: var(--radius-full); object-fit: cover; object-position: center 38%; display: block; margin: 0 auto var(--space-8); border: 3px solid rgba(3, 255, 255, 0.55); box-shadow: 0 0 0 8px rgba(3, 255, 255, 0.07); } .welcome-note__body { max-width: 56ch; margin: 0 auto; text-align: center; } .welcome-note__lead { font-size: clamp(var(--font-size-lg), 2.4vw, var(--font-size-xl)); font-weight: 700; color: var(--color-white); margin-bottom: var(--space-5); text-wrap: balance; } .welcome-note__body p { color: rgba(255, 255, 255, 0.84); line-height: 1.85; margin-bottom: var(--space-5); text-wrap: pretty; } .welcome-note__body p:last-child { margin-bottom: 0; } .welcome-note__sign-off { max-width: 56ch; margin: var(--space-10) auto 0; padding-top: var(--space-8); border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: center; } .welcome-note__regards { color: rgba(255, 255, 255, 0.7); font-size: var(--font-size-sm); margin-bottom: var(--space-2); } .welcome-note__signature { font-family: 'Caveat', cursive; font-weight: 700; font-size: clamp(2.25rem, 6vw, 3rem); line-height: 1; color: var(--color-teal); margin-bottom: var(--space-3); } .welcome-note__role { font-size: var(--font-size-sm); font-weight: 600; line-height: 1.6; color: rgba(255, 255, 255, 0.68); } /* Entrance. Declared under no-preference so the panel is plainly visible by default: a reduced-motion user or a headless render never ends up with an invisible confirmation. */ @media (prefers-reduced-motion: no-preference) { .welcome-note { animation: welcome-note-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; } .welcome-note__portrait { animation: welcome-portrait-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; } } @keyframes welcome-note-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes welcome-portrait-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }