/* ========================================================================= الأكاديمية الوطنية للقطاع غير الربحي — Home page main.css · RTL-first (logical properties throughout) Contents 0. Tokens 6. Stats 12. Partners 1. Base & a11y 7. Why (sticky) 13. Verify 2. Typography 8. Catalog 14. FAQ 3. Buttons & chips 9. Journey (pinned) 15. Final CTA 4. Header & menu 10. How to apply 16. Footer 5. Hero 11. (shared cards) 17. Motion & reduced motion ========================================================================= */ /* 0 · TOKENS ------------------------------------------------------------- */ :root { /* Brand palette (from the live site) */ --brand-950: #241C3B; --brand-900: #2E2547; --brand-850: #372C55; --brand-800: #413463; --brand-700: #4A3E68; --brand-600: #605E88; --brand-500: #8F7494; --brand-400: #A98FAD; --brand-100: #E6E1F1; --brand-50: #F2EFF8; --gold-400: #F3CFA3; --gold-500: #EDBE86; --gold-600: #D9A464; --coral: #F88E8D; --sand: #D0BDAE; --mist: #E8E3E6; --plum: #927396; --bg: #F6F5FA; --card: #FFFFFF; --ink: #1D1A2A; --ink-2: #4A4560; --ink-3: #6F6A85; --line: #E4E1EC; --success: #1F9D6B; --info: #3E6FC4; --warn: #C98A22; --danger: #D6455B; --gold-grad: linear-gradient(115deg, #F3CFA3 0%, #EDBE86 48%, #D9A464 100%); --gold-hair: linear-gradient(to left, rgba(237,190,134,0), rgba(237,190,134,.85) 50%, rgba(237,190,134,0)); /* Type */ --font: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Layout */ --container: 1240px; --gutter: clamp(18px, 4.2vw, 48px); --header-h: 84px; --section-y: clamp(84px, 10vw, 148px); --r-xl: 28px; --r-lg: 20px; --r-md: 14px; --r-sm: 10px; /* Motion */ --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); /* Depth */ --shadow-1: 0 1px 2px rgba(36,28,59,.05), 0 10px 28px -14px rgba(36,28,59,.18); --shadow-2: 0 2px 6px rgba(36,28,59,.05), 0 34px 64px -26px rgba(36,28,59,.38); --shadow-gold: 0 14px 34px -14px rgba(217,164,100,.8); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* Petal-ring colours (inline rings + read these) */ --ring-sand: #D0BDAE; --ring-mist: #E8E3E6; --ring-plum: #927396; --ring-coral: #F88E8D; --ring-core: #E8E3E6; /* Contextual colours (overridden in .theme-dark) */ --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --focus: var(--brand-600); --eyebrow: var(--brand-600); } @media (max-width: 899px) { :root { --header-h: 68px; } } .theme-dark { --fg: var(--mist); --fg-2: rgba(232,227,230,.82); --fg-3: rgba(232,227,230,.64); --focus: var(--gold-400); --eyebrow: var(--gold-400); color: var(--fg); } /* 1 · BASE & A11Y -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.8; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .page { overflow-x: hidden; overflow-x: clip; } /* no horizontal page overflow, sticky-safe */ img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } p { margin: 0 0 1em; } ul, ol { margin: 0; padding: 0; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; inset-inline-start: 16px; top: 12px; z-index: 200; padding: 12px 18px; border-radius: 10px; background: var(--gold-500); color: var(--brand-950); font-weight: 800; transform: translateY(-160%); transition: transform .3s var(--ease); } .skip-link:focus { transform: none; } .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; } /* Subtle film grain for dark sections */ .grain { position: relative; isolation: isolate; } .grain::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); opacity: .07; mix-blend-mode: overlay; } .grain > * { position: relative; z-index: 1; } /* Gold scroll-progress hairline */ .scroll-progress { position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 120; pointer-events: none; } .scroll-progress span { display: block; height: 100%; background: var(--gold-grad); transform-origin: right center; transform: scaleX(0); box-shadow: 0 0 12px rgba(237,190,134,.6); } /* 2 · TYPOGRAPHY --------------------------------------------------------- */ .display { font-size: clamp(2.5rem, 1.1rem + 4.6vw, 5.25rem); font-weight: 900; line-height: 1.14; margin: 0; text-wrap: balance; } .display--md { font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.4rem); } .h2 { font-size: clamp(2rem, 1.25rem + 2.5vw, 3.4rem); font-weight: 900; line-height: 1.22; margin: .3em 0 .45em; color: var(--fg); text-wrap: balance; } .h3 { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem); font-weight: 800; line-height: 1.35; margin: 0 0 .4em; } .lead { text-wrap: pretty; font-size: clamp(1.125rem, 1.02rem + .38vw, 1.375rem); font-weight: 300; line-height: 1.85; color: var(--fg-2); margin: 0; max-width: 62ch; } .text-gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .is-split .text-gold { background: none; color: inherit; } .is-split .text-gold .w > span { background: var(--gold-grad); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .is-split .text-gold .w:nth-child(2) > span { background-position: 50% 0; } .is-split .text-gold .w:nth-child(3) > span { background-position: 100% 0; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: .9375rem; font-weight: 700; color: var(--eyebrow); line-height: 1.4; } .eyebrow::before, .petal { content: ""; flex: none; width: 10px; height: 10px; display: inline-block; background: var(--coral); border-radius: 50% 0 50% 50%; transform: rotate(-45deg); } .eyebrow::after { content: ""; width: 44px; height: 1px; background: linear-gradient(to left, var(--gold-500), rgba(237,190,134,0)); } .section-head { max-width: 760px; } /* 3 · BUTTONS & CHIPS ---------------------------------------------------- */ .btn { --mx: 0px; --my: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: 0 1.4em; border-radius: 12px; border: 1px solid transparent; font-weight: 700; font-size: 1rem; line-height: 1.2; white-space: nowrap; cursor: pointer; transform: translate3d(var(--mx), var(--my), 0); transition: transform .45s var(--ease), box-shadow .35s var(--ease), background-color .25s, border-color .25s, color .25s; overflow: hidden; isolation: isolate; } .btn--sm { min-height: 42px; padding: 0 1.1em; font-size: .9375rem; border-radius: 10px; } .btn--lg { min-height: 56px; padding: 0 1.75em; font-size: 1.0625rem; } .btn:active { transform: translate3d(var(--mx), var(--my), 0) scale(.97); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; } .btn__arrow { transition: transform .45s var(--ease); } .btn:hover .btn__arrow { transform: translateX(-5px); } .btn--gold { background: var(--gold-grad); color: var(--brand-950); box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.45); } .btn--gold::after { /* sheen sweep */ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(110%); transition: transform .8s var(--ease); } .btn--gold:hover { box-shadow: 0 20px 40px -14px rgba(217,164,100,.95), inset 0 1px 0 rgba(255,255,255,.5); } .btn--gold:hover::after { transform: translateX(-110%); } .btn--ghost { background: transparent; color: var(--fg); border-color: rgba(232,227,230,.34); } .theme-dark .btn--ghost { background: rgba(36,28,59,.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .theme-dark .btn--ghost:hover, .btn--ghost:hover { background: rgba(232,227,230,.1); border-color: rgba(232,227,230,.6); } .btn--dark { background: var(--brand-900); color: #fff; box-shadow: 0 14px 30px -16px rgba(46,37,71,.8); } .btn--dark:hover { background: var(--brand-800); } .btn--dark .i { color: var(--gold-400); } /* 4 · HEADER & MOBILE MENU ---------------------------------------------- */ .announce { position: relative; z-index: 60; background: var(--brand-950); color: var(--mist); font-size: .9375rem; } .announce-off .announce { display: none; } .announce-off { --announce-h: 0px; } .announce__inner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 52px; } .announce__inner::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--gold-hair); opacity: .5; } .announce__text { margin: 0; text-align: center; line-height: 1.6; } .announce__label { color: var(--gold-400); font-weight: 700; } .announce__sep { margin-inline: .4em; opacity: .6; } .announce__link { color: var(--gold-400); font-weight: 800; text-decoration: underline; text-decoration-color: rgba(243,207,163,.45); text-underline-offset: 5px; transition: text-decoration-color .2s; } .announce__link:hover { text-decoration-color: var(--gold-400); } .announce__close { position: absolute; inset-inline-end: 8px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: rgba(232,227,230,.75); cursor: pointer; --focus: var(--gold-400); } .announce__close:hover { background: rgba(232,227,230,.1); color: #fff; } .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); color: var(--mist); --focus: var(--gold-400); transition: transform .5s var(--ease), background-color .4s, box-shadow .4s, color .3s; } .site-header.is-solid { color: var(--ink); --focus: var(--brand-600); background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 1px 0 var(--line), 0 12px 30px -20px rgba(36,28,59,.4); } .site-header.is-hidden { transform: translateY(-105%); } .site-header__bar { height: 100%; display: flex; align-items: center; gap: 28px; } .brand { position: relative; display: block; flex: none; width: clamp(132px, 12vw, 168px); aspect-ratio: 360 / 110; } .brand__logo { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .35s; } .brand__logo--dark { opacity: 0; } .is-solid .brand__logo--light { opacity: 0; } .is-solid .brand__logo--dark { opacity: 1; } .nav { margin-inline-start: auto; } .nav__list { list-style: none; display: flex; gap: 6px; } .nav__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-weight: 500; font-size: 1rem; border-radius: 10px; } .nav__link::after { content: ""; position: absolute; inset-inline: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--gold-grad); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); } .nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); } .site-header__actions { display: flex; align-items: center; gap: 10px; } .site-header:not(.is-solid) .btn--ghost { color: var(--mist); border-color: rgba(232,227,230,.42); background: rgba(36,28,59,.5); } .is-solid .btn--ghost { color: var(--brand-900); border-color: var(--line); } .is-solid .btn--ghost:hover { background: var(--brand-50); border-color: var(--brand-100); } .burger { display: none; position: relative; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(232,227,230,.3); background: transparent; cursor: pointer; } .is-solid .burger { border-color: var(--line); } .burger span { position: absolute; inset-inline-start: 12px; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .2s; } .burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 21px; width: 14px; } .burger span:nth-child(3) { top: 27px; } @media (max-width: 1099px) { .nav, .site-header__login { display: none; } .burger { display: inline-block; } .site-header__actions { margin-inline-start: auto; } } @media (max-width: 559px) { .site-header__cta { display: none; } } /* Full-screen mobile menu */ .mnav { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; background: radial-gradient(90% 60% at 100% 0%, var(--brand-800) 0%, var(--brand-950) 60%); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transition: opacity .4s var(--ease), visibility 0s .4s; } .mnav.is-open { visibility: visible; opacity: 1; transition: opacity .4s var(--ease); } .mnav__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); } .mnav__logo { width: 140px; } .mnav__close { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(232,227,230,.3); background: transparent; color: var(--mist); cursor: pointer; } .mnav__nav { margin-top: clamp(24px, 6vh, 64px); } .mnav__list { list-style: none; } .mnav__list a { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.6rem); font-weight: 800; line-height: 1.3; border-bottom: 1px solid rgba(232,227,230,.1); } .mnav__num { font: 600 .8125rem/1 var(--mono); color: var(--gold-500); } .mnav__ctas { display: grid; gap: 12px; margin-top: auto; padding-block: 32px max(32px, env(safe-area-inset-bottom)); } .mnav__ring { position: absolute; width: 520px; inset-inline-end: -220px; bottom: -160px; opacity: .14; pointer-events: none; } .mnav__list li, .mnav__ctas { opacity: 0; translate: 0 18px; transition: opacity .5s var(--ease), translate .6s var(--ease); } .mnav.is-open .mnav__list li, .mnav.is-open .mnav__ctas { opacity: 1; translate: none; } .mnav.is-open .mnav__list li:nth-child(1) { transition-delay: .08s; } .mnav.is-open .mnav__list li:nth-child(2) { transition-delay: .14s; } .mnav.is-open .mnav__list li:nth-child(3) { transition-delay: .2s; } .mnav.is-open .mnav__list li:nth-child(4) { transition-delay: .26s; } .mnav.is-open .mnav__ctas { transition-delay: .34s; } html.menu-open { overflow: hidden; } /* 5 · HERO --------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; margin-top: calc(-1 * var(--header-h)); min-height: max(680px, calc(100svh - var(--announce-h, 44px))); /* announcement + hero = one screen */ display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + clamp(28px, 5vh, 64px)) 0 clamp(24px, 4vh, 40px); background: var(--brand-950); } .hero__media, .hero__veil, .hero__ring { position: absolute; z-index: 0; } .hero__media { inset: 0; overflow: hidden; } /* Photo: subject (desk, cap, Kingdom Centre) on the LEFT, plain wall on the RIGHT for the copy */ .hero__layer { position: absolute; inset: 0; transform: translate3d(0, 0, 0) scale(1.06); transform-origin: 0 50%; } /* parallax target */ .hero__img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 62%; } .hero__veil { /* light touch: the wall is already dark; protect header, copy edge and the strip */ inset: 0; background: linear-gradient(to left, rgba(36,28,59,.62) 0%, rgba(36,28,59,.56) 40%, rgba(36,28,59,.3) 52%, rgba(36,28,59,.04) 66%, rgba(36,28,59,0) 100%), linear-gradient(to top, var(--brand-950) 0%, rgba(36,28,59,.55) 16%, rgba(36,28,59,0) 38%), linear-gradient(to bottom, rgba(36,28,59,.86) 0%, rgba(36,28,59,0) 24%); } .hero__ring { /* faint, off-canvas on the wall side; fades out before it reaches the photo subject */ --size: min(60vw, 860px); width: var(--size); height: var(--size); inset-inline-start: calc(var(--size) * -0.42); top: 46%; margin-top: calc(var(--size) / -2); pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent 8%, #000 58%); mask-image: linear-gradient(to right, transparent 8%, #000 58%); } .hero__ring-rot { width: 100%; height: 100%; } .hero__ring .ring { width: 100%; height: 100%; opacity: .15; } .hero__ring::before { /* faint gold orbit */ content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(237,190,134,.16); } .hero__grid { /* copy fills the stage; the quick-path strip sits along the bottom */ position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; row-gap: clamp(32px, 6vh, 64px); } .hero__copy { max-width: 700px; align-self: center; } .hero__title { margin: 26px 0 22px; font-size: clamp(2.5rem, 1rem + 3.9vw, 4.6rem); } .hero__title .text-gold { display: inline-block; } .hero__lead { color: rgba(232,227,230,.88); max-width: min(560px, 100%); } .hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .pill { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 16px 7px 14px; border-radius: 999px; background: rgba(237,190,134,.1); border: 1px solid rgba(237,190,134,.38); color: var(--gold-400); font-weight: 700; font-size: .9375rem; line-height: 1.5; } .pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 0 rgba(237,190,134,.7); animation: pulse 2.4s var(--ease) infinite; } /* Glass "start here" panel */ .glass { background: linear-gradient(160deg, rgba(74,62,104,.55), rgba(36,28,59,.55)); border: 1px solid rgba(232,227,230,.14); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); box-shadow: 0 40px 80px -40px rgba(10,6,22,.7), inset 0 1px 0 rgba(255,255,255,.06); } .quick { position: relative; padding: 26px 26px 14px; border-radius: var(--r-xl); } .quick::before { content: ""; position: absolute; inset-inline: 32px; top: -1px; height: 1px; background: var(--gold-hair); } .quick__title { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 1rem; font-weight: 800; color: var(--gold-400); } .quick__list { list-style: none; } .quick__list li + li { border-top: 1px solid rgba(232,227,230,.1); } .quick__item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-inline: -12px; padding: 16px 12px; border-radius: 16px; transition: background-color .3s; } .quick__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(232,227,230,.08); color: var(--gold-400); transition: background .35s, color .35s; } .quick__icon .i { width: 24px; height: 24px; } .quick__text { display: grid; line-height: 1.5; } .quick__text strong { font-size: 1.0625rem; font-weight: 700; color: var(--mist); } .quick__text span { font-size: .9375rem; color: rgba(232,227,230,.72); } .quick__go { color: var(--gold-500); transition: transform .45s var(--ease); } .quick__item:hover { background: rgba(232,227,230,.07); } .quick__item:hover .quick__icon { background: var(--gold-grad); color: var(--brand-950); } .quick__item:hover .quick__go { transform: translateX(-6px); } @media (min-width: 900px) { /* horizontal glass strip */ .quick { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 10px 14px; border-radius: 22px; } .quick__title { margin: 0; padding-inline: 14px 22px; align-self: stretch; border-inline-end: 1px solid rgba(232,227,230,.12); } .quick__list { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr) minmax(0, 1fr); } .quick__list li + li { border-top: 0; border-inline-start: 1px solid rgba(232,227,230,.1); } .quick__item { margin: 0 6px; padding: 12px 14px; gap: 14px; } } /* 6 · STATS -------------------------------------------------------------- */ .stats { padding: clamp(80px, 9vw, 128px) 0; background: radial-gradient(42% 70% at 50% 50%, rgba(65,52,99,.9) 0%, rgba(36,28,59,0) 70%), var(--brand-950); overflow: hidden; } .stats__inner { position: relative; } .stats__list { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 27vw, 380px) minmax(0, 1fr); row-gap: clamp(56px, 7vw, 104px); margin: 0; } .stat { position: relative; display: flex; flex-direction: column-reverse; gap: 8px; } .stat:nth-child(1) { grid-column: 1; grid-row: 1; } .stat:nth-child(2) { grid-column: 3; grid-row: 1; } .stat:nth-child(3) { grid-column: 1; grid-row: 2; } .stat:nth-child(4) { grid-column: 3; grid-row: 2; } .stat:nth-child(odd) { align-items: flex-end; text-align: end; padding-inline-end: clamp(40px, 5vw, 80px); } .stat:nth-child(even) { align-items: flex-start; text-align: start; padding-inline-start: clamp(40px, 5vw, 80px); } .stat::after { /* gold leader line toward the ring */ content: ""; position: absolute; top: 46%; width: clamp(24px, 3.6vw, 60px); height: 1px; background: linear-gradient(to left, rgba(237,190,134,.0), rgba(237,190,134,.8)); } .stat:nth-child(odd)::after { inset-inline-end: 0; } .stat:nth-child(even)::after { inset-inline-start: 0; transform: scaleX(-1); } .stat dd { margin: 0; font-size: clamp(3.2rem, 2rem + 3.6vw, 5.75rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat dt { font-size: clamp(1rem, .95rem + .3vw, 1.25rem); font-weight: 500; color: var(--fg-2); } .stats__ring { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(230px, 24vw, 340px); aspect-ratio: 1; pointer-events: none; } .stats__ring::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; border: 1px dashed rgba(237,190,134,.22); } .stats__ring .ring { width: 100%; height: 100%; } .ring__core path { fill: var(--gold-400); } /* 7 · WHY (sticky features) ---------------------------------------------- */ .why { padding: var(--section-y) 0; background: var(--bg); } .why__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 104px); align-items: start; } .why__aside { position: sticky; top: calc(var(--header-h) + 20px); } .why__aside .lead { max-width: 46ch; } .why__progress { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-variant-numeric: tabular-nums; } .why__now { font: 600 2.25rem/1 var(--mono); color: var(--brand-900); min-width: 2.2ch; } .why__total { font: 500 1rem/1 var(--mono); color: var(--ink-3); } .why__dots { display: inline-flex; gap: 6px; margin-inline-start: 14px; } .why__dots i { width: 12px; height: 12px; border-radius: 50% 0 50% 50%; transform: rotate(-45deg) scale(.8); background: var(--line); transition: background-color .4s, transform .5s var(--ease); } .why__dots i.is-on { background: var(--gold-500); transform: rotate(-45deg) scale(1); } .why__dots i.is-on:last-of-type, .why__dots i.is-now { background: var(--coral); } .why__figure { position: relative; margin: 26px 0 0; aspect-ratio: 4 / 3; max-height: max(200px, calc(100vh - 500px)); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); } .why__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; } .why__figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); pointer-events: none; } .why__list { list-style: none; display: grid; gap: 18px; padding-block: 10vh 14vh; } .feature { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 22px; row-gap: 6px; padding: 30px 32px 30px 30px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(255,255,255,.35); transition: background-color .55s var(--ease), box-shadow .55s var(--ease), border-color .55s, transform .55s var(--ease); } .feature::before { /* gold bar on the inline-start edge */ content: ""; position: absolute; inset-inline-start: -1px; top: 26px; bottom: 26px; width: 3px; border-radius: 3px; background: var(--gold-grad); transform: scaleY(0); transition: transform .6s var(--ease); } .feature__icon { grid-row: span 2; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--brand-50); color: var(--brand-600); transition: background-color .5s, color .5s, box-shadow .5s; } .feature__icon .i { width: 28px; height: 28px; stroke-width: 1.5; } .feature__index { position: absolute; inset-inline-end: 26px; top: 24px; font: 500 .8125rem/1 var(--mono); color: var(--ink-3); } .feature__title { margin: 2px 0 0; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 800; line-height: 1.4; color: var(--ink-2); transition: color .4s; } .feature__text { margin: 0; color: var(--ink-3); transition: color .4s; } .feature.is-active { background: #fff; border-color: transparent; box-shadow: var(--shadow-2); transform: translateX(8px); } .feature.is-active::before { transform: scaleY(1); } .feature.is-active .feature__icon { background: var(--brand-900); color: var(--gold-400); box-shadow: 0 12px 26px -12px rgba(46,37,71,.8); } .feature.is-active .feature__title { color: var(--ink); } .feature.is-active .feature__text { color: var(--ink-2); } .feature.is-active .feature__index { color: var(--brand-800); font-weight: 600; } /* 8 · CATALOG ------------------------------------------------------------ */ .catalog { position: relative; padding: var(--section-y) 0; background: radial-gradient(60% 40% at 0% 0%, rgba(237,190,134,.14), rgba(237,190,134,0) 70%), var(--brand-50); } .catalog__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; margin-bottom: clamp(36px, 4.5vw, 56px); } .catalog__head .section-head { max-width: 640px; } .filters { display: inline-flex; gap: 4px; padding: 5px; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1); } .filters::-webkit-scrollbar { display: none; } .filters__tab { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 46px; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); font-weight: 700; font-size: .9375rem; cursor: pointer; transition: background-color .3s, color .3s; } .filters__tab:hover { background: var(--brand-50); color: var(--ink); } .filters__tab[aria-selected="true"] { background: var(--brand-900); color: #fff; } .filters__count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; background: var(--brand-50); color: var(--brand-700); font-size: .8125rem; font-variant-numeric: tabular-nums; } .filters__tab[aria-selected="true"] .filters__count { background: rgba(237,190,134,.2); color: var(--gold-400); } .catalog__grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: 24px; transition: opacity .22s; } .catalog__grid.is-switching { opacity: 0; } .catalog__grid[data-visible="1"] { grid-template-columns: minmax(0, 1fr); } .catalog__grid[data-visible="1"] .pcard:not(.pcard--featured) { width: 100%; max-width: 820px; justify-self: center; } .catalog__grid[data-visible="3"] .pcard--featured { grid-row: span 2; } .pcard { position: relative; container-type: inline-size; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .3s; } .pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: transparent; } .pcard:has(.pcard__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; } .pcard__link:focus-visible { outline: none; } .pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 3; } /* whole card clickable */ .pcard__inner { display: flex; flex-direction: column; height: 100%; } .pcard__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--brand-900); } .pcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 45%; transition: transform 1.2s var(--ease); } .pcard:hover .pcard__media img { transform: scale(1.045); } .catalog__grid[data-visible="3"] .pcard--featured .pcard__media { flex: 1 1 auto; aspect-ratio: auto; min-height: 320px; } .pcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(36,28,59,.45), rgba(36,28,59,0) 45%); } .pcard__band { position: relative; height: 10px; background: linear-gradient(to left, var(--plum), var(--brand-700)); } .pcard--course .pcard__band { background: linear-gradient(to left, var(--coral), var(--sand)); } .pcard__band svg { position: absolute; inset-inline-end: -120px; top: -120px; width: 250px; opacity: .08; --ring-mist: var(--brand-700); --ring-core: var(--brand-700); } .pcard__body { display: flex; flex-direction: column; gap: 16px; flex: 1; padding: 26px 28px 24px; position: relative; } .pcard__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0; } .tag { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 8px; font-size: .8125rem; font-weight: 800; line-height: 1.4; } .tag--diploma { background: var(--brand-900); color: var(--gold-400); } .tag--program { background: rgba(146,115,150,.16); color: var(--brand-800); } .tag--course { background: rgba(248,142,141,.2); color: var(--brand-900); } .code { font: 500 .8125rem/1 var(--mono); color: var(--ink-3); direction: ltr; unicode-bidi: isolate; letter-spacing: .04em; } .pcard__mode { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; color: var(--brand-700); margin-inline-start: auto; } .pcard__mode--onmedia { position: absolute; z-index: 1; inset-inline-start: 18px; top: 18px; margin: 0; padding: 6px 12px; border-radius: 10px; color: #fff; background: rgba(36,28,59,.55); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .pcard__mode--onmedia .i { color: var(--gold-400); } .pcard__title { margin: 0; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); font-weight: 800; line-height: 1.45; color: var(--ink); } .pcard--featured .pcard__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.05rem); } .pcard__desc { margin: -6px 0 0; color: var(--ink-2); } .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 0; border-block: 1px solid var(--line); } .facts > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; padding-inline-start: 14px; border-inline-start: 1px solid var(--line); } .facts > div:first-child { padding-inline-start: 0; border-inline-start: 0; } .facts dt { font-size: .8125rem; color: var(--ink-3); line-height: 1.4; } .facts dd { margin: 0; font-size: .9375rem; color: var(--ink-2); line-height: 1.4; white-space: nowrap; } .facts .num { font-size: 1.625rem; font-weight: 800; color: var(--brand-900); font-variant-numeric: tabular-nums; line-height: 1.15; } .facts .num--word { font-size: 1.25rem; } .intake { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--brand-50); color: var(--ink-2); font-size: .9375rem; line-height: 1.65; } .intake .i { margin-top: 2px; color: var(--brand-600); } .intake strong { color: var(--ink); font-weight: 700; } .intake__end { color: var(--ink-3); } .pcard__note { display: flex; align-items: center; gap: 8px; margin: -4px 0 0; color: var(--ink-3); font-size: .875rem; } .pcard__note .i { color: var(--brand-500); } .pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; } .open-badge { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 700; color: var(--ink-2); } .open-badge__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--success); } .open-badge__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--success); opacity: 0; animation: ping 2.2s var(--ease) infinite; } .pcard__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--brand-800); } .pcard__cta .i { transition: transform .45s var(--ease); } .pcard:hover .pcard__cta .i { transform: translateX(-6px); } @container (max-width: 520px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts > div:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; } .facts > div:nth-child(n+3) { border-top: 1px solid var(--line); } .pcard__body { padding: 22px 20px 20px; } } @container (min-width: 900px) { /* featured card alone (filtered): side-by-side */ .pcard--featured .pcard__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .pcard--featured .pcard__media { aspect-ratio: auto; height: 100%; } } /* 9 · DIPLOMA JOURNEY ---------------------------------------------------- */ .journey { position: relative; background: var(--brand-950); --track-pad: max(var(--gutter), calc((100vw - var(--container)) / 2)); } .journey__pin { position: relative; overflow: hidden; overflow: clip; padding: var(--section-y) 0 clamp(56px, 7vw, 96px); } .journey__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 55% at 85% 40%, rgba(65,52,99,.85), rgba(36,28,59,0) 70%), radial-gradient(35% 45% at 15% 80%, rgba(237,190,134,.12), rgba(237,190,134,0) 70%); } .jstage { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 26px; } .jstage__label { margin: 0; } .jstage__count { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 0; font-size: .9375rem; color: var(--fg-2); } .jstage__now { font-weight: 800; color: var(--mist); font-variant-numeric: tabular-nums; } .jstage__meter { padding-inline-start: 18px; border-inline-start: 1px solid rgba(232,227,230,.18); font-variant-numeric: tabular-nums; } .jstage__meter b { font: 600 1.0625rem/1 var(--mono); color: var(--gold-400); } .jstage__work { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: var(--gold-grad); color: var(--brand-950); font-weight: 800; font-size: .8125rem; box-shadow: var(--shadow-gold); } .jstage__work[hidden] { display: none; } .journey__track { position: relative; display: flex; align-items: stretch; gap: 22px; /* even panel heights */ padding-inline: var(--track-pad); padding-block: 12px 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--track-pad); scrollbar-width: none; overscroll-behavior-x: contain; } .journey__track::-webkit-scrollbar { display: none; } .jpanel { position: relative; flex: 0 0 min(84vw, 430px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; padding: 30px 30px 32px; border-radius: var(--r-xl); background: linear-gradient(165deg, rgba(74,62,104,.5), rgba(46,37,71,.28)); border: 1px solid rgba(232,227,230,.12); transition: border-color .6s, background-color .6s, box-shadow .6s, opacity .6s; } .jpanel::before { content: ""; position: absolute; inset-inline: 30px; top: -1px; height: 1px; background: var(--gold-hair); opacity: 0; transition: opacity .6s; } .jpanel.is-current { border-color: rgba(237,190,134,.42); box-shadow: 0 40px 80px -40px rgba(0,0,0,.65); } .jpanel.is-current::before { opacity: 1; } .jpanel__num { font-size: clamp(4.5rem, 3.4rem + 3vw, 7rem); font-weight: 900; line-height: .9; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1.5px rgba(237,190,134,.55); transition: color .7s var(--ease), -webkit-text-stroke-color .7s; } .jpanel.is-current .jpanel__num { color: var(--gold-500); -webkit-text-stroke-color: rgba(237,190,134,0); } .jpanel__title { margin: 0; font-size: 1.625rem; font-weight: 800; line-height: 1.3; } .jpanel__title--xl { font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); font-weight: 900; } .jpanel__hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: auto 0 0; padding-top: 18px; border-top: 1px solid rgba(232,227,230,.1); color: var(--fg-3); font-size: .875rem; line-height: 1.5; } .jpanel__hours span + span { padding-inline-start: 18px; border-inline-start: 1px solid rgba(232,227,230,.14); } .jpanel__hours b { display: block; font-weight: 800; font-size: 1.5rem; line-height: 1.2; color: var(--mist); font-variant-numeric: tabular-nums; } .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; padding-bottom: 8px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; background: rgba(232,227,230,.06); border: 1px solid rgba(232,227,230,.14); color: var(--mist); font-size: .9375rem; line-height: 1.45; } .chip--work { background: var(--gold-grad); color: var(--brand-950); border-color: transparent; font-weight: 800; box-shadow: var(--shadow-gold); } .chip--capstone { background: rgba(248,142,141,.14); border-color: rgba(248,142,141,.6); color: #FFE1E0; font-weight: 800; } .chip--capstone .i { color: var(--coral); } .chip--sample { width: 30px; height: 18px; padding: 0; box-shadow: none; } .jpanel--intro { flex-basis: min(88vw, 540px); background: none; border: 0; padding: 8px 0 0; padding-inline-end: 24px; justify-content: center; } .jpanel--intro::before { display: none; } .jpanel--intro.is-current { box-shadow: none; } .jpanel__heading { margin: .35em 0 .5em; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); } .jpanel__intro { color: var(--fg-2); font-weight: 300; font-size: 1.0625rem; line-height: 1.85; margin: 0; } .legend { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: .9375rem; color: var(--fg-2); } .legend li { display: inline-flex; align-items: center; gap: 10px; } .jpanel__hint { display: inline-flex; align-items: center; gap: 10px; margin: 26px 0 0; color: var(--gold-400); font-weight: 700; font-size: .9375rem; } .jpanel__hint .i { animation: nudge 1.8s var(--ease-io) infinite; } .jpanel--final { align-items: flex-start; justify-content: center; background: linear-gradient(165deg, rgba(237,190,134,.16), rgba(46,37,71,.3)); border-color: rgba(237,190,134,.35); } .jpanel__seal { position: relative; width: 132px; height: 132px; margin-bottom: 8px; } .jpanel__seal > svg { width: 100%; height: 100%; animation: spin 40s linear infinite; } .jpanel__seal-core { position: absolute; inset: 30%; display: grid; place-items: center; border-radius: 50%; background: var(--gold-grad); color: var(--brand-950); box-shadow: var(--shadow-gold); } .jpanel__seal-core .i { width: 26px; height: 26px; } .jpanel__final-text { margin: 0 0 18px; color: var(--fg-2); font-size: 1.125rem; } /* progress indicator */ .jprog { position: relative; margin-top: 18px; } .jprog__bar { position: relative; height: 2px; margin-inline: calc(100% / 14); border-radius: 2px; background: rgba(232,227,230,.14); overflow: hidden; } .jprog__fill { position: absolute; inset: 0; background: var(--gold-grad); transform-origin: right center; transform: scaleX(0); } .jprog__steps { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 12px; font-size: .8125rem; color: var(--fg-3); } .jprog__steps li { position: relative; padding-top: 6px; text-align: center; transition: color .4s; white-space: nowrap; } .jprog__steps li::before { content: ""; position: absolute; inset-inline: 0; margin-inline: auto; top: -19px; width: 8px; height: 8px; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); background: rgba(232,227,230,.3); transition: background-color .4s, box-shadow .4s, border-color .4s; } .jprog__steps li.is-on { color: var(--gold-400); } .jprog__steps li.is-on::before { background: var(--gold-500); } /* practicum semesters: larger gold-outlined petal + «تطبيق عملي» tag */ .jprog__steps li.is-work::before { top: -22px; width: 14px; height: 14px; background: var(--brand-950); border: 1.5px solid var(--gold-500); } .jprog__steps li.is-work.is-on::before { background: var(--gold-grad); border-color: var(--gold-400); box-shadow: 0 0 0 4px rgba(237,190,134,.18); } .jprog__tag { display: block; margin-top: 3px; font-size: .6875rem; font-weight: 800; line-height: 1.3; color: var(--gold-400); } /* pinned mode (added by JS on ≥900px when motion is allowed) */ .journey.is-pinned .journey__pin { position: sticky; top: 0; height: 100vh; padding: calc(var(--header-h) + 4px) 0 26px; display: flex; flex-direction: column; justify-content: center; } .journey.is-pinned .jstage { margin-bottom: clamp(18px, 3.2vh, 34px); } .journey.is-pinned .journey__track { width: max-content; overflow: visible; scroll-snap-type: none; align-self: flex-start; flex: none; } .journey.is-pinned .jprog { margin-top: clamp(14px, 3vh, 30px); } .journey.is-pinned.is-live .journey__track { will-change: transform; } .journey.is-pinned .jpanel:not(.jpanel--intro):not(.is-current) { background: linear-gradient(165deg, rgba(74,62,104,.32), rgba(46,37,71,.2)); } @media (max-height: 780px) { .journey.is-pinned .jpanel__num { font-size: 4rem; } .journey.is-pinned .jpanel { padding: 24px 26px; gap: 12px; } .journey.is-pinned .jpanel__hours { padding-top: 12px; } } /* 10 · HOW TO APPLY ------------------------------------------------------ */ .apply { padding: var(--section-y) 0; background: var(--bg); } .apply__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5.5vw, 88px); align-items: start; margin-top: clamp(36px, 4vw, 56px); } .steps { position: relative; margin: 8px 0 44px; } .steps__line { position: absolute; inset-inline-start: 27px; top: 28px; width: 2px; height: calc(100% - 56px); border-radius: 2px; background: var(--line); } .steps__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(var(--gold-400), var(--gold-600)); transform-origin: top; transform: scaleY(0); } /* the single gold petal that travels the line (scroll-linked via --t) */ .steps__traveler { position: absolute; z-index: 3; inset-inline-start: 18px; top: 18px; width: 20px; height: 20px; background: var(--gold-grad); border-radius: 50% 0 50% 50%; transform: translateY(var(--t, 0px)) rotate(135deg); box-shadow: 0 0 0 5px rgba(237,190,134,.18), 0 8px 18px -6px rgba(217,164,100,.9); transition: opacity .5s var(--ease), box-shadow .5s; } .steps.is-seated .steps__traveler { opacity: 0; } .steps__list { list-style: none; display: grid; gap: clamp(36px, 4.5vw, 52px); } .step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 28px; align-items: start; } .step__marker { position: relative; display: grid; place-items: center; width: 56px; height: 56px; } .step__marker::before, .step__fill { /* petal pointing to the next step */ content: ""; position: absolute; inset: 5px; border-radius: 50% 0 50% 50%; transform: rotate(135deg); } .step__marker::before { background: #fff; border: 1.5px solid var(--gold-500); transition: box-shadow .5s; } .step__fill { background: var(--gold-grad); transform: rotate(135deg) scale(0); transition: transform .7s var(--ease); } .step__num { position: relative; z-index: 1; font-size: 1.25rem; font-weight: 900; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color .4s; } .step__body { padding-top: 2px; } .step__head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .step__icon { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 15px; background: #fff; border: 1px solid var(--line); color: var(--brand-800); transition: background-color .5s, border-color .5s, color .5s; } .step__icon .lic { width: 30px; height: 30px; } .step__title { margin: 0; font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2rem); font-weight: 900; line-height: 1.3; color: var(--ink-3); transition: color .45s; } .step__body p { margin: 0; color: var(--ink-2); font-size: 1.0625rem; max-width: 56ch; } .step.is-lit .step__marker::before { box-shadow: 0 12px 26px -12px rgba(217,164,100,.9), 0 0 0 6px rgba(237,190,134,.16); } .step.is-lit .step__fill { transform: rotate(135deg) scale(1); } .step.is-lit .step__num { color: var(--brand-950); } .step.is-lit .step__title { color: var(--ink); } .step.is-lit .step__icon { background: var(--brand-900); border-color: var(--brand-900); color: var(--mist); } /* step 4: the 24-petal ring assembles around the marker — "your seat" */ .step__seat { position: absolute; inset: -29px; pointer-events: none; } .step__seat .ring { width: 100%; height: 100%; --ring-mist: var(--brand-700); } /* Eligibility checker (dark card — the section's one "burst" moment) */ .elig { position: sticky; top: calc(var(--header-h) + 20px); padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-xl); background: radial-gradient(120% 70% at 85% 0%, var(--brand-800) 0%, var(--brand-900) 45%, var(--brand-950) 100%); box-shadow: 0 40px 80px -40px rgba(36,28,59,.75); overflow: hidden; } .elig::before { content: ""; position: absolute; inset-inline: 32px; top: 0; height: 1px; background: var(--gold-hair); } .elig__top { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; } .elig__ring { position: relative; flex: none; width: 104px; height: 104px; } .elig__ring svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; } .elig__ring::before { /* gold bloom on success */ content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(243,207,163,.55) 0%, rgba(237,190,134,.18) 40%, rgba(237,190,134,0) 70%); opacity: 0; transform: scale(.5); } .elig__orbit { fill: none; stroke: rgba(237,190,134,.22); stroke-width: 1; stroke-dasharray: 2 4; } .ep__o { fill: rgba(232,227,230,.05); stroke: rgba(232,227,230,.32); stroke-width: 1.4; transition: stroke .4s, fill .4s; } .ep__f { fill: url(#elig-gold); transform-box: fill-box; transform-origin: 50% 85%; transform: scale(0); transition: transform .55s cubic-bezier(.34,1.56,.64,1); } .ep.is-yes .ep__f { transform: scale(1); } .ep.is-no .ep__o { stroke: rgba(248,142,141,.75); stroke-dasharray: 3 3; } .elig__core { fill: rgba(232,227,230,.12); stroke: rgba(237,190,134,.4); transition: fill .5s; } .elig.is-complete .elig__core { fill: var(--gold-400); } .elig__burst { position: absolute; z-index: 2; left: 50%; top: 50%; width: 0; height: 0; } .elig__burst i { position: absolute; left: -4px; top: -5px; width: 8px; height: 10px; border-radius: 50% 0 50% 50%; background: var(--gold-500); opacity: 0; } .elig__burst i:nth-child(3n+2) { background: var(--coral); } .elig__burst i:nth-child(3n) { background: var(--sand); } .elig.is-complete .elig__burst i { animation: eburst 1.3s cubic-bezier(.2,.7,.3,1) both; } .elig.is-complete .elig__ring::before { animation: ebloom 1.6s var(--ease) both; } .elig.is-complete .elig__ring svg { animation: epop .7s cubic-bezier(.34,1.56,.64,1) both; } @keyframes eburst { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.3); } 18% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-74px) scale(1) rotate(45deg); } } @keyframes ebloom { 0% { opacity: 0; transform: scale(.5); } 40% { opacity: 1; transform: scale(1.15); } 100% { opacity: .55; transform: scale(1); } } @keyframes epop { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } } .elig__title { text-wrap: balance; margin: 0 0 4px; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); font-weight: 900; line-height: 1.35; color: var(--mist); } .elig__hint { margin: 0; font-size: .875rem; color: var(--fg-2); line-height: 1.6; } .elig__qs { display: grid; gap: 2px; border-block: 1px solid rgba(232,227,230,.1); padding-block: 6px; } .elig__q { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 9px 0; border: 0; min-width: 0; } .elig__q + .elig__q { border-top: 1px solid rgba(232,227,230,.07); } .elig__q legend { float: inline-start; padding: 0; font-size: .9375rem; line-height: 1.5; color: var(--mist); max-width: calc(100% - 128px); } .elig__opts { display: inline-flex; flex: none; margin-inline-start: auto; padding: 3px; border-radius: 11px; background: rgba(232,227,230,.07); border: 1px solid rgba(232,227,230,.12); } .elig__opts input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .elig__opts label { min-width: 52px; min-height: 36px; display: grid; place-items: center; padding: 0 10px; border-radius: 8px; font-size: .875rem; font-weight: 700; color: var(--fg-2); cursor: pointer; transition: background-color .25s, color .25s; } .elig__opts label:hover { color: #fff; background: rgba(232,227,230,.08); } .elig__opts input:checked + label { background: rgba(232,227,230,.16); color: #fff; } .elig__opts input[value="yes"]:checked + label { background: var(--gold-grad); color: var(--brand-950); } .elig__opts input:focus-visible + label { outline: 3px solid var(--gold-400); outline-offset: 2px; } .elig__result { min-height: var(--elig-result-h, 176px); padding-top: 16px; } /* reserved: no layout shift */ .elig__status { margin: 0; font-size: .9375rem; color: var(--fg-2); } .elig__msg { margin: 0 0 12px; color: var(--mist); line-height: 1.7; } .elig__ok .elig__msg strong { font-size: 1.125rem; font-weight: 900; color: var(--gold-400); } .elig__ok .btn { width: 100%; } .elig__fine { margin: 12px 0 0; font-size: .8125rem; line-height: 1.7; color: var(--fg-2); } .elig__fine a { color: var(--gold-400); text-decoration: underline; text-underline-offset: 4px; } .elig__unmet { margin: 0; padding-inline-start: 18px; color: var(--mist); font-weight: 700; line-height: 1.8; } .elig__unmet li::marker { color: var(--coral); } .elig__reset { visibility: hidden; margin-top: 12px; padding: 6px 0; border: 0; background: none; color: var(--fg-2); font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .elig__reset:hover { color: #fff; } .elig__reset.is-visible { visibility: visible; } .elig__ok, .elig__no { animation: rise .6s var(--ease) both; } /* Required documents strip */ .docs { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px 40px; margin-top: clamp(48px, 6vw, 80px); padding: 22px clamp(20px, 3vw, 36px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); } .docs__title { margin: 0; font-size: 1.0625rem; font-weight: 800; color: var(--ink); line-height: 1.5; } .docs__title span { display: block; font-size: .8125rem; font-weight: 500; color: var(--ink-3); } .docs__list { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .docs__list li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: .875rem; font-weight: 600; color: var(--ink-2); line-height: 1.5; } .dicon { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--brand-50); color: var(--brand-800); } .dicon .lic { width: 30px; height: 30px; } .dicon__tag { position: absolute; inset-inline-end: -6px; bottom: -4px; padding: 1px 5px; border-radius: 5px; background: var(--brand-900); color: var(--gold-400); font: 600 .5625rem/1.4 var(--mono); letter-spacing: .04em; } /* 12 · PARTNERS ---------------------------------------------------------- */ .partners { padding: var(--section-y) 0; background: linear-gradient(180deg, var(--brand-900), var(--brand-950)); overflow: hidden; } .partners__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 104px); align-items: center; } .partners__copy .lead { margin-bottom: 30px; } .terms { position: relative; padding: 26px 28px; border-radius: var(--r-lg); margin-bottom: 32px; } .terms__title { margin: 0 0 16px; font-size: 1.0625rem; font-weight: 800; color: var(--gold-400); } .checklist { list-style: none; display: grid; gap: 14px; } .checklist li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; color: var(--mist); line-height: 1.55; } .ck { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(232,227,230,.06); border: 1px solid rgba(237,190,134,.28); color: var(--mist); transition: background-color .5s var(--ease) calc(var(--k) * 220ms + 400ms); } .ck .lic { width: 26px; height: 26px; } .ck__tick { position: absolute; inset-inline-end: -6px; bottom: -6px; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--gold-grad); fill: none; stroke: var(--brand-950); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 0 0 3px var(--brand-900); transition: transform .45s cubic-bezier(.34,1.56,.64,1) calc(var(--k) * 220ms + 900ms), opacity .3s calc(var(--k) * 220ms + 900ms); } .js .checklist:not(.is-ticked) .ck__tick { opacity: 0; transform: scale(.3); } .checklist.is-ticked .ck { background: rgba(237,190,134,.1); } .partners__media { position: relative; } /* main portrait (two women) */ .partners__main { position: relative; z-index: 1; width: 84%; margin: 0; } .partners__main img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 42%; border-radius: var(--r-xl); box-shadow: 0 50px 90px -40px rgba(0,0,0,.7); } .partners__main::after { /* brand-tinted edge so the warm beige photo sits in the aubergine section */ content: ""; position: absolute; inset: 0; border-radius: var(--r-xl); pointer-events: none; background: linear-gradient(to top, rgba(36,28,59,.5) 0%, rgba(36,28,59,0) 34%), radial-gradient(130% 95% at 45% 38%, rgba(65,52,99,0) 52%, rgba(65,52,99,.55) 100%), linear-gradient(rgba(96,94,136,.1), rgba(96,94,136,.1)); box-shadow: inset 0 0 0 1px rgba(232,227,230,.12); } .partners__main::before { /* offset gold frame */ content: ""; position: absolute; z-index: -1; inset: -16px 16px 16px -16px; border: 1px solid rgba(237,190,134,.42); border-radius: calc(var(--r-xl) + 6px); } /* overlapping landscape card (supervisor + trainee), offset toward the bottom / inline-end */ .partners__inset { position: relative; z-index: 2; width: 64%; margin: -30% 0 0; margin-inline-start: auto; padding: 7px; border-radius: 22px; background: linear-gradient(160deg, rgba(74,62,104,.9), rgba(36,28,59,.92)); border: 1px solid rgba(237,190,134,.55); box-shadow: 0 40px 70px -30px rgba(0,0,0,.75); } .partners__inset img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 48% 40%; border-radius: 16px; filter: saturate(.92); } .partners__inset::after { /* petal accent on the card corner */ content: ""; position: absolute; inset-inline-end: -7px; top: -7px; width: 16px; height: 16px; background: var(--gold-grad); border-radius: 50% 0 50% 50%; transform: rotate(-135deg); box-shadow: 0 0 0 4px var(--brand-950); } .partners__ring { position: absolute; z-index: 0; width: 150px; inset-inline-end: 2%; top: -38px; opacity: .9; } .partners__ring svg { animation: spin 60s linear infinite; } /* 13 · VERIFY ------------------------------------------------------------ */ .verify { padding: clamp(64px, 8vw, 112px) 0; background: #fff; } .verify__panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 5vw, 72px); padding: clamp(28px, 4.5vw, 64px); border-radius: var(--r-xl); background: linear-gradient(120deg, var(--brand-50) 0%, #fff 75%); border: 1px solid var(--line); } .verify__copy { position: relative; } .verify__copy > p { color: var(--ink-2); max-width: 52ch; margin-bottom: 26px; } .verify__form { display: flex; gap: 12px; max-width: 580px; } .field { position: relative; flex: 1; } .field__input { width: 100%; height: 56px; padding: 22px 18px 6px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 500 1rem/1 var(--font); transition: border-color .25s, box-shadow .25s; } .field__input:hover { border-color: var(--brand-100); } .field__input:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 4px rgba(96,94,136,.16); } .field__label { position: absolute; inset-inline-start: 18px; top: 50%; translate: 0 -50%; color: var(--ink-3); pointer-events: none; font-size: 1rem; transition: top .25s var(--ease), font-size .25s var(--ease), translate .25s var(--ease), color .25s; } .field__input:focus + .field__label, .field__input:not(:placeholder-shown) + .field__label { top: 9px; translate: 0 0; font-size: .75rem; color: var(--brand-600); font-weight: 700; } /* living certificate + flip card */ .verify__visual { position: relative; min-height: 360px; perspective: 1100px; } .cert-stage { position: absolute; inset-inline-start: 0; top: 0; width: min(100%, 380px); } .cert { --rx: 0deg; --ry: 0deg; position: relative; width: 100%; aspect-ratio: 1.42; padding: 14px; background: #fff; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-2); transform: rotateX(var(--rx)) rotateY(var(--ry)) rotate(-4deg); transition: transform .5s var(--ease); overflow: visible; } .cert--back { position: absolute; inset: 0; transform: rotate(4deg) translate(-12px, 10px); background: var(--brand-50); box-shadow: var(--shadow-1); } .cert__frame { overflow: hidden; height: 100%; padding: 16px 18px; border: 1px solid rgba(217,164,100,.55); border-radius: 8px; outline: 1px solid rgba(217,164,100,.25); outline-offset: -5px; display: flex; flex-direction: column; gap: 8px; } .cert__head { display: flex; align-items: center; gap: 8px; } .cert__mark { width: 26px; height: 26px; flex: none; --ring-mist: var(--brand-800); } .cert__kicker { min-width: 0; font-size: .625rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cert__title { margin: 4px 0 2px; font-size: 1.25rem; font-weight: 900; color: var(--brand-900); } .cert__line { display: block; height: 6px; border-radius: 4px; background: var(--brand-50); } .cert__line--w1 { width: 82%; } .cert__line--w2 { width: 64%; } .cert__line--w3 { width: 44%; } .cert__foot { margin-top: auto; display: flex; align-items: flex-end; gap: 10px; } .cert__qr, .tcard__qr { display: block; width: 38px; height: 38px; padding: 2px; border-radius: 4px; background: #fff; color: var(--brand-900); } .cert__qr svg, .tcard__qr svg { width: 100%; height: 100%; fill: currentColor; } .cert__code { font: 600 .625rem/1 var(--mono); color: var(--ink-3); direction: ltr; } .cert__beam { /* scanning light that sweeps across once (RTL: right → left) */ position: absolute; inset: 0; border-radius: 14px; overflow: hidden; pointer-events: none; } .cert__beam::before { content: ""; position: absolute; top: -10%; bottom: -10%; width: 34%; right: -40%; background: linear-gradient(100deg, rgba(243,207,163,0), rgba(243,207,163,.55) 45%, rgba(255,255,255,.75) 50%, rgba(243,207,163,.55) 55%, rgba(243,207,163,0)); transform: skewX(-12deg); opacity: 0; } .cert__seal { position: absolute; z-index: 2; inset-inline-end: -26px; top: -30px; width: 96px; height: 96px; } .cert__seal::after { /* ink ring when the seal lands */ content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 2px solid rgba(217,164,100,.7); opacity: 0; } .cert__seal-ring { width: 100%; height: 100%; animation: spin 30s linear infinite; --ring-mist: var(--brand-800); } .cert__seal-core { position: absolute; inset: 28%; display: grid; place-items: center; border-radius: 50%; background: var(--gold-grad); color: var(--brand-950); box-shadow: var(--shadow-gold); } .cert__seal-core .i { width: 22px; height: 22px; stroke-width: 2.4; } .js .verify:not(.is-live) .cert__seal { opacity: 0; transform: scale(1.7) rotate(-14deg); } .verify.is-live .cert__beam::before { animation: certscan 1.5s var(--ease-io) .25s both; } .verify.is-live .cert__seal { animation: stamp .65s cubic-bezier(.3,1.4,.5,1) 1.45s both; } .verify.is-live .cert__seal::after { animation: inkring .9s var(--ease) 1.75s both; } @keyframes certscan { 0% { opacity: 0; right: -40%; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; right: 110%; } } @keyframes stamp { 0% { opacity: 0; transform: scale(1.7) rotate(-14deg); } 60% { opacity: 1; transform: scale(.9) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } } @keyframes inkring { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.7); } } .tcard { position: absolute; z-index: 3; inset-inline-end: 0; bottom: 0; width: min(78%, 290px); aspect-ratio: 1.586; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 16px; perspective: 900px; } .tcard__inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.4,.1,.2,1); } .tcard.is-flipped .tcard__inner, .tcard:focus-visible .tcard__inner { transform: rotateY(180deg); } @media (hover: hover) and (pointer: fine) { .tcard:hover .tcard__inner { transform: rotateY(180deg); } } .tcard__face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; text-align: start; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: var(--mist); --fg-2: rgba(232,227,230,.82); --fg-3: rgba(232,227,230,.64); /* dark card inside a light section */ background: radial-gradient(120% 90% at 100% 0%, var(--brand-700) 0%, var(--brand-900) 55%, var(--brand-950) 100%); border: 1px solid rgba(237,190,134,.45); box-shadow: 0 30px 60px -28px rgba(36,28,59,.8); } .tcard__top { display: flex; align-items: center; gap: 8px; margin-bottom: auto; } .tcard__mark { width: 28px; height: 28px; flex: none; } .tcard__kicker { font-size: .75rem; font-weight: 800; color: var(--gold-400); } .tcard__name { font-size: 1.125rem; font-weight: 900; line-height: 1.3; } .tcard__prog { font-size: .75rem; color: var(--fg-2); } .tcard__foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 8px; } .tcard__no { font: 600 .75rem/1 var(--mono); color: var(--gold-400); direction: ltr; letter-spacing: .04em; } .tcard__qr { width: 36px; height: 36px; background: var(--mist); color: var(--brand-950); } .tcard__back { transform: rotateY(180deg); flex-direction: row; align-items: center; gap: 16px; } .tcard__qr--lg { width: 86px; height: 86px; flex: none; padding: 3px; border-radius: 8px; } .tcard__backtext { display: grid; gap: 2px; } .tcard__label { font-size: .75rem; color: var(--fg-2); } .tcard__code { font: 600 1.125rem/1.3 var(--mono); color: var(--gold-400); direction: ltr; text-align: end; } .tcard__scan { font-size: .8125rem; font-weight: 700; color: var(--mist); } .tcard__hint { position: absolute; inset-inline-start: 0; bottom: -28px; font-size: .75rem; font-weight: 700; color: var(--ink-3); } .tcard:focus-visible { outline: 3px solid var(--brand-600); outline-offset: 4px; } /* 14 · FAQ --------------------------------------------------------------- */ .faq { padding: var(--section-y) 0; background: var(--bg); } .faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "photo head" "photo acc"; grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 96px); align-items: start; } .faq__head { grid-area: head; margin-bottom: clamp(28px, 3vw, 40px); } .acc { grid-area: acc; } .faq__photo { grid-area: photo; position: sticky; top: calc(var(--header-h) + 24px); margin: 0; height: min(76vh, 680px); border-radius: var(--r-xl); overflow: hidden; isolation: isolate; box-shadow: var(--shadow-2); } .faq__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 62%; } .faq__photo::after { /* soft gradient for the caption */ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(36,28,59,.92) 0%, rgba(36,28,59,.55) 22%, rgba(36,28,59,0) 46%); box-shadow: inset 0 0 0 1px rgba(237,190,134,.3); border-radius: inherit; } .faq__caption { text-wrap: balance; position: absolute; z-index: 2; inset-inline: 26px; bottom: 24px; display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); font-weight: 800; line-height: 1.5; color: var(--gold-400); } .faq__ring { position: absolute; z-index: 2; width: 96px; inset-inline-end: 18px; top: 18px; opacity: .85; pointer-events: none; } .faq__ring svg { width: 100%; animation: spin 90s linear infinite; } .faq__contact { margin-top: 12px; color: var(--ink-2); } .faq__contact a { color: var(--brand-800); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: 5px; } .acc { border-top: 1px solid var(--line); } .acc__item { border-bottom: 1px solid var(--line); } .acc__h { margin: 0; } .acc__btn { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 26px 4px; border: 0; background: none; cursor: pointer; text-align: start; font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); font-weight: 700; line-height: 1.5; color: var(--ink); transition: color .25s; } .acc__btn:hover { color: var(--brand-700); } .acc__qi { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--brand-50); color: var(--brand-800); transition: background-color .35s, color .35s; } .acc__qi .lic { width: 26px; height: 26px; } .acc__q { flex: 1; } .acc__btn[aria-expanded="true"] .acc__qi { background: var(--brand-900); color: var(--mist); } .acc__icon { position: relative; flex: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: #fff; transition: background-color .35s, border-color .35s, transform .5s var(--ease); } .acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--brand-800); transition: transform .45s var(--ease), background-color .35s; } .acc__icon::after { transform: rotate(90deg); } .acc__btn[aria-expanded="true"] .acc__icon { background: var(--brand-900); border-color: var(--brand-900); } .acc__btn[aria-expanded="true"] .acc__icon::before, .acc__btn[aria-expanded="true"] .acc__icon::after { background: var(--gold-400); } .acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(0deg); } .acc__panel { display: grid; grid-template-rows: 1fr; } .js .acc__panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s var(--ease), visibility 0s .5s; } .js .acc__item.is-open .acc__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .5s var(--ease), visibility 0s; } .acc__inner { overflow: hidden; } .acc__inner p { margin: 0; padding: 0 4px 28px; padding-inline-end: 72px; color: var(--ink-2); line-height: 1.9; } /* 15 · FINAL CTA --------------------------------------------------------- */ .cta { position: relative; overflow: hidden; padding: clamp(96px, 11vw, 160px) 0; background: var(--brand-950); } .cta__bg { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; } .cta__veil { position: absolute; z-index: 0; inset: 0; background: linear-gradient(to left, rgba(36,28,59,.94) 0%, rgba(36,28,59,.82) 45%, rgba(36,28,59,.5) 100%), linear-gradient(to bottom, var(--brand-950) 0%, rgba(36,28,59,0) 26%); } .cta__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 27vw, 380px); grid-template-areas: "title halo" "lead halo" "actions halo"; align-items: center; column-gap: clamp(32px, 5vw, 80px); } .cta__title { grid-area: title; max-width: 15ch; align-self: end; } .cta__lead { grid-area: lead; margin-top: 22px; max-width: 52ch; } .cta__actions { grid-area: actions; align-self: start; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .cta__primary { position: relative; z-index: 1; } /* finale halo: the logo ring assembles beside the copy */ .cta__halo { grid-area: halo; position: relative; width: 100%; aspect-ratio: 1; justify-self: center; pointer-events: none; } .cta__orbit, .cta__spin { position: absolute; inset: 0; } .cta__orbit { animation: spin 80s linear infinite; } .cta__spin { animation: spin 14s linear infinite; animation-play-state: paused; } .cta__inner:has(.cta__primary:hover) .cta__spin, .cta__inner:has(.cta__primary:focus-visible) .cta__spin { animation-play-state: running; } .cta__spin .ring { width: 100%; height: 100%; filter: drop-shadow(0 0 22px rgba(237,190,134,.18)); } .cta__halo::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(237,190,134,.28), rgba(237,190,134,0) 70%); } .ring--flyin .pt { transform-box: fill-box; transform-origin: center; } .js .ring--flyin .pt { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--dr, 0deg)) scale(.5); transition: opacity .7s var(--ease), transform 1.3s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 32ms); } .js .is-assembled .ring--flyin .pt { opacity: 1; transform: none; } /* 16 · FOOTER ------------------------------------------------------------ */ .site-footer { position: relative; background: var(--brand-950); color: var(--fg-2); padding-top: clamp(64px, 7vw, 96px); border-top: 1px solid rgba(237,190,134,.18); } .footer__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 56px; padding-bottom: 56px; } .footer__brand img { width: 220px; } .footer__brand p { margin-top: 22px; max-width: 40ch; font-size: .9375rem; line-height: 1.85; } .footer__cols { display: grid; grid-template-columns: 1.45fr 1fr 1.35fr; gap: 32px; } .footer__h { margin: 0 0 16px; font-size: .9375rem; font-weight: 800; color: var(--gold-400); } .footer__cols ul { list-style: none; display: grid; gap: 10px; font-size: .9375rem; line-height: 1.6; } .footer__cols a { transition: color .2s; } .footer__cols a:hover { color: #fff; } .footer__contact li { display: flex; align-items: center; gap: 10px; } .footer__contact .i { color: var(--gold-500); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 24px 0 max(28px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(232,227,230,.1); font-size: .875rem; color: var(--fg-3); } .footer__bottom p { margin: 0; } .footer__legal { list-style: none; display: flex; gap: 22px; } .footer__legal a:hover { color: #fff; } /* VIDEO LOOPS ------------------------------------------------------------- Each