/* ============================================================ FUNFEST MILL BASIN — DESIGN SYSTEM Designed and built by NextPhase Labs LLC https://www.usenextphase.com ============================================================ */ /* Fonts are loaded via in each page's — an @import here would serialize a second round trip behind this stylesheet. */ /* ── Custom Properties ──────────────────────────────────────── */ :root { --red: #E8192C; --red-dark: #B5101E; --red-glow: rgba(232, 25, 44, 0.25); --blue: #0F2878; --blue-mid: #1A3AA8; --gold: #F5A623; --dark: #060610; --dark-2: #0D0D1E; --dark-3: #141428; --dark-4: #1C1C34; --panel: rgba(255,255,255,0.04); --panel-hover: rgba(255,255,255,0.07); --border: rgba(255,255,255,0.08); --text: #F0F0F8; --text-muted:#8888AA; --white: #FFFFFF; --font-display: 'Teko', sans-serif; --font-cond: 'Barlow Condensed', sans-serif; --font-body: 'Barlow', sans-serif; --radius: 8px; --radius-lg:16px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); background: var(--dark); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font: inherit; } /* ── Utility ────────────────────────────────────────────────── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .container--wide { max-width: 1440px; margin: 0 auto; padding: 0 40px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .tag { display: inline-block; font-family: var(--font-cond); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red); padding: 4px 12px; border: 1px solid var(--red); border-radius: 100px; margin-bottom: 16px; } .section-label { font-family: var(--font-cond); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; display: block; } .section-title { font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px); font-weight: 600; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); } .section-title span { color: var(--red); } .section-body { font-size: 16px; line-height: 1.7; color: var(--text-muted); max-width: 560px; } /* ── Buttons ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-cond); font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 28px; border-radius: var(--radius); transition: all 0.25s var(--ease-out); white-space: nowrap; } /* Preview build: submit actions are intentionally inert until a backend exists. Keep them visible but unmistakably unavailable. */ .btn:disabled, .btn[aria-disabled="true"] { background: var(--dark-4); color: var(--text-muted); border-color: var(--border); box-shadow: none; cursor: not-allowed; opacity: 0.75; } .btn:disabled:hover, .btn[aria-disabled="true"]:hover { background: var(--dark-4); color: var(--text-muted); box-shadow: none; transform: none; } .btn--primary { background: var(--red); color: var(--white); box-shadow: 0 0 0 0 var(--red-glow); } .btn--primary:hover { background: var(--red-dark); box-shadow: 0 0 0 6px var(--red-glow), 0 8px 32px rgba(232,25,44,0.4); transform: translateY(-2px); } .btn--outline { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.3); } .btn--outline:hover { border-color: var(--white); background: rgba(255,255,255,0.06); transform: translateY(-2px); } .btn--gold { background: var(--gold); color: var(--dark); } .btn--gold:hover { background: #e09820; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(245,166,35,0.4); } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* On narrow phones a long label (e.g. "Contact Us to Get Started") is wider than the column it sits in; let it wrap rather than push the page sideways. */ @media (max-width: 480px) { .btn { white-space: normal; text-align: center; padding: 14px 20px; max-width: 100%; } } /* ── Navigation ─────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s; } .nav.scrolled { background: rgba(6, 6, 16, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 var(--border); } /* Before it scrolls, the nav is transparent and sits straight on the hero photo. On phone widths the crop lands a dark ceiling panel right behind the logo, and its hard edge reads as a stray black card. A scrim over the top band gives the logo, burger and Call Now button an even ground whatever the crop happens to land on. z-index:-1 keeps it behind the nav's own content — an absolutely positioned pseudo-element would otherwise paint over it. */ .nav::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(6,6,16,0.85), rgba(6,6,16,0)); pointer-events: none; transition: opacity 0.4s; } .nav.scrolled::before { opacity: 0; } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 40px; } .nav__logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .nav__logo img { height: 44px; width: auto; object-fit: contain; } .nav__logo-text { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.1; } .nav__logo-text small { display: block; font-size: 10px; font-weight: 400; letter-spacing: 0.2em; color: var(--text-muted); } .nav__links { display: flex; align-items: center; gap: 4px; } .nav__links a { font-family: var(--font-cond); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.75); padding: 6px 10px; border-radius: 6px; transition: color 0.2s, background 0.2s; position: relative; white-space: nowrap; /* two-word labels must not break mid-item */ } /* 11 top-level items is a tight fit — tighten below 1360px, and hand off to the burger menu before anything can wrap. */ @media (max-width: 1360px) { .nav__links { gap: 0; } .nav__links a { padding: 6px 7px; letter-spacing: 0.05em; } .nav__phone { display: none; } } .nav__links a:hover, .nav__links a.active { color: var(--white); background: var(--panel); } .nav__cta { display: flex; align-items: center; gap: 16px; } .nav__phone { font-family: var(--font-cond); font-size: 14px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-muted); transition: color 0.2s; } .nav__phone:hover { color: var(--white); } .nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; } .nav__burger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: all 0.3s var(--ease-out); } .nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav__mobile { display: none; flex-direction: column; background: rgba(6, 6, 16, 0.98); backdrop-filter: blur(20px); border-top: 1px solid var(--border); padding: 16px 24px 24px; gap: 4px; } .nav__mobile a { font-family: var(--font-cond); font-size: 20px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.8); padding: 10px 12px; border-radius: 8px; display: block; transition: background 0.2s, color 0.2s; } .nav__mobile a:hover { background: var(--panel); color: var(--white); } .nav__mobile .btn { margin-top: 12px; width: 100%; justify-content: center; } /* ── Hero ───────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .hero__bg { position: absolute; inset: 0; background-image: url('../images/bowlingalley.webp'); background-size: cover; background-position: center 30%; transform: scale(1.05); animation: heroZoom 12s ease-in-out infinite alternate; } @keyframes heroZoom { from { transform: scale(1.05); } to { transform: scale(1.12); } } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(6,6,16,0.92) 0%, rgba(6,6,16,0.75) 50%, rgba(14,24,80,0.6) 100% ); } .hero__glow { position: absolute; bottom: -200px; left: -100px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(232,25,44,0.15) 0%, transparent 70%); pointer-events: none; } .hero__content { position: relative; z-index: 2; padding: 120px 40px 80px; max-width: 860px; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-cond); font-size: 12px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; } .hero__eyebrow::before { content: ''; display: block; width: 32px; height: 2px; background: var(--gold); } .hero__title { font-family: var(--font-display); font-size: clamp(56px, 9vw, 130px); font-weight: 700; line-height: 0.92; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); margin-bottom: 28px; } .hero__title em { font-style: normal; color: var(--red); } .hero__subtitle { font-size: 18px; font-weight: 400; line-height: 1.6; color: rgba(240,240,248,0.75); max-width: 520px; margin-bottom: 40px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; } .hero__stats { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); } .hero__stat {} .hero__stat-num { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--white); line-height: 1; } .hero__stat-num span { color: var(--red); } .hero__stat-label { font-family: var(--font-cond); font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; } .hero__scroll { position: absolute; bottom: 40px; right: 40px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); font-family: var(--font-cond); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } .hero__scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, transparent, var(--red)); animation: scrollLine 2s ease-in-out infinite; } @keyframes scrollLine { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.5); opacity: 0.5; } } /* ── Ticker ─────────────────────────────────────────────────── */ .ticker { background: var(--red); padding: 10px 0; overflow: hidden; } .ticker__track { display: flex; gap: 64px; animation: tickerScroll 30s linear infinite; width: max-content; } .ticker__item { display: flex; align-items: center; gap: 16px; font-family: var(--font-cond); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); white-space: nowrap; } .ticker__dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.5); } @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Hours Bar ──────────────────────────────────────────────── */ .hours-bar { background: var(--dark-2); border-bottom: 1px solid var(--border); padding: 20px 40px; } .hours-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; max-width: 1200px; margin: 0 auto; } .hours-bar__label { font-family: var(--font-cond); font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red); } .hours-bar__slots { display: flex; flex-wrap: wrap; gap: 24px; } .hours-bar__slot { display: flex; align-items: baseline; gap: 8px; } .hours-bar__day { font-family: var(--font-cond); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .hours-bar__time { font-family: var(--font-cond); font-size: 15px; font-weight: 600; color: var(--white); } .hours-bar__phone { display: flex; align-items: center; gap: 8px; font-family: var(--font-cond); font-size: 18px; font-weight: 700; color: var(--white); transition: color 0.2s; } .hours-bar__phone:hover { color: var(--red); } .hours-bar__phone svg { color: var(--red); } /* ── Section spacing ────────────────────────────────────────── */ .section { padding: 96px 0; } .section--sm { padding: 64px 0; } .section--lg { padding: 128px 0; } .section--dark { background: var(--dark); } .section--dark-2 { background: var(--dark-2); } .section--dark-3 { background: var(--dark-3); } /* ── About ──────────────────────────────────────────────────── */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about__images { position: relative; height: 520px; } .about__img-main { position: absolute; top: 0; left: 0; width: 72%; height: 80%; object-fit: cover; border-radius: var(--radius-lg); } .about__img-accent { position: absolute; bottom: 0; right: 0; width: 52%; height: 52%; object-fit: cover; border-radius: var(--radius-lg); border: 4px solid var(--dark); } .about__badge { position: absolute; top: 50%; left: 60%; transform: translate(-50%, -50%); background: var(--red); color: var(--white); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 16px 20px; border-radius: var(--radius); text-align: center; line-height: 1.3; box-shadow: 0 12px 40px rgba(232,25,44,0.5); z-index: 2; } .about__badge strong { display: block; font-size: 36px; line-height: 1; } .about__text { display: flex; flex-direction: column; gap: 24px; } .about__features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; } .about__feature { display: flex; align-items: center; gap: 10px; font-family: var(--font-cond); font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); } .about__feature-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--red-glow); border: 1px solid rgba(232,25,44,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--red); } .about__feature-icon svg { width: 16px; height: 16px; } /* ── Pricing ────────────────────────────────────────────────── */ .pricing__intro { text-align: center; max-width: 640px; margin: 0 auto 56px; } .pricing__intro .section-body { margin: 16px auto 0; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); border-radius: var(--radius-lg); overflow: visible; margin-top: 20px; } .pricing-card { background: var(--dark-3); padding: 40px 36px; position: relative; transition: background 0.3s; } .pricing-card:hover { background: var(--dark-4); } .pricing-card--featured { background: var(--dark-4); } .pricing-card--featured::before { content: 'Most Popular'; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--red); color: var(--white); font-family: var(--font-cond); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 5px 16px; border-radius: 100px; white-space: nowrap; } .pricing-card__time { font-family: var(--font-cond); font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .pricing-card__name { font-family: var(--font-display); font-size: 28px; font-weight: 600; text-transform: uppercase; color: var(--white); margin-bottom: 24px; } .pricing-card__rates { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; } .pricing-rate { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .pricing-rate:last-child { border-bottom: none; padding-bottom: 0; } .pricing-rate__label { font-size: 14px; color: var(--text-muted); } .pricing-rate__price { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--white); line-height: 1; } .pricing-rate__price span { font-family: var(--font-cond); font-size: 14px; font-weight: 400; color: var(--text-muted); } .pricing-card__note { font-size: 13px; color: var(--text-muted); line-height: 1.5; display: flex; align-items: center; gap: 8px; } .pricing-card__note svg { color: var(--gold); flex-shrink: 0; width: 14px; height: 14px; } /* ── Packages ───────────────────────────────────────────────── */ .packages__intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 48px; flex-wrap: wrap; } .packages-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .pkg-card { background: var(--dark-3); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 20px; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; } .pkg-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); } .pkg-card:hover { border-color: rgba(232,25,44,0.3); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(232,25,44,0.1); } .pkg-card:hover::before { transform: scaleX(1); } .pkg-card--kosher::before { background: var(--gold); } .pkg-card--kosher:hover { border-color: rgba(245,166,35,0.3); } .pkg-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .pkg-card__name { font-family: var(--font-display); font-size: 26px; font-weight: 600; text-transform: uppercase; color: var(--white); line-height: 1.1; } .pkg-card__badge { flex-shrink: 0; font-family: var(--font-cond); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; } .pkg-card__badge--kosher { background: rgba(245,166,35,0.15); color: var(--gold); border: 1px solid rgba(245,166,35,0.3); } .pkg-card__price { display: flex; align-items: baseline; gap: 4px; } .pkg-card__amount { font-family: var(--font-display); font-size: 48px; font-weight: 700; color: var(--white); line-height: 1; } .pkg-card__per { font-family: var(--font-cond); font-size: 14px; color: var(--text-muted); } .pkg-card__includes { display: flex; flex-direction: column; gap: 8px; } .pkg-include { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-muted); } .pkg-include svg { width: 14px; height: 14px; color: var(--red); flex-shrink: 0; } .pkg-card--kosher .pkg-include svg { color: var(--gold); } .pkg-card__divider { height: 1px; background: var(--border); } .pkg-card__note { font-size: 13px; color: var(--text-muted); line-height: 1.5; } .packages__min { margin-top: 24px; padding: 20px 24px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--text-muted); } .packages__min svg { color: var(--gold); flex-shrink: 0; width: 20px; height: 20px; } /* ── Amenities ──────────────────────────────────────────────── */ .amenities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); border-radius: var(--radius-lg); overflow: hidden; } .amenity-card { position: relative; height: 400px; overflow: hidden; } .amenity-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); } .amenity-card:hover img { transform: scale(1.08); } .amenity-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,6,16,0.95) 0%, rgba(6,6,16,0.3) 60%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; } .amenity-card__icon { width: 40px; height: 40px; background: var(--red); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; color: var(--white); } .amenity-card__icon svg { width: 20px; height: 20px; } .amenity-card__name { font-family: var(--font-display); font-size: 28px; font-weight: 600; text-transform: uppercase; color: var(--white); margin-bottom: 6px; } .amenity-card__desc { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.5; } /* ── Leagues ────────────────────────────────────────────────── */ .leagues__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-bottom: 56px; } .leagues-table { width: 100%; border-collapse: collapse; } .leagues-table th { font-family: var(--font-cond); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; } .leagues-table td { font-size: 14px; color: var(--text); padding: 14px 16px; border-bottom: 1px solid var(--border); } .leagues-table tr:last-child td { border-bottom: none; } .leagues-table tr:hover td { background: var(--panel); } .league-type { font-family: var(--font-cond); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; } .league-type--evening { background: rgba(232,25,44,0.15); color: var(--red); } .league-type--senior { background: rgba(245,166,35,0.15); color: var(--gold); } .league-type--junior { background: rgba(26,58,168,0.3); color: #7BA7FF; } /* ── Events Banner ──────────────────────────────────────────── */ .events-banner { background: linear-gradient(135deg, var(--dark-3) 0%, var(--dark-2) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 56px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; } /* Grid children default to min-width:auto, which lets a wide child push the banner past the viewport on narrow phones. */ .events-banner > * { min-width: 0; } .events-banner__tag { font-family: var(--font-cond); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; } .events-banner__title { font-family: var(--font-display); font-size: clamp(32px, 4vw, 52px); font-weight: 600; text-transform: uppercase; color: var(--white); line-height: 1; margin-bottom: 16px; } .events-banner__body { font-size: 15px; color: var(--text-muted); line-height: 1.6; max-width: 480px; margin-bottom: 28px; } .events-banner__types { display: flex; flex-wrap: wrap; gap: 8px; } .event-type-pill { font-family: var(--font-cond); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; border: 1px solid var(--border); color: var(--text-muted); } .events-banner__visual { display: flex; flex-direction: column; gap: 12px; min-width: 200px; } .events-banner__img { width: 220px; height: 140px; object-fit: cover; border-radius: var(--radius); } /* ── Gift Card Promo ────────────────────────────────────────── */ .promo-strip { background: var(--red); padding: 64px 40px; text-align: center; } .promo-strip__title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 700; text-transform: uppercase; color: var(--white); line-height: 1; margin-bottom: 16px; } .promo-strip__body { font-size: 17px; color: rgba(255,255,255,0.8); max-width: 480px; margin: 0 auto 32px; line-height: 1.6; } /* ── Contact ────────────────────────────────────────────────── */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .contact-details { display: flex; flex-direction: column; gap: 24px; } .contact-item { display: flex; gap: 16px; align-items: flex-start; } .contact-item__icon { width: 44px; height: 44px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--red); } .contact-item__icon svg { width: 20px; height: 20px; } .contact-item__label { font-family: var(--font-cond); font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; } .contact-item__value { font-size: 16px; color: var(--text); line-height: 1.5; } .contact-item__value a { transition: color 0.2s; } .contact-item__value a:hover { color: var(--red); } .contact-form { background: var(--dark-3); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; display: flex; flex-direction: column; gap: 16px; } .contact-form__title { font-family: var(--font-display); font-size: 28px; font-weight: 600; text-transform: uppercase; color: var(--white); margin-bottom: 4px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-family: var(--font-cond); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .form-group input, .form-group select, .form-group textarea { background: var(--dark-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; font-family: var(--font-body); font-size: 15px; color: var(--text); transition: border-color 0.2s, box-shadow 0.2s; outline: none; width: 100%; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); opacity: 0.6; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow); } .form-group select { appearance: none; cursor: pointer; } .form-group textarea { resize: vertical; min-height: 100px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* ── Map ────────────────────────────────────────────────────── */ .map-wrapper { border-radius: var(--radius-lg); overflow: hidden; height: 360px; border: 1px solid var(--border); margin-top: 32px; } .map-wrapper iframe { width: 100%; height: 100%; border: none; filter: grayscale(0.3) invert(0.85) hue-rotate(180deg); } /* ── Footer ─────────────────────────────────────────────────── */ .footer { background: var(--dark-2); border-top: 1px solid var(--border); padding: 64px 0 32px; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; } .footer__brand { } .footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .footer__logo img { height: 36px; width: auto; } .footer__logo-text { font-family: var(--font-display); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .footer__tagline { font-family: var(--font-cond); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 16px; } .footer__desc { font-size: 14px; color: var(--text-muted); line-height: 1.7; max-width: 280px; } .footer__socials { display: flex; gap: 10px; margin-top: 20px; } .footer__social { width: 36px; height: 36px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all 0.2s; } .footer__social:hover { background: var(--red); border-color: var(--red); color: var(--white); } .footer__social svg { width: 16px; height: 16px; } .footer__col-title { font-family: var(--font-cond); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; } .footer__links { display: flex; flex-direction: column; gap: 8px; } .footer__links a { font-size: 14px; color: var(--text-muted); transition: color 0.2s; } .footer__links a:hover { color: var(--white); } /* Touch targets: footer links are the smallest hit areas on the site, so give them a full 44px on touch devices (WCAG 2.5.5 / platform HIG minimum). */ @media (pointer: coarse) { .footer__links { gap: 0; } .footer__links a { min-height: 44px; display: flex; align-items: center; } .nav__mobile a { min-height: 44px; display: flex; align-items: center; } } .footer__hours { display: flex; flex-direction: column; gap: 6px; } .footer__hour { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-muted); } .footer__hour strong { font-weight: 500; color: var(--text); } .footer__bottom { padding-top: 32px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer__copyright { font-size: 13px; color: var(--text-muted); } .footer__credits { font-size: 13px; color: var(--text-muted); } .footer__credits a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); transition: color 0.2s; } .footer__credits a strong { font-weight: 600; } .footer__credits a:hover { color: var(--text); } .footer__credits a:hover .npl-mark { color: var(--red); } .npl-mark { width: 15px; height: 15px; flex-shrink: 0; transition: color 0.2s; } /* ── Animations ─────────────────────────────────────────────── */ /* Reveal-on-scroll is opt-in: only hide content once JS has confirmed it can reveal it again. Without the .js class (JS disabled, script blocked, or a runtime error before main.js) every section stays visible. */ html.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } html.js [data-reveal].revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ── Page Header (inner pages) ──────────────────────────────── */ .page-header { padding: 140px 0 80px; position: relative; overflow: hidden; } .page-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--dark-2), var(--dark)); } .page-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--border); } .page-header__content { position: relative; z-index: 1; } .page-header__bg-text { position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-family: var(--font-display); font-size: 200px; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,0.02); line-height: 1; pointer-events: none; z-index: 0; white-space: nowrap; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 1180px) { .nav__links { display: none; } .nav__burger { display: flex; } .about-grid { grid-template-columns: 1fr; gap: 48px; } .about__images { height: 360px; } .pricing-grid { grid-template-columns: 1fr; gap: 2px; } .amenities-grid { grid-template-columns: 1fr; } .amenity-card { height: 280px; } .leagues__intro { grid-template-columns: 1fr; gap: 40px; } .events-banner { grid-template-columns: 1fr; } .events-banner__visual { display: none; } .contact-grid { grid-template-columns: 1fr; gap: 40px; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .packages-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .nav__inner { padding: 0 20px; } .nav__phone { display: none; } .hero__content { padding: 100px 20px 60px; } .hero__stats { gap: 20px; } .section { padding: 64px 0; } .section--lg { padding: 80px 0; } .hours-bar { padding: 16px 20px; } .hours-bar__inner { flex-direction: column; align-items: flex-start; gap: 12px; } .hours-bar__slots { flex-direction: column; gap: 8px; } .events-banner { padding: 32px 24px; } .form-row { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; text-align: center; } .container--wide { padding: 0 20px; } .container { padding: 0 20px; } .promo-strip { padding: 48px 20px; } .contact-form { padding: 24px 20px; } } @media (max-width: 480px) { .hero__actions { flex-direction: column; } .hero__actions .btn { width: 100%; justify-content: center; } .packages-grid { grid-template-columns: 1fr; } .footer__socials { gap: 8px; } } /* ── Hero, mobile corrections ───────────────────────────────────────────── .hero__content also carries .container--wide, whose `padding` shorthand zeroes the vertical padding declared on .hero__content. On desktop .hero__content is declared later and wins; inside the 768px block the order flips, so the hero lost its top padding entirely. With the content taller than the viewport, align-items:center then pushed the eyebrow up underneath the fixed 72px nav — overlapping the logo and running beneath the Call Now button. Scoping to .hero keeps the hero's own vertical rhythm regardless of declaration order. */ @media (max-width: 768px) { .hero { align-items: flex-start; } /* min-width:0 because a flex item defaults to min-width:auto, so the hero box grew to the min-content width of the headline. Teko is narrow enough that it never bites, but until the webfont swaps in, the wider fallback pushed the box past the viewport and the buttons and stats lost their 20px gutter — clipped by .hero's overflow:hidden, so nothing ever scrolled to reveal it. */ .hero .hero__content { padding: 108px 20px 56px; min-width: 0; } /* Four stats in a wrapping flex row broke 3 + 1 and orphaned the last one on its own line. A 2x2 grid is balanced at every phone width. */ .hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; } /* Decorative scroll hint: pointless on touch, and it collided with the stats block once the content grew taller than the viewport. */ .hero__scroll { display: none; } }