/* * ============================================================================ * style.css — 412 AI | Global Stylesheet * ============================================================================ * Brand identity: AI-powered kids education + Pittsburgh roots. * Palette: * Background → deep space navy (#080b14) * Surface → dark blue-grey (#0d1120) * Accent 1 → electric cyan (#00d4ff) — tech / AI * Accent 2 → warm amber (#ffb830) — kids / warmth / energy * Text → soft white (#e8edf8) * Typography: * Display → Bebas Neue (bold numerals, section titles) * Body → Nunito (round, friendly, readable for parents & kids) * Mono/Labels → Space Mono (tech labels, badges, prices) * ============================================================================ */ /* ═══════════════════════════════════════════════════════════════════════════ 1. CSS CUSTOM PROPERTIES — change here, updates everywhere ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Colors ─────────────────────────────────────────────────────────────── */ --clr-bg: #080b14; /* deep navy page background */ --clr-surface: #0d1120; /* card / section surface */ --clr-surface-2: #131829; /* elevated hover surface */ --clr-border: #1a2035; /* subtle borders */ --clr-accent: #00d4ff; /* electric cyan (AI/tech) */ --clr-accent-dim: #0098ba; /* darker cyan hover */ --clr-accent-glow: rgba(0, 212, 255, 0.15); --clr-gold: #ffb830; /* warm amber (kids/energy) */ --clr-gold-glow: rgba(255, 184, 48, 0.15); --clr-text: #e8edf8; /* primary body text */ --clr-text-muted: #6b7799; /* secondary text */ --clr-white: #ffffff; --clr-success: #00e5a0; --clr-danger: #ff4a6b; /* ── Typography ─────────────────────────────────────────────────────────── */ --font-display: 'Bebas Neue', sans-serif; --font-body: 'Nunito', sans-serif; /* rounded, friendly */ --font-mono: 'Space Mono', monospace; /* ── Spacing ─────────────────────────────────────────────────────────────── */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; /* ── Layout ──────────────────────────────────────────────────────────────── */ --max-width: 1200px; --nav-height: 72px; /* ── Shape ───────────────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; /* ── Motion ──────────────────────────────────────────────────────────────── */ --transition: 0.25s ease; } /* ═══════════════════════════════════════════════════════════════════════════ 2. RESET & BASE ═══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background-color: var(--clr-bg); color: var(--clr-text); font-family: var(--font-body); font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* Load Nunito alongside the other fonts (added in of each page) */ img { display: block; max-width: 100%; } a { color: var(--clr-accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--clr-white); } ul { list-style: none; } /* ═══════════════════════════════════════════════════════════════════════════ 3. UTILITY CLASSES ═══════════════════════════════════════════════════════════════════════════ */ /* Centered max-width wrapper */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-md); } /* Standard section vertical padding */ .section { padding-block: var(--space-xl); } /* Alternate section background */ .section-alt { background-color: var(--clr-surface); } /* Mono eyebrow label above headings */ .section-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clr-gold); /* amber label = warmth / kids energy */ margin-bottom: var(--space-xs); } /* Large section title */ .section-heading { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: 0.03em; line-height: 1.1; color: var(--clr-white); margin-bottom: var(--space-sm); } /* Subtitle paragraph */ .section-intro { font-size: 1.05rem; color: var(--clr-text-muted); max-width: 640px; margin-bottom: var(--space-lg); } /* Accent color spans */ .accent-cyan { color: var(--clr-accent); } .accent-gold { color: var(--clr-gold); } /* ═══════════════════════════════════════════════════════════════════════════ 4. PITTSBURGH SKYLINE UTILITY Reused on hero, dividers, and page heroes across all pages. Photo: Jason Pischke (@jrpischke) — Unsplash License (free commercial use) URL: https://unsplash.com/photos/OD9sOCSSi9c CDN: https://images.unsplash.com/photo-1599930113854-d6d7fd521f10 ═══════════════════════════════════════════════════════════════════════════ */ .skyline-bg { background-image: url('https://images.unsplash.com/photo-1599930113854-d6d7fd521f10?w=1920&q=80&auto=format&fit=crop'); background-size: cover; background-position: center 55%; background-repeat: no-repeat; } /* Standard dark overlay for text legibility over the skyline */ .skyline-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(8, 11, 20, 0.88) 0%, rgba(8, 11, 20, 0.52) 40%, rgba(8, 11, 20, 0.52) 60%, rgba(8, 11, 20, 0.95) 100% ); } /* Thin decorative divider strip that shows a sliver of the skyline */ .skyline-divider { width: 100%; height: 120px; position: relative; } .skyline-divider::after { content: ''; position: absolute; inset: 0; background-image: url('https://images.unsplash.com/photo-1599930113854-d6d7fd521f10?w=1920&q=80&auto=format&fit=crop'); background-size: cover; background-position: center 60%; /* Fade both edges into the page background */ -webkit-mask-image: linear-gradient(to bottom, transparent, black 35%, black 65%, transparent); mask-image: linear-gradient(to bottom, transparent, black 35%, black 65%, transparent); opacity: 0.55; } /* ═══════════════════════════════════════════════════════════════════════════ 5. BUTTONS ═══════════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.8rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); } /* Cyan primary */ .btn-primary { background: var(--clr-accent); color: var(--clr-bg); border-color: var(--clr-accent); } .btn-primary:hover { background: var(--clr-white); border-color: var(--clr-white); color: var(--clr-bg); box-shadow: 0 0 24px var(--clr-accent-glow); transform: translateY(-2px); } /* Amber / gold — used for kids-focused CTAs */ .btn-gold { background: var(--clr-gold); color: var(--clr-bg); border-color: var(--clr-gold); } .btn-gold:hover { background: var(--clr-white); border-color: var(--clr-white); color: var(--clr-bg); box-shadow: 0 0 24px var(--clr-gold-glow); transform: translateY(-2px); } /* Outlined cyan */ .btn-outline { background: transparent; color: var(--clr-accent); border-color: var(--clr-accent); } .btn-outline:hover { background: var(--clr-accent); color: var(--clr-bg); transform: translateY(-2px); } /* Ghost — translucent white border */ .btn-ghost { background: transparent; color: var(--clr-white); border-color: rgba(255,255,255,0.25); } .btn-ghost:hover { border-color: var(--clr-white); transform: translateY(-2px); } /* Full-width */ .btn-full { width: 100%; justify-content: center; } /* Nav CTA pill */ .btn-nav { background: var(--clr-gold) !important; color: var(--clr-bg) !important; padding: 0.5rem 1.2rem; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; transition: background var(--transition), box-shadow var(--transition); } .btn-nav:hover { background: var(--clr-white) !important; box-shadow: 0 0 18px var(--clr-gold-glow); } /* ═══════════════════════════════════════════════════════════════════════════ 6. NAVIGATION ═══════════════════════════════════════════════════════════════════════════ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-height); display: flex; align-items: center; background: rgba(8, 11, 20, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: border-color var(--transition), box-shadow var(--transition); } .site-header.scrolled { border-color: var(--clr-border); box-shadow: 0 4px 32px rgba(0,0,0,0.6); } .nav-container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-md); } /* Logo — 412 white, AI gold */ .nav-logo { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 0.04em; line-height: 1; } .logo-412 { color: var(--clr-white); } .logo-ai { color: var(--clr-gold); } /* Nav link list */ .nav-links { display: flex; align-items: center; gap: var(--space-md); } .nav-link { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-muted); transition: color var(--transition); } .nav-link:hover, .nav-link.active { color: var(--clr-white); } /* Hamburger — mobile only */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--clr-white); transition: transform var(--transition), opacity var(--transition); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile nav ─────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .nav-toggle { display: flex; } .nav-links { position: fixed; top: var(--nav-height); right: -100%; width: 280px; height: calc(100vh - var(--nav-height)); flex-direction: column; align-items: flex-start; gap: 0; background: var(--clr-surface); padding: var(--space-md); border-left: 1px solid var(--clr-border); transition: right 0.35s ease; } .nav-links.nav-open { right: 0; } .nav-link { padding-block: var(--space-sm); font-size: 0.9rem; border-bottom: 1px solid var(--clr-border); width: 100%; } .btn-nav { margin-top: var(--space-sm); } } /* ═══════════════════════════════════════════════════════════════════════════ 7. HERO (full-viewport — used on index.html) ═══════════════════════════════════════════════════════════════════════════ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } /* Animated cyan dot-grid overlay — sits above the skyline photo */ .hero-grid-overlay { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0,212,255,0.1) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.35; pointer-events: none; animation: gridDrift 24s linear infinite; } @keyframes gridDrift { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } } .hero-content { position: relative; z-index: 1; padding-inline: var(--space-md); animation: fadeUp 1.1s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* Pill badge above headline */ .hero-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clr-gold); border: 1px solid var(--clr-gold); padding: 0.35rem 1rem; border-radius: 100px; margin-bottom: var(--space-md); animation: fadeUp 1.1s 0.2s ease both; } /* Giant headline */ .hero-headline { font-family: var(--font-display); font-size: clamp(5.5rem, 17vw, 13rem); line-height: 0.9; letter-spacing: 0.02em; color: var(--clr-white); animation: fadeUp 1.1s 0.35s ease both; } .headline-ai { color: var(--clr-gold); } /* Tagline */ .hero-tagline { font-size: clamp(0.85rem, 2vw, 1rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--clr-text-muted); margin-block: var(--space-md); animation: fadeUp 1.1s 0.5s ease both; } /* CTA row */ .hero-ctas { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; animation: fadeUp 1.1s 0.65s ease both; } /* Scroll hint */ .scroll-hint { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clr-text-muted); animation: fadeUp 1s 1.2s ease both; } .scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--clr-gold), transparent); animation: scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } } /* ═══════════════════════════════════════════════════════════════════════════ 8. PAGE HERO (inner pages — kids-ai.html, packages.html) ═══════════════════════════════════════════════════════════════════════════ */ .page-hero { position: relative; padding-top: calc(var(--nav-height) + var(--space-xl)); padding-bottom: var(--space-xl); text-align: center; overflow: hidden; } .page-hero .hero-badge { margin-bottom: var(--space-sm); } .page-hero h1 { font-family: var(--font-display); font-size: clamp(3rem, 9vw, 7rem); letter-spacing: 0.03em; line-height: 1.0; color: var(--clr-white); margin-bottom: var(--space-sm); } .page-hero > .container > p { font-size: 1.05rem; color: var(--clr-text-muted); max-width: 580px; margin-inline: auto; margin-bottom: var(--space-md); } /* ═══════════════════════════════════════════════════════════════════════════ 9. CARDS — shared scroll-reveal base JS adds .visible when the element enters viewport (IntersectionObserver). ═══════════════════════════════════════════════════════════════════════════ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal.visible { opacity: 1; transform: none; } /* Stagger helpers — apply to children */ .stagger-1 { transition-delay: 0.05s; } .stagger-2 { transition-delay: 0.12s; } .stagger-3 { transition-delay: 0.19s; } .stagger-4 { transition-delay: 0.26s; } .stagger-5 { transition-delay: 0.33s; } .stagger-6 { transition-delay: 0.40s; } /* ═══════════════════════════════════════════════════════════════════════════ 10. ABOUT SECTION (mission / values cards) ═══════════════════════════════════════════════════════════════════════════ */ .about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); } .about-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-md); position: relative; overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); } .about-card:hover { border-color: var(--clr-gold); box-shadow: 0 0 32px var(--clr-gold-glow); } /* Gold top-line on hover */ .about-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--clr-gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .about-card:hover::before { transform: scaleX(1); } .card-icon { font-size: 1.4rem; color: var(--clr-gold); margin-bottom: var(--space-sm); } .about-card h3 { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.04em; color: var(--clr-white); margin-bottom: var(--space-xs); } .about-card p { color: var(--clr-text-muted); font-size: 0.95rem; } /* ═══════════════════════════════════════════════════════════════════════════ 11. SERVICES SECTION ═══════════════════════════════════════════════════════════════════════════ */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); } .service-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); transition: border-color var(--transition), box-shadow var(--transition); } .service-card:hover { border-color: var(--clr-accent); box-shadow: 0 8px 40px var(--clr-accent-glow); } .service-number { font-family: var(--font-display); font-size: 3.5rem; color: rgba(255,184,48,0.08); /* faint gold ghost number */ line-height: 1; user-select: none; } .service-card h3 { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0.04em; color: var(--clr-white); } .service-card p { color: var(--clr-text-muted); font-size: 0.93rem; } .service-detail { font-size: 0.87rem; opacity: 0.72; } .service-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--clr-border); } .service-price { font-family: var(--font-mono); font-size: 0.9rem; color: var(--clr-gold); letter-spacing: 0.05em; } /* Promo link cards to sub-pages */ .extra-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-md); } .extra-link-card { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); color: var(--clr-text); transition: border-color var(--transition), box-shadow var(--transition), color var(--transition); } .extra-link-card:hover { color: var(--clr-white); border-color: var(--clr-gold); box-shadow: 0 4px 32px var(--clr-gold-glow); } .extra-icon { font-size: 1.8rem; flex-shrink: 0; } .extra-link-card div { flex: 1; } .extra-link-card strong { display: block; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.04em; color: var(--clr-white); } .extra-link-card span { font-size: 0.83rem; color: var(--clr-text-muted); } .extra-arrow { font-size: 1.2rem; color: var(--clr-gold); transition: transform var(--transition); } .extra-link-card:hover .extra-arrow { transform: translateX(6px); } /* ═══════════════════════════════════════════════════════════════════════════ 12. CONTACT SECTION ═══════════════════════════════════════════════════════════════════════════ */ .contact-grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-lg); align-items: start; } @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } } .contact-info { display: flex; flex-direction: column; gap: var(--space-md); } .contact-item { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm); border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-bg); transition: border-color var(--transition); } .contact-item:hover { border-color: var(--clr-gold); } .contact-icon { font-size: 1.5rem; margin-top: 2px; } .contact-label { font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clr-text-muted); margin-bottom: 2px; } .contact-value { color: var(--clr-gold); font-size: 0.95rem; word-break: break-all; } .contact-value:hover { color: var(--clr-white); } /* Form */ .contact-form { display: flex; flex-direction: column; gap: var(--space-sm); } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-group label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--clr-text-muted); } .form-group input, .form-group select, .form-group textarea { background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); color: var(--clr-text); font-family: var(--font-body); font-size: 0.95rem; padding: 0.75rem 1rem; outline: none; appearance: none; -webkit-appearance: none; transition: border-color var(--transition), box-shadow var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--clr-gold); box-shadow: 0 0 0 3px var(--clr-gold-glow); } .form-success { display: none; font-family: var(--font-mono); font-size: 0.82rem; color: var(--clr-success); padding: var(--space-sm); border: 1px solid var(--clr-success); border-radius: var(--radius-sm); text-align: center; } /* ═══════════════════════════════════════════════════════════════════════════ 13. KIDS AI PAGE — benefit banners, tips, age pills ═══════════════════════════════════════════════════════════════════════════ */ /* Full-width benefit row */ .benefit-banner { display: flex; align-items: flex-start; gap: var(--space-md); background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-md); transition: border-color var(--transition), box-shadow var(--transition); } .benefit-banner:hover { border-color: var(--clr-gold); box-shadow: 0 4px 32px var(--clr-gold-glow); } .benefit-icon { font-size: 2.4rem; flex-shrink: 0; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--clr-gold-glow); border-radius: var(--radius-md); border: 1px solid rgba(255,184,48,0.2); } .benefit-banner h3 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.04em; color: var(--clr-white); margin-bottom: 4px; } .benefit-banner p { color: var(--clr-text-muted); font-size: 0.93rem; } /* Tips grid */ .tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); } .tip-card { background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-md); text-align: center; transition: border-color var(--transition); } .tip-card:hover { border-color: var(--clr-gold); } .tip-num { font-family: var(--font-display); font-size: 3rem; color: var(--clr-gold); opacity: 0.25; line-height: 1; } .tip-card h4 { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.04em; color: var(--clr-white); margin-bottom: var(--space-xs); } .tip-card p { font-size: 0.88rem; color: var(--clr-text-muted); } /* Age bracket strip */ .age-strip { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .age-pill { flex: 1; min-width: 180px; background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); display: flex; align-items: center; gap: var(--space-sm); transition: border-color var(--transition); } .age-pill:hover { border-color: var(--clr-gold); } .age-range { font-family: var(--font-display); font-size: 1.6rem; color: var(--clr-gold); white-space: nowrap; } .age-pill p { font-size: 0.85rem; color: var(--clr-text-muted); } /* ═══════════════════════════════════════════════════════════════════════════ 14. PACKAGES PAGE — pricing cards ═══════════════════════════════════════════════════════════════════════════ */ .packages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); } .pkg-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); position: relative; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .pkg-card:hover { transform: translateY(-4px); border-color: var(--clr-gold); box-shadow: 0 12px 48px var(--clr-gold-glow); } .pkg-card.featured { border-color: var(--clr-gold); background: linear-gradient(160deg, rgba(255,184,48,0.05) 0%, var(--clr-surface) 100%); } .pkg-badge { position: absolute; top: -1px; right: 24px; background: var(--clr-gold); color: var(--clr-bg); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .pkg-category { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clr-gold); } .pkg-card h3 { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0.04em; color: var(--clr-white); } .pkg-price { display: flex; align-items: baseline; gap: 4px; margin-block: var(--space-xs); } .pkg-price .amount { font-family: var(--font-display); font-size: 3rem; color: var(--clr-white); } .pkg-price .period { font-family: var(--font-mono); font-size: 0.75rem; color: var(--clr-text-muted); } .pkg-features { display: flex; flex-direction: column; gap: 0.6rem; padding-top: var(--space-sm); border-top: 1px solid var(--clr-border); flex: 1; } .pkg-features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--clr-text-muted); } .pkg-features li::before { content: '✓'; color: var(--clr-gold); font-weight: 700; flex-shrink: 0; } /* Comparison table */ .compare-strip { margin-top: var(--space-xl); overflow-x: auto; } .compare-strip table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .compare-strip th { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-gold); text-align: left; padding: var(--space-sm); border-bottom: 1px solid var(--clr-border); } .compare-strip td { padding: var(--space-sm); border-bottom: 1px solid var(--clr-border); color: var(--clr-text-muted); vertical-align: middle; } .compare-strip tr:hover td { background: var(--clr-surface); } .compare-strip td:first-child { color: var(--clr-text); font-weight: 700; } .yes { color: var(--clr-success); font-weight: 700; } .no { color: var(--clr-text-muted); opacity: 0.35; } /* ═══════════════════════════════════════════════════════════════════════════ 15. FOOTER ═══════════════════════════════════════════════════════════════════════════ */ .site-footer { background: var(--clr-bg); border-top: 1px solid var(--clr-border); padding-block: var(--space-lg); } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); text-align: center; } .footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; } .footer-nav a { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-text-muted); transition: color var(--transition); } .footer-nav a:hover { color: var(--clr-gold); } .footer-copy { font-size: 0.78rem; color: var(--clr-text-muted); } /* ═══════════════════════════════════════════════════════════════════════════ 16. RESPONSIVE TWEAKS ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { .hero-headline { font-size: clamp(4.5rem, 22vw, 7rem); } .benefit-banner { flex-direction: column; text-align: center; } .age-strip { flex-direction: column; } .section { padding-block: var(--space-lg); } }