/* ======================================================================== AI Kids Cafe · v3: kinetic, image-led, mission-grade ======================================================================== */ :root { /* Brand palette · deeper, more confident */ --ink-900: #0a0f2c; --ink-800: #131a3d; --ink-700: #1f2a5c; --ink-600: #34406b; --ink-500: #545e85; --ink-400: #7c87a8; --ink-300: #b9c1d4; --ink-200: #d8dde9; --amber-600: #d97706; --amber-500: #f59e0b; --amber-400: #fbbf24; --amber-300: #fcd34d; --amber-100: #fef3c7; --crimson-500: #ef4444; --green-500: #10b981; --green-100: #d1fae5; --violet-500: #8b5cf6; --violet-100: #ede9fe; --rose-500: #f43f5e; --rose-100: #ffe4e6; --sky-500: #0ea5e9; --sky-100: #e0f2fe; --cream-50: #fdfaf2; --cream-100: #faf2dc; --cream-200: #f5e9c4; --white: #ffffff; --bg-base: #fdfaf2; --bg-warm: #fff8e6; --border: #e8e2cf; --shadow-xs: 0 1px 2px rgba(10, 15, 44, 0.05); --shadow-sm: 0 2px 4px rgba(10, 15, 44, 0.06); --shadow-md: 0 8px 22px rgba(10, 15, 44, 0.08); --shadow-lg: 0 22px 50px rgba(10, 15, 44, 0.14); --shadow-xl: 0 32px 70px rgba(10, 15, 44, 0.20); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 36px; --radius-pill: 999px; --container: 1180px; --container-wide: 1320px; /* Display: Plus Jakarta Sans (geometric, friendly, modern). Body: Inter (clean, neutral). Loaded via Google Fonts in . */ --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink-600); background: var(--bg-base); -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; display: block; height: auto; } a { color: var(--ink-800); text-decoration: none; transition: color 160ms ease; } a:hover { color: var(--amber-500); } button { font: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-900); line-height: 1.05; margin: 0 0 .4em; font-weight: 800; letter-spacing: -0.025em; } h1 { font-size: clamp(2.6rem, 6.5vw, 5.4rem); font-weight: 900; letter-spacing: -0.035em; } h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); font-weight: 800; } h3 { font-size: 1.15rem; font-weight: 700; } p { margin: 0 0 1em; color: var(--ink-500); } .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-500); line-height: 1.5; font-weight: 500; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 24px; } .section { padding: 80px 0; } .section-sm { padding: 48px 0; } .section-lg { padding: 120px 0; } .bg-cream { background: var(--cream-50); } .bg-warm { background: var(--bg-warm); } .bg-ink { background: var(--ink-900); color: var(--white); } .bg-ink h1, .bg-ink h2, .bg-ink h3 { color: var(--white); } .bg-ink p { color: rgba(255,255,255,0.78); } .text-center { text-align: center; } .highlight { color: var(--amber-500); } .text-gradient { background: linear-gradient(135deg, var(--amber-500), var(--rose-500)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* SVG icons inherit currentColor */ .icon { width: 1em; height: 1em; flex: 0 0 auto; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke: currentColor; } .icon-lg { width: 28px; height: 28px; } .icon-xl { width: 36px; height: 36px; } /* ----------------------------- Buttons ----------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; border: 2px solid transparent; cursor: pointer; transition: transform 160ms ease, box-shadow 200ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease; line-height: 1; white-space: nowrap; text-decoration: none; letter-spacing: -0.01em; } .btn:focus-visible { outline: 3px solid var(--amber-300); outline-offset: 2px; } .btn-primary { background: linear-gradient(135deg, var(--amber-500), var(--amber-400)); color: #1b1300; box-shadow: 0 10px 25px rgba(245, 158, 11, 0.4); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(245, 158, 11, 0.55); color: #1b1300; } .btn-secondary { background: var(--white); color: var(--ink-900); border-color: var(--ink-200); box-shadow: var(--shadow-sm); } .btn-secondary:hover { border-color: var(--ink-900); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-ghost { background: transparent; color: var(--ink-800); padding: 12px 18px; } .btn-ghost:hover { color: var(--amber-500); } .btn-dark { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); } .btn-dark:hover { background: var(--ink-800); color: var(--white); transform: translateY(-2px); } .btn-lg { padding: 17px 30px; font-size: 1.05rem; } .btn-xl { padding: 20px 34px; font-size: 1.1rem; } .btn .arrow { transition: transform 220ms ease; display: inline-block; } .btn:hover .arrow { transform: translateX(4px); } /* ----------------------------- Header / Nav ------------------------------ */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(253, 250, 242, 0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(232, 226, 207, 0.5); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; } .brand { display: flex; align-items: center; gap: 12px; color: var(--ink-900); font-weight: 800; font-family: var(--font-display); } .brand img { width: 44px; height: 44px; } .brand-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-name { font-size: 1.1rem; letter-spacing: -0.02em; } .brand-name .ai { color: var(--amber-500); } .site-footer .brand-name .ai { color: var(--amber-400); } .brand-tagline { font-size: 0.7rem; color: var(--ink-400); font-weight: 600; letter-spacing: 0.02em; } .nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .nav-links a { display: inline-block; padding: 10px 16px; color: var(--ink-700); font-weight: 600; border-radius: var(--radius-pill); position: relative; font-size: 0.95rem; } .nav-links a:hover { color: var(--ink-900); background: rgba(10,15,44,0.04); } .nav-links a.active { color: var(--ink-900); } .nav-links a.active::after { content: ""; position: absolute; left: 24%; right: 24%; bottom: 2px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--amber-500), var(--rose-500)); } .nav-cta { display: flex; align-items: center; gap: 10px; } .nav-toggle { display: none; background: transparent; border: 0; font-size: 1.4rem; padding: 6px 10px; color: var(--ink-900); cursor: pointer; } @media (max-width: 880px) { .nav { gap: 8px; } .nav-links { position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--white); border-bottom: 1px solid var(--border); padding: 12px 16px; box-shadow: var(--shadow-md); gap: 2px; display: none; } .nav-links.open { display: flex; } .nav-toggle { display: inline-flex; order: -1; margin-right: 4px; } .brand { order: 0; margin-right: auto; } .nav-cta { order: 1; } .nav-cta .btn { padding: 10px 16px; font-size: 0.9rem; } .brand img { width: 38px; height: 38px; } .brand-name { font-size: 0.95rem; } .brand-tagline { display: none; } } @media (max-width: 420px) { .nav-cta .btn .arrow { display: none; } } /* ----------------------------- Marquee announcement bar ------------------ */ .marquee-bar { background: var(--ink-900); color: var(--white); padding: 9px 0; overflow: hidden; position: relative; font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; } .marquee-bar .track { display: inline-flex; gap: 48px; white-space: nowrap; animation: marquee 40s linear infinite; padding-left: 100%; } .marquee-bar .track span { display: inline-flex; align-items: center; gap: 8px; } .marquee-bar .track span::before { content: "✦"; color: var(--amber-400); font-size: 0.8em; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-bar .track { animation: none; padding-left: 24px; } } /* ----------------------------- KINETIC HERO ------------------------------ */ .hero-kinetic { position: relative; padding: 56px 0 88px; overflow: hidden; isolation: isolate; } .hero-kinetic .bg-orb { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(70px); opacity: 0.55; z-index: -1; animation: orb-float 14s ease-in-out infinite alternate; } .hero-kinetic .bg-orb.a { width: 540px; height: 540px; background: var(--amber-300); top: -120px; right: -120px; } .hero-kinetic .bg-orb.b { width: 480px; height: 480px; background: var(--violet-100); bottom: -180px; left: -120px; animation-duration: 18s; animation-delay: -3s; } .hero-kinetic .bg-orb.c { width: 360px; height: 360px; background: var(--sky-100); top: 30%; left: 40%; animation-duration: 22s; animation-delay: -6s; } @keyframes orb-float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(40px, -30px) scale(1.07); } } .hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(10,15,44,0.06); border: 1px solid rgba(10,15,44,0.08); border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; color: var(--ink-800); letter-spacing: 0.02em; margin-bottom: 24px; backdrop-filter: blur(4px); } .hero-eyebrow .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18); } 50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.05); } } .hero-h1 { font-size: clamp(2.6rem, 7.2vw, 6.2rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.04em; margin-bottom: 24px; } .hero-h1 .gradient { background: linear-gradient(135deg, var(--amber-500) 0%, var(--rose-500) 50%, var(--violet-500) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } .hero-h1 .word-swap { display: inline-block; position: relative; vertical-align: baseline; min-width: 6ch; } .hero-h1 .word-swap span { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; background: linear-gradient(135deg, var(--amber-500), var(--rose-500)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: word-cycle 8s ease-in-out infinite; } .hero-h1 .word-swap span:nth-child(1) { animation-delay: 0s; } .hero-h1 .word-swap span:nth-child(2) { animation-delay: 2s; } .hero-h1 .word-swap span:nth-child(3) { animation-delay: 4s; } .hero-h1 .word-swap span:nth-child(4) { animation-delay: 6s; } @keyframes word-cycle { 0%, 23% { opacity: 0; transform: translateY(20px); } 3%, 22% { opacity: 1; transform: translateY(0); } 25%, 100% { opacity: 0; transform: translateY(-20px); } } .hero-h1 .word-swap::after { content: "thoughtful"; visibility: hidden; display: inline-block; /* preserve width */ } .hero-lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--ink-500); max-width: 560px; margin-bottom: 32px; line-height: 1.55; font-weight: 500; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 28px; color: var(--ink-500); font-size: 0.92rem; font-weight: 500; } .hero-meta div { display: inline-flex; align-items: center; gap: 6px; } .hero-meta svg { color: var(--green-500); } /* Hero visual: floating image card with depth */ .hero-visual { position: relative; isolation: isolate; } .hero-visual .frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); transform: rotate(-2deg); animation: gentle-float 8s ease-in-out infinite; } .hero-visual .frame img { width: 100%; display: block; } .hero-visual video { width: 100%; display: block; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); } @keyframes gentle-float { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-12px); } } /* Floating chips around hero visual */ .hero-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--white); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; color: var(--ink-900); z-index: 2; animation: chip-bob 5s ease-in-out infinite; } .hero-chip .dot { width: 8px; height: 8px; border-radius: 50%; } .hero-chip.chip-1 { top: -8px; left: -22px; } .hero-chip.chip-1 .dot { background: var(--amber-500); } .hero-chip.chip-2 { top: 28%; right: -40px; animation-delay: -1.5s; } .hero-chip.chip-2 .dot { background: var(--violet-500); } .hero-chip.chip-3 { bottom: 18%; left: -36px; animation-delay: -3s; } .hero-chip.chip-3 .dot { background: var(--green-500); } .hero-chip.chip-4 { bottom: -16px; right: 8%; animation-delay: -4.5s; } .hero-chip.chip-4 .dot { background: var(--rose-500); } @keyframes chip-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @media (max-width: 920px) { .hero-kinetic { padding: 36px 0 56px; } .hero-grid { grid-template-columns: 1fr; gap: 36px; } .hero-visual { order: -1; } .hero-h1 { font-size: clamp(2.2rem, 9vw, 3.6rem); } .hero-chip.chip-2 { right: -10px; } .hero-chip.chip-3 { left: -10px; } } /* ----------------------------- Trust strip / number rail ----------------- */ .metric-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 36px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .metric { text-align: center; } .metric .num { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4vw, 3rem); color: var(--ink-900); letter-spacing: -0.03em; line-height: 1; } .metric .num .unit { color: var(--amber-500); } .metric small { display: block; margin-top: 6px; font-weight: 600; font-size: 0.84rem; color: var(--ink-400); letter-spacing: 0.04em; text-transform: uppercase; } @media (max-width: 720px) { .metric-rail { grid-template-columns: repeat(2, 1fr); gap: 24px; } } /* ----------------------------- Pillars / value grids -------------------- */ .section-title { text-align: center; margin-bottom: 48px; max-width: 720px; margin-left: auto; margin-right: auto; } .section-title .eyebrow { display: inline-block; padding: 5px 14px; background: var(--cream-100); color: var(--ink-800); border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; } .section-title h2 { margin-bottom: 10px; } .section-title p { color: var(--ink-500); font-size: 1.08rem; margin: 0; } .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .value-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(245, 158, 11, 0.3); } .value-card .ico { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; } .value-card .ico svg { width: 28px; height: 28px; } .value-card h3 { font-size: 1.2rem; margin: 0 0 6px; color: var(--ink-900); } .value-card p { color: var(--ink-500); margin: 0; font-size: 0.96rem; } .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .tile { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-sm); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(245, 158, 11, 0.35); } .tile .ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 12px; } .tile .ico svg { width: 26px; height: 26px; } .tile h3 { color: var(--ink-900); margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; } .tile p { margin: 0; font-size: 0.9rem; color: var(--ink-500); } @media (max-width: 980px) { .value-grid, .tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .value-grid, .tiles { grid-template-columns: 1fr; } } /* ----------------------------- Pillars (Mission / Vision / Philosophy) -- */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .pillar { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 32px 36px; box-shadow: var(--shadow-sm); transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease; display: flex; flex-direction: column; } .pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(245, 158, 11, 0.35); } .pillar-num { display: block; font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--amber-500), var(--amber-600)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; margin-bottom: 18px; } .pillar-label { display: block; font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; color: var(--ink-500); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .pillar h3 { font-size: 1.12rem; line-height: 1.55; color: var(--ink-800); margin: 0; font-weight: 500; letter-spacing: -0.005em; text-align: justify; hyphens: auto; } @media (max-width: 980px) { .pillars { grid-template-columns: 1fr; gap: 18px; } } /* Color variants for icon containers */ .ico.green { background: var(--green-100); color: var(--green-500); } .ico.violet, .ico.purple { background: var(--violet-100); color: var(--violet-500); } .ico.rose, .ico.pink { background: var(--rose-100); color: var(--rose-500); } .ico.sky, .ico.blue { background: var(--sky-100); color: var(--sky-500); } .ico.amber, .ico.orange { background: var(--amber-100); color: var(--amber-600); } .ico.ink, .ico.navy { background: rgba(10,15,44,0.08); color: var(--ink-900); } /* ----------------------------- Showcase / split section ------------------ */ .split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; } .split.reverse { grid-template-columns: 1.1fr 1fr; } .split.reverse .split-text { order: 2; } .split-img { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; } .split-img img { width: 100%; height: 100%; object-fit: cover; } .split-text h2 { margin-bottom: 14px; } .split-text p { color: var(--ink-500); font-size: 1.05rem; margin-bottom: 18px; } .split-text .point { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; } .split-text .point svg { color: var(--green-500); margin-top: 4px; flex: 0 0 auto; } .split-text .point strong { display: block; color: var(--ink-900); font-family: var(--font-display); font-weight: 700; } .split-text .point span { color: var(--ink-500); font-size: 0.94rem; } @media (max-width: 880px) { .split, .split.reverse { grid-template-columns: 1fr; gap: 32px; } .split.reverse .split-text { order: 0; } } /* ----------------------------- CTA blocks ------------------------------- */ .cta-block { background: var(--ink-900); color: var(--white); border-radius: var(--radius-xl); padding: 48px 56px; display: grid; grid-template-columns: 1.5fr auto; gap: 28px; align-items: center; position: relative; overflow: hidden; background-image: radial-gradient(900px 460px at 88% 6%, rgba(245, 158, 11, 0.32), transparent 60%), radial-gradient(700px 340px at 6% 92%, rgba(139, 92, 246, 0.30), transparent 60%); } .cta-block h2 { color: var(--white); margin: 0 0 10px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); } .cta-block p { color: rgba(255,255,255,0.82); margin: 0; font-size: 1.05rem; } @media (max-width: 720px) { .cta-block { grid-template-columns: 1fr; padding: 32px 28px; } } /* ----------------------------- Program tabs ----------------------------- */ .tabs { background: var(--white); border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--shadow-md); overflow: hidden; } .tab-strip { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--cream-50); border-bottom: 1px solid var(--border); } .tab-strip button { background: transparent; border: 0; cursor: pointer; padding: 22px 18px; text-align: left; font-family: var(--font-display); font-weight: 700; color: var(--ink-500); display: flex; align-items: center; gap: 14px; border-right: 1px solid var(--border); transition: background 160ms ease, color 160ms ease; position: relative; } .tab-strip button:last-child { border-right: 0; } .tab-strip button:hover { background: rgba(10,15,44,0.03); color: var(--ink-900); } .tab-strip button[aria-selected="true"] { background: var(--white); color: var(--ink-900); } .tab-strip button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--amber-500), var(--rose-500)); } .tab-strip .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; } .tab-strip .ico svg { width: 22px; height: 22px; } .tab-strip .meta { display: flex; flex-direction: column; line-height: 1.2; } .tab-strip .meta small { font-size: 0.74rem; font-weight: 700; color: var(--ink-400); letter-spacing: 0.04em; text-transform: uppercase; } .tab-strip .meta strong { color: inherit; font-size: 1rem; } .tab-panel { display: none; padding: 36px; } .tab-panel.active { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: start; animation: fadeUp 320ms ease; } .tab-panel h3 { font-size: 1.5rem; margin-bottom: 8px; } .tab-panel .desc { color: var(--ink-500); margin-bottom: 18px; font-size: 1rem; } .tab-panel ul { list-style: none; padding: 0; margin: 0 0 22px; } .tab-panel li { display: flex; gap: 10px; padding: 6px 0; font-size: 0.96rem; color: var(--ink-700); } .tab-panel li svg { color: var(--green-500); flex: 0 0 auto; margin-top: 3px; } .tab-panel .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tab-panel .stat-box { background: var(--cream-50); border-radius: var(--radius-md); padding: 14px 16px; font-size: 0.88rem; } .tab-panel .stat-box strong { display: block; color: var(--ink-900); font-family: var(--font-display); font-size: 1.1rem; } .tab-panel .sample { background: var(--cream-50); border-radius: var(--radius-md); padding: 18px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; } .tab-panel .sample img { border-radius: var(--radius-sm); } .tab-panel .sample small { font-size: 0.78rem; color: var(--ink-400); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } @media (max-width: 880px) { .tab-strip { grid-template-columns: 1fr; } .tab-strip button { border-right: 0; border-bottom: 1px solid var(--border); } .tab-strip button[aria-selected="true"]::after { display: none; } .tab-strip button[aria-selected="true"] { border-left: 3px solid var(--amber-500); padding-left: 15px; } .tab-panel.active { grid-template-columns: 1fr; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ----------------------------- Stepper (Responsible AI) ----------------- */ .stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin-bottom: 28px; } .stepper button { background: var(--white); border: 1.5px solid var(--border); padding: 22px 18px; cursor: pointer; text-align: left; font-family: var(--font-display); display: flex; gap: 14px; align-items: flex-start; position: relative; transition: all 220ms ease; } .stepper button:hover { border-color: var(--amber-300); } .stepper button[aria-selected="true"] { border-color: var(--amber-500); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); background: var(--cream-50); } .stepper button:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .stepper button:last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .stepper button + button { border-left: 0; } .stepper .num { width: 32px; height: 32px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--border); display: grid; place-items: center; font-weight: 800; color: var(--ink-900); font-size: 0.92rem; flex: 0 0 auto; } .stepper button[aria-selected="true"] .num { background: var(--amber-500); color: #1b1300; border-color: var(--amber-500); } .stepper .label small { display: block; font-size: 0.74rem; color: var(--ink-400); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .stepper .label strong { color: var(--ink-900); font-size: 1.05rem; } .step-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; display: none; box-shadow: var(--shadow-sm); } .step-panel.active { display: grid; grid-template-columns: 100px 1fr; gap: 28px; animation: fadeUp 280ms ease; } .step-panel .big-ico { width: 100px; height: 100px; border-radius: 24px; display: grid; place-items: center; } .step-panel .big-ico svg { width: 48px; height: 48px; } .step-panel h3 { margin: 0 0 8px; font-size: 1.5rem; } .step-panel p { margin: 0 0 14px; font-size: 1.02rem; } .step-panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .step-panel li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.96rem; } .step-panel li svg { color: var(--green-500); flex: 0 0 auto; margin-top: 3px; } @media (max-width: 880px) { .stepper { grid-template-columns: 1fr 1fr; } .stepper button { border-radius: 0; } .stepper button:nth-child(1) { border-top-left-radius: var(--radius-md); } .stepper button:nth-child(2) { border-top-right-radius: var(--radius-md); } .stepper button:nth-child(3) { border-bottom-left-radius: var(--radius-md); border-top: 0; } .stepper button:nth-child(4) { border-bottom-right-radius: var(--radius-md); border-top: 0; } .stepper button + button { border-left: 0; } .step-panel.active { grid-template-columns: 1fr; } } /* ----------------------------- Try-it picker (Home) --------------------- */ .tryit { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 36px; box-shadow: var(--shadow-md); display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; } .tryit-controls .chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .tryit-controls .chip { background: var(--cream-50); border: 1.5px solid var(--cream-200); border-radius: var(--radius-pill); padding: 10px 18px; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--ink-800); transition: all 180ms ease; } .tryit-controls .chip:hover { transform: translateY(-2px); border-color: var(--amber-300); } .tryit-controls .chip.active { background: linear-gradient(135deg, var(--amber-500), var(--amber-400)); color: #1b1300; border-color: var(--amber-500); } .tryit-preview { background: linear-gradient(135deg, var(--cream-50), var(--bg-warm)); border-radius: var(--radius-lg); padding: 28px; min-height: 220px; display: flex; flex-direction: column; justify-content: center; gap: 12px; position: relative; overflow: hidden; } .tryit-preview::before { content: ""; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; border-radius: 50%; background: var(--amber-300); opacity: 0.15; } .tryit-preview h3 { margin: 0; font-size: 1.6rem; color: var(--ink-900); font-family: var(--font-display); } .tryit-preview p { margin: 0; } .tryit-preview .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tryit-preview .tag-mini { background: var(--white); border: 1px solid var(--border); padding: 5px 12px; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: var(--ink-800); } @media (max-width: 760px) { .tryit { grid-template-columns: 1fr; padding: 24px; gap: 20px; } } /* ----------------------------- Projects gallery ------------------------- */ .project-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 28px; } .project-toolbar .search { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-pill); padding: 10px 16px; min-width: 240px; } .project-toolbar .search input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink-700); width: 100%; } .project-toolbar .search:focus-within { border-color: var(--amber-500); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); } .project-toolbar .search svg { color: var(--ink-400); } .project-filters { display: flex; flex-wrap: wrap; gap: 8px; } .filter-btn { background: var(--white); border: 1.5px solid var(--border); color: var(--ink-700); padding: 9px 16px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 700; cursor: pointer; font-size: 0.88rem; transition: all 180ms ease; display: inline-flex; align-items: center; gap: 6px; } .filter-btn:hover { border-color: var(--ink-900); } .filter-btn.active { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); } .filter-btn svg { width: 14px; height: 14px; } .project-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 980px) { .project-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .project-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .project-grid { grid-template-columns: 1fr; } } .project-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: transform 240ms ease, box-shadow 240ms ease; cursor: pointer; display: flex; flex-direction: column; } .project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .project-card .thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-100); position: relative; } .project-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; } .project-card:hover .thumb img { transform: scale(1.06); } .project-card .thumb .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,15,44,0.78), transparent 50%); opacity: 0; transition: opacity 240ms ease; display: flex; align-items: flex-end; justify-content: center; padding: 14px; color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; } .project-card:hover .thumb .overlay { opacity: 1; } .project-card .meta { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .project-card h3 { font-size: 1rem; margin: 0; color: var(--ink-900); font-weight: 700; } .project-card .by { font-size: 0.78rem; color: var(--ink-400); margin: 0; } .project-card .row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; } .tag { display: inline-block; padding: 4px 10px; font-size: 0.72rem; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 800; letter-spacing: 0.02em; } .tag.game { background: #fde2c4; color: #b45309; } .tag.aiapp { background: var(--sky-100); color: #0369a1; } .tag.presentation { background: var(--violet-100); color: #6d28d9; } .tag.art { background: var(--rose-100); color: #be185d; } .tag.story { background: var(--green-100); color: #047857; } .tag.video { background: #ffe1b3; color: #c2410c; } .like { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-400); font-size: 0.82rem; cursor: pointer; background: none; border: 0; padding: 0; transition: color 160ms ease; } .like svg { width: 14px; height: 14px; transition: fill 200ms ease; } .like:hover, .like.liked { color: var(--rose-500); } .like.liked svg { fill: currentColor; } .empty-state { grid-column: 1/-1; text-align: center; padding: 48px 24px; color: var(--ink-400); font-weight: 600; } /* ----------------------------- Modal ----------------------------------- */ .modal { position: fixed; inset: 0; z-index: 100; background: rgba(10, 15, 44, 0.65); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 20px; animation: fadeBg 200ms ease; } .modal.open { display: flex; } @keyframes fadeBg { from { opacity: 0; } to { opacity: 1; } } .modal-card { background: var(--white); border-radius: var(--radius-xl); max-width: 760px; width: 100%; max-height: 92vh; overflow: hidden; box-shadow: var(--shadow-xl); display: grid; grid-template-rows: auto 1fr; animation: popIn 320ms cubic-bezier(.2,.9,.3,1.2); } @keyframes popIn { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-100); position: relative; } .modal-img img { width: 100%; height: 100%; object-fit: cover; } .modal-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.95); border: 0; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-sm); display: grid; place-items: center; color: var(--ink-900); } .modal-close:hover { background: var(--white); color: var(--amber-500); } .modal-body { padding: 26px 30px 30px; overflow: auto; } .modal-body h2 { margin: 0 0 6px; font-size: 1.5rem; } .modal-body .meta-row { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .modal-body p { margin: 0 0 16px; color: var(--ink-500); } .modal-body .actions { display: flex; gap: 10px; } /* ----------------------------- Register form -------------------------- */ .register-layout { display: grid; grid-template-columns: 340px 1fr; gap: 36px; } @media (max-width: 880px) { .register-layout { grid-template-columns: 1fr; } } .form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow-sm); } .form-card h2 { margin: 0 0 4px; font-size: 1.6rem; } .form-card .sub { margin-bottom: 22px; color: var(--ink-500); } .form-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; } /* Right-side checkout panel: 3-step preview of what Stripe will collect */ .checkout-steps { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 12px; } .checkout-steps li { display: flex; align-items: center; gap: 12px; color: var(--ink-700); font-size: 0.96rem; line-height: 1.4; } .checkout-steps .cs-num { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--cream-100); color: var(--ink-900); display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 0.86rem; } .form-success { display: none; text-align: center; padding: 16px 8px; } .form-success.show { display: block; animation: fadeUp 320ms ease; } .form-success .ring { width: 72px; height: 72px; border-radius: 50%; background: var(--green-100); color: var(--green-500); display: grid; place-items: center; margin: 0 auto 14px; } .form-success .ring svg { width: 36px; height: 36px; } .form-success h2 { margin: 0 0 6px; } .form-success p { margin: 0 0 18px; } .form-success .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ----------------------------- Newsletter ----------------------------- */ .newsletter { display: flex; gap: 8px; align-items: center; background: rgba(255,255,255,0.08); padding: 6px; border-radius: var(--radius-pill); max-width: 380px; } .newsletter input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--white); padding: 8px 14px; font: inherit; } .newsletter input::placeholder { color: rgba(255,255,255,0.5); } .newsletter button { background: linear-gradient(135deg, var(--amber-500), var(--amber-400)); color: #1b1300; border: 0; padding: 9px 18px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 800; cursor: pointer; font-size: 0.9rem; } .newsletter button:hover { transform: translateY(-1px); } .newsletter.saved { padding: 14px 18px; justify-content: center; color: var(--amber-400); font-weight: 700; } /* ----------------------------- Footer ----------------------------- */ .site-footer { background: var(--ink-900); color: rgba(255,255,255,0.85); padding: 64px 0 24px; margin-top: 96px; background-image: radial-gradient(900px 380px at 0% 0%, rgba(139, 92, 246, 0.14), transparent 60%), radial-gradient(800px 360px at 100% 100%, rgba(245, 158, 11, 0.10), transparent 60%); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 40px; } .footer-grid h4 { color: var(--white); font-family: var(--font-display); font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: 8px; } .footer-grid a { color: rgba(255,255,255,0.72); font-size: 0.95rem; } .footer-grid a:hover { color: var(--amber-400); } .footer-bottom { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; gap: 10px; font-size: 0.84rem; color: rgba(255,255,255,0.55); } .footer-brand p { color: rgba(255,255,255,0.72); margin: 14px 0 16px; max-width: 340px; font-size: 0.95rem; } .footer-brand .brand-name { color: var(--white); } .footer-brand .brand-tagline { color: rgba(255,255,255,0.55); } @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } } /* ----------------------------- Reveal animations -------------------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.9,.3,1); } .reveal.in { opacity: 1; transform: none; } .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.9,.3,1); } .reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; } .reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: none; } .reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; } .reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; } .reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; } .reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal, .reveal-stagger > * { opacity: 1; transform: none; } } /* ----------------------------- Toast ----------------------------- */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink-900); color: var(--white); padding: 13px 22px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; opacity: 0; pointer-events: none; transition: all 280ms ease; z-index: 200; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-lg); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast svg { color: var(--green-500); } /* ----------------------------- Mission / impact section -------------- */ .mission { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .mission .badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .mission .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: var(--amber-600); } .mission .badge svg { width: 12px; height: 12px; } .mission ul { list-style: none; padding: 0; margin: 0; } .mission li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); } .mission li:last-child { border-bottom: 0; } .mission li .num { width: 36px; height: 36px; border-radius: 10px; background: var(--cream-100); color: var(--amber-600); display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; flex: 0 0 auto; } .mission li strong { display: block; color: var(--ink-900); font-family: var(--font-display); margin-bottom: 2px; font-size: 1rem; } .mission li span { color: var(--ink-500); font-size: 0.94rem; } .mission-visual { background: linear-gradient(135deg, var(--cream-50), var(--bg-warm)); border-radius: var(--radius-xl); padding: 36px; box-shadow: var(--shadow-md); display: grid; place-items: center; min-height: 320px; position: relative; overflow: hidden; } .mission-visual img { max-width: 100%; border-radius: var(--radius-lg); } @media (max-width: 880px) { .mission { grid-template-columns: 1fr; } } /* ----------------------------- Quote block ----------------------- */ .quote-card { background-color: var(--ink-900); background-image: radial-gradient(700px 360px at 110% 0%, rgba(245, 158, 11, 0.30), transparent 60%), radial-gradient(500px 260px at -10% 100%, rgba(139, 92, 246, 0.28), transparent 60%), linear-gradient(135deg, var(--ink-900), var(--ink-800)); color: var(--white); padding: 48px; border-radius: var(--radius-xl); position: relative; overflow: hidden; } .quote-card .q-mark { font-family: var(--font-display); font-size: 6rem; font-weight: 900; line-height: 0.6; color: rgba(245, 158, 11, 0.4); margin-bottom: 12px; } .quote-card blockquote { font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 700; margin: 0 0 22px; color: var(--white); line-height: 1.25; letter-spacing: -0.015em; } .quote-card cite { font-style: normal; color: rgba(255,255,255,0.75); font-size: 0.96rem; } .quote-card cite strong { color: var(--amber-400); font-weight: 800; } /* ----------------------------- Word swap utility ----------------- */ .word-swap-list { position: relative; display: inline-block; } .word-swap-list span { display: inline-block; opacity: 0; position: absolute; left: 0; top: 0; animation: word-cycle 8s ease-in-out infinite; } .word-swap-list span:nth-child(1) { animation-delay: 0s; } .word-swap-list span:nth-child(2) { animation-delay: 2s; } .word-swap-list span:nth-child(3) { animation-delay: 4s; } .word-swap-list span:nth-child(4) { animation-delay: 6s; } .word-swap-list .filler { position: static !important; visibility: hidden; opacity: 1 !important; animation: none !important; } /* ================================================================ CLASSIC HERO (v4) · cleaner, smaller, structured ================================================================ */ .hero-classic { padding: 48px 0 56px; background: radial-gradient(900px 460px at 100% -10%, rgba(251, 191, 36, 0.18), transparent 60%), radial-gradient(720px 380px at -10% 30%, rgba(124, 58, 237, 0.05), transparent 60%), var(--bg-base); } .hero-classic .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding-bottom: 32px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: var(--ink-700); margin-bottom: 18px; box-shadow: var(--shadow-xs); } .hero-eyebrow .dot-amber { width: 7px; height: 7px; border-radius: 50%; background: var(--amber-500); } .hero-h1-classic { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.8rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 18px; color: var(--ink-900); } .hero-h1-classic .highlight { color: var(--amber-500); } .hero-lede-classic { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--ink-500); line-height: 1.55; max-width: 540px; margin-bottom: 22px; } .hero-classic .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .next-session-bar { display: flex; align-items: center; gap: 14px; background: var(--cream-100); border: 1px solid var(--cream-200); border-radius: var(--radius-pill); padding: 10px 12px 10px 18px; max-width: 560px; font-size: 0.92rem; color: var(--ink-700); } .next-session-bar > svg { color: var(--amber-600); flex: 0 0 auto; } .next-session-bar span { flex: 1; } .next-session-bar strong { color: var(--ink-900); } .next-session-bar .btn { padding: 9px 16px; font-size: 0.86rem; flex: 0 0 auto; } @media (max-width: 720px) { .next-session-bar { flex-direction: column; align-items: flex-start; border-radius: var(--radius-md); } } .hero-visual-classic { position: relative; } .hero-visual-classic img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: block; } @media (max-width: 920px) { .hero-classic { padding: 32px 0 36px; } .hero-classic .hero-grid { grid-template-columns: 1fr; gap: 28px; } .hero-visual-classic { order: -1; } } /* 4 quick pills (replaces marquee feel) */ .quick-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 24px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-top: 24px; } .quick-pill { display: flex; gap: 12px; align-items: flex-start; } .quick-pill .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; } .quick-pill .ico svg { width: 22px; height: 22px; } .quick-pill strong { display: block; font-family: var(--font-display); font-size: 0.96rem; color: var(--ink-900); margin-bottom: 2px; } .quick-pill span { font-size: 0.82rem; color: var(--ink-400); } @media (max-width: 760px) { .quick-pills { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .quick-pills { grid-template-columns: 1fr; padding: 18px; } } /* ================================================================ REAL KIDS · REAL PROJECTS · full-bleed video + photo grid ================================================================ */ .real-kids-section { position: relative; padding: 96px 0 80px; overflow: hidden; color: var(--white); isolation: isolate; } .real-kids-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .real-kids-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 15, 44, 0.55) 0%, rgba(10, 15, 44, 0.78) 50%, rgba(10, 15, 44, 0.92) 100%); } .real-kids-content { text-align: center; max-width: 720px; margin: 0 auto 48px; } .real-kids-content .eyebrow { display: inline-block; padding: 6px 14px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); color: var(--white); border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; } .real-kids-h2 { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.025em; color: var(--white); margin: 0 0 12px; } .highlight-amber { color: var(--amber-400); } .real-kids-sub { font-size: 1.1rem; color: rgba(255,255,255,0.85); margin: 0; } .real-kids-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; gap: 14px; position: relative; z-index: 1; } .rk-card { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; background: rgba(0,0,0,0.3); transition: transform 320ms ease; } .rk-card.rk-large { grid-column: span 2; grid-row: span 2; aspect-ratio: 4 / 3; } .rk-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; } .rk-card:hover { transform: translateY(-4px); } .rk-card:hover img { transform: scale(1.05); } .rk-card figcaption { position: absolute; left: 14px; bottom: 12px; color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; text-shadow: 0 1px 8px rgba(0,0,0,0.6); background: rgba(10,15,44,0.5); padding: 5px 12px; border-radius: var(--radius-pill); backdrop-filter: blur(4px); } @media (max-width: 980px) { .real-kids-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; } .rk-card.rk-large { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; } } @media (max-width: 540px) { .real-kids-grid { grid-template-columns: 1fr; } .rk-card.rk-large { grid-column: span 1; } } /* ================================================================ VIDEO STRIP · 4 small autoplay loops ================================================================ */ .video-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .video-tile { position: relative; margin: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--ink-900); aspect-ratio: 16 / 9; box-shadow: var(--shadow-sm); transition: transform 280ms ease, box-shadow 280ms ease; } .video-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .video-tile video { width: 100%; height: 100%; object-fit: cover; display: block; } .video-tile figcaption { position: absolute; left: 12px; bottom: 10px; color: var(--white); font-family: var(--font-display); font-size: 0.84rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(10,15,44,0.55); padding: 4px 10px; border-radius: var(--radius-pill); backdrop-filter: blur(4px); } @media (max-width: 880px) { .video-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .video-strip { grid-template-columns: 1fr; } } /* ================================================================ Small helpers used by new layout ================================================================ */ .btn-sm { padding: 8px 14px; font-size: 0.84rem; } .section-eyebrow { display: inline-block; padding: 5px 14px; background: var(--cream-100); color: var(--ink-800); border-radius: var(--radius-pill); font-family: var(--font-display); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; } .eyebrow-light { background: rgba(255,255,255,0.12) !important; color: var(--white) !important; border-color: rgba(255,255,255,0.18) !important; } .mission-list { list-style: none; padding: 0; margin: 0; } .mission-list li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); } .mission-list li:last-child { border-bottom: 0; } .mission-list li svg { color: var(--green-500); flex: 0 0 auto; margin-top: 4px; } .mission-list li strong { display: block; color: var(--ink-900); font-family: var(--font-display); font-size: 1rem; margin-bottom: 2px; } .mission-list li span { color: var(--ink-500); font-size: 0.94rem; } /* ================================================================ v5: tighter hero, photo mosaic, single program modules ================================================================ */ .hero-tight { padding: 32px 0 40px; background: radial-gradient(900px 460px at 100% -20%, rgba(251, 191, 36, 0.16), transparent 60%), var(--bg-base); } .hero-tight .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .hero-tight .hero-h1-classic { font-size: clamp(1.9rem, 3.8vw, 3.2rem); line-height: 1.05; margin-bottom: 14px; max-width: 540px; } .hero-tight .hero-lede-classic { font-size: clamp(1rem, 1.3vw, 1.12rem); margin-bottom: 18px; max-width: 480px; } .hero-tight .hero-ctas { margin-bottom: 0; } .hero-tight .hero-visual-classic img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } @media (max-width: 920px) { .hero-tight { padding: 24px 0 28px; } .hero-tight .hero-grid { grid-template-columns: 1fr; gap: 24px; } .hero-tight .hero-visual-classic { order: -1; } } /* Mosaic section · no "Real" framing, just images + a clean headline */ .mosaic-section { position: relative; padding: 72px 0 64px; color: var(--white); overflow: hidden; isolation: isolate; } .mosaic-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .mosaic-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 15, 44, 0.62) 0%, rgba(10, 15, 44, 0.82) 50%, rgba(10, 15, 44, 0.92) 100%); } .mosaic-content { text-align: center; margin-bottom: 36px; } .mosaic-h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.8vw, 2.8rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.025em; color: var(--white); margin: 0; } .mosaic-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; gap: 12px; position: relative; z-index: 1; } .mc { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; transition: transform 320ms ease; } .mc.rk-large { grid-column: span 2; grid-row: span 2; } .mc img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; } .mc:hover { transform: translateY(-3px); } .mc:hover img { transform: scale(1.05); } @media (max-width: 980px) { .mosaic-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; } .mc.rk-large { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; } } @media (max-width: 540px) { .mosaic-grid { grid-template-columns: 1fr; } .mc.rk-large { grid-column: span 1; } } /* Section lede · small intro paragraph under an H2 inside a .section-title */ /* Modules grid (the single program) */ .modules-section { position: relative; overflow: hidden; background: radial-gradient(900px 460px at 100% 0%, rgba(254, 243, 199, 0.7), transparent 60%), radial-gradient(900px 460px at 0% 100%, rgba(186, 230, 253, 0.4), transparent 60%), var(--bg-base); } .modules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; } .module-card { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 26px 18px 22px; box-shadow: 0 2px 6px rgba(10, 15, 44, 0.04); transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; overflow: hidden; } .module-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(10, 15, 44, 0.10); border-color: rgba(245, 158, 11, 0.40); } .module-ico-img { width: 84px; height: 84px; object-fit: contain; display: block; } .module-card h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--ink-900); margin: 0; line-height: 1.3; letter-spacing: -0.01em; max-width: 22ch; } .module-card p { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--ink-500); } /* Reserve-a-seat tile: same shape as the modules, amber gradient + arrow */ .module-card.module-cta { background: linear-gradient(135deg, var(--amber-500), var(--amber-400)); color: #1b1300; border-color: transparent; box-shadow: 0 12px 28px rgba(245, 158, 11, 0.32); justify-content: center; } .module-card.module-cta .module-cta-arrow { width: 64px; height: 64px; border-radius: 50%; background: rgba(27, 19, 0, 0.10); display: grid; place-items: center; color: #1b1300; } .module-card.module-cta h3 { color: #1b1300; font-size: 1.05rem; } .module-card.module-cta p { color: rgba(27, 19, 0, 0.72); font-weight: 700; font-size: 0.85rem; } .module-card.module-cta:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(245, 158, 11, 0.42); border-color: transparent; } @media (max-width: 980px) { .modules-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .modules-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 420px) { .modules-grid { grid-template-columns: 1fr; } } /* ================================================================ Pricing card / countdown / discount code · Register page ================================================================ */ .pricing-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px; box-shadow: var(--shadow-md); margin-bottom: 24px; } .pricing-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--amber-100); color: var(--amber-600); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: var(--radius-pill); padding: 6px 14px; font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; } .pricing-tag .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-500); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2); animation: pulse 2s ease-in-out infinite; } .pricing-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; } .price-now { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; color: var(--ink-900); letter-spacing: -0.03em; line-height: 1; } .price-was { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--ink-400); text-decoration: line-through; } .price-save { background: var(--green-100); color: #047857; padding: 4px 10px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; } .price-includes { font-size: 0.9rem; color: var(--ink-500); margin: 0 0 18px; } .countdown { display: flex; gap: 6px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; } .countdown-label { display: block; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: var(--ink-500); letter-spacing: 0.04em; text-transform: uppercase; width: 100%; margin-bottom: 4px; } .cd-cell { background: #dc2626; color: var(--white); border-radius: 10px; padding: 7px 8px; text-align: center; flex: 1 1 0; min-width: 0; font-family: var(--font-display); } .cd-cell .cd-num { font-size: 1.35rem; font-weight: 900; line-height: 1; display: block; font-variant-numeric: tabular-nums; } .cd-cell .cd-unit { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.6); display: block; margin-top: 4px; } .cd-sep { font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; color: var(--ink-300); align-self: flex-start; margin-top: 6px; } .countdown.expired .cd-cell { background: var(--ink-300); color: var(--ink-500); } /* Register hero */ .register-hero { text-align: center; max-width: 720px; margin: 0 auto 28px; } .register-hero .hero-h1-classic { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 0 0 10px; } .register-lede { color: var(--ink-500); font-size: 1rem; margin: 0; font-weight: 500; } /* Full-width checkout CTA */ .btn-checkout { width: 100%; justify-content: center; background: linear-gradient(135deg, var(--amber-500), var(--amber-400)); box-shadow: 0 12px 28px rgba(245, 158, 11, 0.45); } .btn-checkout .icon { margin-right: 4px; } /* Photo gallery · projects page, just images, no captions */ .photo-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .pg-card { margin: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--cream-100); aspect-ratio: 4 / 3; box-shadow: var(--shadow-xs); transition: transform 240ms ease, box-shadow 240ms ease; cursor: pointer; } .pg-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; } .pg-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .pg-card:hover img { transform: scale(1.05); } @media (max-width: 880px) { .photo-gallery { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .photo-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 400px) { .photo-gallery { grid-template-columns: 1fr; } } /* ================================================================ v6 · organic shapes (blob radii, asymmetric corners, tilted cards) ================================================================ */ /* Blob radii · used on hero visual, mosaic large card, mission visual */ .shape-blob { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; } .shape-blob-2 { border-radius: 35% 65% 50% 50% / 60% 40% 60% 40%; } .shape-blob-3 { border-radius: 50% 50% 70% 30% / 30% 60% 40% 70%; } .shape-blob-4 { border-radius: 70% 30% 50% 50% / 45% 55% 45% 55%; } .shape-blob-5 { border-radius: 40% 60% 35% 65% / 55% 35% 65% 45%; } /* Squircle */ .shape-squircle { border-radius: 26% / 36%; } /* Asymmetric "sticker" corners (one sharp, three soft) */ .shape-tab-tl { border-radius: 6px 28px 28px 28px; } .shape-tab-tr { border-radius: 28px 6px 28px 28px; } .shape-tab-bl { border-radius: 28px 28px 28px 6px; } .shape-tab-br { border-radius: 28px 28px 6px 28px; } /* Asymmetric "leaf" · two opposite sharp corners */ .shape-leaf { border-radius: 8px 56px 8px 56px; } .shape-leaf-rev { border-radius: 56px 8px 56px 8px; } /* Tilt utilities for collage feel */ .tilt-l-1 { transform: rotate(-1.5deg); } .tilt-l-2 { transform: rotate(-3deg); } .tilt-r-1 { transform: rotate(1.5deg); } .tilt-r-2 { transform: rotate(3deg); } .tilt-l-1:hover, .tilt-l-2:hover, .tilt-r-1:hover, .tilt-r-2:hover { transform: none; } /* Override default rounded rect on mosaic + module cards with shape language */ .mc:nth-child(1) { border-radius: 50% 30% 50% 30% / 30% 50% 30% 50%; } .mc:nth-child(2) { border-radius: 20px 80px 20px 60px; transform: rotate(-1.5deg); } .mc:nth-child(3) { border-radius: 60px 20px 60px 20px; transform: rotate(1deg); } .mc:nth-child(4) { border-radius: 24px / 56px; transform: rotate(-0.8deg); } .mc:nth-child(5) { border-radius: 80px 24px 80px 24px; transform: rotate(2deg); } .mc:hover { transform: rotate(0) translateY(-4px) !important; } .module-card { border-radius: 24px 6px 24px 24px; } .module-card:nth-child(2) { border-radius: 6px 24px 24px 24px; } .module-card:nth-child(3) { border-radius: 24px 24px 6px 24px; } .module-card:nth-child(4) { border-radius: 24px 24px 24px 6px; } .module-card:nth-child(5) { border-radius: 24px 6px 24px 24px; } .module-card:nth-child(6) { border-radius: 6px 24px 24px 24px; } .module-card:nth-child(7) { border-radius: 24px 24px 6px 24px; } .module-card.module-cta { border-radius: 24px 24px 24px 6px !important; } /* Photo gallery · organic shapes per card */ .pg-card:nth-child(7n+1) { border-radius: 24px 6px 24px 24px; } .pg-card:nth-child(7n+2) { border-radius: 6px 24px 24px 24px; } .pg-card:nth-child(7n+3) { border-radius: 24px 24px 24px 6px; } .pg-card:nth-child(7n+4) { border-radius: 50% / 30%; } .pg-card:nth-child(7n+5) { border-radius: 24px 24px 6px 24px; } .pg-card:nth-child(7n+6) { border-radius: 80px 24px 80px 24px; } .pg-card:nth-child(7n) { border-radius: 30% / 50%; } /* Background decorative blobs (for hero / sections) */ .bg-blob { position: absolute; pointer-events: none; z-index: -1; background: linear-gradient(135deg, var(--amber-300), var(--rose-100)); filter: blur(0px); opacity: 0.5; } .bg-blob.b1 { width: 320px; height: 320px; top: -40px; right: -60px; border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; } .bg-blob.b2 { width: 220px; height: 220px; bottom: -60px; left: -60px; background: linear-gradient(135deg, var(--sky-100), var(--violet-100)); border-radius: 50% 50% 70% 30% / 30% 60% 40% 70%; opacity: 0.7; } /* ================================================================ Hero slideshow · auto-rotating images, no controls ================================================================ */ .hero-slideshow { position: relative; aspect-ratio: 4 / 3; border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; overflow: hidden; box-shadow: var(--shadow-xl); } .hero-slideshow .slide { position: absolute; inset: 0; opacity: 0; animation: slide-cycle 20s ease-in-out infinite; } .hero-slideshow .slide img, .hero-slideshow .slide video { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-slideshow .slide:nth-child(1) { animation-delay: 0s; } .hero-slideshow .slide:nth-child(2) { animation-delay: 5s; } .hero-slideshow .slide:nth-child(3) { animation-delay: 10s; } .hero-slideshow .slide:nth-child(4) { animation-delay: 15s; } @keyframes slide-cycle { 0%, 22% { opacity: 1; } 27%, 100% { opacity: 0; } } /* Decorative floating shape badges around hero */ .hero-badge { position: absolute; z-index: 2; background: var(--white); box-shadow: var(--shadow-lg); padding: 10px 18px; font-family: var(--font-display); font-weight: 800; font-size: 0.86rem; color: var(--ink-900); display: inline-flex; align-items: center; gap: 8px; } .hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; } .hero-badge-1 { top: 10%; left: -20px; transform: rotate(-4deg); border-radius: 24px 6px 24px 24px; } .hero-badge-2 { top: 50%; right: -30px; transform: rotate(3deg); border-radius: 6px 24px 24px 24px; } .hero-badge-3 { bottom: 8%; left: -30px; transform: rotate(-2deg); border-radius: 24px 24px 24px 6px; } @media (max-width: 920px) { .hero-badge-1, .hero-badge-3 { left: -10px; } .hero-badge-2 { right: -10px; } .hero-badge { font-size: 0.78rem; padding: 8px 14px; } } @media (max-width: 560px) { /* Hide the floating badges on small phones · they overflow the viewport. */ .hero-badge { display: none; } /* And contain any other accidental overflow from absolute children */ .hero-tight { overflow: hidden; } } /* Tighten the hero columns when slideshow is used */ .hero-tight .hero-visual-classic.has-slideshow { padding: 0; position: relative; } .hero-tight .hero-visual-classic.has-slideshow img { border-radius: inherit; } /* ================================================================ v7 · ENERGY OVERHAUL: full-bleed video hero, doodles, marquee, color blocks ================================================================ */ /* Full-bleed cinematic hero */ .hero-cinema { position: relative; min-height: clamp(282px, 49.9vh, 435px); overflow: hidden; isolation: isolate; color: var(--white); display: flex; align-items: stretch; flex-direction: column; } .hero-cinema__video, .hero-cinema__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hero-cinema__image { object-position: 75% center; } .hero-cinema__scrim { position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 540px at 18% 30%, rgba(245, 158, 11, 0.42), transparent 65%), radial-gradient(900px 600px at 85% 75%, rgba(244, 63, 94, 0.32), transparent 65%), linear-gradient(180deg, rgba(10,15,44,0.36) 0%, rgba(10,15,44,0.62) 60%, rgba(10,15,44,0.80) 100%); } .hero-cinema__inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 0 32px; } .hero-cinema__h1 { font-family: var(--font-display); font-size: clamp(1.33rem, 4.30vw, 3.69rem); font-weight: 900; line-height: 0.92; letter-spacing: -0.045em; margin: 0 0 22px; color: var(--white); text-shadow: 0 4px 30px rgba(0,0,0,0.35); max-width: 14ch; } .hero-cinema__h1 .pink { color: #ff7eb6; } .hero-cinema__h1 .amber { color: #6bd5ff; } .hero-cinema__h1 .sky { color: #6bd5ff; } .hero-cinema__h1 .lime { color: #c5f06e; } .hero-cinema__h1 .strike { text-decoration: underline; text-decoration-color: var(--amber-400); text-decoration-thickness: 6px; text-underline-offset: 12px; } /* Staggered fade-in on the tri-word tagline so the static line gently breathes on load. One-shot · no looping. */ .hero-cinema__lede .lede-word { display: inline-block; opacity: 0; transform: translateY(6px); animation: lede-in 600ms ease-out forwards; } .hero-cinema__lede .lede-word:nth-child(1) { animation-delay: 200ms; color: #6bd5ff; } .hero-cinema__lede .lede-word:nth-child(2) { animation-delay: 500ms; color: var(--amber-400); } .hero-cinema__lede .lede-word:nth-child(3) { animation-delay: 800ms; color: #ff7eb6; } @keyframes lede-in { to { opacity: 1; transform: translateY(0); } } /* Bouncing scroll cue · sits just above the bottom info strip */ .hero-cinema__scroll-cue { position: absolute; bottom: 68px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(255,255,255,0.7); font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; text-decoration: none; } .hero-cinema__scroll-cue:hover { color: var(--white); } .hero-cinema__scroll-cue svg { width: 18px; height: 18px; animation: scroll-bounce 1.8s ease-in-out infinite; } @keyframes scroll-bounce { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(6px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hero-cinema__h1 .amber, .hero-cinema__lede .lede-word, .hero-cinema__scroll-cue svg { animation: none; } .hero-cinema__h1 .amber { -webkit-text-fill-color: currentColor; background: none; } .hero-cinema__lede .lede-word { opacity: 1; transform: none; } } .hero-cinema__lede { font-family: var(--font-body); font-size: clamp(0.84rem, 1.28vw, 1.06rem); color: rgba(255,255,255,0.92); max-width: 540px; margin: 0 0 28px; line-height: 1.5; } .hero-cinema__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-cinema .btn-secondary { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.30); color: var(--white); backdrop-filter: blur(6px); } .hero-cinema .btn-secondary:hover { background: rgba(255,255,255,0.20); border-color: var(--white); color: var(--white); } /* Scrollytelling bottom strip inside the hero */ .hero-cinema__strip { position: relative; z-index: 1; padding: 18px 0; background: rgba(255,255,255,0.06); border-top: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(8px); color: var(--white); } .hero-cinema__strip-row { display: flex; gap: 32px; align-items: center; justify-content: space-around; font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em; flex-wrap: wrap; } .hero-cinema__strip-row .item { display: flex; align-items: center; gap: 8px; } .hero-cinema__strip-row svg { color: var(--amber-400); } @media (max-width: 720px) { .hero-cinema { min-height: 520px; } .hero-cinema__inner { padding: 24px 0 28px; } .hero-cinema__h1 { font-size: clamp(1.76rem, 8.8vw, 3.2rem); } .hero-cinema__scroll-cue { bottom: 56px; font-size: 0.62rem; } } /* Photo cutouts that float above the cinema hero (sticker stack feel) */ .hero-cutout { position: absolute; z-index: 1; box-shadow: 0 24px 60px rgba(0,0,0,0.35); overflow: hidden; border: 6px solid var(--white); transition: transform 320ms ease; } .hero-cutout img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-cutout-1 { width: 230px; aspect-ratio: 3/4; right: 4vw; top: 14%; transform: rotate(4deg); border-radius: 24px 60px 24px 60px; } .hero-cutout-2 { width: 200px; aspect-ratio: 4/3; right: 20vw; top: 58%; transform: rotate(-5deg); border-radius: 60px 24px 60px 24px; } .hero-cutout:hover { transform: rotate(0) translateY(-6px); } @media (max-width: 1100px) { .hero-cutout-1 { width: 180px; right: 2vw; } .hero-cutout-2 { display: none; } } @media (max-width: 720px) { .hero-cutout-1 { display: none; } } /* ================================================================ DOODLE DECORATIONS · hand-drawn SVG accents ================================================================ */ .doodle { position: absolute; pointer-events: none; color: var(--amber-500); } .doodle.spin { animation: spin 24s linear infinite; } .doodle.bob { animation: bob 4s ease-in-out infinite; } .doodle.bob-slow { animation: bob 7s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes bob { 50% { transform: translateY(-10px); } } /* Marker underline accent for headings */ .marker-underline { position: relative; display: inline-block; padding: 0 4px; } .marker-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 14px; background: var(--amber-400); border-radius: 999px; z-index: -1; transform: skew(-6deg) translateY(2px); opacity: 0.55; } /* Sticker badge · for "100% LIVE" or "AI WITH HEART" style annotations */ .sticker { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: var(--amber-400); color: #1b1300; font-family: var(--font-display); font-weight: 900; font-size: 0.88rem; letter-spacing: 0.02em; border: 3px solid var(--ink-900); border-radius: 999px; box-shadow: 4px 4px 0 var(--ink-900); text-transform: uppercase; transform: rotate(-4deg); } .sticker.pink { background: #ff7eb6; color: var(--ink-900); } .sticker.sky { background: #6bd5ff; color: var(--ink-900); } .sticker.lime { background: #c5f06e; color: var(--ink-900); } .sticker.white { background: var(--white); color: var(--ink-900); } .sticker.rot-r { transform: rotate(4deg); } /* ================================================================ COLOR BLOCKS · full-bleed colored sections ================================================================ */ .bg-amber-block { background: var(--amber-300); } .bg-pink-block { background: #ffdcec; } .bg-sky-block { background: #d5f0ff; } .bg-lime-block { background: #e6f5cc; } .bg-amber-block h2, .bg-pink-block h2, .bg-sky-block h2, .bg-lime-block h2 { color: var(--ink-900); } /* ================================================================ SCRAPBOOK COLLAGE ================================================================ */ .scrapbook { position: relative; min-height: 540px; padding: 24px 0; } .scrap { position: absolute; box-shadow: 0 14px 38px rgba(10,15,44,0.18); border: 6px solid var(--white); overflow: hidden; transition: transform 280ms ease, box-shadow 280ms ease; background: var(--white); } .scrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .scrap:hover { transform: rotate(0deg) scale(1.04); box-shadow: 0 22px 50px rgba(10,15,44,0.28); z-index: 10; } .scrap::before { /* washi tape strip */ content: ""; position: absolute; top: -14px; left: 50%; width: 80px; height: 24px; background: rgba(245, 158, 11, 0.65); transform: translateX(-50%) rotate(-3deg); z-index: 1; } .scrap-1 { top: 0%; left: 4%; width: 280px; aspect-ratio: 3/4; transform: rotate(-3deg); border-radius: 14px; } .scrap-2 { top: 20%; left: 28%; width: 320px; aspect-ratio: 4/3; transform: rotate(2deg); border-radius: 14px; } .scrap-3 { top: 4%; right: 18%; width: 240px; aspect-ratio: 1/1; transform: rotate(-4deg); border-radius: 18px; } .scrap-4 { top: 38%; right: 2%; width: 260px; aspect-ratio: 4/5; transform: rotate(5deg); border-radius: 14px; } .scrap-5 { bottom: 0%; left: 14%; width: 300px; aspect-ratio: 4/3; transform: rotate(3deg); border-radius: 14px; } .scrap-6 { bottom: 8%; right: 24%; width: 260px; aspect-ratio: 1/1; transform: rotate(-6deg); border-radius: 50%; border-color: var(--amber-400); } .scrap-6::before { background: #ff7eb6; } @media (max-width: 980px) { .scrapbook { min-height: 800px; } .scrap { width: 220px !important; } .scrap-1 { top: 0%; left: 2%; } .scrap-2 { top: 14%; left: 36%; } .scrap-3 { top: 30%; right: 4%; } .scrap-4 { top: 48%; right: 30%; } .scrap-5 { top: 62%; left: 8%; } .scrap-6 { top: 78%; right: 8%; } } @media (max-width: 600px) { .scrapbook { min-height: auto; padding: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .scrap { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto !important; aspect-ratio: 4/5; } .scrap:nth-child(odd) { transform: rotate(-2deg); } .scrap:nth-child(even){ transform: rotate(2deg); } } /* ================================================================ Headline accents · outlined text, jumbo numbers ================================================================ */ .h-outline { -webkit-text-stroke: 2px var(--ink-900); color: transparent; } .h-jumbo { font-family: var(--font-display); font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; } /* Bigger module CTAs already exist; nothing else to add */ /* ================================================================ Terms of Service · readable prose layout ================================================================ */ .tos { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 38px; box-shadow: var(--shadow-sm); } .tos p { color: var(--ink-700); font-size: 1rem; line-height: 1.75; margin: 0 0 18px; } .tos p:last-child { margin-bottom: 0; } .tos a { color: var(--amber-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .tos a:hover { color: var(--ink-900); } @media (max-width: 640px) { .tos { padding: 26px 22px; } } /* ================================================================ Home hero · full-bleed with copy overlay on the left ================================================================ */ .hero-bleed { position: relative; min-height: clamp(360px, 52vh, 520px); overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #fff8e6 0%, #fef3c7 100%); } .hero-bleed__bg { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; height: 100%; object-fit: cover; object-position: center; z-index: -2; } .hero-bleed__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255, 248, 230, 1) 0%, rgba(255, 248, 230, 0.92) 36%, rgba(255, 248, 230, 0) 48%); } .hero-bleed__inner { position: relative; z-index: 2; display: flex; align-items: center; min-height: clamp(308px, 43vh, 434px); padding: 45px 0 77px; } .hero-bleed__copy { max-width: 434px; position: relative; } .hero-bleed__h1 .nowrap { white-space: nowrap; } .hero-bleed__squiggle { width: 70px; height: 22px; display: block; margin: 0 0 14px 4px; } .hero-bleed__h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.26rem, 2.66vw, 2.17rem); line-height: 1.08; letter-spacing: -0.025em; color: var(--ink-900); margin: 0 0 14px; } .hero-bleed__h1 .hl-pink { color: #ec4899; } .hero-bleed__h1 .hl-blue { color: #0ea5e9; } .hero-bleed__lede { font-size: clamp(0.78rem, 0.95vw, 0.88rem); color: var(--ink-700); line-height: 1.55; margin: 0 0 20px; max-width: 360px; } .hero-bleed__sparkle { position: absolute; z-index: 1; top: 32%; left: 2.5%; width: 42px; animation: bob 4s ease-in-out infinite; pointer-events: none; } .hero-bleed__dots { position: absolute; z-index: 1; width: 130px; height: 110px; background-image: radial-gradient(circle, rgba(245, 158, 11, 0.50) 1.6px, transparent 2.2px); background-size: 14px 14px; pointer-events: none; } .hero-bleed__dots--top-left { top: 6%; left: 3%; } .hero-bleed__wave { position: absolute; bottom: -1px; left: 0; right: 0; width: 100%; height: 90px; z-index: 2; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (max-width: 980px) { .hero-bleed__scrim { background: linear-gradient(180deg, rgba(255, 248, 230, 0.94) 0%, rgba(255, 248, 230, 0.88) 60%, rgba(255, 248, 230, 0.85) 100%); } .hero-bleed__inner { padding: 40px 0 70px; } .hero-bleed__dots, .hero-bleed__sparkle { display: none; } .hero-bleed__wave { height: 50px; } } /* ================================================================ What kids gain · 6 benefit cards ================================================================ */ .gains { position: relative; background: #f1f5fb; padding: 12px 0 56px; overflow: hidden; } .gains__dots { position: absolute; z-index: 0; width: 120px; height: 90px; background-size: 14px 14px; pointer-events: none; } .gains__dots--left { top: 40%; left: 2%; background-image: radial-gradient(circle, rgba(14, 165, 233, 0.45) 1.6px, transparent 2.2px); } .gains__dots--right { top: 38%; right: 2%; background-image: radial-gradient(circle, rgba(236, 72, 153, 0.40) 1.6px, transparent 2.2px); } .gains__sparkle { position: absolute; top: 40%; right: 10%; width: 32px; z-index: 0; pointer-events: none; animation: bob 5s ease-in-out infinite; } .gains .container { position: relative; z-index: 1; } .gains .section-title { margin-bottom: 26px; } .gains .section-title h2 { font-size: clamp(1.26rem, 2.66vw, 2.17rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.025em; } .eyebrow-pink { font-size: 0.68rem; margin-bottom: 8px; } .eyebrow-pink { display: inline-block; font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; color: #ec4899; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px; } .hl-amber-underline { position: relative; display: inline-block; color: var(--ink-900); } .hl-amber-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 4px; border-radius: 4px; background: var(--amber-500); } .gains-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .gain-card { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-sm); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; overflow: hidden; } .gain-card::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent, var(--amber-500)); } .gain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } .gain-ico { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 50%; display: grid; place-items: center; } .gain-ico svg { width: 54px; height: 54px; } .gain-ico-img { width: 62px; height: 62px; flex: 0 0 62px; display: block; object-fit: contain; } .gain-body { min-width: 0; } .gain-body h3 { font-family: var(--font-display); font-size: 0.85rem; color: var(--ink-900); margin: 0 0 3px; font-weight: 800; } .gain-num { color: var(--ink-400); font-weight: 700; margin-right: 2px; } .gain-body p { margin: 0; font-size: 0.78rem; color: var(--ink-500); line-height: 1.4; } @media (max-width: 980px) { .gains-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .gains-grid { grid-template-columns: 1fr; } } /* Decorative dot grids (reusable across sections) */ .deco-dots { position: absolute; z-index: 0; width: 130px; height: 110px; background-size: 14px 14px; pointer-events: none; } .deco-dots--top-left { top: 8%; left: 3%; background-image: radial-gradient(circle, rgba(245, 158, 11, 0.40) 1.6px, transparent 2.2px); } .deco-dots--bottom-right { bottom: 12%; right: 3%; background-image: radial-gradient(circle, rgba(236, 72, 153, 0.38) 1.6px, transparent 2.2px); } /* ================================================================ Auth / Classroom · login screen ================================================================ */ .auth-wrap { min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 60px 20px; background: radial-gradient(700px 400px at 0% 0%, rgba(254, 243, 199, 0.7), transparent 60%), radial-gradient(700px 400px at 100% 100%, rgba(219, 234, 254, 0.5), transparent 60%), var(--bg-base); } .auth-card { width: 100%; max-width: 420px; background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 40px 36px 32px; box-shadow: 0 10px 40px rgba(10, 15, 44, 0.08); } .auth-brand { display: flex; justify-content: center; margin-bottom: 18px; } .auth-brand img { width: 54px; height: 54px; } .auth-h1 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; color: var(--ink-900); text-align: center; margin: 0 0 6px; letter-spacing: -0.02em; } .auth-sub { text-align: center; color: var(--ink-500); font-size: 0.92rem; margin: 0 0 24px; } .auth-google { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--white); color: var(--ink-900); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; border: 1px solid var(--ink-200); border-radius: var(--radius-pill); padding: 12px 18px; cursor: pointer; transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .auth-google:hover { background: #f9fafb; border-color: var(--ink-300); box-shadow: 0 2px 8px rgba(10, 15, 44, 0.06); } .auth-divider { display: flex; align-items: center; margin: 22px 0; color: var(--ink-400); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth-divider span { padding: 0 12px; } .auth-form { display: flex; flex-direction: column; gap: 14px; } .auth-field { display: flex; flex-direction: column; gap: 6px; } .auth-field span { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: var(--ink-700); letter-spacing: 0.02em; } .auth-field input { appearance: none; width: 100%; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink-900); background: var(--bg-base); border: 1px solid var(--ink-200); border-radius: 12px; padding: 11px 14px; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; } .auth-field input:focus { outline: none; border-color: var(--amber-500); background: var(--white); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); } .auth-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; margin-top: 2px; } .auth-check { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-700); cursor: pointer; } .auth-check input { accent-color: var(--amber-500); } .auth-link { color: var(--amber-600); font-weight: 600; text-decoration: none; } .auth-link:hover { text-decoration: underline; } .auth-submit { width: 100%; margin-top: 10px; justify-content: center; } .auth-foot { text-align: center; margin: 22px 0 0; color: var(--ink-500); font-size: 0.88rem; } .auth-foot a { color: var(--amber-600); font-weight: 700; text-decoration: none; } .auth-foot a:hover { text-decoration: underline; } @media (max-width: 480px) { .auth-card { padding: 32px 24px 28px; border-radius: 16px; } .auth-h1 { font-size: 1.4rem; } } /* ================================================================ Compact page padding (Program / About) ================================================================ */ .page-compact .hero-tight { padding: 24px 0 28px; } .page-compact .section { padding: 36px 0; } .page-compact .section-sm { padding: 24px 0; } .page-compact .section-title { margin-bottom: 22px; } /* ================================================================ Classroom dashboard (post-login) ================================================================ */ .dashboard-wrap { min-height: calc(100vh - 70px); padding: 60px 20px; background: radial-gradient(700px 400px at 0% 0%, rgba(254, 243, 199, 0.7), transparent 60%), radial-gradient(700px 400px at 100% 100%, rgba(219, 234, 254, 0.5), transparent 60%), var(--bg-base); } .dashboard-card { max-width: 880px; margin: 0 auto; background: var(--white); border: 1px solid var(--border); border-radius: 22px; padding: 36px 36px 32px; box-shadow: 0 10px 40px rgba(10, 15, 44, 0.06); text-align: center; } .dashboard-avatar { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; object-fit: cover; border: 2px solid var(--border); } .dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; text-align: left; } .dashboard-tile { background: var(--bg-base); border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; gap: 14px; align-items: center; } .dashboard-tile__ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: grid; place-items: center; } .dashboard-tile__ico--blue { background: #dbeafe; color: #1d4ed8; } .dashboard-tile__ico--pink { background: #fce7f3; color: #be185d; } .dashboard-tile__ico--green { background: #d1fae5; color: #047857; } .dashboard-tile__ico--amber { background: #fef3c7; color: #b45309; } .dashboard-tile h3 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; color: var(--ink-900); margin: 0 0 2px; } .dashboard-tile p { margin: 0; font-size: 0.82rem; color: var(--ink-500); line-height: 1.4; } .dashboard-foot { margin-top: 26px; font-size: 0.85rem; color: var(--ink-500); } .dashboard-foot a { color: var(--amber-600); font-weight: 700; text-decoration: none; } .dashboard-foot a:hover { text-decoration: underline; } @media (max-width: 640px) { .dashboard-card { padding: 28px 22px; } .dashboard-grid { grid-template-columns: 1fr; } } /* ================================================================ Register page · refreshed split layout ================================================================ */ .register-section { padding: 32px 0 56px; background: radial-gradient(700px 380px at 0% 0%, rgba(254, 243, 199, 0.55), transparent 60%), var(--bg-base); } .register-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: center; } .register-visual { position: relative; } .register-visual img { width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: block; } .register-panel { max-width: 460px; text-align: center; margin: 0 auto; } .register-panel .pricing-row { justify-content: center; } .register-h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink-900); margin: 0 0 6px; } .register-panel .register-lede { font-size: 0.98rem; color: var(--ink-500); margin: 0 0 22px; } .register-panel .pricing-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .countdown-compact { margin: 0 0 22px; padding: 14px 16px; background: var(--white); border: 1px solid var(--border); border-radius: 14px; } .countdown-compact .countdown-label { display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; text-align: center; } .countdown-compact .cd-row { display: flex; align-items: center; gap: 6px; justify-content: center; } .countdown-compact .cd-cell { background: #dc2626; color: var(--white); border-radius: 10px; padding: 8px 10px; text-align: center; min-width: 56px; font-family: var(--font-display); } .countdown-compact .cd-num { font-size: 1.15rem; font-weight: 900; line-height: 1; display: block; font-variant-numeric: tabular-nums; } .countdown-compact .cd-unit { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.75); display: block; margin-top: 4px; } .countdown-compact .cd-sep { font-family: var(--font-display); color: var(--ink-300); font-weight: 900; font-size: 1rem; } .register-panel .btn-checkout { width: 100%; justify-content: center; } .checkout-fineprint { margin: 10px 0 0; text-align: center; font-size: 0.78rem; color: var(--ink-400); } @media (max-width: 880px) { .register-grid { grid-template-columns: 1fr; gap: 24px; } .register-visual { order: -1; } .register-panel { max-width: none; } } /* ================================================================ Mobile enhancements (overrides applied last to win specificity) ================================================================ */ /* Prevent any horizontal overflow on mobile */ html, body { overflow-x: hidden; } /* Tighten container padding on small screens */ @media (max-width: 720px) { .container { padding-left: 18px; padding-right: 18px; } .section { padding: 40px 0; } .section-sm { padding: 24px 0; } } /* iOS form input zoom fix · inputs must be >= 16px to prevent auto-zoom */ @media (max-width: 720px) { input, select, textarea, .auth-field input { font-size: 16px !important; } } /* Larger tap targets on mobile · WCAG minimum 44x44 */ @media (max-width: 720px) { .btn { min-height: 48px; padding-left: 22px; padding-right: 22px; } .btn-lg, .btn-xl { min-height: 54px; } .nav-links a { padding: 14px 18px; min-height: 48px; display: flex; align-items: center; } .nav-toggle { min-width: 44px; min-height: 44px; } } /* HERO bleed · full-bleed image with strong bottom scrim on mobile */ @media (max-width: 720px) { .hero-bleed { min-height: auto; display: flex; flex-direction: column; } .hero-bleed__bg { position: relative; inset: auto; width: 100%; height: 220px; object-fit: cover; object-position: center; } .hero-bleed__scrim { display: none; } .hero-bleed__inner { position: static; background: linear-gradient(180deg, #fff8e6 0%, #fef3c7 100%); padding: 24px 0 32px; min-height: auto; } .hero-bleed__copy { max-width: none; padding: 0 18px; text-align: center; } .hero-bleed__squiggle { margin: 0 auto 12px; } .hero-bleed__h1 { font-size: 1.6rem; line-height: 1.12; } .hero-bleed__lede { margin: 0 auto 18px; max-width: none; } .hero-bleed .hero-ctas { display: flex; flex-direction: column; gap: 10px; width: 100%; } .hero-bleed .hero-ctas .btn { width: 100%; justify-content: center; } .hero-bleed__wave { display: none; } /* Hide decorations to keep it clean */ .hero-bleed__dots, .hero-bleed__sparkle { display: none; } } /* Gain cards · breathing room on mobile */ @media (max-width: 600px) { .gains-grid { gap: 12px; } .gain-card { padding: 14px 14px; gap: 14px; } .gain-ico-img { width: 56px; height: 56px; flex-basis: 56px; } .gain-body h3 { font-size: 0.95rem; } .gain-body p { font-size: 0.85rem; } .gains .section-title h2 { font-size: 1.4rem; } } /* Section titles on mobile */ @media (max-width: 720px) { .section-title h2 { font-size: clamp(1.3rem, 5vw, 1.7rem) !important; } } /* Final CTA block · stack vertically with padding fix */ @media (max-width: 720px) { .cta-block { padding: 28px 22px; text-align: center; } .cta-block h2 { font-size: 1.3rem !important; line-height: 1.2; } .cta-block .btn { width: 100%; } } /* Register page mobile · larger image, calmer layout */ @media (max-width: 720px) { .register-section { padding: 20px 0 40px; } .register-grid { gap: 18px; } .register-visual img { border-radius: 16px; } .register-panel { max-width: none; } .register-h1 { font-size: 1.5rem; } .countdown-compact .cd-cell { min-width: 48px; padding: 7px 8px; } .countdown-compact .cd-num { font-size: 1rem; } .countdown-compact .cd-unit { font-size: 0.55rem; } .pricing-row .price-now { font-size: 1.8rem; } } /* Auth/Classroom card on mobile */ @media (max-width: 480px) { .auth-wrap { padding: 24px 16px; min-height: auto; } .auth-card { padding: 26px 20px; } .auth-google { padding: 14px 16px; min-height: 50px; } } /* Dashboard tiles · cleaner stack */ @media (max-width: 640px) { .dashboard-wrap { padding: 24px 16px; min-height: auto; } .dashboard-card { padding: 22px 18px; } .dashboard-grid { gap: 12px; margin-top: 20px; } .dashboard-tile { padding: 14px; } .dashboard-tile__ico { width: 40px; height: 40px; flex-basis: 40px; } } /* Scrapbook & video strip on mobile · clean column */ @media (max-width: 600px) { .scrapbook { grid-template-columns: 1fr 1fr; gap: 10px; } .scrap { transform: none !important; } .video-tile { transform: none !important; } } /* ToS prose mobile */ @media (max-width: 640px) { .tos { padding: 22px 18px; } .tos p { font-size: 0.95rem; line-height: 1.65; } } /* Pillars / about page on mobile */ @media (max-width: 720px) { .pillar { padding: 28px 22px; } .pillar-num { font-size: 2.6rem; margin-bottom: 12px; } .pillar h3 { font-size: 1rem; line-height: 1.55; } } /* Reduce hero ctas gap on mobile */ @media (max-width: 720px) { .hero-ctas { gap: 10px; } } /* Sticky bottom-of-screen registration CTA on mobile (commerce best practice). Only on pages that don't already have a prominent CTA at the top of viewport. */ @media (max-width: 720px) { .mobile-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--border); padding: 10px 14px env(safe-area-inset-bottom, 10px); box-shadow: 0 -4px 18px rgba(10, 15, 44, 0.08); } .mobile-sticky-cta .btn { width: 100%; min-height: 52px; justify-content: center; } /* Page-level padding so sticky CTA doesn't cover the footer */ body.has-sticky-cta main { padding-bottom: 80px; } } /* ToS / Privacy section heading inside the .tos card */ .tos-heading { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--ink-900); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); letter-spacing: -0.01em; } /* Emphasized ages label in hero lede */ .ages-emphasis { display: inline-block; margin-left: 4px; padding: 3px 10px; background: var(--amber-100); color: var(--amber-600); border-radius: var(--radius-pill); font-weight: 800; font-size: 0.95em; letter-spacing: 0.005em; } /* Strip any native video controls / play button UI on tiles */ .video-tile video { pointer-events: none; } .video-tile video::-webkit-media-controls, .video-tile video::-webkit-media-controls-enclosure, .video-tile video::-webkit-media-controls-overlay-play-button, .video-tile video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none !important; } /* ================================================================ EVERYTHING YOUR CHILD NEEDS · marketing grid + reserve sidebar ================================================================ */ .everything { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 0% 0%, rgba(254, 243, 199, 0.65), transparent 60%), radial-gradient(800px 500px at 100% 100%, rgba(254, 215, 170, 0.30), transparent 60%), var(--bg-base); } .everything__sparkle { position: absolute; z-index: 0; pointer-events: none; } .everything__sparkle--1 { top: 6%; left: 3%; width: 38px; animation: bob 5s ease-in-out infinite; } .everything__sparkle--2 { top: 4%; left: 9%; width: 18px; animation: bob 6s ease-in-out infinite 0.6s; } .everything__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; position: relative; z-index: 1; } .everything__main { min-width: 0; } .everything__h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink-900); margin: 0 0 8px; } .everything__script { font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.15em; color: var(--amber-500); position: relative; padding: 0 4px; } .everything__script::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -6px; height: 6px; background: var(--amber-400); border-radius: 6px; opacity: 0.75; transform: skewY(-1.2deg); } .everything__sub { color: var(--ink-500); font-size: 0.98rem; margin: 0 0 28px; } /* Photo program cards */ .program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .program-card { position: relative; background: var(--white); border: 1px solid rgba(10, 15, 44, 0.06); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(10, 15, 44, 0.05), 0 10px 28px rgba(10, 15, 44, 0.07); transition: transform 240ms ease, box-shadow 240ms ease; } .program-card:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(10, 15, 44, 0.06), 0 20px 44px rgba(10, 15, 44, 0.13); } .program-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .program-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .program-card__ico { position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(10, 15, 44, 0.18); } .program-card__body { padding: 14px 18px 18px; position: relative; } .program-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--accent, var(--amber-500)); } .program-card__body h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--ink-900); margin: 0 0 4px; letter-spacing: -0.01em; } .program-card__body p { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--ink-500); } /* ----- Reserve panel (right sidebar) ----- */ .reserve-panel { position: sticky; top: 90px; background: linear-gradient(170deg, #fef3c7 0%, #fef9e7 100%); border: 1px solid rgba(245, 158, 11, 0.18); border-radius: 22px; box-shadow: 0 18px 40px rgba(245, 158, 11, 0.12); padding: 0 22px 22px; overflow: visible; } .reserve-panel__hero { margin: -90px auto 4px; width: 280px; max-width: 100%; pointer-events: none; } .reserve-panel__hero img { width: 100%; height: auto; display: block; } .reserve-panel__h { font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; color: var(--ink-900); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 14px; } .reserve-panel__underline { display: inline-block; position: relative; padding-bottom: 4px; } .reserve-panel__underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; border-radius: 4px; background: var(--amber-500); } .reserve-panel__deal { display: flex; align-items: center; justify-content: space-between; background: var(--white); border-radius: var(--radius-pill); padding: 6px 8px 6px 14px; margin: 0 0 16px; border: 1px solid rgba(245, 158, 11, 0.20); } .reserve-panel__deal-l { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--ink-900); } .reserve-panel__deal-l svg { color: var(--amber-600); } .reserve-panel__deal-r { background: var(--amber-500); color: var(--ink-900); font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; padding: 6px 14px; border-radius: var(--radius-pill); } .reserve-panel__feats { list-style: none; padding: 0; margin: 0 0 18px; } .reserve-panel__feats li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(245, 158, 11, 0.16); } .reserve-panel__feats li:last-child { border-bottom: 0; } .reserve-panel__feat-ico { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink-800); } .reserve-panel__feats strong { display: block; font-family: var(--font-display); font-size: 0.92rem; font-weight: 800; color: var(--ink-900); margin-bottom: 1px; } .reserve-panel__feats span { display: block; font-size: 0.8rem; color: var(--ink-500); } .reserve-panel__cta { display: flex; align-items: center; justify-content: space-between; background: var(--ink-900); color: var(--white); text-decoration: none; border-radius: var(--radius-pill); padding: 12px 12px 12px 22px; font-family: var(--font-display); font-weight: 800; font-size: 1rem; transition: background 180ms ease, transform 180ms ease; box-shadow: 0 8px 20px rgba(10, 15, 44, 0.25); } .reserve-panel__cta:hover { background: var(--ink-800); transform: translateY(-2px); } .reserve-panel__cta-arrow { width: 30px; height: 30px; background: var(--white); color: var(--ink-900); border-radius: 50%; display: inline-grid; place-items: center; } .reserve-panel__foot { margin: 12px 0 0; text-align: center; font-size: 0.84rem; color: var(--ink-600); position: relative; padding-bottom: 6px; } .reserve-panel__foot::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 2px; border-radius: 2px; background: var(--amber-400); opacity: 0.7; } .reserve-panel__foot em { font-style: italic; font-weight: 500; } @media (max-width: 1100px) { .everything__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; } .reserve-panel__hero { margin-top: -70px; width: 220px; } } @media (max-width: 920px) { .everything__grid { grid-template-columns: 1fr; } .reserve-panel { position: static; max-width: 480px; margin: 0 auto; } .reserve-panel__hero { margin-top: -60px; } } @media (max-width: 720px) { .program-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .program-grid { grid-template-columns: 1fr; } .everything__h2 { font-size: 1.6rem; } .reserve-panel { padding: 0 18px 18px; } .reserve-panel__hero { width: 200px; margin-top: -50px; } }