/* * hpc.css — template-scoped: HPC sub-brand (ucdon: Human Performance Centre) * Source site: ucdon, base-theme/css/hpc.css (already a standalone file). * A self-contained dark design system (Typekit "Magistral"/"Space Mono" + * its own cyan/charcoal palette) shared across the HPC Home / Services / * How It Works / Testimonials pages. * * Tokenised: neutral overlays rgba(255,255,255,a) -> --overlay-light-rgb, * shadows rgba(0,0,0,a) -> --shadow-rgb, white text -> --text-on-dark, and * the DNCG-group STUDY BANNER (#0066a4 -> --aud-students, #1a3a4a -> * --surface-dark, #c4d600 -> --accent, rgba(196,214,0,a) -> --accent-rgb). * The HPC brand palette itself lives in tokens.css as the --hpc-* sub-brand * group (Phase 3a); this file references those tokens and holds no literal * colour. * NOTE: a handful of MULTI-LINE gradients (hero-home__overlay ~L267, * hero-sub::before/::after ~L391/L403, contact-cta::before ~L1529) also use * cyan/charcoal stops; not inline-marked to avoid breaking the gradient, but * they are the same deferred HPC brand colour. No font-size changed. */ /* ======================================== HPC DESIGN SYSTEM — CENTRAL STYLESHEET ======================================== Shared across: Home, Services, How It Works, Testimonials ======================================== */ /* ---------------------------------------- 1. VARIABLES & RESET ---------------------------------------- */ /* HPC-PRIVATE CUSTOM PROPERTIES. Every name here is --hpc-* prefixed, and that prefix is load-bearing. This block used to declare bare names — --blue, --text-muted, --font-display, --font-mono, --radius-sm/md/lg/pill, --transition — on :root, which IS , the same element the theme's own tokens resolve on. hpc.css loads in the template slot, last in the cascade, so those nine SHADOWED the global tokens for the entire page. page-hpc.php calls get_header() and renders parts/repeats/header and parts/repeats/footer, so the shared chrome was inside the damage: it lost the brand display face to plain sans-serif, took HPC's radii and timing, and --blue moving dragged --accent-1, --surface-blue, --blue-text and --hero-search-accent with it (an alias declared on resolves against whatever --blue is on , which was this one). Values below are unchanged. Only the names moved, so the HPC template renders exactly as it did while the header and footer get their own tokens back. Pure aliases (--cyan: var(--hpc-cyan) and friends) are gone; their uses now point straight at the tokens.css originals. Do not reintroduce an unprefixed name in this file. */ :root { --hpc-bg-card: rgba(var(--overlay-light-rgb), 0.04); --hpc-bg-card-hover: rgba(var(--overlay-light-rgb), 0.08); --hpc-border-subtle: rgba(var(--overlay-light-rgb), 0.08); --hpc-border-accent: rgba(var(--hpc-cyan-rgb), 0.3); --hpc-border-accent-strong: rgba(var(--hpc-cyan-rgb), 0.5); --hpc-cyan-dim: rgba(var(--hpc-cyan-rgb), 0.12); --hpc-cyan-glow: rgba(var(--hpc-cyan-rgb), 0.25); --hpc-gradient-accent: linear-gradient(135deg, var(--hpc-cyan) 0%, var(--hpc-blue) 100%); --hpc-gradient-bg: linear-gradient(135deg, var(--hpc-bg-deep) 0%, var(--hpc-bg-primary) 40%, var(--hpc-bg-teal) 70%, var(--hpc-bg-deep) 100%); --hpc-radius-sm: 6px; --hpc-radius-md: 12px; --hpc-radius-lg: 20px; --hpc-radius-pill: 100px; --hpc-max-width: 1200px; --hpc-content-width: 800px; --hpc-transition: 0.25s ease; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 72px; } body { background: var(--hpc-bg-deep); color: var(--hpc-text-primary); line-height: 1.6; font-size: 1.1rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--hpc-cyan); text-decoration: none; transition: color var(--hpc-transition); } a:hover { color: var(--hpc-cyan-bright); } ul, ol { list-style: none; } h1, h2, h3, h4, h5 { font-family: var(--hpc-font-display); font-weight: 900; font-style: italic; } /* ---------------------------------------- 2. SITE NAV (shared across pages) ---------------------------------------- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: rgba(var(--hpc-bg-deep-rgb), 0.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid var(--hpc-border-subtle); transition: background 0.3s; } .site-nav.scrolled { background: rgba(var(--hpc-bg-deep-rgb), 0.92); } .site-nav__inner { max-width: var(--hpc-max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; height: 68px; } .site-nav__brand { font-weight: 800; font-size: 1.1rem; color: var(--hpc-text-primary); letter-spacing: -0.02em; white-space: nowrap; } .site-nav__brand span { color: var(--hpc-cyan); } .site-nav__links { display: flex; align-items: center; gap: 0; } .site-nav__link { padding: 0.5rem 1rem; font-size: 1.1rem; font-weight: 500; color: var(--hpc-text-secondary); letter-spacing: 0.02em; transition: color var(--hpc-transition); white-space: nowrap; } .site-nav__link:hover, .site-nav__link.active { color: var(--hpc-cyan); } .site-nav__cta { margin-left: 0.75rem; padding: 0.5rem 1.25rem; font-size: 1.1rem; font-weight: 600; background: var(--hpc-gradient-accent); color: var(--text-on-dark) !important; border-radius: var(--hpc-radius-sm); transition: transform var(--hpc-transition), box-shadow var(--hpc-transition); } .site-nav__cta:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--hpc-cyan-rgb), 0.3); color: var(--text-on-dark) !important; } /* Mobile nav toggle */ .site-nav__toggle { display: none; background: none; border: none; color: var(--hpc-text-primary); cursor: pointer; padding: 0.5rem; } .site-nav__toggle svg { width: 24px; height: 24px; } /* ---------------------------------------- 3. ANCHOR NAV (services page only) ---------------------------------------- */ .anchor-nav { position: sticky; top: 68px; z-index: 100; background: rgba(var(--hpc-bg-primary-rgb), 0.9); backdrop-filter: blur(16px); border-bottom: 1px solid var(--hpc-border-subtle); } .anchor-nav__inner { max-width: var(--hpc-max-width); margin: 0 auto; display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; padding: 0 1rem; } .anchor-nav__inner::-webkit-scrollbar { display: none; } .anchor-nav__link { padding: 0.85rem 1.15rem; font-size: 1.1rem; font-weight: 500; color: var(--hpc-text-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 2px solid transparent; transition: color var(--hpc-transition), border-color var(--hpc-transition); } .anchor-nav__link:hover, .anchor-nav__link.active { color: var(--hpc-cyan); border-bottom-color: var(--hpc-cyan); } /* ---------------------------------------- 4. HERO — HOME (100vh video) ---------------------------------------- */ .hero-home { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .hero-home__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-home__overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(var(--hpc-bg-deep-rgb), 0.5) 0%, rgba(var(--hpc-bg-deep-rgb), 0.3) 40%, rgba(var(--hpc-bg-deep-rgb), 0.7) 80%, rgba(var(--hpc-bg-deep-rgb), 1) 100% ), radial-gradient(ellipse 100% 60% at 50% 30%, transparent 0%, rgba(var(--hpc-bg-deep-rgb), 0.4) 100%); z-index: 1; } /* Fallback if no video */ .hero-home--no-video { background: var(--hpc-gradient-bg); } .hero-home--no-video::before { content: ""; position: absolute; inset: 0; background-image: url("https://www.ucdon.ac.uk/wp-content/uploads/2025/03/background_01_a4_horiz.png"); background-position: center center; background-size: cover; background-repeat: no-repeat; } .hero-home--no-video::after { content: ""; position: absolute; inset: 0; } .hero-home__content { position: relative; z-index: 2; max-width: 1300px; padding: 2rem; } .hero-home__label { display: inline-block; font-family: var(--hpc-font-mono); font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hpc-cyan); margin-bottom: 1.75rem; padding: 0.4rem 1.25rem; border: 1px solid var(--hpc-border-accent); border-radius: var(--hpc-radius-pill); animation: fadeInUp 0.6s ease both; } .hero-home__title { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; line-height: 1.05; margin-bottom: 1.5rem; letter-spacing: -0.03em; animation: fadeInUp 0.6s 0.1s ease both; } .hero-home__title span { background: var(--hpc-gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-home__subtitle { font-size: 1.3rem; color: var(--hpc-text-secondary); max-width: 640px; margin: 0 auto 2.75rem; line-height: 1.6; animation: fadeInUp 0.6s 0.2s ease both; } .hero-home__actions { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; animation: fadeInUp 0.6s 0.3s ease both; } .hero-home__scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2; animation: pulse 2s infinite, fadeInUp 0.6s 0.5s ease both; } .hero-home__scroll svg { width: 28px; height: 28px; stroke: var(--hpc-text-muted); } .hero-logo { max-width: 40%; margin: 0rem auto 6rem auto; } /* ---------------------------------------- 5. HERO — SUBPAGES (shorter) ---------------------------------------- */ .hero-sub { position: relative; padding: 10rem 2rem 5rem; text-align: center; overflow: hidden; background: var(--hpc-gradient-bg); } .hero-sub::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 80% 50% at 50% 0%, rgba(var(--hpc-cyan-rgb), 0.06) 0%, transparent 60% ); pointer-events: none; } .hero-sub::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(var(--hpc-cyan-rgb), 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--hpc-cyan-rgb), 0.02) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .hero-sub__content { position: relative; z-index: 2; max-width: var(--hpc-content-width); margin: 0 auto; } .hero-sub__eyebrow { font-family: var(--hpc-font-mono); font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hpc-cyan); margin-bottom: 1rem; } .hero-sub__title { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.25rem; letter-spacing: -0.02em; } .hero-sub__text { font-size: 1.25rem; color: var(--hpc-text-secondary); line-height: 1.6; max-width: 600px; margin: 0 auto; } /* ---------------------------------------- 6. BUTTONS (shared) ---------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--hpc-font-sans); font-weight: 600; border-radius: var(--hpc-radius-sm); cursor: pointer; border: none; transition: transform var(--hpc-transition), box-shadow var(--hpc-transition), background var(--hpc-transition), color var(--hpc-transition); white-space: nowrap; text-decoration: none; } .btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--hpc-transition); } .btn:hover svg { transform: translateX(2px); } .btn--primary { padding: 0.85rem 2rem; font-size: 1.1rem; background: var(--hpc-gradient-accent); color: var(--text-on-dark); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(var(--hpc-cyan-rgb), 0.3); color: var(--text-on-dark); } .btn--secondary { padding: 0.85rem 2rem; font-size: 1.1rem; background: transparent; color: var(--hpc-text-primary); border: 1px solid rgba(var(--overlay-light-rgb), 0.2); } .btn--secondary:hover { border-color: var(--hpc-border-accent-strong); color: var(--hpc-cyan); background: var(--hpc-cyan-dim); } .btn--ghost { padding: 0.7rem 1.4rem; font-size: 1.1rem; background: transparent; color: var(--hpc-cyan); border: 1px solid var(--hpc-border-accent); } .btn--ghost:hover { background: var(--hpc-cyan-dim); border-color: var(--hpc-cyan); color: var(--hpc-cyan-bright); } .btn--small { padding: 0.55rem 1.1rem; font-size: 1.1rem; } /* ---------------------------------------- 7. SECTIONS ---------------------------------------- */ .section { padding: 5rem 2rem; position: relative; } .section--dark { background: var(--hpc-bg-primary); } .section--darker { background: var(--hpc-bg-deep); } .section--accent { background: linear-gradient(180deg, rgba(var(--hpc-cyan-rgb), 0.04) 0%, transparent 100%); } .section__inner { max-width: var(--hpc-max-width); margin: 0 auto; } .section__header { text-align: center; margin-bottom: 3.5rem; } .section__eyebrow { font-family: var(--hpc-font-mono); font-size: 1.1rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--hpc-cyan); margin-bottom: 0.75rem; } .section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 1rem; /* The export was standalone and let headings inherit the light body colour. Ported in, typography.css `h1-h6 { color: var(--text-heading) }` (brand navy) wins over inheritance and goes dark-on-dark on the HPC ground. Set it back. */ color: var(--hpc-text-primary); } .section__intro { font-size: 1.1rem; color: var(--hpc-text-secondary); max-width: var(--hpc-content-width); margin: 0 auto; line-height: 1.7; } /* Divider between For Individuals / For Teams */ .audience-divider { text-align: center; padding: 3rem 2rem; position: relative; } .audience-divider::before { content: ""; position: absolute; top: 50%; left: 5%; right: 5%; height: 1px; background: var(--hpc-border-subtle); } .audience-divider__label { position: relative; display: inline-block; padding: 0.5rem 1.5rem; background: var(--hpc-bg-deep); font-family: var(--hpc-font-mono); font-size: 1.1rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--hpc-cyan); border: 1px solid var(--hpc-border-accent); border-radius: var(--hpc-radius-pill); } /* ---------------------------------------- 8. SERVICE CARDS ---------------------------------------- */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.5rem; } .services-grid--2col { grid-template-columns: repeat(2, 1fr); } .service-card { background: var(--hpc-bg-card); border: 1px solid var(--hpc-border-subtle); border-radius: var(--hpc-radius-md); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; } .service-card:hover { border-color: var(--hpc-border-accent); background: var(--hpc-bg-card-hover); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(var(--shadow-rgb), 0.3); } .service-card__image-placeholder { width: 100%; height: 220px; background: linear-gradient(135deg, var(--hpc-bg-elevated) 0%, rgba(var(--hpc-cyan-rgb), 0.08) 100%); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--hpc-border-subtle); position: relative; overflow: hidden; } .service-card__image-placeholder img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, opacity 0.3s ease; opacity: 0.8; } .service-card:hover .service-card__image-placeholder img { transform: scale(1.04); opacity: 0.95; } .service-card__image-placeholder::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--hpc-cyan-rgb), 0.1) 0%, transparent 70%); } .service-card__image-placeholder svg { width: 48px; height: 48px; stroke: var(--hpc-cyan); opacity: 0.35; position: relative; z-index: 1; } .service-card__body { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; } .service-card__title { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.3; } .service-card__summary { font-size: 1.1rem; color: var(--hpc-text-secondary); line-height: 1.6; margin-bottom: 1.25rem; flex: 1; } .service-card__detail { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .service-card__detail-inner { font-size: 1.1rem; color: var(--hpc-text-muted); line-height: 1.7; padding-top: 1rem; border-top: 1px solid var(--hpc-border-subtle); } .service-card.expanded .service-card__detail { max-height: 600px; } .service-card__expand { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1.1rem; font-weight: 500; color: var(--hpc-cyan); cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; margin-bottom: 1rem; transition: gap var(--hpc-transition); } .service-card__expand:hover { gap: 0.6rem; } .service-card__expand svg { width: 14px; height: 14px; transition: transform 0.3s; } .service-card.expanded .service-card__expand svg { transform: rotate(180deg); } /* ---------------------------------------- 9. SPLIT CARDS (VO2 / Lactate) ---------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .split-card { background: var(--hpc-bg-card); border: 1px solid var(--hpc-border-subtle); border-radius: var(--hpc-radius-md); padding: 2.5rem; transition: all 0.3s ease; } .split-card:hover { border-color: var(--hpc-border-accent); background: var(--hpc-bg-card-hover); } .split-card__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--hpc-cyan-dim); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; } .split-card__icon svg { width: 28px; height: 28px; stroke: var(--hpc-cyan); } .split-card__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .split-card__text { font-size: 1.1rem; color: var(--hpc-text-secondary); line-height: 1.7; margin-bottom: 1.5rem; } /* ---------------------------------------- 9b. INLINE TESTIMONIALS (within service grids) ---------------------------------------- */ .inline-testimonial { grid-column: span 2; background: linear-gradient(135deg, rgba(var(--hpc-cyan-rgb), 0.06) 0%, rgba(var(--hpc-blue-rgb), 0.04) 100%); border: 1px solid var(--hpc-border-accent); border-radius: var(--hpc-radius-md); padding: 2.5rem 3rem; display: flex; align-items: center; gap: 2.5rem; position: relative; overflow: hidden; } .inline-testimonial::before { content: "\201C"; position: absolute; top: -0.5rem; left: 1.5rem; font-size: 8rem; font-family: var(--hpc-font-quote-mark); color: var(--hpc-cyan); opacity: 0.08; line-height: 1; pointer-events: none; } .inline-testimonial--full { grid-column: 1 / -1; } .inline-testimonial__image { flex-shrink: 0; width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, var(--hpc-bg-elevated) 0%, rgba(var(--hpc-cyan-rgb), 0.15) 100%); border: 2px solid var(--hpc-border-accent); display: flex; align-items: center; justify-content: center; overflow: hidden; } .inline-testimonial__image img { width: 100%; height: 100%; object-fit: cover; } .inline-testimonial__image svg { width: 36px; height: 36px; stroke: var(--hpc-cyan); opacity: 0.4; } .inline-testimonial__content { flex: 1; position: relative; z-index: 1; } .inline-testimonial__quote { font-size: 1.1rem; color: var(--hpc-text-secondary); line-height: 1.7; font-style: italic; margin-bottom: 1rem; } .inline-testimonial__author { font-weight: 700; font-size: 1.1rem; color: var(--hpc-text-primary); } .inline-testimonial__meta { font-size: 1.1rem; color: var(--hpc-cyan); font-family: var(--hpc-font-mono); letter-spacing: 0.02em; } /* Team section inline testimonial */ .team-grid .inline-testimonial { grid-column: span 2; } @media (max-width: 1024px) { .inline-testimonial { grid-column: span 1; } .inline-testimonial--full { grid-column: 1 / -1; } .team-grid .inline-testimonial { grid-column: span 1; } } @media (max-width: 768px) { .inline-testimonial { flex-direction: column; text-align: center; padding: 2rem 1.75rem; gap: 1.25rem; } .inline-testimonial--full { grid-column: 1 / -1; } } /* ---------------------------------------- 9b. INLINE TESTIMONIALS (within service grids) ---------------------------------------- */ .inline-testimonial { grid-column: span 2; background: linear-gradient(135deg, rgba(var(--hpc-cyan-rgb), 0.06) 0%, rgba(var(--hpc-blue-rgb), 0.04) 100%); border: 1px solid var(--hpc-border-accent); border-radius: var(--hpc-radius-md); padding: 2.5rem 3rem; display: flex; align-items: center; gap: 2.5rem; position: relative; overflow: hidden; } .inline-testimonial::before { content: "\201C"; position: absolute; top: -0.5rem; left: 1.5rem; font-size: 8rem; font-family: var(--hpc-font-quote-mark); color: var(--hpc-cyan); opacity: 0.08; line-height: 1; pointer-events: none; } .inline-testimonial--full { grid-column: 1 / -1; } .inline-testimonial__image { flex-shrink: 0; width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, var(--hpc-bg-elevated) 0%, rgba(var(--hpc-cyan-rgb), 0.15) 100%); border: 2px solid var(--hpc-border-accent); display: flex; align-items: center; justify-content: center; overflow: hidden; } .inline-testimonial__image img { width: 100%; height: 100%; object-fit: cover; } .inline-testimonial__image svg { width: 36px; height: 36px; stroke: var(--hpc-cyan); opacity: 0.4; } .inline-testimonial__content { flex: 1; position: relative; z-index: 1; } .inline-testimonial__quote { font-size: 1.25rem; color: var(--hpc-text-secondary); line-height: 1.7; font-style: italic; margin-bottom: 1rem; } .inline-testimonial__author { font-weight: 700; font-size: 1.1rem; color: var(--hpc-text-primary); } .inline-testimonial__meta { font-size: 1.1rem; color: var(--hpc-cyan); font-family: var(--hpc-font-mono); letter-spacing: 0.02em; } .team-grid .inline-testimonial { grid-column: span 2; } @media (max-width: 1024px) { .inline-testimonial { grid-column: 1 / -1; } .inline-testimonial--full { grid-column: 1 / -1; } .team-grid .inline-testimonial { grid-column: 1 / -1; } } @media (max-width: 768px) { .inline-testimonial { flex-direction: column; text-align: center; padding: 2rem 1.75rem; gap: 1.25rem; } } /* ---------------------------------------- 10. TEAM CARDS ---------------------------------------- */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .team-card { background: var(--hpc-bg-card); border: 1px solid var(--hpc-border-subtle); border-radius: var(--hpc-radius-md); padding: 2rem; transition: all 0.3s ease; position: relative; overflow: hidden; } .team-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hpc-gradient-accent); } .team-card:hover { border-color: var(--hpc-border-accent); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(var(--shadow-rgb), 0.3); } .team-card__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.75rem; } .team-card__text { font-size: 1.1rem; color: var(--hpc-text-secondary); line-height: 1.6; margin-bottom: 1.25rem; } /* ---------------------------------------- 11. HOME: FEATURE CARDS (What We Offer etc.) ---------------------------------------- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .feature-card { background: var(--hpc-bg-card); border: 1px solid var(--hpc-border-subtle); border-radius: var(--hpc-radius-md); padding: 2.5rem 2rem; text-align: center; transition: all 0.3s ease; text-decoration: none; color: var(--hpc-text-primary); display: flex; flex-direction: column; align-items: center; } .feature-card:hover { border-color: var(--hpc-border-accent); background: var(--hpc-bg-card-hover); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(var(--shadow-rgb), 0.3); color: var(--hpc-text-primary); } .feature-card__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--hpc-cyan-dim); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; transition: background var(--hpc-transition); } .feature-card:hover .feature-card__icon { background: var(--hpc-cyan-glow); } .feature-card__icon svg { width: 32px; height: 32px; stroke: var(--hpc-cyan); } .feature-card__title { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--hpc-text-primary); /* else inherits navy heading colour, dark-on-dark */ } .feature-card__text { font-size: 1.1rem; color: var(--hpc-text-secondary); line-height: 1.5; margin-bottom: 1.25rem; } .feature-card__arrow { color: var(--hpc-cyan); font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; margin-top: auto; transition: gap var(--hpc-transition); } .feature-card:hover .feature-card__arrow { gap: 0.7rem; } .feature-card__arrow svg { width: 16px; height: 16px; } /* ---------------------------------------- 12. HOME: MEET THE TEAM ---------------------------------------- */ .team-member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .team-member { text-align: center; padding: 2rem 1.5rem; background: var(--hpc-bg-card); border: 1px solid var(--hpc-border-subtle); border-radius: var(--hpc-radius-md); transition: all 0.3s ease; } .team-member:hover { border-color: var(--hpc-border-accent); } .team-member__avatar { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--hpc-bg-elevated) 0%, rgba(var(--hpc-cyan-rgb), 0.1) 100%); margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; } .team-member__avatar svg { width: 40px; height: 40px; stroke: var(--hpc-cyan); opacity: 0.4; } .team-member__name { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.3rem; } .team-member__role { font-size: 1.1rem; color: var(--hpc-text-secondary); /* --text-muted is 3.98:1 on the card, below AA */ } /* ---------------------------------------- 13. PROCESS STEPS (How It Works) ---------------------------------------- */ .process { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; counter-reset: step; } .process__step { position: relative; padding: 2.5rem 2rem; background: var(--hpc-bg-card); border: 1px solid var(--hpc-border-subtle); border-radius: var(--hpc-radius-md); counter-increment: step; transition: all 0.3s ease; } .process__step:hover { border-color: var(--hpc-border-accent); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(var(--shadow-rgb), 0.3); } .process__number { font-family: var(--hpc-font-mono); font-size: 3rem; font-weight: 700; color: var(--hpc-cyan); opacity: 0.3; line-height: 1; margin-bottom: 1rem; } .process__step-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; } .process__step-text { font-size: 1.1rem; color: var(--hpc-text-secondary); line-height: 1.6; } /* ---------------------------------------- 14. WHAT YOU GET (How It Works) ---------------------------------------- */ .deliverable-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .deliverable { display: flex; gap: 1.25rem; padding: 1.75rem; background: var(--hpc-bg-card); border: 1px solid var(--hpc-border-subtle); border-radius: var(--hpc-radius-md); transition: all 0.3s ease; } .deliverable:hover { border-color: var(--hpc-border-accent); } .deliverable__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--hpc-cyan-dim); display: flex; align-items: center; justify-content: center; } .deliverable__icon svg { width: 22px; height: 22px; stroke: var(--hpc-cyan); } .deliverable__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.4rem; } .deliverable__text { font-size: 1.1rem; color: var(--hpc-text-secondary); line-height: 1.5; } /* ---------------------------------------- 15. TESTIMONIALS ---------------------------------------- */ .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem; } .testimonial-card { background: var(--hpc-bg-card); border: 1px solid var(--hpc-border-subtle); border-radius: var(--hpc-radius-md); padding: 2.5rem; transition: all 0.3s ease; position: relative; } .testimonial-card::before { content: "\201C"; position: absolute; top: 1.25rem; right: 2rem; font-size: 5rem; font-family: var(--hpc-font-quote-mark-sm); color: var(--hpc-cyan); opacity: 0.1; line-height: 1; } .testimonial-card:hover { border-color: var(--hpc-border-accent); } .testimonial-card__quote { font-size: 1.1rem; color: var(--hpc-text-secondary); line-height: 1.7; font-style: italic; margin-bottom: 1.5rem; } .testimonial-card__author { display: flex; align-items: center; gap: 1rem; } .testimonial-card__avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--hpc-cyan-dim); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .testimonial-card__avatar svg { width: 24px; height: 24px; stroke: var(--hpc-cyan); opacity: 0.5; } .testimonial-card__name { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.15rem; } .testimonial-card__meta { font-size: 1.1rem; color: var(--hpc-text-muted); } /* Featured testimonial (full width) */ .testimonial-featured { background: var(--hpc-bg-card); border: 1px solid var(--hpc-border-accent); border-radius: var(--hpc-radius-lg); padding: 3rem; display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: center; margin-bottom: 3rem; } .testimonial-featured__image { width: 100%; aspect-ratio: 3/4; border-radius: var(--hpc-radius-md); background: linear-gradient(135deg, var(--hpc-bg-elevated) 0%, rgba(var(--hpc-cyan-rgb), 0.08) 100%); display: flex; align-items: center; justify-content: center; } .testimonial-featured__image svg { width: 64px; height: 64px; stroke: var(--hpc-cyan); opacity: 0.25; } .testimonial-featured__quote { font-size: 1.35rem; line-height: 1.7; color: var(--hpc-text-secondary); font-style: italic; margin-bottom: 1.5rem; } .testimonial-featured__name { font-weight: 700; font-size: 1.25rem; margin-bottom: 0.25rem; } .testimonial-featured__meta { font-size: 1.1rem; color: var(--hpc-text-muted); } /* ---------------------------------------- 16. EDUCATION SPLIT ---------------------------------------- */ .edu-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .edu-split__text { font-size: 1.1rem; color: var(--hpc-text-secondary); line-height: 1.7; margin-bottom: 2rem; } .edu-points { display: flex; flex-direction: column; gap: 1.25rem; } .edu-point { display: flex; gap: 1rem; align-items: flex-start; } .edu-point__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--hpc-cyan-dim); display: flex; align-items: center; justify-content: center; margin-top: 0.15rem; } .edu-point__icon svg { width: 20px; height: 20px; stroke: var(--hpc-cyan); } .edu-point__label { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.25rem; } .edu-point__desc { font-size: 1.1rem; color: var(--hpc-text-secondary); line-height: 1.5; } .edu-split__visual { background: var(--hpc-bg-card); border: 1px solid var(--hpc-border-subtle); border-radius: var(--hpc-radius-lg); overflow: hidden; min-height: 400px; display: flex; align-items: center; justify-content: center; } .edu-split__visual svg { width: 64px; height: 64px; stroke: var(--hpc-cyan); opacity: 0.25; } /* ---------------------------------------- 17. CONTACT CTA ---------------------------------------- */ .contact-cta { text-align: center; padding: 5rem 2rem; position: relative; overflow: hidden; } .contact-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 80% 60% at 50% 100%, rgba(var(--hpc-cyan-rgb), 0.06) 0%, transparent 60% ); pointer-events: none; } .contact-cta__inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; } .contact-cta__title { font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--hpc-text-primary); /* else inherits navy heading colour, dark-on-dark */ } .contact-cta__text { font-size: 1.1rem; color: var(--hpc-text-secondary); margin-bottom: 2rem; line-height: 1.6; } .contact-cta__email { display: block; margin-top: 1rem; font-family: var(--hpc-font-mono); font-size: 1.1rem; color: var(--hpc-text-muted); } /* ---------------------------------------- 18. AUDIENCE PICKER (services hero) ---------------------------------------- */ .audience-picker { display: flex; justify-content: center; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; } .audience-picker__btn { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 2rem; background: var(--hpc-bg-card); border: 1px solid var(--hpc-border-subtle); border-radius: var(--hpc-radius-md); color: var(--hpc-text-primary); font-family: var(--hpc-font-sans); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; } .audience-picker__btn:hover { border-color: var(--hpc-border-accent-strong); background: var(--hpc-bg-card-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.3); color: var(--hpc-text-primary); } .audience-picker__btn svg { width: 24px; height: 24px; stroke: var(--hpc-cyan); } /* ---------------------------------------- 19. ANIMATIONS ---------------------------------------- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); } 50% { opacity: 0.8; transform: translateX(-50%) translateY(6px); } } /* Fade-in on scroll */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ---------------------------------------- 20. RESPONSIVE ---------------------------------------- */ @media (max-width: 1024px) { .split { grid-template-columns: 1fr; } .services-grid--2col { grid-template-columns: 1fr; } .edu-split { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr 1fr; } .testimonial-featured { grid-template-columns: 1fr; } .testimonial-featured__image { max-height: 300px; aspect-ratio: auto; } } @media (max-width: 768px) { .section { padding: 3.5rem 1.25rem; } .services-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr; } .process { grid-template-columns: 1fr; } .deliverable-grid { grid-template-columns: 1fr; } .testimonial-grid { grid-template-columns: 1fr; } .hero-home { min-height: 100vh; } .hero-home__content { padding: 2rem 1.5rem; } .hero-home__actions { flex-direction: column; } .hero-sub { padding: 8rem 1.5rem 3.5rem; } .site-nav__links { display: none; } .site-nav__toggle { display: block; } .site-nav__links.open { display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0; background: rgba(var(--hpc-bg-deep-rgb), 0.97); backdrop-filter: blur(24px); padding: 1rem; border-bottom: 1px solid var(--hpc-border-subtle); } .site-nav__links.open .site-nav__cta { margin: 0.5rem 0 0; text-align: center; justify-content: center; } .audience-picker { flex-direction: column; align-items: center; } .audience-picker__btn { width: 100%; max-width: 320px; justify-content: center; } .anchor-nav__link { font-size: 1.1rem; padding: 0.75rem 0.85rem; } } @media (max-width: 480px) { .team-member-grid { grid-template-columns: 1fr; } } /* ---------------------------------------- PARTNER LOGOS ---------------------------------------- */ .partner-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem 3.5rem; max-width: 1300px; margin: 0 auto; } .partner-logos__item { display: flex; align-items: center; justify-content: center; height: 130px; opacity: 0.7; transition: all var(--hpc-transition); } .partner-logos__item:hover { opacity: 1; transform: scale(1.05); } .partner-logos__item img { max-height: 100%; max-width: 200px; width: auto; object-fit: contain; } /* Wider logos get more horizontal space */ .partner-logos__item:has(img[alt*="Foundation Fitness"]) img, .partner-logos__item:has(img[alt*="Mustangs"]) img, .partner-logos__item:has(img[alt*="Hockey"]) img, .partner-logos__item:has(img[alt*="Media"]) img { max-width: 260px; } @media (max-width: 768px) { .partner-logos { gap: 2rem 2.5rem; } .partner-logos__item { height: 65px; } .partner-logos__item img { max-width: 150px; } .partner-logos__item:has(img[alt*="Foundation Fitness"]) img, .partner-logos__item:has(img[alt*="Mustangs"]) img, .partner-logos__item:has(img[alt*="Hockey"]) img, .partner-logos__item:has(img[alt*="Media"]) img { max-width: 180px; } } @media (max-width: 480px) { .partner-logos { gap: 1.5rem 2rem; } .partner-logos__item { height: 50px; } } /* ======================================== STUDY BANNER — CTA for HE Sport Programmes ======================================== */ .study-banner { background: linear-gradient(135deg, var(--aud-students) 0%, var(--surface-dark) 100%); padding: 3.5rem 0; position: relative; overflow: hidden; text-align: center; } .study-banner::before { content: ""; position: absolute; top: -50%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08) 0%, transparent 70%); pointer-events: none; } .study-banner__inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .study-banner__eyebrow { font-size: 1.1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.75rem; } .study-banner__title { font-size: 2rem; font-weight: 700; color: var(--text-on-dark); line-height: 1.2; margin: 0 0 1rem; } .study-banner__text { font-size: 1.1rem; line-height: 1.6; color: rgba(var(--overlay-light-rgb), 0.85); margin: 0 0 1.75rem; } .study-banner__courses { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; } .study-banner__course { display: flex; align-items: center; gap: 0.75rem; font-size: 1.1rem; font-weight: 600; color: var(--text-on-dark); line-height: 1.4; } .study-banner__course svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); } @media (min-width: 768px) { .study-banner { padding: 4rem 0; } .study-banner__title { font-size: 2.25rem; } }