@import '../brand.css'; :root { --page-bg: #f4f6f9; --page-panel: #ffffff; --page-card: #ffffff; --page-card-strong: #eaeefb; --page-line: rgba(13, 33, 70, 0.12); --page-line-soft: rgba(13, 33, 70, 0.08); --page-line-strong: rgba(56, 68, 255, 0.18); --page-shadow-card: 0 4px 6px rgba(0, 0, 0, 0.1); --page-shadow-panel: 0 4px 12px rgba(0, 0, 0, 0.05); --text-main: var(--ui-text-strong, #111827); --text-body: var(--ui-text-body, #4b5563); --text-muted: var(--ui-text-muted, #6b7280); --text-soft: var(--ui-text-muted-ui, #64748b); --body-gradient-top: #a8d9f6; --body-gradient-mid: #8fc6eb; --body-gradient-bottom: #83bfe7; --page-glow-soft: rgba(255, 255, 255, 0); --page-glow-brand: rgba(56, 201, 255, 0); --header-bg: rgba(255, 255, 255, 0.9); --accent: var(--loc-blue, #3844FF); --cta-fill: var(--loc-blue, #3844FF); --cta-fill-hover: var(--loc-dark, #05071D); --share-fill: var(--loc-cyan, #38C9FF); --share-fill-hover: var(--loc-blue, #3844FF); --radius-xl: 24px; --radius-lg: var(--ui-radius-lg, 16px); --radius-sm: var(--ui-radius-md, 8px); --radius-pill: var(--ui-radius-md, 8px); --transition-fast: 160ms ease; } /* Optional preview variant: add class="theme-cyan-bright" to . */ body.theme-cyan-bright { --page-bg: #9ae9ff; --page-panel: #f2fbff; --page-card: #e6f7ff; --page-card-strong: #d8f1ff; --page-line-strong: rgba(56, 68, 255, 0.16); --body-gradient-top: #def8ff; --body-gradient-mid: #9ae9ff; --body-gradient-bottom: #73dcff; --page-glow-soft: rgba(255, 255, 255, 0.44); --page-glow-brand: rgba(56, 201, 255, 0.18); --header-bg: rgba(154, 233, 255, 0.84); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; min-height: 100vh; font-family: var(--font-body, 'Inter', system-ui, sans-serif); color: var(--text-main); background: var(--page-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .page-bg { position: fixed; inset: 0; pointer-events: none; z-index: -1; background: url('../curriculum/assets/6137a86b772f1db054da7ac2_Circle.svg') left 18px top 78px / 220px no-repeat, url('../curriculum/assets/6137a8a1a52560dbc15e207a_Hexagon.svg') right -18px top 210px / 250px no-repeat, url('../curriculum/assets/6137a8d698723223a9aec247_Rhombus.svg') center 148px / 250px no-repeat, url('../curriculum/assets/6137a93066e8e4c18e9a0f8f_Pentagon.svg') left 52px bottom 120px / 220px no-repeat; opacity: 0.95; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; } .shell { width: min(1200px, calc(100vw - 40px)); margin: 0 auto; } .hero, .learn, .plans, .faq, .cta { padding: 0; } .hero { border-bottom: 1px solid var(--page-line); } .hero__inner { padding: 80px 0; text-align: center; } .hero h1 { width: min(86%, 1032px); margin: 0 auto; color: var(--text-main); font-family: var(--font-heading, 'GT Walsheim', system-ui, sans-serif); font-size: clamp(3.2rem, 7.4vw, 5.625rem); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; } .hero p { width: min(73%, 876px); margin: 32px auto 0; color: var(--text-body); font-size: 1.25rem; font-weight: 400; line-height: 1.45; letter-spacing: -0.015em; } .learn { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 80px; align-items: center; padding: 80px 0; border-bottom: 1px solid var(--page-line); } .learn__media { position: sticky; top: 110px; overflow: hidden; border-radius: var(--radius-lg); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* softer, platform-like shadow */ } .learn__media img { width: 100%; aspect-ratio: 480 / 298; object-fit: cover; } .learn__content { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .section-kicker { margin: 0; color: var(--accent); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; line-height: 2; text-transform: uppercase; } .learn__content h2, .plans__heading h2, .curriculum-path__header h2, .faq__intro h2, .cta-card h2 { margin: 0; color: var(--text-main); font-family: var(--font-heading, 'GT Walsheim', system-ui, sans-serif); letter-spacing: -0.01em; line-height: 1.15; } .learn__content h2 { font-size: clamp(2rem, 4vw, 3rem); } .learn__content p:last-child, .plans__heading p:last-child, .faq__copy, .faq-item p, .cta-card p { color: var(--text-body); font-size: 1.25rem; font-weight: 400; line-height: 1.45; letter-spacing: -0.015em; } .plans { padding: 80px 0; } .plans__heading { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; } .plans__heading--spaced { margin-top: 100px; } .plans__heading h2 { max-width: 940px; font-size: clamp(2rem, 4vw, 3rem); } .plans__heading p:last-child { max-width: 600px; } .plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 80px; } .plan-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 479px; padding: 48px 24px 24px; border-radius: var(--radius-lg); background: var(--page-card); box-shadow: var(--page-shadow-card); } .plan-card--link { color: inherit; text-decoration: none; transition: transform 0.2s ease; } .plan-card--link:hover { transform: translateY(-4px); } .plan-card__count { margin: 0; color: var(--accent); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; line-height: 2; text-transform: uppercase; } .plan-card h3 { margin: 8px 0 0; color: var(--text-main); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 1.625rem; font-weight: 500; line-height: 1.15; letter-spacing: 0em; } .plan-card__description { margin: 24px 0 0; color: var(--text-muted); font-size: 1rem; font-weight: 400; line-height: 1.5; } .plan-card__price-wrap { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 144px; margin-top: auto; padding: 36px 24px; border-radius: var(--radius-sm); background: var(--loc-blue, #3844FF); color: #ffffff; } .plan-card__price-wrap--clickable { cursor: pointer; } .plan-card__price { margin: 0; color: #ffffff; font-size: 3rem; font-weight: 400; line-height: 1.05; letter-spacing: -0.05em; } .plan-card__price--details { font-size: 1.8rem; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); } .plan-card__discount { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: rgba(255, 255, 255, 0.8); } .plan-card__discount--suffix { margin-left: 10px; font-size: 0.9em; font-weight: 500; opacity: 0.6; } .plan-card__badge { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); color: #ffffff; font-size: 0.75rem; font-weight: 600; line-height: 1; letter-spacing: 0.04em; } .plan-card__old-price { color: rgba(255, 255, 255, 0.6); font-size: 1rem; line-height: 0.8; text-decoration: line-through; } /* --- Curriculum Path ------------------------------------------ */ .curriculum-path { padding: 80px 0; border-bottom: 1px solid var(--page-line); } .curriculum-path__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; } .curriculum-path__header > div { display: flex; flex-direction: column; gap: 16px; } .curriculum-path__header h2 { font-size: clamp(2rem, 4vw, 3rem); } .curriculum-path__view-all { flex-shrink: 0; color: var(--accent); font-size: 0.95rem; font-weight: 600; white-space: nowrap; transition: opacity var(--transition-fast); } .curriculum-path__view-all:hover { opacity: 0.7; } .curriculum-path__shared-label { display: block; margin-bottom: 14px; color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .curriculum-path__leagues { display: flex; align-items: center; padding: 24px 28px; border-radius: var(--radius-lg); background: var(--page-card); border: 1px solid var(--page-line-soft); box-shadow: var(--page-shadow-card); margin-bottom: 20px; } .curriculum-path__league { display: flex; align-items: center; gap: 12px; flex: 1; } .curriculum-path__badge { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; } .curriculum-path__league-name { margin: 0; color: var(--text-main); font-size: 0.9rem; font-weight: 700; line-height: 1.2; } .curriculum-path__league--green .curriculum-path__league-name { color: var(--color-accent-green); } .curriculum-path__league--yellow .curriculum-path__league-name { color: var(--color-accent-yellow); } .curriculum-path__league--coral .curriculum-path__league-name { color: var(--color-accent-coral); } .curriculum-path__league-desc { margin: 2px 0 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.3; } .curriculum-path__arrow { flex-shrink: 0; width: 32px; height: 1px; margin: 0 4px; background: var(--page-line); position: relative; } .curriculum-path__arrow::after { content: ''; position: absolute; right: -1px; top: -3px; border: 3px solid transparent; border-left: 5px solid var(--page-line); } .curriculum-path__fork-label { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin: 4px 0 20px; } .curriculum-path__fork-label span { height: 1px; background: var(--page-line); } .curriculum-path__fork-label p { margin: 0; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; text-transform: uppercase; } .curriculum-path__tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .curriculum-path__track { --track-accent: var(--loc-blue); display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--page-line-soft); border-top: 4px solid var(--track-accent); border-radius: var(--radius-lg); background: var(--page-card); box-shadow: var(--page-shadow-card); color: inherit; text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .curriculum-path__track:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(13, 33, 70, 0.08); } .curriculum-path__track--violet { --track-accent: var(--color-accent-violet); } .curriculum-path__track--cyan { --track-accent: var(--loc-cyan); } .curriculum-path__track-tag { margin: 0; color: var(--track-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .curriculum-path__track h3 { margin: 4px 0 0; color: var(--text-main); font-family: var(--font-heading, 'GT Walsheim', system-ui, sans-serif); font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.1; letter-spacing: -0.02em; } .curriculum-path__track > p { margin: 4px 0 0; color: var(--text-body); font-size: 0.98rem; line-height: 1.6; flex: 1; } .curriculum-path__track-cta { display: block; margin-top: 12px; color: var(--track-accent); font-size: 0.88rem; font-weight: 600; } .faq { padding: 77px 0; border-bottom: 1px solid var(--page-line); } .faq__frame { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 80px; padding: 80px; border-radius: var(--radius-xl); background: var(--page-card); box-shadow: var(--page-shadow-panel); } .faq__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 33px; } .faq__intro h2 { font-size: clamp(2rem, 4vw, 3rem); } .faq__copy { color: var(--text-muted); } .contact-card { display: flex; flex-direction: column; width: min(100%, 390px); border: 1px solid var(--page-line-soft); border-radius: var(--radius-sm); overflow: hidden; } .contact-card > div { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--page-card-strong); } .contact-card > div + div { border-top: 1px solid var(--page-line-soft); } .contact-card__label { margin: 0; color: var(--accent); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .contact-card a { color: var(--text-main); font-size: 1rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } .faq__list { display: flex; flex-direction: column; width: 100%; padding-left: 10px; } .faq-item { border-bottom: 1px solid var(--page-line-soft); } .faq-item:first-child { border-top: 1px solid var(--page-line-soft); } .faq-item summary { position: relative; display: block; padding: 16px 56px 16px 0; list-style: none; cursor: pointer; color: var(--text-main); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; position: absolute; right: 0; top: 50%; width: 40px; height: 40px; border-radius: var(--ui-radius-sm, 6px); /* matches platform */ background: var(--page-card-strong, #f1f5f9); color: var(--loc-blue, #3844FF); font-size: 1.5rem; line-height: 40px; text-align: center; transform: translateY(-50%); } .faq-item[open] summary::after { content: '-'; } .faq-item p { width: min(90%, 640px); margin: 0; padding: 0 0 32px; color: var(--text-body); } .cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .cta-card { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 120px 0; text-align: center; } .cta-card h2 { font-size: clamp(2rem, 4vw, 3rem); } .cta-card p { width: min(70%, 540px); color: var(--text-main); } .cta-card--share p { width: min(82%, 520px); } .button { display: inline-flex; align-items: center; justify-content: center; width: min(100%, 450px); min-height: 56px; margin-top: 24px; padding: 0 32px; border: 0; border-radius: var(--radius-pill); color: #ffffff; font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: background-color var(--transition-fast), transform var(--transition-fast), color var(--transition-fast); } .button:hover { transform: translateY(-1px); } .button--primary { background: var(--cta-fill); } .button--primary:hover { background: var(--cta-fill-hover); } .button--share { background: var(--page-card-strong, #f1f5f9); color: var(--loc-blue, #3844FF); border: 1px solid var(--loc-blue, #3844FF); } .button--share:hover { background: var(--loc-blue, #3844FF); color: #ffffff; } .copy-feedback { min-height: 1.5rem; margin: 8px 0 0; color: var(--accent); font-size: 0.95rem; font-weight: 600; } .site-footer { background: var(--page-panel); border-top: 1px solid var(--page-line, rgba(13, 33, 70, 0.12)); } .site-footer__inner { padding: 48px 64px 40px; } .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px 48px; align-items: start; } .site-footer__brand { display: flex; flex-direction: column; gap: 18px; } .site-footer__brand-row { display: flex; align-items: center; gap: 14px; } .site-footer__brand-copy { display: flex; flex-direction: column; gap: 4px; } .site-footer__brand-copy h3 { margin: 0; color: var(--text-main); font-family: var(--font-heading, 'GT Walsheim', system-ui, sans-serif); font-size: 1.25rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .site-footer__brand-copy p, .site-footer__address, .site-footer__copyright { margin: 0; color: var(--text-body); font-size: 0.96rem; line-height: 1.6; } .site-footer__copyright { color: var(--text-muted); font-size: 0.9rem; } .site-footer__group { display: flex; flex-direction: column; gap: 18px; } .site-footer__eyebrow { margin: 0; color: var(--accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .site-footer__links { display: flex; flex-direction: column; gap: 10px; } .site-footer__links a { width: fit-content; color: var(--text-main); font-size: 1rem; font-weight: 500; line-height: 1.4; transition: color var(--transition-fast); } .site-footer__links a:hover { color: var(--accent); } .site-footer__socials { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .site-footer__socials a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(13, 33, 70, 0.1); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.24); transition: background-color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast); } .site-footer__socials a:hover { background: rgba(255, 255, 255, 0.42); border-color: var(--page-line-strong); transform: translateY(-1px); } .site-footer__socials img { width: 20px; height: 20px; object-fit: contain; } @media (max-width: 1100px) { .learn, .faq__frame, .cta { grid-template-columns: 1fr; } .plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .learn__media { position: static; } .curriculum-path__header { flex-direction: column; align-items: flex-start; gap: 12px; } .faq__list { padding-left: 0; } .cta-card { padding: 72px 0; } .site-footer__inner { padding: 36px 0 32px; } .site-footer__grid { gap: 32px; } } @media (max-width: 900px) { .plans__grid { grid-template-columns: 1fr; } .curriculum-path__leagues { flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px; } .curriculum-path__arrow { display: none; } .curriculum-path__tracks { grid-template-columns: 1fr; } .curriculum-path__fork-label { grid-template-columns: 1fr auto; } .curriculum-path__fork-label span:last-child { display: none; } .faq__frame { gap: 48px; } } @media (max-width: 760px) { .shell { width: min(100vw - 24px, 1200px); } .page-bg { background: url('../curriculum/assets/6137a86b772f1db054da7ac2_Circle.svg') left -42px top 84px / 150px no-repeat, url('../curriculum/assets/6137a8a1a52560dbc15e207a_Hexagon.svg') right -64px top 240px / 170px no-repeat, url('../curriculum/assets/6137a93066e8e4c18e9a0f8f_Pentagon.svg') left -36px bottom 104px / 160px no-repeat; opacity: 0.92; } .hero__inner, .learn, .plans, .curriculum-path, .faq, .cta-card { padding-top: 56px; padding-bottom: 56px; } .hero h1, .hero p { width: 100%; } .hero p, .learn__content p:last-child, .plans__heading p:last-child, .faq__copy, .faq-item p, .cta-card p { font-size: 1rem; } .learn { gap: 32px; } .learn__media img { aspect-ratio: 16 / 10; } .plans__grid { margin-top: 56px; } .plan-card { min-height: auto; } .plan-card__price-wrap { min-height: 128px; padding: 24px; } .plan-card__price { font-size: 2.4rem; } .faq__frame { padding: 32px 24px; } .faq-item summary { padding-right: 52px; font-size: 1.08rem; } .faq-item summary::after { width: 36px; height: 36px; font-size: 1.3rem; line-height: 36px; } .cta-card p { width: 100%; } .site-footer__inner { padding: 32px 0 28px; } .site-footer__grid { grid-template-columns: 1fr; gap: 28px; } .site-footer__brand, .site-footer__group { gap: 14px; } .site-footer__brand-row { align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }