@charset "UTF-8"; /* ========================================================================== Malak Al-Ilm — landing-v2 Design language: the founder's cinematic 3D art carries the page; all copy rides on floating "glass plates" so text keeps AA contrast over any scene, bright or dark, without ever dimming the artwork into mud. Written entirely with CSS logical properties, so Arabic RTL is automatic: there is no [dir="rtl"] override section, and there does not need to be. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Night-indigo, the colour of the Marrakech sky in every scene */ --ink-950: #040714; --ink-900: #070B1E; --ink-800: #0B1026; --ink-700: #141C3F; --ink-600: #1F2A57; /* Malak's gold + the warm sunset that runs through the art */ --gold: #F0BC5E; --gold-deep: #D4951A; --ember: #E8613A; --cream: #F8F0E0; --cream-dim: #D9CFBC; /* Glass plates. 0.80 alpha over even a pure-white scene still measures 9.5:1 against --cream, so every plate is safely AA/AAA. */ --plate: color-mix(in srgb, var(--ink-900) 82%, transparent); --plate-soft: color-mix(in srgb, var(--ink-900) 74%, transparent); --plate-line: color-mix(in srgb, var(--gold) 26%, transparent); --radius-lg: 26px; --radius-md: 18px; --radius-sm: 12px; --wrap: 1180px; --gutter: clamp(1.1rem, 4vw, 2.6rem); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* Live values written by app.js. Declared here so CSS never sees "undefined" and the page renders identically with JavaScript disabled. */ --mx: 0; --my: 0; --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-ar: "Noto Naskh Arabic", "Segoe UI", Tahoma, "Geeza Pro", "Traditional Arabic", "Times New Roman", serif; color-scheme: dark; } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* the sticky header must never cover the anchor a user just jumped to */ scroll-padding-block-start: 6rem; /* The parallax backdrop deliberately bleeds past the viewport (inset -38px + scale 1.04). body's overflow-x alone does NOT contain it — overflow propagates to , which would leave the document scrollable sideways. Clip here too. `clip` (not `hidden`) so neither element becomes a scroll container, which would break the sticky header. */ overflow-x: clip; } body { min-block-size: 100%; font-family: var(--font-ui); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem); line-height: 1.65; color: var(--cream); background: var(--ink-950); /* Base wash, visible before the art loads and if images ever fail */ background-image: radial-gradient(120% 80% at 50% 0%, #1A2350 0%, transparent 60%), linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%); background-attachment: fixed; overflow-x: clip; /* clip, not hidden: `hidden` makes a scroll container and breaks position:sticky */ -webkit-font-smoothing: antialiased; } html[lang="ar"] body { font-family: var(--font-ar); line-height: 1.85; /* Arabic needs the extra room for its ascenders */ } img, picture, svg { display: block; max-inline-size: 100%; } img { block-size: auto; } ul, ol { list-style: none; padding: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3 { line-height: 1.2; font-weight: 700; text-wrap: balance; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.4; } p { text-wrap: pretty; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--gold); color: var(--ink-900); } /* -------------------------------------------------------------------------- 3. Utilities -------------------------------------------------------------------------- */ .wrap { inline-size: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; } .skip-link { position: fixed; inset-block-start: 0.6rem; inset-inline-start: 0.6rem; z-index: 999; padding: 0.85rem 1.3rem; background: var(--gold); color: var(--ink-900); font-weight: 700; border-radius: var(--radius-sm); transform: translateY(-160%); transition: transform 0.2s var(--ease-out); } .skip-link:focus { transform: translateY(0); } /* -------------------------------------------------------------------------- 4. The scene backdrop Nine full-bleed scenes stacked in a fixed layer. app.js cross-fades them against scroll position; only two are ever non-transparent at once. -------------------------------------------------------------------------- */ .backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .backdrop__stack { position: absolute; inset: -4% -3%; /* bleed, so mouse-parallax never exposes an edge */ /* mouse reactivity: the whole world drifts a few pixels under the cursor */ transform: translate3d(calc(var(--mx) * -12px), calc(var(--my) * -9px), 0); transition: transform 0.5s var(--ease-soft); will-change: transform; } .backdrop__layer { position: absolute; inset: 0; opacity: 0; transform: translate3d(0, var(--sy, 0px), 0) scale(var(--ss, 1.04)); will-change: opacity, transform; } /* Layer one is lit by default: with JavaScript off the hero art still shows. */ .backdrop__layer:first-child { opacity: 1; } .js .backdrop__layer { opacity: var(--o, 0); } .js .backdrop__layer:first-child { opacity: var(--o, 1); } .backdrop__layer picture, .backdrop__layer img { inline-size: 100%; block-size: 100%; } .backdrop__layer img { object-fit: cover; object-position: center; } /* Vignette + top/bottom wash: enough to seat the UI, gentle enough to let the artwork stay the loudest thing on the page. */ .backdrop__scrim { position: absolute; inset: 0; background: radial-gradient(140% 100% at 50% 45%, transparent 30%, rgba(4, 7, 20, 0.55) 100%), linear-gradient( 180deg, rgba(4, 7, 20, 0.78) 0%, rgba(4, 7, 20, 0.34) 20%, rgba(4, 7, 20, 0.34) 62%, rgba(4, 7, 20, 0.86) 100% ); } /* A slow warm bloom, like the lantern light in the scenes */ .backdrop__glow { position: absolute; inset-block-start: -20%; inset-inline-start: 50%; inline-size: 90vmax; block-size: 90vmax; translate: -50% 0; background: radial-gradient( circle, color-mix(in srgb, var(--gold) 16%, transparent) 0%, transparent 62% ); opacity: 0.55; animation: bloom 14s var(--ease-soft) infinite alternate; } @keyframes bloom { from { opacity: 0.34; transform: scale(0.94); } to { opacity: 0.62; transform: scale(1.08); } } /* -------------------------------------------------------------------------- 5. Header -------------------------------------------------------------------------- */ .site-header { position: sticky; inset-block-start: 0; z-index: 100; padding-block: 0.7rem; transition: background-color 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft), backdrop-filter 0.35s var(--ease-soft); } .site-header.is-stuck { background: color-mix(in srgb, var(--ink-950) 84%, transparent); backdrop-filter: blur(14px) saturate(1.15); box-shadow: 0 1px 0 color-mix(in srgb, var(--gold) 16%, transparent), 0 12px 34px rgba(2, 4, 14, 0.5); } .site-header__inner { display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1.6rem); } .brand { display: flex; align-items: center; gap: 0.7rem; margin-inline-end: auto; min-block-size: 44px; } .brand img { inline-size: 44px; block-size: auto; filter: drop-shadow(0 3px 10px rgba(4, 7, 20, 0.7)); transition: transform 0.4s var(--ease-out); } .brand:hover img { transform: rotate(-6deg) scale(1.06); } .brand__text { display: flex; flex-direction: column; } .brand__name { font-weight: 700; font-size: 1.06rem; letter-spacing: 0.01em; text-shadow: 0 2px 12px rgba(4, 7, 20, 0.9); } .brand__tag { font-size: 0.74rem; color: var(--cream-dim); text-shadow: 0 2px 10px rgba(4, 7, 20, 0.95); } /* Language switcher */ .langs { display: flex; align-items: center; gap: 0.15rem; padding: 0.24rem; border-radius: 999px; background: var(--plate); border: 1px solid var(--plate-line); backdrop-filter: blur(10px); } .langs a { display: grid; place-items: center; min-inline-size: 44px; min-block-size: 36px; padding-inline: 0.5rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; color: var(--cream-dim); transition: color 0.2s, background-color 0.2s; } .langs a:hover { color: var(--cream); background: rgba(255, 255, 255, 0.08); } .langs a[aria-current="page"] { color: var(--ink-900); background: var(--gold); } .wa-link { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 44px; padding-inline: 0.9rem; border-radius: 999px; background: var(--plate); border: 1px solid var(--plate-line); backdrop-filter: blur(10px); font-size: 0.86rem; font-weight: 600; white-space: nowrap; transition: border-color 0.25s, transform 0.25s var(--ease-out); } .wa-link:hover { border-color: var(--gold); transform: translateY(-2px); } .wa-link svg { color: #4ADE80; flex: none; } /* -------------------------------------------------------------------------- 6. Buttons + the launch gate -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-block-size: 52px; padding-inline: 1.6rem; border-radius: 999px; font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; text-align: center; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background-color 0.25s, border-color 0.25s; } .btn--primary { color: var(--ink-900); background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); box-shadow: 0 10px 30px color-mix(in srgb, var(--gold-deep) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45); } .btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 42px color-mix(in srgb, var(--gold-deep) 52%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .btn__arrow { display: grid; place-items: center; /* the chevron is drawn pointing right; mirror it for RTL */ transform: scaleX(1); transition: translate 0.3s var(--ease-out); } html[dir="rtl"] .btn__arrow { transform: scaleX(-1); } .btn--primary:hover .btn__arrow { translate: 3px 0; } .btn--ghost { color: var(--cream); background: var(--plate); border: 1px solid var(--plate-line); backdrop-filter: blur(10px); } .btn--ghost:hover { border-color: var(--gold); background: color-mix(in srgb, var(--ink-800) 88%, transparent); transform: translateY(-3px); } .btn--ghost svg { color: #4ADE80; } /* The gate. Ships locked: [data-gate-enter] carries `hidden` in the HTML, so with JavaScript off we never link to an app that has not opened yet. */ .gate { display: contents; } .gate__locked { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.75rem 1.4rem; border-radius: var(--radius-md); background: var(--plate); border: 1px dashed var(--plate-line); backdrop-filter: blur(10px); } .gate__locked strong { font-size: 1rem; color: var(--gold); letter-spacing: 0.01em; } .gate__locked span { font-size: 0.86rem; color: var(--cream-dim); } /* When app.js opens the gate the button arrives with a little flourish */ .js [data-gate-enter]:not([hidden]) { animation: gate-in 0.7s var(--ease-out) both; } @keyframes gate-in { from { opacity: 0; transform: translateY(14px) scale(0.94); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ .hero { position: relative; display: grid; align-items: center; min-block-size: calc(100svh - 5rem); padding-block: clamp(2.5rem, 8vh, 6rem) clamp(5rem, 12vh, 8rem); } .hero__inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .hero__copy { padding: clamp(1.4rem, 3.4vw, 2.5rem); border-radius: var(--radius-lg); background: linear-gradient( 160deg, var(--plate) 0%, var(--plate-soft) 100% ); border: 1px solid var(--plate-line); backdrop-filter: blur(16px) saturate(1.15); box-shadow: 0 24px 70px rgba(2, 4, 14, 0.55); } .hero__eyebrow { font-size: 0.84rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-block-end: 0.9rem; } html[lang="ar"] .hero__eyebrow { letter-spacing: 0; text-transform: none; } .hero__title { font-size: clamp(2.2rem, 1.3rem + 4.2vw, 4.1rem); letter-spacing: -0.01em; background: linear-gradient(180deg, var(--cream) 30%, var(--gold) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[lang="ar"] .hero__title { letter-spacing: 0; } .hero__echo { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-block: 0.9rem 1.2rem; font-size: 0.92rem; color: var(--cream-dim); } .hero__echo span { position: relative; } .hero__echo span + span { padding-inline-start: 1rem; } .hero__echo span + span::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 0.35em; inline-size: 1px; background: var(--plate-line); } .hero__lead { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.18rem); color: var(--cream); max-inline-size: 46ch; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-block-start: 1.7rem; } .hero__mascot { position: relative; justify-self: center; inline-size: min(100%, 420px); transform: translate3d(0, var(--py, 0px), 0); } .hero__mascot img { inline-size: 100%; filter: drop-shadow(0 30px 50px rgba(2, 4, 14, 0.65)); /* mouse-reactive tilt + a slow idle float */ transform: rotate(calc(var(--mx) * 4deg)) translate3d( calc(var(--mx) * 14px), calc(var(--my) * 10px), 0 ); transition: transform 0.55s var(--ease-soft); animation: float 7s ease-in-out infinite; } @keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } } .hero__halo { position: absolute; inset-block-start: 8%; inset-inline-start: 50%; inline-size: 78%; aspect-ratio: 1; translate: -50% 0; z-index: -1; border-radius: 50%; background: radial-gradient( circle, color-mix(in srgb, var(--gold) 42%, transparent) 0%, transparent 68% ); filter: blur(28px); animation: bloom 6s ease-in-out infinite alternate; } .hero__scroll { position: absolute; inset-block-end: clamp(1rem, 4vh, 2.4rem); inset-inline-start: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; padding: 0.5rem 1rem; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); text-shadow: 0 2px 12px rgba(4, 7, 20, 0.95); } html[lang="ar"] .hero__scroll { letter-spacing: 0; text-transform: none; } .hero__scroll-line { inline-size: 1px; block-size: 42px; background: linear-gradient(180deg, var(--gold), transparent); animation: drop 2.4s var(--ease-soft) infinite; } @keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* -------------------------------------------------------------------------- 8. Section shell -------------------------------------------------------------------------- */ .section { position: relative; padding-block: clamp(4.5rem, 12vh, 9rem); } .section__head { max-inline-size: 62ch; margin-inline: auto; margin-block-end: clamp(2rem, 5vh, 3.4rem); padding: clamp(1.2rem, 3vw, 2rem) clamp(1.3rem, 3.4vw, 2.4rem); text-align: center; border-radius: var(--radius-lg); background: var(--plate); border: 1px solid var(--plate-line); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 20px 60px rgba(2, 4, 14, 0.45); } .section__title { font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.9rem); background: linear-gradient(180deg, var(--cream) 40%, var(--gold) 135%); -webkit-background-clip: text; background-clip: text; color: transparent; } .section__lead { margin-block-start: 0.9rem; color: var(--cream-dim); font-size: clamp(0.98rem, 0.94rem + 0.3vw, 1.1rem); } /* -------------------------------------------------------------------------- 9. Carousels (native scroll-snap + JS drag/momentum on pointer devices) -------------------------------------------------------------------------- */ .carousel { position: relative; } .carousel__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; /* room for the card lift + focus ring, so neither is clipped */ padding-block: 0.75rem 1.25rem; } .carousel__viewport::-webkit-scrollbar { display: none; } .carousel__viewport:focus-visible { outline-offset: -3px; } .carousel__viewport.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; } .carousel__track { display: flex; gap: clamp(0.85rem, 2vw, 1.4rem); /* first and last card can still centre themselves */ padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); } .card { position: relative; flex: 0 0 auto; scroll-snap-align: center; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: linear-gradient( 170deg, color-mix(in srgb, var(--accent, var(--gold)) 22%, var(--ink-900)) 0%, var(--ink-950) 78% ); border: 1px solid color-mix(in srgb, var(--accent, var(--gold)) 38%, transparent); box-shadow: 0 18px 46px rgba(2, 4, 14, 0.5); overflow: hidden; transform: perspective(1000px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translate3d(0, 0, 0); transition: transform 0.4s var(--ease-out), border-color 0.3s, box-shadow 0.4s var(--ease-out); } @media (hover: hover) { .card:hover { border-color: var(--accent, var(--gold)); box-shadow: 0 26px 60px rgba(2, 4, 14, 0.6), 0 0 0 1px color-mix(in srgb, var(--accent, var(--gold)) 40%, transparent); } } .card--char { inline-size: clamp(200px, 58vw, 260px); } .card--gate { inline-size: clamp(230px, 66vw, 300px); } /* Art and body are explicitly stacked. The image carries a drop-shadow filter, which makes it a stacking context that paints in the positioned layer -- i.e. ABOVE any non-positioned in-flow text. That is what buried the name: the shadow (14px offset + 22px blur) and, on hover, the scaled-up figure both spill over the top of .card__body. Giving both halves a real z-index settles it deterministically instead of relying on paint order. */ .card__art, .card__arch { position: relative; z-index: 1; /* default: the writing wins */ display: grid; place-items: end center; padding-block-start: 1rem; background: radial-gradient( 80% 62% at 50% 96%, color-mix(in srgb, var(--accent, var(--gold)) 42%, transparent) 0%, transparent 72% ); transition: z-index 0.25s step-end; } .card__art { block-size: 250px; } .card__arch { block-size: 300px; padding-block-start: 0; place-items: center; } /* On hover, and on keyboard focus landing anywhere inside the card, the character rises over the writing. step-start swaps it at the head of the transition so the figure leads the lift; the step-end above holds it up for 0.25s on release so it never drops behind the name mid-animation. :hover is gated on a real pointer -- a tap leaves :hover stuck on touch, which would bury the name for good on a phone. :focus-within is not gated, so keyboard users get the same reveal. */ @media (hover: hover) { .card:hover .card__art, .card:hover .card__arch { z-index: 3; transition: z-index 0.05s step-start; } } .card:focus-within .card__art, .card:focus-within .card__arch { z-index: 3; transition: z-index 0.05s step-start; } /* DELIBERATE: the cards are NOT keyboard-focusable, so :focus-within above cannot fire today. This is a decision, not an oversight -- please don't "fix" it by adding tabindex="0" to the

s. Why: the reveal gates no information (name + subject sit above the art by default and are always readable), the cards are non-interactive so a tab stop would be a promise that Enter does something, and it would force keyboard users through 28 decorative stops to reach the real controls -- a daily cost paid for a purely visual flourish. The rule is kept because it becomes correct for free the day these cards become real links (e.g. to the /family/ profile pages), at which point the tab stops are earned because they lead somewhere. */ .card__art img, .card__arch img { inline-size: auto; max-inline-size: 100%; /* a cut-out may never overflow its card sideways */ max-block-size: 100%; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(2, 4, 14, 0.6)); transition: transform 0.5s var(--ease-out); } /* Every cut-out is normalised onto one shared canvas per family, so the box is known before the image decodes -- no layout shift, and nothing to crop. Keep these in step with CHARACTER_CANVAS / GATEWAY_CANVAS in tools/optimize_assets.py. */ .card__art img { aspect-ratio: 5 / 7; } /* characters: 560x784, 360x504 */ .card__arch img { aspect-ratio: 2 / 3; } /* gateways: 620x930, 400x600 */ @media (hover: hover) { .card:hover .card__art img { transform: translateY(-8px) scale(1.04); } .card:hover .card__arch img { transform: scale(1.05); } } .card__body { position: relative; z-index: 2; /* above the art until the card is hovered or focused */ padding: 1rem 1.15rem 1.3rem; border-block-start: 1px solid color-mix(in srgb, var(--accent, var(--gold)) 26%, transparent); background: color-mix(in srgb, var(--ink-950) 72%, transparent); } .card__name { font-size: 1.16rem; } .card__subject { margin-block-start: 0.12rem; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.04em; color: color-mix(in srgb, var(--accent, var(--gold)) 55%, var(--cream)); } html[lang="ar"] .card__subject { letter-spacing: 0; } .card__line { margin-block-start: 0.55rem; font-size: 0.9rem; line-height: 1.55; color: var(--cream-dim); } html[lang="ar"] .card__line { line-height: 1.8; } /* Controls */ .carousel__controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-block-start: 1.2rem; } .cbtn { display: grid; place-items: center; inline-size: 48px; block-size: 48px; flex: none; border-radius: 50%; color: var(--cream); background: var(--plate); border: 1px solid var(--plate-line); backdrop-filter: blur(10px); transition: background-color 0.25s, border-color 0.25s, transform 0.25s var(--ease-out); } .cbtn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); transform: scale(1.08); } .cbtn:disabled { opacity: 0.34; cursor: default; } /* The glyph points "forward"; forward is left in Arabic. */ .cbtn--prev svg { transform: scaleX(-1); } html[dir="rtl"] .cbtn--prev svg { transform: none; } html[dir="rtl"] .cbtn--next svg { transform: scaleX(-1); } .carousel__hint { font-size: 0.8rem; color: var(--cream-dim); text-align: center; text-shadow: 0 2px 12px rgba(4, 7, 20, 0.95); } /* -------------------------------------------------------------------------- 10. Scene ribbon -------------------------------------------------------------------------- */ .ribbon { margin-block-start: clamp(3rem, 8vh, 5rem); } .ribbon__head { max-inline-size: 58ch; margin-inline: auto; margin-block-end: 1.6rem; padding: 1.1rem 1.5rem; text-align: center; border-radius: var(--radius-md); background: var(--plate-soft); border: 1px solid var(--plate-line); backdrop-filter: blur(12px); } .ribbon__title { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); color: var(--gold); } .ribbon__lead { margin-block-start: 0.5rem; font-size: 0.95rem; color: var(--cream-dim); } .ribbon__track { display: flex; gap: clamp(0.8rem, 2vw, 1.2rem); overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; padding-block-end: 0.6rem; padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); } .ribbon__track::-webkit-scrollbar { display: none; } .ribbon__item { flex: 0 0 auto; inline-size: clamp(220px, 74vw, 420px); scroll-snap-align: center; } .ribbon__item figure { overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--plate-line); box-shadow: 0 16px 40px rgba(2, 4, 14, 0.5); } .ribbon__item img { inline-size: 100%; block-size: clamp(150px, 26vw, 250px); object-fit: cover; transition: transform 0.6s var(--ease-out); } @media (hover: hover) { .ribbon__item:hover img { transform: scale(1.07); } } /* -------------------------------------------------------------------------- 11. Why — four pillars -------------------------------------------------------------------------- */ .pillars { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .pillar { position: relative; padding: clamp(1.5rem, 3vw, 2.1rem); border-radius: var(--radius-lg); background: linear-gradient(165deg, var(--plate) 0%, var(--plate-soft) 100%); border: 1px solid var(--plate-line); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 18px 50px rgba(2, 4, 14, 0.45); overflow: hidden; transform: perspective(1000px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform 0.4s var(--ease-out), border-color 0.3s; } .pillar::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.55; } @media (hover: hover) { .pillar:hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); } } .pillar__num { display: block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.18em; color: var(--gold); margin-block-end: 0.7rem; } .pillar__title { font-size: 1.22rem; } .pillar__body { margin-block-start: 0.7rem; font-size: 0.96rem; color: var(--cream-dim); } /* -------------------------------------------------------------------------- 12. How it works -------------------------------------------------------------------------- */ .steps { display: grid; gap: clamp(1rem, 2.4vw, 1.8rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); counter-reset: step; } .step { position: relative; padding: clamp(1.5rem, 3vw, 2.1rem); padding-block-start: clamp(2.4rem, 4vw, 3rem); border-radius: var(--radius-lg); background: var(--plate); border: 1px solid var(--plate-line); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 18px 50px rgba(2, 4, 14, 0.45); } .step__num { position: absolute; inset-block-start: clamp(1.1rem, 2.4vw, 1.5rem); inset-inline-start: clamp(1.5rem, 3vw, 2.1rem); display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; font-weight: 800; font-size: 1.05rem; color: var(--ink-900); background: linear-gradient(135deg, var(--gold), var(--gold-deep)); box-shadow: 0 8px 22px color-mix(in srgb, var(--gold-deep) 45%, transparent); } .step__title { margin-block-start: 1.6rem; font-size: 1.2rem; } .step__body { margin-block-start: 0.6rem; font-size: 0.96rem; color: var(--cream-dim); } /* -------------------------------------------------------------------------- 13. Founders -------------------------------------------------------------------------- */ .founders__inner { max-inline-size: 66ch; margin-inline: auto; padding: clamp(1.8rem, 4.5vw, 3.2rem); text-align: center; border-radius: var(--radius-lg); background: linear-gradient(165deg, var(--plate) 0%, var(--plate-soft) 100%); border: 1px solid var(--plate-line); backdrop-filter: blur(16px) saturate(1.15); box-shadow: 0 24px 70px rgba(2, 4, 14, 0.55); } .founders__body { margin-block-start: 1.2rem; font-size: clamp(1rem, 0.96rem + 0.35vw, 1.13rem); color: var(--cream); } .founders__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-block-start: 2rem; } .founder { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-inline-size: 128px; padding: 0.9rem 1.2rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--ink-950) 55%, transparent); border: 1px solid var(--plate-line); } .founder__mark { inline-size: 26px; block-size: 26px; margin-block-end: 0.35rem; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--gold), var(--gold-deep)); box-shadow: 0 4px 14px color-mix(in srgb, var(--gold-deep) 55%, transparent); } .founder__name { font-weight: 700; font-size: 0.98rem; } .founder__role { font-size: 0.76rem; color: var(--cream-dim); } .founders__company { margin-block-start: 1.6rem; font-size: 0.88rem; letter-spacing: 0.05em; color: var(--gold); } html[lang="ar"] .founders__company { letter-spacing: 0; } /* -------------------------------------------------------------------------- 14. FAQ — native

, so it works with JavaScript disabled -------------------------------------------------------------------------- */ .faq { max-inline-size: 76ch; margin-inline: auto; display: grid; gap: 0.75rem; } .faq__item { border-radius: var(--radius-md); background: var(--plate); border: 1px solid var(--plate-line); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 14px 40px rgba(2, 4, 14, 0.4); overflow: hidden; transition: border-color 0.3s; } .faq__item[open] { border-color: color-mix(in srgb, var(--gold) 52%, transparent); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 56px; padding: 0.9rem 1.3rem; font-weight: 700; font-size: clamp(0.98rem, 0.95rem + 0.25vw, 1.08rem); cursor: pointer; list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__q:hover { color: var(--gold); } .faq__chev { flex: none; color: var(--gold); transition: rotate 0.35s var(--ease-out); } .faq__item[open] .faq__chev { rotate: 180deg; } .faq__a { padding: 0 1.3rem 1.2rem; color: var(--cream-dim); font-size: 0.98rem; } /* Height animation is driven by app.js writing --faq-h; without JS the panel simply appears, which is the correct native behaviour. */ .js .faq__item[open] .faq__a { animation: faq-in 0.35s var(--ease-out) both; } @keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 15. Closing CTA -------------------------------------------------------------------------- */ .join__inner { max-inline-size: 58ch; margin-inline: auto; padding: clamp(2rem, 5vw, 3.4rem); text-align: center; border-radius: var(--radius-lg); background: linear-gradient(165deg, var(--plate) 0%, var(--plate-soft) 100%); border: 1px solid var(--plate-line); backdrop-filter: blur(16px) saturate(1.15); box-shadow: 0 24px 70px rgba(2, 4, 14, 0.55); } .join__body { margin-block-start: 1rem; color: var(--cream-dim); } .join__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.9rem; margin-block-start: 1.8rem; } /* -------------------------------------------------------------------------- 15A. Later content sections Learning engine, illustrated stories, vision, pricing, founding schools. These are EXTENSIONS, not a second design system. Every one of them reuses an element that already exists — .pillar for the cards, .card for the story frames, .btn--ghost for the calls to action — so hover, tilt, the reduced- motion resets and the print rules above all keep applying with no new declarations. Nothing below introduces a colour, a radius or an easing curve that is not already a token in section 1. -------------------------------------------------------------------------- */ /* --- 15A.1 Learning engine: real product screenshots ---------------------- Columns are capped and centred rather than left to stretch: panels only appear once their screenshot has been captured, so the section has to look deliberate at one, two or three cards, not just at the full set. */ .panels { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 360px)); justify-content: center; } .panels .panel { display: flex; flex-direction: column; } .panel__shot { margin-block-end: 1.2rem; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--plate-line); background: color-mix(in srgb, var(--ink-950) 60%, transparent); box-shadow: 0 14px 34px rgba(2, 4, 14, 0.45); } .panel__shot img { inline-size: 100%; block-size: auto; transition: transform 0.6s var(--ease-out); } @media (hover: hover) { .panel:hover .panel__shot img { transform: scale(1.03); } } /* --- 15A.2 Illustrated stories: a card carrying one page of art ----------- */ .card--story { inline-size: clamp(250px, 78vw, 420px); } .card__frame { position: relative; z-index: 1; overflow: hidden; border-block-end: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); } .card__frame img { inline-size: 100%; block-size: auto; /* the story pages are all 1280x800, so the box is known before decode */ aspect-ratio: 8 / 5; object-fit: cover; transition: transform 0.6s var(--ease-out); } @media (hover: hover) { .card--story:hover .card__frame img { transform: scale(1.05); } } .card--story .card__line { margin-block-start: 0; } /* --- 15A.3 Vision: the founders' reason, and the audited numbers ---------- */ .vision__inner { max-inline-size: 68ch; margin-inline: auto; padding: clamp(1.8rem, 4.5vw, 3.2rem); border-radius: var(--radius-lg); background: linear-gradient(165deg, var(--plate) 0%, var(--plate-soft) 100%); border: 1px solid var(--plate-line); backdrop-filter: blur(16px) saturate(1.15); box-shadow: 0 24px 70px rgba(2, 4, 14, 0.55); } .vision__title { text-align: center; } .vision__body { display: grid; gap: 1rem; margin-block-start: 1.5rem; } .vision__body p { font-size: clamp(1rem, 0.96rem + 0.35vw, 1.13rem); color: var(--cream); } .vision__body p:last-child { color: var(--gold); font-weight: 700; } .facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-block-start: 2rem; padding-block-start: 1.8rem; border-block-start: 1px solid var(--plate-line); } .fact { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 0.75rem 1.1rem; text-align: center; border-radius: var(--radius-md); background: color-mix(in srgb, var(--ink-950) 55%, transparent); border: 1px solid var(--plate-line); } .fact__value { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem); font-weight: 800; line-height: 1.15; color: var(--gold); } .fact__label { font-size: 0.86rem; color: var(--cream-dim); } /* --- 15A.4 Pricing -------------------------------------------------------- */ .plans { max-inline-size: 780px; margin-inline: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .plan { text-align: center; } .plan--best { border-color: color-mix(in srgb, var(--gold) 60%, transparent); } .plan--best::after { opacity: 1; block-size: 3px; } .plan__badge { display: inline-block; margin-block-end: 0.9rem; padding: 0.25rem 0.85rem; border-radius: 999px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-900); background: linear-gradient(135deg, var(--gold), var(--gold-deep)); } html[lang="ar"] .plan__badge { letter-spacing: 0; text-transform: none; } .plan__name { font-size: 1.16rem; color: var(--cream-dim); font-weight: 700; } .plan__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.35rem; margin-block-start: 0.5rem; } .plan__amount { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem); font-weight: 800; line-height: 1; color: var(--gold); } .plan__currency { font-size: 1.05rem; font-weight: 700; color: var(--gold); } .plan__period { font-size: 0.95rem; color: var(--cream-dim); } .plan__sub { margin-block-start: 0.45rem; font-size: 0.9rem; color: var(--cream-dim); } .plan__features { display: grid; gap: 0.55rem; margin-block-start: 1.5rem; text-align: start; } .plan__features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; color: var(--cream); } .plan__features .tick { flex: none; margin-block-start: 0.28em; color: var(--gold); } .plan__tax { margin-block-start: 1.3rem; padding-block-start: 0.9rem; border-block-start: 1px solid var(--plate-line); font-size: 0.82rem; color: var(--cream-dim); } .pricing__note { margin-block-start: 1.5rem; text-align: center; font-size: 0.9rem; color: var(--gold); text-shadow: 0 2px 12px rgba(4, 7, 20, 0.95); } /* --- 15A.5 Founding schools ---------------------------------------------- The slot row is EMPTY on purpose: no school has signed, so there is nothing truthful to put in it. It is aria-hidden because it carries no information a screen-reader user needs — .slots__note says the same thing in words, and three identical "Your school here" announcements would only be noise. */ .slots-block { max-inline-size: 62ch; margin-inline: auto; margin-block-start: clamp(2rem, 5vh, 3rem); padding: clamp(1.4rem, 3.4vw, 2.2rem); text-align: center; border-radius: var(--radius-lg); background: var(--plate-soft); border: 1px solid var(--plate-line); backdrop-filter: blur(14px) saturate(1.1); } .slots { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } .slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; min-block-size: 104px; padding: 1rem; border-radius: var(--radius-md); /* dashed = "not yet", the same idiom the launch gate already uses */ border: 1px dashed var(--plate-line); background: color-mix(in srgb, var(--ink-950) 42%, transparent); } .slot__mark { inline-size: 30px; block-size: 30px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent); } .slot__label { font-size: 0.84rem; font-weight: 700; color: var(--cream-dim); } .slots__note { margin-block-start: 1.2rem; font-size: 0.88rem; color: var(--cream-dim); } .slots__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-block-start: 1.5rem; } .slots__actions .btn svg { color: var(--gold); } .slots__actions .btn:first-child svg { color: #4ADE80; } /* -------------------------------------------------------------------------- 16. Footer -------------------------------------------------------------------------- */ .site-footer { position: relative; padding-block: clamp(3rem, 8vh, 5rem) 2rem; background: linear-gradient(180deg, transparent, rgba(4, 7, 20, 0.8) 42%); } .footer__grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); padding-block-end: 2rem; border-block-end: 1px solid var(--plate-line); } .footer__brand img { inline-size: 56px; } .footer__name { margin-block-start: 0.7rem; font-weight: 700; font-size: 1.1rem; } .footer__tagline { color: var(--cream-dim); font-size: 0.92rem; } .footer__love { margin-block-start: 0.9rem; font-size: 0.9rem; color: var(--gold); } .footer__col h2 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-block-end: 0.9rem; } html[lang="ar"] .footer__col h2 { letter-spacing: 0; text-transform: none; } .footer__col ul { display: grid; gap: 0.15rem; } .footer__col a, .footer__col address { display: inline-flex; align-items: center; min-block-size: 40px; font-size: 0.94rem; font-style: normal; color: var(--cream-dim); transition: color 0.2s; } .footer__col address { display: block; line-height: 1.9; } .footer__col a:hover { color: var(--gold); } .footer__bottom { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; padding-block-start: 1.5rem; font-size: 0.84rem; color: var(--cream-dim); } .footer__note { opacity: 0.75; } /* -------------------------------------------------------------------------- 17. Reveal choreography Only armed when JavaScript is running: without .js the content is simply visible, which is the whole point of the no-JS guarantee. -------------------------------------------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .js [data-reveal].is-in { opacity: 1; transform: none; } /* Children stagger in behind their parent */ .js [data-stagger] > * { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); } .js [data-stagger].is-in > *, .js .is-in [data-stagger] > * { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 18. Responsive -------------------------------------------------------------------------- */ @media (min-width: 900px) { .hero__inner { grid-template-columns: 1.15fr 0.85fr; } .hero__copy { padding: clamp(2rem, 3.4vw, 3rem); } .card__art { block-size: 280px; } .card__arch { block-size: 340px; } } @media (max-width: 899.98px) { .hero__mascot { order: -1; inline-size: min(78%, 320px); } .hero { min-block-size: auto; padding-block-start: 1.5rem; } } @media (max-width: 640px) { .brand__tag { display: none; } .wa-link__text { display: none; } .wa-link { padding-inline: 0.75rem; } .hero__actions .btn, .join__actions .btn, .slots__actions .btn, .gate__locked { inline-size: 100%; } .hero__actions, .join__actions, .slots__actions { flex-direction: column; align-items: stretch; } .footer__bottom { flex-direction: column; } .facts { gap: 0.5rem; } .fact { flex: 1 1 45%; } } /* Very narrow (360px) — keep the header on one line, never scroll sideways */ @media (max-width: 380px) { .brand__name { font-size: 0.95rem; } .brand img { inline-size: 38px; } .langs a { min-inline-size: 38px; padding-inline: 0.3rem; } } /* -------------------------------------------------------------------------- 19. Reduced motion Parallax, tilt, mouse-reactivity and the idle loops all stop. Scene cross-fades survive as plain opacity, which is calm rather than absent. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .backdrop__stack { transform: none !important; } .backdrop__layer { transform: none !important; } .backdrop__glow { animation: none; opacity: 0.45; } .hero__mascot { transform: none !important; } .hero__mascot img { transform: none !important; animation: none; } .hero__halo { animation: none; } .hero__scroll-line { animation: none; opacity: 0.6; } .card, .pillar { transform: none !important; } /* Reveals become instant rather than invisible */ .js [data-reveal], .js [data-stagger] > * { opacity: 1 !important; transform: none !important; } } /* Users who ask the OS for more contrast get solid plates, no translucency */ @media (prefers-contrast: more) { :root { --plate: var(--ink-950); --plate-soft: var(--ink-900); --plate-line: var(--gold); --cream-dim: var(--cream); } .backdrop__scrim { background: rgba(4, 7, 20, 0.86); } } /* -------------------------------------------------------------------------- 20. Print — drop the art, keep the words -------------------------------------------------------------------------- */ @media print { /* the empty school slots are placeholders on screen and pure noise on paper */ .backdrop, .hero__mascot, .hero__scroll, .carousel__controls, .slots { display: none; } body { background: #fff; color: #000; } .hero__title, .section__title { color: #000; -webkit-text-fill-color: #000; } .card, .pillar, .step, .faq__item, .section__head, .vision__inner, .slots-block, .fact { border: 1px solid #999; } }