/* ── Reset & Base ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Synapse Academic Press brand palette */ --navy: #0D1B2A; --navy-light: #1B2D45; --navy-mid: #142236; --blue: #1E90FF; --blue-light: #4DA6FF; --blue-dark: #0A6FD4; --blue-glow: rgba(30,144,255,0.12); --gold: #C9A84C; --gold-light: #D4BA6A; --gold-glow: rgba(201,168,76,0.12); --green: #2E8B57; --white: #FFFFFF; --off-white: #F4F6F8; --gray-100: #EEF0F3; --gray-200: #D8DCE2; --gray-400: #8E95A2; --gray-600: #4B5563; --gray-800: #1F2937; --text: #1F2937; --text-light: #556070; --text-lighter: #8E95A2; --radius: 12px; --radius-sm: 8px; --radius-xs: 6px; --shadow: 0 1px 3px rgba(13,27,42,0.06), 0 4px 16px rgba(13,27,42,0.04); --shadow-lg: 0 8px 32px rgba(13,27,42,0.08), 0 2px 8px rgba(13,27,42,0.04); --shadow-xl: 0 16px 48px rgba(13,27,42,0.1); --transition: 0.3s cubic-bezier(0.4,0,0.2,1); --transition-slow: 0.5s cubic-bezier(0.4,0,0.2,1); } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; color: var(--text); line-height: 1.6; background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Skip to content */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 9999; padding: 12px 24px; background: var(--navy); color: var(--white); font-weight: 600; font-size: 0.9rem; border-radius: var(--radius-xs); text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 16px; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } .container { max-width: 1180px; margin: 0 auto; padding: 0 28px; } .section { padding: 120px 0; position: relative; } .section--tinted { background: var(--off-white); } .section--dark { background: var(--navy); color: var(--white); } .section--gradient { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 100%); color: var(--white); } .section__header { text-align: center; margin-bottom: 64px; } .section__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; } .section--dark .section__eyebrow, .section--gradient .section__eyebrow { color: var(--gold); } .section__title { font-size: 2.75rem; margin-bottom: 16px; text-align: center; letter-spacing: -0.5px; color: var(--navy); } .section--dark .section__title, .section--gradient .section__title { color: var(--white); } .section__subtitle { font-size: 1.125rem; color: var(--text-light); text-align: center; margin-bottom: 0; max-width: 580px; margin-left: auto; margin-right: auto; line-height: 1.7; } .section--dark .section__subtitle, .section--gradient .section__subtitle { color: rgba(255,255,255,0.65); } /* ── Pill / Tag ── */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 50px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.3px; } .pill--primary { background: var(--blue-glow); color: var(--blue); } .pill--accent { background: var(--gold-glow); color: var(--gold); } /* ── Fade-in animations ── Only hide content when JS is confirmed via .js class on . Without JS, all content is visible by default. */ .js .fade-in { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); } .fade-in.visible { opacity: 1; transform: translateY(0); } .js .fade-in-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); } .fade-in-left.visible { opacity: 1; transform: translateX(0); } .js .fade-in-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); } .fade-in-right.visible { opacity: 1; transform: translateX(0); } .js .scale-in { opacity: 0; transform: scale(0.92); transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); } .scale-in.visible { opacity: 1; transform: scale(1); } .stagger-1 { transition-delay: 0.05s; } .stagger-2 { transition-delay: 0.12s; } .stagger-3 { transition-delay: 0.19s; } .stagger-4 { transition-delay: 0.26s; } .stagger-5 { transition-delay: 0.33s; } .stagger-6 { transition-delay: 0.40s; } /* ── Navigation ── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 18px 0; transition: all var(--transition); } .nav--scrolled { background: var(--white); box-shadow: 0 1px 0 rgba(13,27,42,0.06), 0 4px 16px rgba(13,27,42,0.04); padding: 12px 0; } .nav--scrolled .nav__logo { color: var(--navy); } .nav--scrolled .nav__tagline { color: var(--text-light); } .nav--scrolled .nav__link { color: var(--gray-600); } .nav--scrolled .nav__link:hover { color: var(--blue); } .nav--scrolled .nav__hamburger span { background: var(--navy); } .nav__inner { display: flex; align-items: center; justify-content: space-between; } .nav__brand { display: flex; flex-direction: column; } .nav__logo { font-size: 1.15rem; font-weight: 700; color: var(--white); letter-spacing: 2.5px; transition: color var(--transition); } .nav__tagline { font-size: 0.6rem; color: rgba(255,255,255,0.5); letter-spacing: 0.5px; margin-top: 2px; transition: color var(--transition); } .nav__links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav__link { color: rgba(255,255,255,0.85); font-size: 0.875rem; font-weight: 500; transition: color var(--transition); position: relative; } .nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--blue); border-radius: 1px; transition: width var(--transition); } .nav__link:hover::after, .nav__link--active::after { width: 100%; } /* Focus indicators */ .nav__link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 2px; } .nav__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .nav__hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: var(--transition); } .nav__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav__hamburger.active span:nth-child(2) { opacity: 0; } .nav__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ── Hero ── */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: var(--navy); text-align: center; } /* Slow-breathing ambient glow */ .hero__ambient { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 45%, rgba(201,168,76,0.06) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 30% 70%, rgba(30,144,255,0.04) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 75% 25%, rgba(30,144,255,0.03) 0%, transparent 50%); animation: ambientBreath 8s ease-in-out infinite alternate; } @keyframes ambientBreath { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 1; transform: scale(1.05); } } /* Geometric grid lines — architectural blueprint feel */ .hero__lines { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .hero__grid-svg { width: 100%; height: 100%; } .hero__line { stroke: rgba(201,168,76,0.04); stroke-width: 0.5; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: lineDraw 3s cubic-bezier(0.25,1,0.5,1) forwards; } .hero__line--h1 { animation-delay: 0.2s; } .hero__line--h2 { animation-delay: 0.5s; } .hero__line--h3 { animation-delay: 0.8s; } .hero__line--v1 { animation-delay: 0.4s; } .hero__line--v2 { animation-delay: 0.7s; } .hero__line--v3 { animation-delay: 1.0s; } .hero__line--d1 { animation-delay: 1.2s; stroke: rgba(201,168,76,0.03); } .hero__line--d2 { animation-delay: 1.5s; stroke: rgba(201,168,76,0.03); } @keyframes lineDraw { to { stroke-dashoffset: 0; } } /* Crest background */ .hero__bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .hero__crest { width: 320px; height: auto; opacity: 1; animation: crestFade 2s cubic-bezier(0.25,1,0.5,1) 0.5s both; } @keyframes crestFade { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .hero__content { position: relative; z-index: 1; max-width: 740px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .hero__institution { animation: heroFade 0.8s cubic-bezier(0.25,1,0.5,1) 0.1s both; } .hero__crest-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); } .hero__rule { width: 48px; height: 1px; background: var(--gold); margin: 28px 0; animation: heroRule 0.8s cubic-bezier(0.25,1,0.5,1) 0.3s both; } @keyframes heroRule { from { opacity: 0; width: 0; } to { opacity: 1; width: 48px; } } @keyframes heroFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .hero__title { font-size: 3.75rem; color: var(--white); margin-bottom: 0; line-height: 1.15; letter-spacing: -1px; font-weight: 700; animation: heroFade 0.8s cubic-bezier(0.25,1,0.5,1) 0.4s both; } .hero__title span { color: var(--gold); font-style: italic; } .hero__subtitle { font-size: 1.05rem; color: rgba(255,255,255,0.6); margin-bottom: 40px; max-width: 500px; line-height: 1.8; animation: heroFade 0.8s cubic-bezier(0.25,1,0.5,1) 0.6s both; } .hero__buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; animation: heroFade 0.8s cubic-bezier(0.25,1,0.5,1) 0.75s both; } .hero__enrollment { margin-top: 48px; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.3); font-weight: 500; animation: heroFade 0.8s cubic-bezier(0.25,1,0.5,1) 0.9s both; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: var(--radius-xs); font-size: 0.95rem; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: all var(--transition); position: relative; overflow: hidden; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.1s; } .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .btn--primary { background: var(--blue); color: var(--white); box-shadow: 0 4px 16px rgba(30,144,255,0.25); } .btn--primary:hover { background: var(--blue-dark); box-shadow: 0 8px 24px rgba(30,144,255,0.3); } .btn--accent { background: var(--blue); color: var(--white); box-shadow: 0 4px 16px rgba(30,144,255,0.25); } .btn--accent:hover { background: var(--blue-dark); box-shadow: 0 8px 24px rgba(30,144,255,0.3); } .btn--outline-light { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.35); } .btn--outline-light:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); } .btn--gold { background: var(--gold); color: var(--navy); font-weight: 700; box-shadow: 0 4px 16px rgba(201,168,76,0.25); } .btn--gold:hover { background: var(--gold-light); box-shadow: 0 8px 24px rgba(201,168,76,0.35); } /* ── Book Showcase / Carousel ── */ .books-section { overflow: hidden; padding: 100px 0; background: var(--off-white); color: var(--text); } .books-section .section__eyebrow { color: var(--gold); } .books-section .section__title { color: var(--navy); } .books-section .section__subtitle { color: var(--text-light); } .books-carousel { position: relative; width: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); } .books-track { display: flex; gap: 40px; animation: scroll-books 25s linear infinite; width: max-content; } /* Duplicate items for seamless loop — handled in JS */ .book-card { flex-shrink: 0; width: 280px; perspective: 1000px; } .book-card img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 12px 40px rgba(13,27,42,0.15), 0 4px 12px rgba(13,27,42,0.08); transition: all 0.5s cubic-bezier(0.4,0,0.2,1); transform: rotateY(-5deg); } .book-card:hover img { transform: rotateY(0deg) scale(1.06) translateY(-8px); box-shadow: 0 20px 60px rgba(13,27,42,0.2), 0 8px 20px rgba(13,27,42,0.1); } @keyframes scroll-books { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Pause on hover */ .books-carousel:hover .books-track { animation-play-state: paused; } @media (max-width: 768px) { .book-card { width: 200px; } .books-track { gap: 24px; } .books-section { padding: 72px 0; } } /* ── About section ── */ .about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .about__image { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xl); position: relative; } .about__image img { width: 100%; height: 400px; object-fit: cover; transition: transform var(--transition-slow); } .about__image:hover img { transform: scale(1.03); } .about__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(30,144,255,0.08), transparent); pointer-events: none; } .about__heading { font-size: 2.25rem; margin-bottom: 20px; letter-spacing: -0.5px; color: var(--navy); } .about__text { font-size: 1.05rem; line-height: 1.9; color: var(--text); } .about__text p + p { margin-top: 20px; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 80px; } .stat { text-align: center; padding: 36px 24px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--gray-200); transition: all var(--transition); position: relative; overflow: hidden; } .stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); transform: scaleX(0); transition: transform var(--transition); } .stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .stat:hover::before { transform: scaleX(1); } .stat__icon { width: 44px; height: 44px; margin: 0 auto 16px; padding: 10px; border-radius: var(--radius-sm); background: var(--blue-glow); color: var(--blue); } .stat__label { font-size: 0.95rem; font-weight: 700; color: var(--gray-800); } /* ── Courses ── */ .courses__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .course-card { background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gray-200); transition: all var(--transition); display: flex; flex-direction: column; } .course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: transparent; } .course-card__image { width: 100%; height: 200px; object-fit: cover; transition: transform var(--transition-slow); } .course-card:hover .course-card__image { transform: scale(1.05); } .course-card__image-wrap { overflow: hidden; position: relative; } .course-card__image-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to top, var(--white), transparent); pointer-events: none; } .course-card__body { padding: 28px 32px 36px; flex: 1; } .course-card__badge { display: inline-block; padding: 5px 14px; border-radius: 50px; font-size: 0.75rem; font-weight: 600; margin-bottom: 16px; } .course-card__badge--new { background: var(--blue-glow); color: var(--blue); } .course-card__badge--soon { background: var(--gold-glow); color: var(--gold); } .course-card__title { font-size: 1.35rem; color: var(--navy); margin-bottom: 16px; letter-spacing: -0.3px; } .course-card__details { list-style: none; display: flex; flex-direction: column; gap: 10px; } .course-card__details li { font-size: 0.9rem; color: var(--text-light); padding-left: 22px; position: relative; line-height: 1.6; } .course-card__details li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); opacity: 0.4; } .course-card--placeholder { display: flex; align-items: center; justify-content: center; text-align: center; border: 2px dashed var(--gray-200); background: var(--off-white); min-height: 320px; } .course-card--placeholder:hover { transform: none; box-shadow: none; } .course-card--placeholder .course-card__body { display: flex; flex-direction: column; align-items: center; justify-content: center; } .course-card--placeholder .course-card__title { color: var(--text-light); } .course-card__placeholder-text { color: var(--text-light); font-size: 0.9rem; margin-top: 8px; line-height: 1.6; } /* ── Features / Why Us ── */ .why-us__layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; } .why-us__statement { position: sticky; top: 120px; } .why-us__headline { font-size: 2.25rem; color: var(--navy); letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 20px; } .why-us__headline em { font-style: normal; color: var(--gold); } .why-us__intro { font-size: 1.05rem; color: var(--text-light); line-height: 1.8; } .features__list { display: flex; flex-direction: column; gap: 0; } .feature { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--gray-200); transition: all var(--transition); } .feature:first-child { padding-top: 0; } .feature:last-child { border-bottom: none; padding-bottom: 0; } .feature__icon-wrap { width: 48px; height: 48px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .feature .feature__icon-wrap { background: var(--blue-glow); color: var(--blue); transition: transform 0.3s cubic-bezier(0.25,1,0.5,1); } .feature:nth-child(2n) .feature__icon-wrap { background: var(--gold-glow); color: var(--gold); } .feature:hover .feature__icon-wrap { transform: scale(1.1); } .feature__icon { width: 22px; height: 22px; } .feature__title { font-size: 1rem; color: var(--navy); margin-bottom: 4px; } .feature__text { font-size: 0.88rem; color: var(--text-light); line-height: 1.7; } /* ── How It Works ── */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; } .steps__line { position: absolute; top: 32px; left: calc(12.5% + 16px); right: calc(12.5% + 16px); height: 2px; background: var(--gray-200); } .step { text-align: center; position: relative; } .step__number { width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: var(--gold); font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; position: relative; z-index: 1; transition: all var(--transition); } .step:hover .step__number { background: var(--navy-light); transform: scale(1.05); } .step__title { font-size: 1.1rem; margin-bottom: 8px; color: var(--navy); } .step__text { font-size: 0.88rem; color: var(--text-light); line-height: 1.7; } /* ── FAQ ── */ .faq__list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .faq__item { background: var(--white); border-radius: var(--radius-sm); border: 1px solid var(--gray-200); overflow: hidden; transition: all var(--transition); } .faq__item:hover { border-color: var(--gray-400); } .faq__item--open { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow); } .faq__question { width: 100%; padding: 20px 24px; background: none; border: none; font-family: inherit; font-size: 0.98rem; font-weight: 600; color: var(--navy); text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: color var(--transition); } .faq__question:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--radius-sm); } .faq__item--open .faq__question { color: var(--blue); } .faq__icon { flex-shrink: 0; width: 20px; height: 20px; transition: transform 0.35s cubic-bezier(0.25,1,0.5,1), opacity var(--transition), color var(--transition); opacity: 0.4; } .faq__question:hover .faq__icon { opacity: 0.7; } .faq__item--open .faq__icon { transform: rotate(45deg); opacity: 1; color: var(--blue); } .faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.4,0,0.2,1); } .faq__answer > div { overflow: hidden; } .faq__item--open .faq__answer { grid-template-rows: 1fr; } .faq__answer p { padding: 0 24px 20px; font-size: 0.93rem; color: var(--text-light); line-height: 1.8; } /* ── Contact ── */ .contact__inner { max-width: 560px; margin: 0 auto; text-align: center; } .contact__card { padding: 48px 40px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--gray-200); box-shadow: var(--shadow-lg); } .contact__item { margin-bottom: 18px; font-size: 1.05rem; color: var(--text); } .contact__item a { color: var(--blue); font-weight: 600; } .contact__meta { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--gray-200); font-size: 0.95rem; color: var(--text-light); } .contact__mail-link { color: var(--blue); font-weight: 600; transition: color var(--transition); } .contact__mail-link:hover { color: var(--blue-dark); } /* ── Contact Form ── */ .contact-form { display: flex; flex-direction: column; gap: 20px; text-align: left; transition: opacity 0.3s cubic-bezier(0.25,1,0.5,1); } .contact-form--hiding { opacity: 0; pointer-events: none; } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .contact-form__group { display: flex; flex-direction: column; gap: 6px; } .contact-form__label { font-size: 0.85rem; font-weight: 600; color: var(--gray-800); } .contact-form__input { padding: 12px 16px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-xs); font-family: inherit; font-size: 0.95rem; color: var(--text); background: var(--off-white); transition: all var(--transition); } .contact-form__input::placeholder { color: var(--text-lighter); } .contact-form__input:focus { border-color: var(--blue); outline: 2px solid var(--blue-glow); outline-offset: 0; background: var(--white); transform: translateY(-1px); } .contact-form__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer; } .contact-form__textarea { resize: vertical; min-height: 100px; } .contact-form__checks { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .contact-form__check { display: flex; align-items: center; gap: 10px; font-size: 0.93rem; color: var(--text); cursor: pointer; } .contact-form__check input[type="checkbox"] { width: 20px; height: 20px; border-radius: 4px; border: 1.5px solid var(--gray-200); accent-color: var(--blue); cursor: pointer; } .contact-form__submit { width: 100%; justify-content: center; margin-top: 4px; padding: 16px; } .contact-form__submit:disabled { opacity: 0.7; cursor: wait; } .contact-form__error { margin-top: 8px; padding: 12px 16px; border-radius: var(--radius-xs); background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; font-size: 0.9rem; line-height: 1.5; } .contact-form__success { text-align: center; padding: 40px 20px; animation: successFadeIn 0.5s cubic-bezier(0.25,1,0.5,1) both; } @keyframes successFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .contact-form__success-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(46,139,87,0.1); color: var(--green); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; animation: successIcon 0.6s cubic-bezier(0.25,1,0.5,1) 0.15s both; } @keyframes successIcon { 0% { opacity: 0; transform: scale(0.5); } 60% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } .contact-form__success h3 { font-size: 1.3rem; color: var(--navy); margin-bottom: 8px; } .contact-form__success p { color: var(--text-light); font-size: 0.95rem; } @media (max-width: 480px) { .contact-form__row { grid-template-columns: 1fr; } } /* ── Photo banner (between sections) ── */ .photo-banner { height: 320px; overflow: hidden; position: relative; } .photo-banner img { width: 100%; height: 100%; object-fit: cover; } .photo-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,27,42,0.15), rgba(30,144,255,0.08)); pointer-events: none; } /* ── Mobile menu overlay ── */ .nav__overlay { display: none; position: fixed; inset: 0; background: rgba(13,27,42,0.5); z-index: 999; opacity: 0; transition: opacity var(--transition); } .nav__overlay--visible { display: block; opacity: 1; } /* ── Form validation ── */ .contact-form__input:user-invalid { border-color: #DC2626; } .contact-form__field-error { display: block; font-size: 0.8rem; color: #DC2626; margin-top: 4px; } .contact-form__input[aria-invalid="true"] { border-color: #DC2626; animation: fieldShake 0.4s cubic-bezier(0.25,1,0.5,1); } .contact-form__input[aria-invalid="true"]:focus { border-color: #DC2626; outline-color: rgba(220,38,38,0.12); } @keyframes fieldShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } /* ── Noscript ── */ .noscript-banner { background: var(--gold-glow); color: var(--navy); text-align: center; padding: 12px 24px; font-size: 0.9rem; font-weight: 500; } /* ── Scroll progress ── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--gold); z-index: 1001; width: 0%; transition: none; } /* ── Footer ── */ .footer { background: var(--navy); color: rgba(255,255,255,0.5); padding: 48px 0; text-align: center; font-size: 0.85rem; } .footer__logo { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.8); letter-spacing: 2px; margin-bottom: 4px; } .footer__tagline { font-size: 0.7rem; color: rgba(255,255,255,0.3); margin-bottom: 24px; } .footer__links { margin-bottom: 20px; } .footer__links a { color: rgba(255,255,255,0.5); margin: 0 16px; font-size: 0.85rem; transition: color var(--transition); } .footer__links a:hover { color: var(--blue-light); } .footer__links a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 2px; } .footer__disclaimer { max-width: 580px; margin: 20px auto 0; font-size: 0.7rem; color: rgba(255,255,255,0.25); line-height: 1.6; } .footer__copy { margin-bottom: 4px; } /* ── Responsive ── */ @media (max-width: 1024px) { .about__grid { grid-template-columns: 1fr; gap: 40px; } .why-us__layout { grid-template-columns: 1fr; gap: 40px; } .why-us__statement { position: static; } .steps { grid-template-columns: repeat(2, 1fr); gap: 32px; } .steps__line { display: none; } .hero__title { font-size: 3.25rem; } .section { padding: 96px 0; } } @media (max-width: 768px) { .nav__links { position: fixed; top: 0; right: -100%; width: 300px; height: 100vh; height: 100dvh; background: var(--navy); flex-direction: column; padding: 100px 36px 36px; gap: 28px; transition: right var(--transition); box-shadow: -8px 0 32px rgba(0,0,0,0.3); } .nav__links--open { right: 0; } .nav__links--open .nav__link { color: rgba(255,255,255,0.8); } .nav__hamburger { display: flex; } .hero__title { font-size: 2.5rem; letter-spacing: -1px; } .hero__subtitle { font-size: 1rem; } .hero__crest { width: 220px; } .section { padding: 72px 0; } .section__title { font-size: 2rem; } .section__subtitle { font-size: 1rem; } .stats { grid-template-columns: 1fr; gap: 12px; } .courses__grid { grid-template-columns: 1fr; } .why-us__layout { gap: 28px; } .steps { grid-template-columns: 1fr; gap: 28px; } .course-card__body { padding: 24px; } .contact__card { padding: 32px 24px; } .photo-banner { height: 200px; } } @media (max-width: 480px) { .hero__title { font-size: 1.85rem; letter-spacing: -0.5px; } .hero__crest { width: 180px; } .hero__rule { margin: 20px 0; } .hero__buttons { flex-direction: column; } .btn { justify-content: center; width: 100%; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .fade-in, .fade-in-left, .fade-in-right, .scale-in { opacity: 1; transform: none; } .books-track { animation: none; } .hero__ambient { animation: none; opacity: 0.7; } .hero__line { stroke-dashoffset: 0; animation: none; } .hero__crest { animation: none; } }