/*! * Grace Mission School - site stylesheet * --------------------------------------------------------------------------- * THEMES: every colour is a CSS variable in the blocks directly below. * The active theme is chosen in inc/config.php ('theme' => 'classic'), which * sets . To tweak the look, edit only these blocks. * ------------------------------------------------------------------------- */ /* ========================================================================= 1. THEME TOKENS ========================================================================= */ :root, [data-theme="classic"] { --bg: #FBF7ED; /* the school's cream */ --bg-2: #F3ECDA; --surface: #FFFFFF; --ink: #2E2F33; --ink-2: #56565A; --muted: #7B776D; --dark: #3C3D40; /* navbar charcoal */ --dark-2: #2A2B2E; --primary: #B20000; /* crimson */ --primary-2: #8F0000; --secondary: #1B5FAE; /* logo blue */ --accent: #FDFBB5; /* butter */ --gold: #E0A100; --on-dark: #FFFFFF; --line: rgba(60, 61, 64, .12); --grad-rainbow: linear-gradient(90deg, #1B5FAE, #7C3AED, #D6336C, #B20000, #E08A00, #2F9E44, #1B5FAE); --grad-hot: linear-gradient(135deg, #B20000 0%, #E8590C 55%, #E0A100 100%); --grad-cool: linear-gradient(135deg, #1B5FAE 0%, #6D28D9 100%); --mesh-1: #A5D8FF; --mesh-2: #FFC9C9; --mesh-3: #FFF3BF; } /* Meadow: light green + beige (active default). */ [data-theme="meadow"] { --bg: #F7F2E6; /* beige */ --bg-2: #EAF2E1; /* light green wash */ --surface: #FFFFFF; --ink: #1F2E24; --ink-2: #4A5A4E; --muted: #768575; --dark: #1F4A36; /* deep leaf green: nav & dark bands */ --dark-2: #173A2A; --primary: #3A8A55; /* fresh green */ --primary-2: #2C6D42; --secondary: #8A9A3C; /* olive */ --accent: #F1E6C8; /* sand beige */ --gold: #C9A33A; --grad-hot: linear-gradient(135deg, #2C6D42 0%, #4FA46A 55%, #9DBB5A 100%); --grad-cool: linear-gradient(135deg, #1F4A36 0%, #3A8A55 100%); --grad-rainbow: linear-gradient(90deg, #3A8A55, #9DBB5A, #C9A33A, #E3C98A, #6FB38A, #3A8A55); --glow: linear-gradient(100deg, #3A8A55, #7DB84F 35%, #C9A33A 65%, #3A8A55); --portal-1: linear-gradient(110deg, #2C6D42, #5BAA6E, #9DBB5A, #2C6D42); --portal-2: linear-gradient(110deg, #8A6D2E, #C9A33A, #B0893A, #8A6D2E); --mesh-1: #CFE8C4; --mesh-2: #F2E4C2; --mesh-3: #E1F0D6; } [data-theme="royal"] { --bg: #F4F6FB; --bg-2: #E6EBF5; --surface: #FFFFFF; --ink: #111A33; --ink-2: #3F4966; --muted: #6B7390; --dark: #0F1B3D; --dark-2: #0A1330; --primary: #1D3F91; --primary-2: #152F6E; --secondary: #C69214; --accent: #F6E7B0; --gold: #C69214; --grad-hot: linear-gradient(135deg, #1D3F91 0%, #3B5BDB 55%, #C69214 100%); --grad-cool: linear-gradient(135deg, #0F1B3D 0%, #1D3F91 100%); --mesh-1: #BAC8FF; --mesh-2: #FFE8A3; --mesh-3: #D0EBFF; } [data-theme="garden"] { --bg: #F4FAF1; --bg-2: #E4F2DE; --surface: #FFFFFF; --ink: #1B2E22; --ink-2: #44574A; --muted: #6C7F71; --dark: #1F3A2B; --dark-2: #152A1F; --primary: #2B8A3E; --primary-2: #1F6B2F; --secondary: #0B7285; --accent: #FFF3A3; --gold: #E0A100; --grad-hot: linear-gradient(135deg, #2B8A3E 0%, #74B816 55%, #E0A100 100%); --grad-cool: linear-gradient(135deg, #0B7285 0%, #2B8A3E 100%); --mesh-1: #B2F2BB; --mesh-2: #FFEC99; --mesh-3: #C5F6FA; } [data-theme="sunset"] { --bg: #FFF6F0; --bg-2: #FDE8DC; --surface: #FFFFFF; --ink: #2D1B2E; --ink-2: #5A4459; --muted: #86707F; --dark: #3A1F3D; --dark-2: #2A152C; --primary: #E8590C; --primary-2: #C2410C; --secondary: #A61E4D; --accent: #FFE3C2; --gold: #F59F00; --grad-hot: linear-gradient(135deg, #A61E4D 0%, #E8590C 55%, #F59F00 100%); --grad-cool: linear-gradient(135deg, #3A1F3D 0%, #A61E4D 100%); --mesh-1: #FFD8A8; --mesh-2: #FCC2D7; --mesh-3: #FFF3BF; } :root { --font-display: 'Merriweather', Georgia, 'Times New Roman', serif; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --radius: 22px; --radius-sm: 14px; --shadow-sm: 0 2px 10px rgba(30, 30, 40, .06); --shadow: 0 14px 40px -12px rgba(30, 30, 40, .22); --shadow-lg: 0 30px 70px -20px rgba(30, 30, 40, .35); --ease: cubic-bezier(.22, 1, .36, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); --wrap: 1240px; --gutter: clamp(16px, 4vw, 32px); --nav-h: 60px; } /* ========================================================================= 2. BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); } body { margin: 0; background: var(--bg); color: var(--ink-2); font-family: var(--font-body); font-size: 16.5px; line-height: 1.75; overflow-x: hidden; -webkit-font-smoothing: antialiased; } @supports (overflow: clip) { html, body { overflow-x: clip; } } body.menu-open, body.lb-open { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--primary); text-decoration: none; transition: color .3s; } a:hover { color: var(--primary-2); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.25; margin: 0 0 .6em; } p { margin: 0 0 1.1em; } ul, ol { margin: 0; padding: 0; } button { font: inherit; cursor: pointer; } ::selection { background: var(--primary); color: #fff; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; } main { display: block; outline: none; } .ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; } #i-facebook { fill: currentColor; } .i-fill { fill: currentColor; stroke: none; } .terms__body > *, .hero__grid > *, .welcome__grid > *, .split > *, .values__grid > *, .contact-grid > *, .cta__box > *, .terms > *, .mv__grid > * { min-width: 0; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .section { position: relative; padding: clamp(40px, 4.6vw, 72px) 0; } .section--tight { padding-top: clamp(20px, 3vw, 36px); } .center { text-align: center; } .mt-lg { margin-top: 48px; } .break { word-break: break-word; } .skip-link { position: fixed; left: 12px; top: -60px; z-index: 1000; background: var(--dark); color: #fff; padding: 10px 16px; border-radius: 10px; transition: top .3s; } .skip-link:focus { top: 12px; color: #fff; } /* ---- Typography helpers ---- */ .kicker { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-body); font-weight: 700; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); margin-bottom: 14px; padding: 6px 14px 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--primary) 9%, transparent); } .kicker--light { color: var(--accent); background: rgba(255, 255, 255, .1); } .title { font-size: clamp(1.8rem, 3.6vw, 2.9rem); font-weight: 900; letter-spacing: -.01em; } .title--sm { font-size: clamp(1.3rem, 2.2vw, 1.7rem); display: flex; align-items: center; gap: .5em; } .title--sm .ico { color: var(--primary); } .lead { font-size: 1.15rem; color: var(--ink); } .section-head { text-align: center; max-width: 760px; margin: 0 auto clamp(22px, 3vw, 38px); } .section-head__lead { font-size: 1.08rem; color: var(--muted); margin: 0; } .section-head--light .title { color: #fff; } .section-head--light .kicker { color: var(--accent); background: rgba(255, 255, 255, .1); } .glow-word { font-style: normal; background: var(--glow, linear-gradient(100deg, #E0A100, #F76707 30%, #B20000 60%, #E0A100)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: glowShift 6s linear infinite; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent)); } @keyframes glowShift { to { background-position: -250% 0; } } .dropcap::first-letter { float: left; font-family: var(--font-display); font-weight: 900; font-size: 4.2em; line-height: .85; margin: .08em .12em 0 0; background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- Buttons ---- */ .btn { --bh: 54px; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .6em; height: var(--bh); padding: 0 28px; border-radius: 99px; border: 0; font-weight: 700; font-size: .98rem; letter-spacing: .01em; transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .3s; will-change: transform; } .btn .ico { transition: transform .4s var(--ease); } .btn:hover .ico:last-child { transform: translateX(4px); } .btn--primary { color: #fff; background: var(--grad-hot); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--primary) 70%, transparent); } .btn--primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-cool); opacity: 0; transition: opacity .5s; } .btn--primary:hover { color: #fff; box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--secondary) 70%, transparent); } .btn--primary:hover::before { opacity: 1; } .btn--primary::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite; } .btn--ghost { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 2px var(--line), var(--shadow-sm); } .btn--ghost:hover { color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary), var(--shadow); } .btn--block { width: 100%; } .btn--sm { --bh: 44px; padding: 0 20px; font-size: .9rem; } @keyframes shine { 0%, 60% { left: -80%; } 100% { left: 140%; } } .link-arrow { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; color: var(--primary); } .link-arrow .ico { transition: transform .35s var(--ease); } .link-arrow:hover .ico { transform: translateX(6px); } .chip, .pill { display: inline-flex; align-items: center; gap: .5em; padding: 8px 16px; border-radius: 99px; font-size: .86rem; font-weight: 700; } .chip { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); } .chip .ico { color: var(--c, var(--primary)); } .chip--blue { --c: #1B5FAE; } .chip--red { --c: #B20000; } .chip--gold { --c: #E0A100; } .pill { color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 30%, transparent); transition: transform .3s var(--ease), background .3s, color .3s; } a.pill:hover { background: var(--c); color: #fff; transform: translateY(-3px); } .pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } /* ========================================================================= 3. PRELOADER, CURTAIN, PROGRESS, CURSOR ========================================================================= */ .preloader { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; pointer-events: none; } .no-loader .preloader { display: none; } .preloader__panel { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--dark); transition: transform 1s var(--ease); z-index: -1; } .preloader__panel.p1 { top: 0; } .preloader__panel.p2 { bottom: 0; } .preloader__inner { text-align: center; transition: opacity .5s, transform .6s var(--ease); } .preloader__candle { position: relative; width: 140px; height: 140px; margin: 0 auto 20px; } .preloader__candle img { position: relative; width: 140px; height: 140px; border-radius: 50%; animation: loaderPop 1s var(--ease-back) both; } .preloader__glow { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(253, 216, 53, .55), rgba(247, 103, 7, .15) 45%, transparent 70%); animation: flicker 1.6s ease-in-out infinite; } .preloader__flame { position: absolute; left: 50%; top: -34px; width: 22px; height: 36px; margin-left: -11px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 75%, #fff 0 18%, #FFE066 30%, #F76707 70%, transparent 72%); filter: blur(.4px) drop-shadow(0 0 10px #FFA94D); animation: flame 0.9s ease-in-out infinite alternate; transform-origin: 50% 100%; } .preloader__motto { font-family: var(--font-display); font-style: italic; color: var(--accent); font-size: 1.2rem; letter-spacing: .04em; margin: 0 0 16px; animation: fadeUp .8s .3s var(--ease) both; } .preloader__bar { width: 180px; height: 3px; margin: 0 auto; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; } .preloader__bar span { display: block; height: 100%; width: 0; background: var(--grad-rainbow); background-size: 200% 100%; animation: loadbar 1.4s var(--ease) forwards; } .loaded .preloader__inner { opacity: 0; transform: scale(.9); } .loaded .preloader__panel.p1 { transform: translateY(-101%); } .loaded .preloader__panel.p2 { transform: translateY(101%); } .loaded .preloader { visibility: hidden; transition: visibility 0s 1.1s; } @keyframes flame { 0% { transform: scale(1, 1) rotate(-3deg); } 100% { transform: scale(.9, 1.12) rotate(3deg); } } @keyframes flicker { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes loadbar { to { width: 100%; } } @keyframes loaderPop { from { transform: scale(.4) rotate(-90deg); opacity: 0; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } } .curtain { position: fixed; inset: 0; z-index: 880; display: grid; place-items: center; pointer-events: none; visibility: hidden; } .curtain__bg { position: absolute; inset: 0; background: var(--bg); clip-path: circle(0 at 50% 50%); transition: clip-path .6s var(--ease); } .curtain__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--mesh-1), transparent 60%); opacity: .8; } .curtain__logo { position: relative; width: 150px; height: 150px; transform: scale(.3) rotate(-120deg); opacity: 0; transition: transform .7s var(--ease-back), opacity .4s; } .curtain__logo img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 8px #fff, 0 20px 50px -10px color-mix(in srgb, var(--primary) 60%, transparent); animation: logoPulse 1.4s ease-in-out infinite; } .curtain__ring { position: absolute; inset: -22px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--primary); border-right-color: var(--gold); animation: spin 1s linear infinite; } .curtain__ring.r2 { inset: -36px; border-top-color: var(--secondary); border-right-color: transparent; border-left-color: var(--primary); animation-duration: 1.6s; animation-direction: reverse; opacity: .6; } .curtain__flame { position: absolute; left: 50%; top: -44px; z-index: 2; width: 18px; height: 30px; margin-left: -9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 75%, #fff 0 18%, #FFE066 30%, #F76707 70%, transparent 72%); filter: drop-shadow(0 0 10px #FFA94D); animation: flame .9s ease-in-out infinite alternate; transform-origin: 50% 100%; } .curtain__name { position: absolute; top: calc(100% + 50px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; color: var(--dark); text-align: center; } .curtain__name small { display: block; font-family: var(--font-body); font-weight: 700; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--primary); } @keyframes logoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .curtain.is-leaving, .curtain-in .curtain { visibility: visible; } .curtain.is-leaving .curtain__bg, .curtain-in .curtain .curtain__bg { clip-path: circle(150% at 50% 50%); } .curtain.is-leaving .curtain__logo, .curtain-in .curtain .curtain__logo { transform: none; opacity: 1; transition-delay: .15s; } .curtain-in .curtain .curtain__bg, .curtain-in .curtain .curtain__logo { transition: none; } .curtain-in.curtain-go .curtain .curtain__logo { transform: scale(1.6) rotate(40deg); opacity: 0; transition: transform .6s var(--ease), opacity .45s; transition-delay: 0s; } .curtain-in.curtain-go .curtain .curtain__bg { clip-path: circle(0 at 50% 50%); transition: clip-path .7s .15s var(--ease); } .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 300; pointer-events: none; } .scroll-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--grad-rainbow); background-size: 200% 100%; animation: rainbowSlide 6s linear infinite; } @keyframes rainbowSlide { to { background-position: -200% 0; } } .cursor-glow { display: none; } @media (hover: hover) and (pointer: fine) { .cursor-glow { display: block; position: fixed; left: 0; top: 0; z-index: 950; pointer-events: none; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s, opacity .3s; mix-blend-mode: multiply; } .cursor-glow.is-on { opacity: .55; } .cursor-glow.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: color-mix(in srgb, var(--gold) 35%, transparent); border-color: transparent; } } /* ========================================================================= 4. TOP BAR & PORTAL BUTTONS ========================================================================= */ .topbar { background: var(--dark-2); color: rgba(255, 255, 255, .78); font-size: .82rem; position: relative; z-index: 120; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; } .topbar__info { list-style: none; display: flex; gap: 22px; align-items: center; } .topbar__info li { display: flex; align-items: center; gap: 7px; } .topbar__info a { color: inherit; display: inline-flex; align-items: center; gap: 7px; } .topbar__info a:hover { color: var(--accent); } .topbar__info .ico { color: var(--accent); } .topbar__info b { color: #fff; } .topbar__actions { display: flex; align-items: center; gap: 10px; } .topbar__social { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .08); transition: background .3s, transform .4s var(--ease-back); } .topbar__social:hover { background: #1877F2; color: #fff; transform: rotate(-12deg) scale(1.1); } .portal-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 11px; border-radius: 99px; font-weight: 700; font-size: .78rem; color: #fff; white-space: nowrap; background-size: 220% 100%; animation: portalFlow 5s ease infinite; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5); transition: transform .35s var(--ease-back), box-shadow .35s; } .portal-btn--mis { background-image: var(--portal-1, linear-gradient(110deg, #B20000, #F76707, #D6336C, #B20000)); } .portal-btn--auto { background-image: var(--portal-2, linear-gradient(110deg, #1B5FAE, #6D28D9, #0B7285, #1B5FAE)); } .portal-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: shine 3.6s ease-in-out infinite; } .portal-btn--auto::after { animation-delay: 1.8s; } .portal-btn:hover { color: #fff; transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); } .portal-btn__dot { width: 7px; height: 7px; border-radius: 50%; background: #B2F2BB; box-shadow: 0 0 0 0 rgba(178, 242, 187, .8); animation: ping 2s infinite; } @keyframes portalFlow { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(178, 242, 187, .75); } 80%, 100% { box-shadow: 0 0 0 8px rgba(178, 242, 187, 0); } } /* ========================================================================= 5. BRAND BAR ========================================================================= */ .brandbar { background: var(--bg); position: relative; } .brandbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 8px; padding-bottom: 8px; } .brandbar__logo img { width: min(290px, 60vw); height: auto; transition: transform .6s var(--ease); } .brandbar__logo:hover img { transform: scale(1.02); } .brandbar__chips .chip { padding: 6px 13px; font-size: .78rem; } .brandbar__chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .brandbar__chips .chip { animation: chipFloat 5s ease-in-out infinite; } .brandbar__chips .chip:nth-child(2) { animation-delay: -1.6s; } .brandbar__chips .chip:nth-child(3) { animation-delay: -3.2s; } @keyframes chipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* ========================================================================= 6. MAIN NAV ========================================================================= */ .mainnav { position: sticky; top: 0; z-index: 150; background: color-mix(in srgb, var(--dark) 94%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .45); transition: box-shadow .4s, background .4s; } .mainnav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad-rainbow); background-size: 200% 100%; animation: rainbowSlide 8s linear infinite; } .mainnav__inner { display: flex; align-items: center; gap: 12px; min-height: var(--nav-h); } .mainnav__mark { display: flex; align-items: center; gap: 10px; color: #fff; flex: none; max-width: 0; opacity: 0; overflow: hidden; transform: translateX(-12px); transition: max-width .6s var(--ease), opacity .4s, transform .6s var(--ease); } .mainnav__mark img { width: 44px; height: 44px; border-radius: 50%; background: #fff; padding: 2px; } .mainnav__mark span { font-family: var(--font-display); font-weight: 900; font-size: 1.02rem; line-height: 1.1; white-space: nowrap; } .mainnav__mark small { display: block; font-family: var(--font-body); font-weight: 600; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .mainnav__mark:hover { color: #fff; } .is-stuck .mainnav__mark { max-width: 240px; opacity: 1; transform: none; } @media (min-width: 1280px) { .mainnav__mark span { display: none; } .is-stuck .mainnav__mark { max-width: 60px; } } .navlist { list-style: none; display: flex; align-items: center; gap: 2px; margin-left: auto; margin-right: auto; position: relative; } .navlist > li { position: relative; z-index: 1; } .navlink { position: relative; display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-radius: 99px; color: rgba(255, 255, 255, .88); font-weight: 600; font-size: .88rem; white-space: nowrap; transition: color .3s; } .navlink .ico { width: 17px; height: 17px; color: var(--accent); transition: transform .5s var(--ease-back), color .3s; } .navlink:hover, .navlink.is-active { color: #fff; } .navlink:hover .ico { transform: translateY(-2px) rotate(-10deg) scale(1.15); color: #fff; } .navlink.is-active .ico { color: #fff; } .navlink__roll { position: relative; display: inline-block; overflow: hidden; line-height: 1.3; } .navlink__roll > span { display: block; transition: transform .45s var(--ease); } .navlink__roll::after { content: attr(data-text); position: absolute; left: 0; top: 100%; transition: transform .45s var(--ease); color: #fff; } .navlink:hover .navlink__roll > span, .navlink:hover .navlink__roll::after { transform: translateY(-100%); } .navlink.is-active { font-weight: 700; } .navlist__blob { position: absolute !important; z-index: 0 !important; top: 50%; left: 0; height: 42px; width: 0; margin-top: -21px; border-radius: 99px; pointer-events: none; background: var(--blob, var(--primary)); box-shadow: 0 8px 22px -6px var(--blob, var(--primary)), inset 0 1px 0 rgba(255, 255, 255, .25); opacity: 0; transition: transform .55s var(--ease), width .55s var(--ease), background-color .4s, opacity .3s; } .navlist__blob.is-on { opacity: 1; } .burger { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .1); position: relative; } .burger span { position: absolute; left: 13px; right: 13px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .45s var(--ease), opacity .3s, width .3s; } .burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 23px; right: 18px; } .burger span:nth-child(3) { top: 30px; } .burger:hover span:nth-child(2) { right: 13px; } .menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-open .burger span:nth-child(2) { opacity: 0; transform: translateX(10px); } .menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile full-screen menu */ .mobile-menu { position: fixed; inset: 0; z-index: 140; background: var(--dark-2); color: #fff; clip-path: circle(0 at calc(100% - 44px) 34px); visibility: hidden; transition: clip-path .8s var(--ease), visibility 0s .8s; overflow-y: auto; -webkit-overflow-scrolling: touch; } .menu-open .mobile-menu { clip-path: circle(150% at calc(100% - 44px) 34px); visibility: visible; transition: clip-path .8s var(--ease), visibility 0s; } .mobile-menu__bg span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: drift 14s ease-in-out infinite alternate; } .mobile-menu__bg span:nth-child(1) { width: 60vw; height: 60vw; background: var(--primary); top: -10%; right: -20%; } .mobile-menu__bg span:nth-child(2) { width: 50vw; height: 50vw; background: var(--secondary); bottom: 0; left: -20%; animation-delay: -5s; } .mobile-menu__bg span:nth-child(3) { width: 40vw; height: 40vw; background: var(--gold); top: 40%; right: 10%; opacity: .25; animation-delay: -9s; } .mobile-menu__inner { position: relative; padding: calc(var(--nav-h) + 120px) var(--gutter) 40px; max-width: 640px; margin: 0 auto; } .mobile-menu__list { list-style: none; } .mobile-menu__list li { opacity: 0; transform: translateX(40px); transition: opacity .5s, transform .6s var(--ease); } .menu-open .mobile-menu__list li { opacity: 1; transform: none; transition-delay: calc(.2s + var(--i) * .05s); } .mobile-menu__list a { display: flex; align-items: center; gap: 14px; padding: 11px 6px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); } .mm-num { font-size: .74rem; font-weight: 700; color: rgba(255, 255, 255, .4); width: 22px; } .mm-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; transition: background .3s, transform .4s var(--ease-back); } .mm-label { font-family: var(--font-display); font-size: 1.28rem; font-weight: 700; transition: color .3s; } .mobile-menu__list a:hover .mm-ico, .mobile-menu__list a.is-active .mm-ico { background: var(--tab); transform: rotate(-8deg) scale(1.08); } .mobile-menu__list a.is-active .mm-label { color: #FFE066; } .mobile-menu__portals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; opacity: 0; transition: opacity .5s .6s; } .mobile-menu__portals .portal-btn { font-size: .9rem; padding: 11px 18px; } .menu-open .mobile-menu__portals { opacity: 1; } .mobile-menu__motto { margin-top: 26px; color: var(--accent); font-family: var(--font-display); font-style: italic; opacity: .85; } .mobile-menu__motto .ico { color: #FFA94D; } /* ========================================================================= 7. HERO ========================================================================= */ .hero { position: relative; overflow: hidden; min-height: min(80vh, calc(100vh - 210px)); display: flex; align-items: center; padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 6vw, 80px); isolation: isolate; } .hero > .wrap { width: 100%; } .hero__motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .hero__mesh { position: absolute; z-index: -2; border-radius: 50%; filter: blur(70px); opacity: .75; animation: drift 18s ease-in-out infinite alternate; } .hero__mesh.m1 { width: 520px; height: 520px; background: var(--mesh-1); top: -160px; right: -120px; } .hero__mesh.m2 { width: 420px; height: 420px; background: var(--mesh-2); bottom: -140px; left: -120px; animation-delay: -6s; } .hero__mesh.m3 { width: 380px; height: 380px; background: var(--mesh-3); top: 30%; left: 40%; animation-delay: -11s; } @keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.1); } 100% { transform: translate(-30px, 30px) scale(.95); } } .hero__grid { display: grid; grid-template-columns: .95fr 1.15fr; gap: clamp(30px, 5vw, 70px); align-items: center; } .hero__title { font-size: clamp(2.3rem, 4.3vw, 3.9rem); font-weight: 900; line-height: 1.12; letter-spacing: -.015em; margin-bottom: 20px; } .hero__title .line { display: block; white-space: nowrap; } .hero__light { position: relative; display: inline-block; } .hero__swoosh { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .32em; overflow: visible; pointer-events: none; } .hero__swoosh path { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; opacity: .85; } .loaded .hero__swoosh path { animation: swoosh 1.1s 1.3s var(--ease) forwards; } @keyframes swoosh { to { stroke-dashoffset: 0; } } .hero__rotator { font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--ink); margin-bottom: 14px; } .rotator { position: relative; display: inline-block; min-width: 7ch; perspective: 400px; vertical-align: baseline; line-height: 1; } .rotator b { display: inline-block; vertical-align: baseline; color: var(--primary); font-weight: 900; transform-origin: 50% 100%; } .rotator b.out { animation: wordOut .45s var(--ease) forwards; } .rotator b.in { animation: wordIn .6s var(--ease-back) both; } .rotator::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 6px; border-radius: 6px; background: var(--accent); z-index: -1; } @keyframes wordOut { to { opacity: 0; transform: rotateX(90deg) translateY(-10px); } } @keyframes wordIn { from { opacity: 0; transform: rotateX(-90deg) translateY(10px); } } .hero__lead { font-size: 1.08rem; max-width: 560px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 26px; } .hero__facts { list-style: none; display: flex; gap: clamp(16px, 3vw, 36px); flex-wrap: wrap; } .hero__facts li { display: flex; flex-direction: column; padding-left: 14px; border-left: 3px solid var(--gold); } .hero__facts li:nth-child(2) { border-color: var(--primary); } .hero__facts li:nth-child(3) { border-color: var(--secondary); } .hero__facts b { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); line-height: 1.1; } .hero__facts span { font-size: .82rem; color: var(--muted); font-weight: 600; } .hero__visual { position: relative; width: 100%; max-width: 620px; margin: 0 auto; aspect-ratio: 1 / .9; max-height: 62vh; } @keyframes spin { to { transform: rotate(360deg); } } .hero__panel { position: absolute; border-radius: 240px 240px 34px 34px; pointer-events: none; } .hero__panel.p1 { inset: 6% -3% -2% 9%; background: var(--grad-hot); transform: rotate(5deg); opacity: .9; animation: panelSway 9s ease-in-out infinite alternate; } .hero__panel.p2 { inset: 2% 10% 4% -3%; border: 2px dashed color-mix(in srgb, var(--primary) 45%, transparent); transform: rotate(-4deg); animation: panelSway 11s ease-in-out infinite alternate-reverse; } .hero__dots { position: absolute; right: -4%; top: -3%; width: 120px; height: 120px; background-image: radial-gradient(var(--gold) 2.2px, transparent 2.7px); background-size: 16px 16px; opacity: .7; animation: bob 7s ease-in-out infinite; } @keyframes panelSway { from { transform: rotate(5deg) translateY(0); } to { transform: rotate(2deg) translateY(-10px); } } .hero__panel.p2 { --r0: -4deg; } .blob-show { position: absolute; inset: 0 4% 0 4%; overflow: hidden; isolation: isolate; border-radius: 240px 240px 34px 34px; border: 8px solid var(--surface); box-shadow: var(--shadow-lg); background: var(--bg-2); transform: translateZ(0); } .blob-show__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; z-index: 0; transform: scale(1.12); } .blob-show__slide.is-prev { opacity: 1; z-index: 1; transform: scale(1.02); transition: transform 1.4s var(--ease); } .blob-show__slide.is-active { opacity: 1; z-index: 2; animation: slideOpen 1.3s var(--ease) both, kenburnsIn 7s linear both; } @keyframes slideOpen { from { clip-path: circle(0% at 50% 60%); } to { clip-path: circle(80% at 50% 50%); } } @keyframes kenburnsIn { from { transform: scale(1.14); } to { transform: scale(1.02); } } .blob-show::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to top, rgba(10, 30, 18, .35), transparent 35%); } .blob-show__count { position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 5px 14px; border-radius: 99px; background: rgba(255, 255, 255, .88); color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .08em; } .blob-show__count b { color: var(--primary); font-size: .95rem; } .float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow); animation: bob 6s ease-in-out infinite; font-size: .78rem; line-height: 1.3; color: var(--muted); max-width: 260px; white-space: nowrap; } .float-card b { display: block; color: var(--ink); font-size: .86rem; } .float-card small { font-size: .74rem; } .float-card__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--c); flex: none; box-shadow: 0 8px 18px -6px var(--c); } .fc-1 { top: 16%; left: -7%; } .fc-2 { top: 46%; right: -7%; animation-delay: -2s; } .fc-3 { bottom: 12%; left: -4%; animation-delay: -4s; } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } } .blob-nav { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 3; } .blob-arrow { width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); transition: background .3s, color .3s, transform .4s var(--ease-back); } .blob-arrow:hover { background: var(--primary); color: #fff; transform: scale(1.12); } .blob-dots { display: flex; gap: 6px; } .blob-dots button { width: 26px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: var(--line); overflow: hidden; transition: width .4s var(--ease); } .blob-dots button span { display: block; height: 100%; width: 0; background: var(--grad-hot); } .blob-dots button.is-active { width: 46px; } .blob-dots button.is-active span { animation: dotFill var(--dur, 5.2s) linear forwards; } @keyframes dotFill { to { width: 100%; } } .hero__scroll { display: none; position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid var(--ink-2); border-radius: 20px; opacity: .6; } .hero__scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--primary); animation: scrollDot 1.8s ease-in-out infinite; } @keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } } /* ---- Ribbon marquee ---- */ .ribbon-wrap { position: relative; z-index: 2; overflow: hidden; margin-top: -50px; padding: 30px 0; } .ribbon { position: relative; overflow: hidden; background: var(--grad-hot); color: #fff; transform: rotate(-1.6deg); margin: 0 -20px; padding: 16px 0; box-shadow: var(--shadow); } .ribbon__track { display: flex; width: max-content; gap: 28px; align-items: center; animation: marquee 34s linear infinite; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 2vw, 1.35rem); white-space: nowrap; } .ribbon__track i { font-style: normal; color: var(--accent); animation: spin 6s linear infinite; display: inline-block; } .ribbon:hover .ribbon__track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } /* ========================================================================= 8. HOME SECTIONS ========================================================================= */ .welcome__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; } .collage { position: relative; height: clamp(420px, 44vw, 560px); } .collage figure { position: absolute; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); border: 6px solid var(--surface); } .collage img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .collage figure:hover img { transform: scale(1.08); } .collage__a { left: 0; top: 6%; width: 68%; height: 58%; z-index: 1; } .collage__b { right: 0; bottom: 0; width: 60%; height: 50%; z-index: 2; } .collage__c { right: 4%; top: 0; width: 36%; height: 34%; z-index: 0; } .collage__badge { position: absolute; left: 6%; bottom: 6%; z-index: 3; width: 128px; height: 128px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--primary); color: #fff; box-shadow: 0 16px 40px -12px var(--primary); } .collage__badge::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed var(--primary); animation: spin 20s linear infinite; } .collage__badge span { font-family: var(--font-display); font-weight: 900; font-size: 1.9rem; line-height: 1; } .collage__badge small { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; opacity: .85; } .collage__dots { position: absolute; right: -14px; top: 38%; width: 110px; height: 110px; z-index: -1; background-image: radial-gradient(var(--gold) 2px, transparent 2.5px); background-size: 16px 16px; opacity: .6; animation: bob 7s ease-in-out infinite; } .welcome__copy .title { margin-bottom: 20px; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0 24px; } .stat { background: var(--surface); border-radius: var(--radius-sm); padding: 16px 12px; text-align: center; box-shadow: var(--shadow-sm); border-top: 4px solid var(--c); transition: transform .4s var(--ease), box-shadow .4s; } .stat:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .stat b { display: block; font-family: var(--font-display); font-size: 1.55rem; font-weight: 900; color: var(--c); line-height: 1.2; } .stat span { font-size: .76rem; font-weight: 600; color: var(--muted); line-height: 1.3; display: block; } .facilities { background: var(--bg-2); overflow: hidden; } .bg-word { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 900; font-size: clamp(8rem, 22vw, 20rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--primary) 10%, transparent); pointer-events: none; white-space: nowrap; } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; } .feature { position: relative; overflow: hidden; isolation: isolate; background: var(--surface); border-radius: var(--radius); padding: 34px 28px 28px; box-shadow: var(--shadow-sm); transition: box-shadow .5s var(--ease); transform-style: preserve-3d; } .feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), transparent 55%); opacity: 0; transition: opacity .5s; } .feature::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .feature:hover { box-shadow: 0 24px 50px -18px color-mix(in srgb, var(--c) 55%, transparent); } .feature:hover::before { opacity: 1; } .feature:hover::after { transform: scaleX(1); } .feature__num { position: absolute; top: 14px; right: 20px; font-family: var(--font-display); font-weight: 900; font-size: 3.2rem; color: color-mix(in srgb, var(--c) 12%, transparent); line-height: 1; transition: color .4s, transform .6s var(--ease); } .feature:hover .feature__num { color: color-mix(in srgb, var(--c) 30%, transparent); transform: translateY(-4px); } .feature__ico { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 20px; color: #fff; background: var(--c); box-shadow: 0 14px 26px -10px var(--c); transition: transform .6s var(--ease-back), border-radius .6s; } .feature__ico .ico { width: 28px; height: 28px; } .feature:hover .feature__ico { transform: rotate(-10deg) scale(1.08); border-radius: 50%; } .feature h3 { font-size: 1.2rem; margin-bottom: 8px; } .feature p { font-size: .95rem; margin: 0; } .feature__shine { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .5), transparent 40%); opacity: 0; transition: opacity .4s; } .feature:hover .feature__shine { opacity: 1; } .mv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 22px; } @property --ang { syntax: ""; inherits: false; initial-value: 0deg; } .mv-card { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 3px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--ang), var(--primary), var(--gold), transparent 35%, transparent 55%, var(--secondary), var(--primary)) border-box; animation: angSpin 6s linear infinite, mvFloat 7s ease-in-out infinite; transition: box-shadow .6s; } .mv-card--vision { animation-delay: -3s, -3.5s; } @keyframes angSpin { to { --ang: 360deg; } } @keyframes mvFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } .mv-card:hover { box-shadow: var(--shadow-lg); } .mv-card__img { height: 230px; background-size: cover; background-position: center; clip-path: ellipse(90% 100% at 50% 0); animation: mvKen 16s ease-in-out infinite alternate; } @keyframes mvKen { from { scale: 1; } to { scale: 1.12; } } .mv-card:hover .mv-card__img { animation-play-state: paused; } .mv-card__body { position: relative; padding: 10px 32px 30px; } .mv-card__ico { position: absolute; top: -40px; right: 30px; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 6px var(--surface), var(--shadow); animation: icoBob 4s ease-in-out infinite; } .mv-card__ico::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--primary); animation: icoRing 2.4s ease-out infinite; } .mv-card--vision .mv-card__ico::after { border-color: var(--gold); } .mv-card:hover .mv-card__ico { animation: icoSpin .9s var(--ease-back); } @keyframes icoBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes icoRing { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } } @keyframes icoSpin { from { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.15); } to { transform: rotate(360deg) scale(1); } } .mv-card h3 { position: relative; display: inline-block; } .mv-card h3::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 3px; width: 100%; border-radius: 3px; background: var(--grad-hot); transform: scaleX(0); transform-origin: left; transition: transform 1s .5s var(--ease); } .mv-card.in h3::after, .mv-card:hover h3::after { transform: scaleX(1); } .js .mv-card p { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .9s var(--ease); } .js .mv-card.in p { opacity: 1; transform: none; } .js .mv-card.in p:nth-of-type(1) { transition-delay: .5s; } .js .mv-card.in p:nth-of-type(2) { transition-delay: .75s; } .mv-card__ico .ico { width: 30px; height: 30px; } .mv-card--mission .mv-card__ico { background: var(--grad-hot); } .mv-card--vision .mv-card__ico { background: var(--grad-cool); } .mv-card h3 { font-size: 1.6rem; } .mv-card--mission h3 { color: var(--primary); } .mv-card--vision h3 { color: var(--secondary); } .mv-card p { font-size: .98rem; } .journey { background: var(--dark); color: rgba(255, 255, 255, .78); overflow: hidden; } .journey::before, .journey::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; } .journey::before { width: 400px; height: 400px; background: var(--primary); top: -120px; left: -120px; } .journey::after { width: 360px; height: 360px; background: var(--secondary); bottom: -140px; right: -100px; } .timeline { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; z-index: 1; } .timeline::before { content: ""; position: absolute; top: 36px; left: 4%; right: 4%; height: 3px; background: var(--grad-rainbow); background-size: 200% 100%; animation: rainbowSlide 10s linear infinite; transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease); } .timeline.in::before { transform: scaleX(1); } .timeline__item { position: relative; text-align: center; } .timeline__year { position: relative; z-index: 1; display: inline-grid; place-items: center; min-width: 74px; height: 74px; padding: 0 12px; border-radius: 99px; background: var(--c); color: var(--dark); font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; box-shadow: 0 0 0 8px var(--dark), 0 0 0 10px color-mix(in srgb, var(--c) 40%, transparent); margin-bottom: 20px; transition: transform .5s var(--ease-back); } .timeline__item:hover .timeline__year { transform: scale(1.12) rotate(-4deg); } .timeline__card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-sm); padding: 22px 20px; transition: background .4s, transform .5s var(--ease); height: calc(100% - 94px); } .timeline__item:hover .timeline__card { background: rgba(255, 255, 255, .11); transform: translateY(-6px); } .timeline__card h3 { color: #fff; font-size: 1.1rem; margin-bottom: 8px; } .timeline__card p { font-size: .92rem; margin: 0; } .stream-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .stream { position: relative; overflow: hidden; border-radius: var(--radius); padding: 38px 30px 34px; color: rgba(255, 255, 255, .9); background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: 0 22px 44px -20px var(--c1); transform-style: preserve-3d; } .stream::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; right: -60px; top: -60px; background: rgba(255, 255, 255, .14); transition: transform .8s var(--ease); } .stream::after { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; left: -40px; bottom: -50px; border: 18px solid rgba(255, 255, 255, .1); transition: transform .8s var(--ease); } .stream:hover::before { transform: scale(1.4); } .stream:hover::after { transform: translate(20px, -10px) scale(1.2); } .stream__ico { position: relative; width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); color: #fff; margin-bottom: 22px; animation: bob 5s ease-in-out infinite; } .stream__ico .ico { width: 34px; height: 34px; } .stream h3 { position: relative; color: #fff; font-size: 1.5rem; } .stream p { position: relative; margin: 0; } .streams--tint { background: var(--bg-2); } /* ---- Moments: horizontal scroll ---- */ .moments { position: relative; overflow: hidden; padding: clamp(40px, 4.6vw, 72px) 0; background: linear-gradient(180deg, var(--bg), var(--bg-2)); } .moments__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; } .moments__head .title { margin: 0; } .moments__ctrl { display: flex; align-items: center; gap: 10px; } .moments__arrow { width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); transition: background .3s, color .3s, transform .45s var(--ease-back); } .moments__arrow:hover { background: var(--primary); color: #fff; transform: scale(1.1); } .moments__arrow.prev:hover .ico { animation: nudgeL .5s var(--ease); } .moments__arrow.next:hover .ico { animation: nudgeR .5s var(--ease); } @keyframes nudgeL { 50% { transform: translateX(-4px); } } @keyframes nudgeR { 50% { transform: translateX(4px); } } .moments__viewport { position: relative; padding: 24px 0 34px; } .moments__track { display: flex; gap: clamp(18px, 2.4vw, 34px); width: max-content; transition: transform .95s cubic-bezier(.65, 0, .25, 1); will-change: transform; } .moment { position: relative; flex: none; display: block; width: clamp(250px, 30vw, 420px); background: var(--surface); padding: 12px 12px 56px; border-radius: 12px; color: var(--ink); box-shadow: var(--shadow-sm); transform: rotate(var(--r)) scale(.84); opacity: .5; filter: saturate(.55); transition: transform .95s var(--ease), opacity .8s, filter .8s, box-shadow .8s; } .moment.is-near { transform: rotate(calc(var(--r) * .6)) scale(.92); opacity: .85; filter: saturate(.85); } .moment.is-active { transform: rotate(0) scale(1.06) translateY(-8px); opacity: 1; filter: none; box-shadow: 0 34px 70px -24px rgba(20, 45, 30, .45); z-index: 2; } .moment:hover { color: var(--ink); } .moment__frame { position: relative; display: block; overflow: hidden; border-radius: 6px; } .moment__frame::after { content: ""; position: absolute; inset: -10%; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%); transform: translateX(-130%); } .moment.is-active .moment__frame::after { animation: momentShine 1.1s .45s var(--ease) both; } @keyframes momentShine { to { transform: translateX(130%); } } .moment img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transform: scale(1.12); transition: transform 3.4s ease-out, filter .6s; } .moment.is-active img { transform: scale(1); } .moment__cap { position: absolute; left: 16px; right: 16px; bottom: 16px; font-family: var(--font-display); font-style: italic; font-size: 1.02rem; text-align: center; opacity: .35; transform: translateY(8px); transition: opacity .6s, transform .7s var(--ease); } .moment.is-active .moment__cap { opacity: 1; transform: none; transition-delay: .35s; color: var(--primary-2); } .moment__zoom { position: absolute; top: 24px; right: 24px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--primary); opacity: 0; transform: scale(.4) rotate(-90deg); transition: opacity .4s, transform .6s var(--ease-back); } .moment.is-active .moment__zoom { opacity: 1; transform: none; transition-delay: .5s; } .moment.is-active:hover img { transform: scale(1.06); filter: saturate(1.2); } .moments__dots { display: flex; justify-content: center; gap: 8px; } .moments__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--primary) 22%, transparent); transition: width .5s var(--ease), background .4s; } .moments__dots button.is-active { width: 34px; background: var(--primary); } /* ---- Values orbit ---- */ .values__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; } .values__orbit { display: grid; place-items: center; } .orbit { --size: min(440px, 80vw); position: relative; width: var(--size); height: var(--size); border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--primary) 30%, transparent); animation: spin 50s linear infinite; } .orbit::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--secondary) 18%, transparent); } .orbit__core { position: absolute; left: 29%; top: 29%; width: 42%; height: 42%; border-radius: 50%; box-shadow: 0 0 0 12px var(--surface), 0 0 60px 10px color-mix(in srgb, var(--gold) 40%, transparent); animation: spin 50s linear infinite reverse; background: #fff; } .orbit__dot { --a: calc(360deg / var(--t) * var(--n)); position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px; border-radius: 50%; display: grid; place-items: center; color: #fff; transform: rotate(var(--a)) translate(calc(var(--size) / 2)) rotate(calc(-1 * var(--a))); box-shadow: var(--shadow); } .orbit__dot .ico { width: 26px; height: 26px; animation: spin 50s linear infinite reverse; } .orbit__dot:nth-child(2) { background: #E08A00; } .orbit__dot:nth-child(3) { background: #1B5FAE; } .orbit__dot:nth-child(4) { background: #D6336C; } .orbit__dot:nth-child(5) { background: #0E9F8E; } .orbit__dot:nth-child(6) { background: #7C3AED; } .orbit__dot:nth-child(7) { background: #B20000; } .orbit__dot:nth-child(8) { background: #2F9E44; } .value-list { list-style: none; display: grid; gap: 10px; margin-top: 10px; } .value-list li { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; background: var(--surface); border-radius: 99px; box-shadow: var(--shadow-sm); font-weight: 600; color: var(--ink); transition: transform .4s var(--ease), box-shadow .4s; } .value-list li:hover { transform: translateX(10px); box-shadow: var(--shadow); } .value-list__ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; background: var(--primary); } .value-list li:nth-child(1) .value-list__ico { background: #E08A00; } .value-list li:nth-child(2) .value-list__ico { background: #1B5FAE; } .value-list li:nth-child(3) .value-list__ico { background: #D6336C; } .value-list li:nth-child(4) .value-list__ico { background: #0E9F8E; } .value-list li:nth-child(5) .value-list__ico { background: #7C3AED; } .value-list li:nth-child(6) .value-list__ico { background: #B20000; } .value-list li:nth-child(7) .value-list__ico { background: #2F9E44; } /* ---- Quote ---- */ .quote { padding-top: 16px; } .quote__inner { position: relative; max-width: 940px; text-align: center; padding: clamp(40px, 6vw, 70px) clamp(24px, 5vw, 70px); border-radius: 36px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 40%, var(--surface))); box-shadow: var(--shadow); overflow: hidden; } .quote__inner::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; right: -100px; bottom: -120px; background: color-mix(in srgb, var(--gold) 25%, transparent); } .quote__mark { display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--primary); color: #fff; margin-bottom: 18px; animation: bob 5s ease-in-out infinite; } .quote__mark .ico { width: 30px; height: 30px; fill: currentColor; stroke: none; } .quote blockquote { margin: 0 0 20px; position: relative; } .quote blockquote p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--ink); line-height: 1.45; } .quote footer b { display: block; color: var(--primary); font-size: 1.05rem; } .quote footer span { font-size: .9rem; color: var(--muted); } /* ---- CTA ---- */ .cta { padding: 0 0 clamp(40px, 5vw, 72px); } .mission-band + .cta, .journey + .cta, .streams--tint + .cta { padding-top: clamp(36px, 4.6vw, 60px); } .cta__box { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; padding: clamp(34px, 5vw, 64px); border-radius: 36px; background: var(--dark); color: rgba(255, 255, 255, .8); box-shadow: var(--shadow-lg); } .cta__blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .6; animation: drift 12s ease-in-out infinite alternate; } .cta__blob.b1 { width: 340px; height: 340px; background: var(--primary); top: -120px; left: -60px; } .cta__blob.b2 { width: 300px; height: 300px; background: var(--secondary); bottom: -140px; right: 10%; animation-delay: -6s; } .cta__copy h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); } .cta__copy p { margin: 0; } .cta__actions { display: grid; gap: 12px; } .cta-tile { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #fff; transition: background .4s, transform .5s var(--ease), border-color .4s; } .cta-tile > span:nth-child(2) { flex: 1; line-height: 1.35; } .cta-tile b { display: block; } .cta-tile small { color: rgba(255, 255, 255, .6); font-size: .8rem; } .cta-tile > .ico { opacity: .6; transition: transform .4s var(--ease), opacity .3s; } .cta-tile__ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-hot); flex: none; } .cta-tile:nth-child(2) .cta-tile__ico { background: var(--grad-cool); } .cta-tile:nth-child(3) .cta-tile__ico { background: linear-gradient(135deg, #2F9E44, #0E9F8E); } .cta-tile:hover { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); transform: translateX(8px); } .cta-tile:hover > .ico { opacity: 1; transform: translateX(4px); } /* ========================================================================= 9. FOOTER ========================================================================= */ .footer { position: relative; margin-top: 10px; color: rgba(255, 255, 255, .7); font-size: .94rem; } .footer__waves { display: block; width: 100%; height: 110px; margin-bottom: -2px; } .footer__waves { overflow: hidden; } .footer__waves path { transform-box: fill-box; transform-origin: 50% 50%; } .footer__waves .w1 { fill: color-mix(in srgb, var(--gold) 55%, transparent); animation: wave 9s ease-in-out infinite alternate; } .footer__waves .w2 { fill: color-mix(in srgb, var(--primary) 70%, transparent); animation: wave 7s ease-in-out infinite alternate-reverse; } .footer__waves .w3 { fill: var(--dark-2); } @keyframes wave { from { transform: translateX(-3%) scaleX(1.1); } to { transform: translateX(3%) scaleX(1.1); } } .footer__body { background: var(--dark-2); padding: 30px 0 0; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 36px; padding-bottom: 40px; } .footer h3 { color: #fff; font-family: var(--font-body); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; position: relative; padding-bottom: 12px; } .footer h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 3px; background: var(--grad-hot); } .footer__logo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .footer__logo img { width: 72px; height: 72px; border-radius: 50%; background: #fff; padding: 3px; animation: bob 6s ease-in-out infinite; } .footer__logo b { display: block; font-family: var(--font-display); color: #fff; font-size: 1.3rem; } .footer__logo span { font-size: .78rem; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; } .footer__motto { color: var(--accent); font-family: var(--font-display); font-style: italic; } .footer__motto .ico { color: #FFA94D; } .footer__social { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; transition: background .3s, transform .4s var(--ease-back); } .footer__social:hover { background: #1877F2; color: #fff; transform: translateY(-4px) rotate(-8deg); } .footer__links { list-style: none; } .footer__links li { margin-bottom: 8px; } .footer__links a { color: rgba(255, 255, 255, .72); display: inline-flex; align-items: center; gap: 6px; transition: color .3s, transform .35s var(--ease); } .footer__links a .ico { width: 14px; height: 14px; color: var(--gold); transition: transform .35s var(--ease); } .footer__links a:hover { color: #fff; transform: translateX(5px); } .footer__codes { margin-top: 16px; font-size: .85rem; } .footer__codes b { color: #fff; } .footer__contact { list-style: none; } .footer__contact li { display: flex; gap: 12px; margin-bottom: 14px; line-height: 1.55; } .footer__contact .ico { color: var(--gold); margin-top: 4px; } .footer__contact a { color: rgba(255, 255, 255, .8); word-break: break-word; } .footer__contact a:hover { color: #fff; } .footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .84rem; } .footer__bottom p { margin: 0; } .footer__bottom a { color: var(--accent); } /* ========================================================================= 10. INNER PAGES ========================================================================= */ .page-hero { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(320px, 50vh, 500px); display: flex; align-items: center; padding: 70px 0 110px; color: #fff; } .page-hero__bg { position: absolute; inset: 0; z-index: -3; background-size: cover; background-repeat: no-repeat; animation: kenburns 24s ease-in-out infinite alternate; } @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } } .page-hero__shade { position: absolute; inset: 0; z-index: -2; background: rgba(15, 30, 20, .30); } .page-hero__orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); animation: bob 8s ease-in-out infinite; } .page-hero__orb.o1 { width: 70px; height: 70px; right: 10%; top: 16%; background: var(--gold); opacity: .55; } .page-hero__orb.o2 { width: 40px; height: 40px; right: 30%; bottom: 30%; background: var(--primary); opacity: .8; animation-delay: -3s; } .page-hero__orb.o3 { width: 150px; height: 150px; right: -40px; bottom: 10%; border: 16px solid rgba(255, 255, 255, .14); animation-delay: -5s; } .page-hero__inner { position: relative; } .page-hero .kicker { color: var(--accent); background: rgba(255, 255, 255, .12); } .page-hero__title { color: #fff; font-size: clamp(2.2rem, 5.4vw, 4rem); font-weight: 900; max-width: 900px; text-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 6px 26px rgba(0, 0, 0, .55); } .crumbs { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .9rem; padding: 8px 18px; border-radius: 99px; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fadeUp .8s .5s var(--ease) both; } .crumbs a { color: var(--accent); } .crumbs a:hover { color: #fff; } .crumbs span[aria-hidden] { opacity: .5; } .page-hero__wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 90px; } .page-hero__wave path { fill: var(--bg); } .split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; } .split--reverse { grid-template-columns: 1.1fr .9fr; } .frame-img { position: relative; } .frame-img img { position: relative; z-index: 1; width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 6px solid var(--surface); } .frame-img--tall img { max-height: 620px; object-fit: cover; } .frame-img__deco { position: absolute; border-radius: var(--radius); z-index: 0; } .frame-img__deco.d1 { inset: 24px -24px -24px 24px; background: var(--grad-hot); opacity: .9; } .frame-img__deco.d2 { width: 120px; height: 120px; left: -40px; top: -40px; border-radius: 50%; background-image: radial-gradient(var(--secondary) 2px, transparent 2.5px); background-size: 14px 14px; animation: bob 6s ease-in-out infinite; } @keyframes decoTilt { from { transform: rotate(0); } to { transform: rotate(3deg) translate(6px, -6px); } } .value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .value-card { position: relative; overflow: hidden; background: var(--surface); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm); transition: box-shadow .5s; transform-style: preserve-3d; } .value-card::before { content: ""; position: absolute; inset: auto -40% -60% auto; width: 180px; height: 180px; border-radius: 50%; background: color-mix(in srgb, var(--c) 12%, transparent); transition: transform .8s var(--ease); } .value-card:hover { box-shadow: 0 20px 40px -18px var(--c); } .value-card:hover::before { transform: scale(2.2); } .value-card__ico { position: relative; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--c); color: #fff; margin-bottom: 16px; transition: transform .6s var(--ease-back); } .value-card:hover .value-card__ico { transform: rotate(360deg); } .value-card__num { position: absolute; top: 18px; right: 20px; font-weight: 800; color: color-mix(in srgb, var(--c) 45%, transparent); } .value-card h3 { position: relative; font-size: 1.08rem; margin: 0; } .big-points { display: grid; gap: 16px; margin-top: 10px; } .big-point { position: relative; overflow: hidden; display: flex; gap: 18px; align-items: flex-start; background: var(--surface); padding: 22px; border-radius: var(--radius); box-shadow: var(--shadow-sm); border-left: 5px solid var(--c); transition: transform .5s var(--ease), box-shadow .5s; } .big-point::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--c) 14%, transparent) 50%, transparent 65%); transform: translateX(-120%); animation: sweep 5s ease-in-out infinite; pointer-events: none; } .big-point:nth-child(2)::after { animation-delay: 2.5s; } @keyframes sweep { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } .big-point:hover { transform: translateX(8px); box-shadow: var(--shadow); } .big-point p { margin: 0; color: var(--ink); font-size: 1.04rem; } .big-point__ico { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; flex: none; animation: icoBob 4s ease-in-out infinite; } .mission-band { background: color-mix(in srgb, var(--accent) 45%, var(--bg)); overflow: hidden; } .mission-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 64px); align-items: start; } .mission-layout > * { min-width: 0; } .mission-photos { position: sticky; top: calc(var(--nav-h) + 30px); height: clamp(420px, 40vw, 540px); } .mission-photos figure { position: absolute; margin: 0; border-radius: var(--radius); overflow: hidden; border: 6px solid var(--surface); box-shadow: var(--shadow-lg); } .mission-photos img { width: 100%; height: 100%; object-fit: cover; } .mission-photos__main { left: 0; top: 0; width: 82%; height: 72%; } .mission-photos__small { right: 0; bottom: 0; width: 56%; height: 46%; } .mission-photos__badge { position: absolute; left: 4%; bottom: 6%; z-index: 2; display: flex; align-items: center; gap: 10px; max-width: 230px; padding: 12px 16px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); font-weight: 600; font-size: .86rem; line-height: 1.35; animation: bob 6s ease-in-out infinite; } .mission-photos__badge .ico { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--primary); color: #fff; } .mission-photos__badge b { color: var(--primary); font-size: 1.1rem; } .mission-grid { display: grid; grid-template-columns: 1fr; gap: 16px; position: relative; } .mission-card { position: relative; padding: 26px 70px 24px 84px; border-radius: var(--radius); background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transform-style: preserve-3d; transition: box-shadow .5s, border-color .5s; } .mission-card::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 4px; border-radius: 0 4px 4px 0; background: var(--primary); transform: scaleY(.35); transform-origin: top; transition: transform .6s var(--ease); } .mission-card:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 30%, transparent); } .mission-card:hover::before { transform: scaleY(1); } .mission-card__num { position: absolute; top: 16px; right: 22px; font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; color: color-mix(in srgb, var(--primary) 14%, transparent); transition: color .4s; } .mission-card:hover .mission-card__num { color: color-mix(in srgb, var(--primary) 30%, transparent); } .mission-card__ico { position: absolute; left: 24px; top: 28px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); transition: background .4s, color .4s, transform .5s var(--ease-back); } .mission-card:hover .mission-card__ico { background: var(--primary); color: #fff; transform: rotate(-8deg); } .mission-card p { margin: 0; color: var(--ink); line-height: 1.7; } .fact-list { list-style: none; display: grid; gap: 12px; margin-top: 22px; } .fact-list li { display: flex; gap: 16px; align-items: center; background: var(--surface); border-radius: var(--radius-sm); padding: 14px 18px 14px 14px; box-shadow: var(--shadow-sm); transition: transform .45s var(--ease), box-shadow .45s; } .fact-list li:hover { transform: translateX(8px); box-shadow: 0 12px 30px -14px var(--c); } .fact-list b { color: var(--c); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; } .fact-list p { margin: 0; color: var(--ink); line-height: 1.5; } .fact-list__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c); flex: none; } .photo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .photo-tile, .bento__item { position: relative; overflow: hidden; border-radius: var(--radius-sm); box-shadow: var(--shadow); display: block; } .photo-tile img, .bento__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 1s var(--ease), filter .6s; } .photo-tile span, .bento__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; color: #fff; font-weight: 700; font-size: .92rem; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); transform: translateY(8px); opacity: .9; transition: transform .5s var(--ease), opacity .5s; } .photo-tile:hover img, .bento__item:hover img { transform: scale(1.1) rotate(1deg); } .photo-tile:hover span, .bento__item:hover .bento__cap { transform: none; opacity: 1; } .panorama { position: relative; overflow: hidden; border-radius: 30px; box-shadow: var(--shadow-lg); } .panorama img { width: 100%; height: clamp(220px, 36vw, 440px); object-fit: cover; } .panorama__label { position: absolute; left: 24px; bottom: 24px; display: inline-flex; gap: 10px; align-items: center; padding: 12px 20px; border-radius: 99px; background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font-weight: 700; box-shadow: var(--shadow); } .panorama__label .ico { color: var(--primary); } .facility-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .facility { position: relative; overflow: hidden; display: flex; gap: 16px; align-items: center; padding: 22px 22px 22px 20px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow .5s; transform-style: preserve-3d; } .facility::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); transform: scaleY(.3); transition: transform .5s var(--ease); } .facility:hover { box-shadow: 0 18px 40px -18px var(--c); } .facility:hover::after { transform: scaleY(1); } .facility__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, var(--surface)); color: var(--c); flex: none; transition: background .4s, color .4s, transform .6s var(--ease-back); } .facility__ico .ico { width: 26px; height: 26px; } .facility:hover .facility__ico { background: var(--c); color: #fff; transform: scale(1.1) rotate(-8deg); } .facility p { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.45; } .facility__num { position: absolute; right: 14px; top: 8px; font-size: .75rem; font-weight: 800; color: color-mix(in srgb, var(--c) 45%, transparent); } .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px; } .bento__item img { aspect-ratio: auto; } .bento__item:nth-child(1) { grid-column: span 2; grid-row: span 2; } .bento__item:nth-child(6) { grid-column: span 2; } .trophy-stack { position: relative; height: 440px; } .trophy-stack figure { position: absolute; margin: 0; border-radius: var(--radius); overflow: hidden; border: 6px solid var(--surface); box-shadow: var(--shadow-lg); } .trophy-stack img { width: 100%; height: 100%; object-fit: cover; } .trophy-stack__a { width: 78%; height: 72%; top: 0; right: 0; transform: rotate(3deg); animation: bob 7s ease-in-out infinite; } .trophy-stack__b { width: 56%; height: 50%; left: 0; bottom: 0; transform: rotate(-4deg); animation: bob 7s -3s ease-in-out infinite; } .trophy-stack__star { position: absolute; z-index: 2; display: grid; place-items: center; border-radius: 50%; color: #fff; box-shadow: var(--shadow); animation: bob 5s ease-in-out infinite; } .trophy-stack__star.s1 { width: 60px; height: 60px; background: var(--gold); left: 8%; top: 8%; } .trophy-stack__star.s2 { width: 48px; height: 48px; background: var(--primary); right: 4%; bottom: 14%; animation-delay: -2s; } .trophy-stack__star.s3 { width: 70px; height: 70px; background: var(--secondary); left: 46%; top: 60%; animation-delay: -4s; } .trophy-stack__star .ico { width: 50%; height: 50%; } .soon { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 700; color: var(--ink); } .soon__pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); animation: ping 1.8s infinite; box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 70%, transparent); } .achieve-list { list-style: none; display: grid; gap: 18px; max-width: 900px; margin: 0 auto; } .achieve { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: start; } .achieve__year { text-align: center; padding: 12px; border-radius: 16px; background: var(--c); color: #fff; font-weight: 800; } .achieve__body { position: relative; background: var(--surface); border-radius: var(--radius); padding: 22px 24px 22px 78px; box-shadow: var(--shadow-sm); } .achieve__ico { position: absolute; left: 20px; top: 22px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface)); } .achieve__body h3 { font-size: 1.1rem; margin-bottom: 4px; } .achieve__body p { margin: 0; } /* ---- Albums ---- */ .album-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .album { display: block; background: var(--surface); border-radius: 30px; padding: 26px; box-shadow: var(--shadow); color: var(--ink); transition: transform .6s var(--ease), box-shadow .6s; } .album:hover { color: var(--ink); transform: translateY(-8px); box-shadow: 0 30px 60px -24px var(--c); } .album__stack { position: relative; height: clamp(230px, 28vw, 330px); margin-bottom: 22px; } .album__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; border: 5px solid var(--surface); box-shadow: var(--shadow); transition: transform .8s var(--ease-back); } .album__photo.p0 { transform: rotate(-5deg) scale(.9); } .album__photo.p1 { transform: rotate(4deg) scale(.94); } .album:hover .album__photo.p0 { transform: translateX(-16%) rotate(-12deg) scale(.86); } .album:hover .album__photo.p1 { transform: translateX(16%) rotate(10deg) scale(.88); } .album:hover .album__photo.p2 { transform: scale(1.02); } .album__count { display: inline-block; padding: 4px 12px; border-radius: 99px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c); font-weight: 700; font-size: .8rem; margin-bottom: 8px; } .album h3 { font-size: 1.5rem; margin-bottom: 4px; } .album p { color: var(--muted); margin-bottom: 12px; } .album__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--c); } .album__go .ico { transition: transform .4s var(--ease); } .album:hover .album__go .ico { transform: translateX(6px); } /* ---- Filters & masonry ---- */ .filters { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 auto 34px; padding: 6px; width: fit-content; max-width: 100%; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow-sm); } .filter { position: relative; z-index: 1; border: 0; background: none; padding: 10px 18px; border-radius: 99px; font-weight: 700; font-size: .88rem; color: var(--ink-2); transition: color .35s; } .filter.is-active { color: #fff; } .filters__blob { position: absolute; z-index: 0; top: 0; left: 0; border-radius: 99px; background: var(--grad-hot); box-shadow: 0 8px 20px -8px var(--primary); transition: transform .5s var(--ease), width .5s var(--ease), height .5s var(--ease); } .masonry { columns: 4 240px; column-gap: 16px; } .masonry__item { position: relative; display: block; margin-bottom: 16px; break-inside: avoid; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--bg-2); transform: translateY(30px) scale(.96); opacity: 0; transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms), box-shadow .4s; } .masonry__item.in { opacity: 1; transform: none; } .masonry__item img { width: 100%; transition: transform 1s var(--ease); } .masonry__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .55)); opacity: 0; transition: opacity .4s; } .masonry__item:hover { box-shadow: var(--shadow-lg); } .masonry__item:hover img { transform: scale(1.08); } .masonry__item:hover::after { opacity: 1; } .masonry__tag { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: .74rem; font-weight: 700; transform: translateY(12px); opacity: 0; transition: transform .45s var(--ease), opacity .4s; } .masonry__zoom { position: absolute; z-index: 1; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; transform: scale(0) rotate(-90deg); transition: transform .5s var(--ease-back); } .masonry__item:hover .masonry__tag { transform: none; opacity: 1; } .masonry__item:hover .masonry__zoom { transform: scale(1) rotate(0); } .masonry__item.is-hidden { display: none; } .masonry__item.pop { animation: popIn .6s var(--ease-back) both; animation-delay: var(--pd, 0ms); } @keyframes popIn { from { opacity: 0; transform: scale(.8) translateY(20px); } to { opacity: 1; transform: none; } } /* ---- Lightbox ---- */ .lightbox { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; background: rgba(18, 18, 22, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s; touch-action: pan-y; } .lightbox[hidden] { display: none; } .lightbox.is-open { opacity: 1; } .lightbox__stage { max-width: min(92vw, 1400px); max-height: 86vh; text-align: center; } .lightbox__img { max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); transform: scale(.92); opacity: 0; transition: transform .5s var(--ease), opacity .4s; } .lightbox__img.is-ready { transform: none; opacity: 1; } .lightbox__img.slide-l { animation: lbL .45s var(--ease); } .lightbox__img.slide-r { animation: lbR .45s var(--ease); } @keyframes lbL { from { transform: translateX(-60px); opacity: 0; } } @keyframes lbR { from { transform: translateX(60px); opacity: 0; } } .lightbox__caption { color: #fff; margin: 14px 0 0; font-family: var(--font-display); font-style: italic; } .lightbox__btn { position: absolute; width: 54px; height: 54px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .12); transition: background .3s, transform .4s var(--ease-back); } .lightbox__btn:hover { background: var(--primary); transform: scale(1.1); } .lightbox__btn .ico { width: 24px; height: 24px; } .lightbox__close { top: 20px; right: 20px; } .lightbox__prev { left: 20px; top: 50%; margin-top: -27px; } .lightbox__next { right: 20px; top: 50%; margin-top: -27px; } .lightbox__count { position: absolute; top: 32px; left: 28px; color: rgba(255, 255, 255, .7); font-weight: 700; font-size: .9rem; letter-spacing: .1em; } /* ---- Letter (Principal's speech) ---- */ .tricolor { display: flex; height: 8px; } .tricolor span { flex: 1; transform: scaleX(0); animation: grow 1.2s var(--ease) forwards; } .tricolor span:nth-child(1) { background: #FF9933; transform-origin: left; } .tricolor span:nth-child(2) { background: #fff; animation-delay: .2s; } .tricolor span:nth-child(3) { background: #138808; transform-origin: right; animation-delay: .4s; } @keyframes grow { to { transform: scaleX(1); } } .letter { position: relative; max-width: 900px; margin: 0 auto; padding: clamp(30px, 5vw, 60px); border-radius: 30px; background: var(--surface); box-shadow: var(--shadow-lg); border-top: 8px solid #FF9933; border-bottom: 8px solid #138808; } .letter .title { font-size: clamp(1.3rem, 2.4vw, 1.8rem); } .letter__flag { position: absolute; top: -34px; right: 34px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #000080; color: #fff; box-shadow: var(--shadow); animation: bob 5s ease-in-out infinite; } .letter__flag .ico { width: 28px; height: 28px; } .letter__highlight { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--primary); padding: 16px 22px; border-left: 5px solid var(--gold); background: color-mix(in srgb, var(--accent) 50%, var(--surface)); border-radius: 0 14px 14px 0; } .letter__sign { margin: 0; color: var(--ink); } /* ---- Contact ---- */ .contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -120px; position: relative; z-index: 2; margin-bottom: clamp(34px, 4.6vw, 60px); } .contact-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 28px 26px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--muted); transition: box-shadow .5s; transform-style: preserve-3d; line-height: 1.5; font-size: .9rem; } .contact-card::before { content: ""; position: absolute; right: -50px; top: -50px; width: 160px; height: 160px; border-radius: 50%; background: color-mix(in srgb, var(--c) 10%, transparent); transition: transform .8s var(--ease); } .contact-card:hover { color: var(--muted); box-shadow: 0 26px 50px -20px var(--c); } .contact-card:hover::before { transform: scale(2.4); } .contact-card__ico { position: relative; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--c); color: #fff; margin-bottom: 12px; box-shadow: 0 12px 24px -10px var(--c); animation: bob 6s ease-in-out infinite; } .contact-card__ico .ico { width: 26px; height: 26px; } .contact-card small { position: relative; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .72rem; color: var(--c); } .contact-card b { position: relative; font-size: 1.12rem; color: var(--ink); } .contact-card span { position: relative; } .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 60px); align-items: start; } .contact-aside__img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 26px; } .contact-aside__img img { width: 100%; transition: transform 1.2s var(--ease); } .contact-aside__img:hover img { transform: scale(1.06); } .contact-lines { list-style: none; } .contact-lines li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--line); line-height: 1.6; } .contact-lines .ico { color: var(--primary); margin-top: 4px; } .contact-lines a { word-break: break-word; } .contact-form-wrap { position: relative; background: var(--surface); border-radius: 30px; padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-lg); } .contact-form-wrap::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--grad-rainbow); background-size: 200% 100%; animation: rainbowSlide 8s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .7; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { position: relative; margin-bottom: 18px; } .field input, .field textarea, .captcha-input { width: 100%; padding: 22px 16px 8px; border: 2px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; transition: border-color .3s, box-shadow .3s, background .3s; } .field textarea { resize: vertical; min-height: 140px; } .field label { position: absolute; left: 18px; top: 16px; color: var(--muted); font-weight: 600; font-size: .98rem; pointer-events: none; transition: transform .3s var(--ease), color .3s, font-size .3s; transform-origin: left top; } .field input:focus, .field textarea:focus, .captcha-input:focus { outline: none; border-color: var(--secondary); background: var(--surface); box-shadow: 0 0 0 5px color-mix(in srgb, var(--secondary) 15%, transparent); } .field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.76); color: var(--secondary); } .field.is-invalid input, .field.is-invalid textarea { border-color: var(--primary); } .field.is-valid input, .field.is-valid textarea { border-color: #2F9E44; } .field__count { position: absolute; right: 14px; bottom: 10px; font-size: .74rem; color: var(--muted); } .required { color: var(--primary); } .captcha-label { display: block; font-weight: 700; color: var(--ink); margin: 4px 0 8px; } .captcha-box { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .captcha-img { border: 2px solid var(--line); border-radius: 12px; background: #FBF7ED; display: block; } .captcha-reload { width: 50px; height: 50px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 12px; font-size: 20px; line-height: 1; transition: transform .6s var(--ease), background .3s; } .captcha-reload:hover { background: var(--accent); transform: rotate(-360deg); } .captcha-input { max-width: 180px; padding: 13px 16px; text-transform: uppercase; letter-spacing: 3px; font-weight: 800; } .captcha-input::placeholder { text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--muted); } .form-note { font-size: .84rem; color: var(--muted); margin-bottom: 20px; } .form-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: .8rem; color: var(--muted); } .form-secure .ico { color: #2F9E44; } .alert { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; margin-bottom: 20px; font-weight: 600; animation: shakeIn .6s var(--ease); } .alert--ok { background: #EBFBEE; color: #2B8A3E; border: 1px solid #B2F2BB; } .alert--err { background: #FFF5F5; color: #C92A2A; border: 1px solid #FFC9C9; } .alert ul { padding-left: 18px; margin: 0; } @keyframes shakeIn { 0% { opacity: 0; transform: translateY(-10px); } 60% { transform: translateX(4px); } 80% { transform: translateX(-3px); } 100% { opacity: 1; transform: none; } } .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .map-section { padding-bottom: clamp(36px, 5vw, 60px); } .map-frame { position: relative; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-lg); border: 6px solid var(--surface); height: clamp(360px, 50vw, 520px); background: var(--bg-2); } .map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(1.1); } .map-frame__card { position: absolute; left: 20px; bottom: 20px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; max-width: min(460px, calc(100% - 40px)); padding: 16px 18px; border-radius: 20px; background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow); font-size: .85rem; line-height: 1.5; color: var(--muted); } .map-frame__card b { display: block; color: var(--ink); font-size: 1rem; } .map-frame__card > div { flex: 1; min-width: 180px; } .map-frame__pin { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; flex: none; animation: pinBounce 2s ease-in-out infinite; } @keyframes pinBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ---- Terms ---- */ .terms { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; } .terms__toc { position: sticky; top: calc(var(--nav-h) + 24px); background: var(--surface); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); } .terms__toc ol { list-style: none; counter-reset: toc; } .terms__toc li { counter-increment: toc; } .terms__toc a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: .9rem; transition: background .3s, color .3s, transform .3s var(--ease); } .terms__toc a::before { content: counter(toc, decimal-leading-zero); color: var(--primary); font-weight: 800; font-size: .78rem; margin-top: 2px; } .terms__toc a:hover, .terms__toc a.is-current { background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary); transform: translateX(4px); } .terms__body { display: grid; gap: 20px; } .term { background: var(--surface); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-sm); border-left: 5px solid var(--c); } .term h2 { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; } .term h2 .ico { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, var(--c) 13%, var(--surface)); color: var(--c); } .term ul { list-style: none; display: grid; gap: 10px; } .term li { position: relative; padding-left: 26px; } .term li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 9px; height: 9px; border-radius: 50%; background: var(--c); } .term p:last-child, .term ul:last-child { margin-bottom: 0; } .table-wrap { overflow-x: auto; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); } .fee-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: .95rem; } .fee-table th { background: var(--dark); color: #fff; text-align: left; padding: 14px 16px; font-weight: 700; } .fee-table td { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--ink); } .fee-table tbody tr { transition: background .3s; } .fee-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg) 70%, transparent); } .fee-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 60%, transparent); } .fee-table td:first-child { font-weight: 800; color: var(--primary); width: 60px; } /* ---- 404 ---- */ .notfound__inner { text-align: center; max-width: 720px; } .notfound__code { display: flex; justify-content: center; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 900; font-size: clamp(6rem, 18vw, 11rem); line-height: 1; margin-bottom: 20px; } .notfound__code > span:not(.notfound__zero) { background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent; animation: bob 4s ease-in-out infinite; } .notfound__code > span:last-child { animation-delay: -2s; } .notfound__zero img { width: clamp(100px, 16vw, 160px); height: auto; border-radius: 50%; animation: spin 14s linear infinite; } .notfound__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 10px 0 30px; } /* ---- Back to top ---- */ .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 130; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--dark); box-shadow: var(--shadow); opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity .4s, transform .5s var(--ease-back), background .3s; } .to-top.is-on { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { color: #fff; background: var(--primary); } .to-top:hover > .ico { animation: bounceUp .6s var(--ease); } .to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .to-top__ring circle { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: 132; } @keyframes bounceUp { 50% { transform: translateY(-5px); } } /* ========================================================================= 10b. PHOTO EFFECTS - hover shine, light spot, colour wash + scroll wipe-in ========================================================================= */ .fx-photo { position: relative; overflow: hidden; isolation: isolate; } .fx-photo::before { content: ""; position: absolute; inset: -10%; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); transform: translateX(-130%); transition: transform 1s var(--ease); } .fx-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .3), transparent 45%), linear-gradient(to top, color-mix(in srgb, var(--dark) 70%, transparent), transparent 55%); opacity: 0; transition: opacity .6s var(--ease); } .fx-photo img { transition: transform 1.3s var(--ease), filter .7s var(--ease); } .fx-photo:hover::before { transform: translateX(130%); } .fx-photo:hover::after { opacity: 1; } .fx-photo:hover img { transform: scale(1.14) rotate(-1.5deg); filter: saturate(1.25) contrast(1.05) brightness(1.04); } .fx-photo > span, .fx-photo > .panorama__label { z-index: 3; } .fx-photo .fx-ico { position: absolute; z-index: 3; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; transform: scale(0) rotate(-120deg); transition: transform .55s var(--ease-back); pointer-events: none; } .fx-photo:hover .fx-ico { transform: scale(1) rotate(0); } /* Scroll wipe-in: the frame opens like a window while the photo settles. */ .js .img-wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease) var(--wd, 0s); } .js .img-wipe img { transform: scale(1.35); transition: transform 1.6s var(--ease) var(--wd, 0s), filter .7s var(--ease); } .js .img-wipe.wipe-side { clip-path: inset(0 100% 0 0); } .js .img-wipe.wiped { clip-path: inset(0 0 0 0); } .js .img-wipe.wiped img { transform: none; } .js .img-wipe.wiped.fx-photo:hover img { transform: scale(1.14) rotate(-1.5deg); transition-delay: 0s; } /* Framed feature photos (about / vision / curriculum): lift in 3D on hover. */ .frame-img img { transition: transform .9s var(--ease), box-shadow .9s var(--ease); } .frame-img:hover img { transform: perspective(1000px) rotateY(-7deg) rotateX(3deg) translateY(-6px) scale(1.02); box-shadow: 30px 40px 70px -30px rgba(20, 40, 25, .5); } .frame-img__deco.d1 { transition: transform .9s var(--ease); } .frame-img:hover .frame-img__deco.d1 { transform: translate(14px, 10px) rotate(4deg); } .mv-card__img { position: relative; } .mv-card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-130%); transition: transform 1s var(--ease); } .mv-card:hover .mv-card__img::after { transform: translateX(130%); } .album:hover .album__photo { filter: saturate(1.2); } /* ========================================================================= 11. REVEAL SYSTEM (only once JS has marked ) ========================================================================= */ .js [data-anim] { opacity: 0; transition: opacity .9s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s), filter .9s var(--ease) var(--d, 0s); } .js [data-anim="up"] { transform: translateY(40px); } .js [data-anim="left"] { transform: translateX(-60px); } .js [data-anim="right"] { transform: translateX(60px); } .js [data-anim="zoom"] { transform: scale(.88); filter: blur(6px); } .js [data-anim="stagger"] { opacity: 1; } .js [data-anim].in { opacity: 1; transform: none; filter: none; } .js .stagger > * { opacity: 0; transform: translateY(36px) scale(.96); transition: opacity .8s var(--ease), transform .9s var(--ease), box-shadow .5s, background .4s, border-color .4s; transition-delay: calc(var(--si, 0) * 90ms + var(--d, 0s)); } .js .stagger.in > * { opacity: 1; transform: none; } .js .stagger.in > *.tilt-live { transition-delay: 0s; } [data-split] .word { display: inline-block; white-space: nowrap; } .js [data-split] .char { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(8deg) scale(.9); transform-origin: 0 100%; transition: opacity .6s var(--ease), transform .8s var(--ease-back); transition-delay: calc(var(--ci) * 22ms + var(--d, 0s)); } .js [data-split].in .char { opacity: 1; transform: none; } .tilt { will-change: transform; } /* ========================================================================= 12. RESPONSIVE ========================================================================= */ @media (max-width: 1279.98px) { .navlist, .brandbar__chips { display: none; } .burger { display: block; } .mainnav__mark { max-width: 280px; opacity: 1; transform: none; } .menu-open .mainnav { z-index: 160; background: var(--dark-2); } .brandbar { display: none; } } @media (min-width: 1280px) { .mobile-menu { display: none; } } @media (max-width: 1100px) { .feature-grid, .facility-grid { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; } .fc-1 { left: -2%; } .fc-2 { right: -2%; } } @media (max-width: 991.98px) { .hero__grid, .welcome__grid, .split, .split--reverse, .values__grid, .contact-grid, .cta__box, .terms { grid-template-columns: 1fr; } .hero { padding-top: 30px; } .hero__copy { text-align: center; } .hero__lead { margin-left: auto; margin-right: auto; } .hero__cta, .hero__facts { justify-content: center; } .hero__visual { max-width: 520px; margin-top: 10px; margin-bottom: 50px; max-height: none; } .hero__title .line { white-space: normal; } .split--reverse .frame-img { order: -1; } .split .frame-img { max-width: 560px; margin: 0 auto; width: 100%; } .timeline { grid-template-columns: 1fr 1fr; row-gap: 40px; } .timeline::before { display: none; } .stream-grid, .contact-cards, .album-grid { grid-template-columns: 1fr; } .stream-grid { max-width: 520px; margin: 0 auto; } .contact-cards { margin-top: -90px; } .mv__grid, .mission-grid { grid-template-columns: 1fr; } .mission-layout { grid-template-columns: 1fr; } .mission-photos { position: relative; top: 0; height: 380px; max-width: 560px; width: 100%; margin: 0 auto; } .photo-row { grid-template-columns: repeat(2, 1fr); } .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } .bento__item:nth-child(n) { grid-column: auto; grid-row: auto; } .bento__item:nth-child(1) { grid-column: span 2; grid-row: span 2; } .terms__toc { position: relative; top: 0; } .terms__toc ol { display: flex; flex-wrap: wrap; gap: 4px; } .values__orbit { order: 2; } .trophy-stack { height: 360px; max-width: 520px; width: 100%; margin: 0 auto; } } @media (max-width: 767.98px) { body { font-size: 16px; } .hide-sm { display: none !important; } .topbar__inner { justify-content: center; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; gap: 8px; } .topbar__info { gap: 12px; } .topbar__actions { gap: 8px; } .portal-btn { padding: 7px 12px 7px 10px; font-size: .76rem; } .stats { grid-template-columns: repeat(2, 1fr); } .feature-grid, .facility-grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: 28px; } .footer__bottom { justify-content: center; text-align: center; } .form-row { grid-template-columns: 1fr; gap: 0; } .collage { height: 380px; } .collage__badge { width: 100px; height: 100px; } .collage__badge span { font-size: 1.5rem; } .float-card { padding: 7px 12px 7px 7px; font-size: .7rem; max-width: 190px; } .float-card__ico { width: 32px; height: 32px; border-radius: 10px; } .float-card small { display: none; } .fc-1 { top: 0; left: -2%; } .fc-2 { right: -3%; } .fc-3 { bottom: 0; } .moments__head { flex-direction: column; align-items: flex-start; } .moments__ctrl .btn { display: none; } .moment { width: 72vw; } .ribbon { padding: 12px 0; } .lightbox__prev, .lightbox__next { top: auto; bottom: 24px; margin-top: 0; } .lightbox__prev { left: calc(50% - 64px); } .lightbox__next { right: calc(50% - 64px); } .map-frame__card { position: relative; left: auto; bottom: auto; max-width: none; border-radius: 0; } .map-frame { height: auto; } .map-frame iframe { height: 340px; } .achieve { grid-template-columns: 1fr; gap: 8px; } .achieve__year { justify-self: start; padding: 6px 16px; } .to-top { right: 14px; bottom: 14px; width: 48px; height: 48px; } .page-hero { padding: 50px 0 100px; } .hero__scroll { display: none; } .blob-dots button { width: 12px; } .blob-dots button.is-active { width: 26px; } .blob-dots { gap: 4px; } .blob-nav { gap: 8px; bottom: -44px; } .blob-arrow { width: 32px; height: 32px; } .page-hero__orb.o1 { width: 56px; height: 56px; top: 12%; right: 6%; } .page-hero__orb.o2 { width: 24px; height: 24px; } .collage { margin-bottom: 20px; } .js [data-anim="left"], .js [data-anim="right"] { transform: translateY(40px); } .frame-img__deco.d1 { inset: 16px -10px -16px 16px; } .frame-img__deco.d2 { left: -12px; top: -24px; width: 90px; height: 90px; } .contact-cards { margin-top: -80px; } } @media (max-width: 559.98px) { .hide-md { display: none !important; } .timeline { grid-template-columns: 1fr; } .timeline__card { height: auto; } .photo-row { grid-template-columns: 1fr 1fr; gap: 10px; } .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; gap: 10px; } .masonry { columns: 2 140px; column-gap: 10px; } .masonry__item { margin-bottom: 10px; } .filters { border-radius: 22px; } .filter { padding: 8px 13px; font-size: .8rem; } .hero__facts b { font-size: 1.35rem; } .btn { --bh: 50px; padding: 0 22px; } .hero__cta .btn { flex: 1 1 100%; } .mainnav__mark small { display: none; } .quote__inner, .cta__box { border-radius: 26px; } } @media (max-width: 1100px) and (min-width: 768px) { .hide-md { display: none !important; } } /* ========================================================================= 13. REDUCED MOTION - respect the visitor's OS setting ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js .img-wipe { clip-path: none !important; } .js [data-anim], .js .stagger > *, .js [data-split] .char, .masonry__item { opacity: 1 !important; transform: none !important; filter: none !important; } .hero__motes, .cursor-glow { display: none !important; } } /* Print: drop the chrome, keep the content. */ @media print { .topbar, .mainnav, .mobile-menu, .preloader, .curtain, .scroll-progress, .cursor-glow, .to-top, .footer__waves, .cta, .lightbox, .hero__motes { display: none !important; } .js [data-anim], .js .stagger > *, .js [data-split] .char, .masonry__item { opacity: 1 !important; transform: none !important; } body { background: #fff; } }