/* ============================================================ A trajectory from Madinah — homepage composition One continuous route: origin → chapters → destination. Mobile-first. Typography, rules and line work carry the design; containers are used only where information needs one. ============================================================ */ :root { --maxw: 1520px; --header-h: 76px; --gutter: clamp(20px, 5vw, 84px); --rule: #ffffff2e; --rule-strong: #ffffff5c; --dim: #b9c4da; --trace: var(--sky-blue); } /* The body scroll container must stay unclipped; chapters clip their own bleed instead. (overflow:clip on propagates to the viewport and stops the document scrolling in Chromium.) */ .landing-page { background: #fff; } .container { padding-inline: var(--gutter); } .mono { font-family: "Fira Code", monospace; direction: ltr; letter-spacing: .05em; } .reveal { opacity: 1; transform: none; } .chapter { position: relative; overflow: clip; padding-block: clamp(64px, 11vw, 150px); } .chapter > .container, .chapter > * { position: relative; z-index: 1; } .chapter > .pattern { position: absolute; inset: -48px 0; z-index: 0; pointer-events: none; background: url("assets/patterns/starfield.svg?v=2") repeat; background-size: 560px 560px; opacity: .8; } .chapter > .pattern-light { filter: brightness(0) saturate(100%); opacity: .12; } .chapter.light { background: #fff; color: var(--ink); } .chapter.dark { background: var(--ink); color: #fff; } .scroll-progress { position: fixed; inset: 0 0 auto; z-index: 200; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; pointer-events: none; } [dir="rtl"] .scroll-progress { transform-origin: right; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; } .chapter.dark :focus-visible, .origin :focus-visible, .site-header :focus-visible { outline-color: #fff; } /* ---------- Shared elements ---------- */ .btn { position: relative; border-radius: 2px; gap: 18px; min-height: 54px; font-weight: 700; letter-spacing: .01em; overflow: hidden; transition: background .25s, color .25s, box-shadow .25s; } .btn-primary { background: var(--neon-yellow); color: var(--deep-blue); } .btn-primary:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--deep-blue); } .btn .arrow { font-size: 22px; font-weight: 400; } /* The launch mark: the rocket sits in an Orbit ring and lifts off, leaving the trajectory behind it. */ .rocket { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; overflow: hidden; } .rocket svg { width: 20px; height: 20px; transition: translate .45s cubic-bezier(.3, .8, .3, 1); } .rocket::after { content: ""; position: absolute; inset-block-start: 55%; inset-inline-start: 50%; width: 1px; height: 0; background: currentColor; opacity: .5; transition: height .45s cubic-bezier(.3, .8, .3, 1); } .rocket-flame { opacity: 0; transition: opacity .3s .1s; } .btn:hover .rocket svg, .btn:focus-visible .rocket svg { translate: 0 -4px; } .btn:hover .rocket::after, .btn:focus-visible .rocket::after { height: 40%; } .btn:hover .rocket-flame, .btn:focus-visible .rocket-flame { opacity: 1; } [dir="rtl"] .rocket svg { transform: none; } .arrow { display: inline-block; transition: translate .25s; } [dir="rtl"] .arrow { transform: scaleX(-1); } .btn:hover .arrow, .resource-link:hover .arrow { translate: 3px -3px; } .text-link { padding-inline: 0; text-underline-offset: 7px; font-size: 15px; } .text-link:hover { text-decoration-thickness: 2px; } /* H2 is Overpass Regular at 120% (guide, page 13) — the light, wide setting is what keeps these headings from reading as a template. */ .section-title { font-family: var(--font); font-size: clamp(29px, 5vw, 54px); line-height: 1.2; font-weight: 400; text-align: start; margin-bottom: 30px; text-wrap: balance; letter-spacing: -.01em; } html[lang="ar"] .section-title { font-weight: 500; line-height: 1.42; letter-spacing: 0; } .section-title em { color: var(--electric-blue); font-weight: 600; } .chapter.dark .section-title em { color: var(--neon-yellow); } /* "Long blocks of text can alternate between colors for each line, like stripes on the flag" (guide, page 12). Applied to one large heading on white, where both colours clear 4.5:1. */ @supports (background-clip: text) or (-webkit-background-clip: text) { .stripes { background-image: repeating-linear-gradient(#07173F 0px 1.42em, #0042A6 1.42em 2.84em); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stripes em { -webkit-text-fill-color: transparent; } html[lang="en"] .stripes { background-image: repeating-linear-gradient(#07173F 0px 1.2em, #0042A6 1.2em 2.4em); } } /* Chapter marks: an oversized outlined numeral set against the margin, with the chapter name on the baseline beside it. */ .chapter-mark { --mark: var(--blue); position: relative; display: flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mark); margin-bottom: 26px; } .chapter.dark .chapter-mark { --mark: var(--sky-blue); } .chapter-mark::after { content: ""; flex: 1; height: 1px; background: var(--line); } .chapter.dark .chapter-mark::after { background: var(--rule); } .chapter-num { flex: 0 0 auto; font-size: 46px; font-weight: 400; line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--mark); letter-spacing: -.02em; } html[lang="ar"] .chapter-mark { letter-spacing: 0; } /* ============================================================ ORIGIN — the first viewport Campaign artwork at scale, cropped by the frame; the headline sits across it; the route leaves the disc and exits the corner. ============================================================ */ .origin { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding: 0; background: var(--ink); color: #fff; overflow: clip; } .origin-head { flex: 0 0 auto; } .mission-line { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-block: 15px; border-bottom: 1px solid var(--rule); font-size: 10px; } .mission-status { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .04em; } .mission-status::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; background: var(--gold); border-radius: 50%; } .mission-line .coordinates { display: none; } .mission-line > .mono { white-space: nowrap; } .origin-stage { position: relative; flex: 1 1 auto; display: flex; align-items: center; min-height: 0; padding-block: clamp(20px, 4vw, 48px) clamp(96px, 30vw, 150px); } /* The campaign artwork sits in a circular holding shape hung off the side of the composition, ringed by concentric orbits (guide, page 10). */ .origin-art, .origin-orbits { position: absolute; margin: 0; pointer-events: none; width: var(--badge-w, min(118vw, 560px)); aspect-ratio: 1; bottom: var(--badge-b, clamp(-108px, -22vw, -60px)); inset-inline-end: var(--badge-e, -34vw); inset-inline-start: var(--badge-s, auto); } .origin-art { z-index: 2; border-radius: 50%; background: #fff; padding: 5.5%; } .origin-art picture { display: block; height: 100%; } .origin-art img { width: 100%; height: 100%; object-fit: contain; } .origin-orbits { z-index: 1; } .origin-orbits span { position: absolute; border: 1px solid #ffffff; border-radius: 50%; } .origin-orbits span:nth-child(1) { inset: -7%; opacity: .28; } .origin-orbits span:nth-child(2) { inset: -19%; opacity: .18; } .origin-orbits span:nth-child(3) { inset: -34%; opacity: .1; } .origin-arc { position: absolute; z-index: 2; inset: -10% -12%; width: 124%; height: 120%; pointer-events: none; } .origin-arc path { fill: none; vector-effect: non-scaling-stroke; } .arc-ghost { stroke: #ffffff; stroke-width: 1; opacity: .16; } .arc-live { stroke: var(--trace); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; } [dir="rtl"] .origin-arc { transform: scaleX(-1); } .origin-vessel { position: absolute; z-index: 3; inset-block-start: 16%; inset-inline-end: 7%; display: none; align-items: center; gap: 12px; color: var(--neon-yellow); } .origin-vessel svg { width: 26px; height: 26px; rotate: 34deg; } [dir="rtl"] .origin-vessel svg { rotate: -34deg; } .vessel-tag { font-size: 9px; letter-spacing: .22em; opacity: .8; } .origin-type { position: relative; z-index: 3; width: 100%; } .origin-type .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-blue); margin-bottom: clamp(12px, 2vh, 20px); } html[lang="ar"] .origin-type .eyebrow { letter-spacing: 0; } .origin-title { font-size: clamp(36px, min(12.5vw, 9.6vh), 82px); line-height: 1.02; font-weight: 700; letter-spacing: -.01em; margin-bottom: clamp(14px, 2.2vh, 22px); } .origin-title .tl { display: block; overflow: hidden; padding-block: .14em; margin-block: -.09em; } /* Each line is set further along the trajectory than the one before. */ .origin-title .tl:nth-child(2) { margin-inline-start: 7%; } .origin-title .tl:nth-child(3) { margin-inline-start: 15%; } .origin-title .tl i { display: block; font-style: normal; } .origin-title em { color: var(--sky-blue); } html[lang="en"] .origin-title { font-weight: 900; text-transform: uppercase; letter-spacing: .05em; line-height: 1; font-size: clamp(30px, min(9.6vw, 8.4vh), 68px); } html[lang="ar"] .origin-title { line-height: 1.14; } .frontier-description { font-size: 15px; line-height: 1.8; max-width: 40ch; color: #dbe2ee; } .frontier-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-block: clamp(16px, 2.6vh, 30px) 12px; } .frontier-actions .btn { padding-inline: 24px; flex: 1 1 auto; justify-content: space-between; } .frontier-actions .text-link { color: #fff; font-size: 14px; } .frontier-small { font-size: 11px; color: var(--dim); } .origin-caption { position: absolute; z-index: 4; inset-inline-start: var(--gutter); bottom: clamp(16px, 4vw, 30px); display: flex; flex-direction: column; gap: 7px; font-size: 11px; line-height: 1.6; color: var(--dim); max-width: 20ch; } .origin-caption .mono { font-size: 9px; color: #fff; letter-spacing: .14em; } .origin-caption::before { content: ""; width: 34px; height: 1px; background: var(--sky-blue); } .origin-foot { position: relative; z-index: 4; flex: 0 0 auto; background: var(--ink); } .event-strip { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); } .event-detail { padding-block: 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .event-detail + .event-detail { border-inline-start: 1px solid var(--rule); padding-inline-start: 18px; } .event-detail small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); } html[lang="ar"] .event-detail small { letter-spacing: 0; } .event-detail strong { font-size: 15px; font-weight: 500; line-height: 1.5; } .event-detail .mini-note { font-size: 11px; color: var(--dim); } .event-detail:last-child { grid-column: 1/-1; border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--rule); flex-direction: row; justify-content: space-between; align-items: center; gap: 14px; } .countdown-inline { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; } .countdown-inline > span { white-space: nowrap; } .countdown-inline [data-cd] { font-size: 20px; font-weight: 500; } .countdown-inline .cd-unit { font-size: 10px; color: var(--dim); font-family: var(--font); } .countdown-inline b { font-size: 12px; color: #8f9db8; font-weight: 400; } /* A single transmitted line between the origin and the first chapter. */ .signal-band { background: var(--blue); color: #fff; overflow: clip; } .signal-content { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-block: 22px; font-size: 12px; font-weight: 600; letter-spacing: .02em; } .signal-mark { color: var(--gold); font-weight: 400; } .signal-content > .mono { display: none; } /* ============================================================ SEAMS — the route crossing a chapter boundary ============================================================ */ .seam { position: relative; line-height: 0; height: clamp(52px, 8vw, 116px); } .seam svg { display: block; width: 100%; height: 100%; } .seam-down { background: var(--ink); } /* The seam always carries the colour of the band it leaves. */ .signal-band + .seam-down { background: var(--blue); } .seam-down .seam-fill { fill: #fff; } .seam-up { background: #fff; } .seam-up .seam-fill { fill: var(--ink); } .seam-arc { fill: none; stroke: var(--trace); stroke-width: 1.5; vector-effect: non-scaling-stroke; } [dir="rtl"] .seam svg { transform: scaleX(-1); } /* ============================================================ RAIL — the continuous route, present the whole way down ============================================================ */ .rail { display: none; } /* ============================================================ 01 — THE EXPERIENCE ============================================================ */ .briefing { display: grid; gap: 30px; } .briefing .section-title { margin-bottom: 0; } .briefing-body .prose { font-size: 16px; line-height: 1.85; color: var(--body-c); } .briefing-body .lead { color: var(--ink); } .briefing-body .prose + .prose { margin-top: 18px; font-size: 15px; } .briefing-body .text-link { display: inline-block; margin-top: 22px; font-size: 14px; color: var(--electric-blue); } /* The event's measurable facts, read as one instrument strip. */ .briefing-data { display: grid; grid-template-columns: 1fr 1fr; margin: 44px 0 0; border-top: 1px solid var(--ink); } .bd-cell { display: flex; flex-direction: column; gap: 10px; padding: 20px 16px 22px 0; border-bottom: 1px solid var(--line); min-width: 0; } .bd-cell + .bd-cell { border-inline-start: 1px solid var(--line); padding-inline-start: 16px; } .bd-cell dt { font-size: 9px; letter-spacing: .18em; color: var(--electric-blue); } .bd-cell dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--body-c); } .bd-lead { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 18px; border-inline-start: 0; } .bd-lead dt { flex: 0 0 auto; } .bd-lead dd { display: flex; align-items: baseline; gap: 16px; color: var(--ink); } .bd-figure { font-family: var(--font-display); font-weight: 900; font-size: clamp(52px, 15vw, 74px); line-height: .85; letter-spacing: -.03em; color: var(--electric-blue); } /* ============================================================ 02 — A LEDGER, NOT CARDS ============================================================ */ #why { padding-top: 0; } .benefits-layout { display: grid; gap: 8px; } .benefits-heading { border-top: 1px solid var(--line); padding-top: 34px; } .why-grid { display: block; margin: 0; } .why-card, .why-card-featured { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 16px; padding: 22px 0; border: 0; border-top: 1px solid var(--line); background: transparent; border-radius: 0; box-shadow: none; min-height: 0; transition: none; } .why-card:last-child { border-bottom: 1px solid var(--line); } .why-card:hover { transform: none; box-shadow: none; } .why-card::after { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0; width: 0; height: 1px; background: var(--blue); transition: width .45s cubic-bezier(.2, .7, .2, 1); } .why-card:hover::after { width: 100%; } .benefit-number { grid-row: 1/3; padding-top: 5px; font-size: 11px; color: var(--blue); } .why-card h3 { font-size: 19px; margin: 0; line-height: 1.4; color: var(--ink); font-weight: 700; } .why-card p { grid-column: 2; font-size: 14px; line-height: 1.75; color: var(--body-c); margin: 0; } /* ============================================================ 03 — ROLES: a selectable index and one typographic answer ============================================================ */ .mission-explorer { background: var(--ink); } .explorer-grid { display: grid; gap: 30px; } .explorer-intro { max-width: 42ch; font-size: 15px; color: #dbe2ee; margin-bottom: 26px; } .role-picker { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule-strong); } .role-button { position: relative; display: flex; align-items: center; gap: 14px; text-align: start; font: 500 17px var(--font); min-height: 60px; color: #fff; background: transparent; border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0; padding: 12px 4px; cursor: pointer; transition: color .25s, padding .35s cubic-bezier(.2, .7, .2, 1); } .role-button::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--sky-blue); opacity: .16; transition: width .4s cubic-bezier(.2, .7, .2, 1); } .role-button:hover::before { width: 100%; } .role-button[aria-selected="true"] { color: var(--gold); padding-inline-start: 16px; } .role-button[aria-selected="true"]::before { width: 100%; background: var(--gold); opacity: .1; } .role-number { font-size: 10px; opacity: .7; } .role-button[aria-selected="true"] .role-number { opacity: 1; } .mission-output { position: relative; background: transparent; padding: 28px 0 0; border: 0; border-top: 1px solid var(--rule-strong); min-width: 0; } .output-holder { position: relative; display: grid; place-items: center; width: clamp(160px, 46vw, 210px); aspect-ratio: 1; margin-bottom: 24px; } .output-ring { position: absolute; border: 1px solid #fff; border-radius: 50%; } .output-ring:nth-of-type(1) { inset: 0; opacity: .22; } .output-ring:nth-of-type(2) { inset: 13%; opacity: .4; border-color: var(--blue-yonder); } .mission-output .output-figure { font-family: var(--font-display); font-size: clamp(56px, 16vw, 74px); line-height: 1; font-weight: 900; color: var(--neon-yellow); letter-spacing: -.03em; margin: 0; } .output-top { display: flex; gap: 14px; flex-wrap: wrap; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); } html[lang="ar"] .output-top { letter-spacing: 0; text-transform: none; } .output-top > .mono { color: var(--gold); } .mission-output h3 { color: #fff; font-size: clamp(26px, 7vw, 34px); line-height: 1.22; margin-block: 18px 16px; font-weight: 700; letter-spacing: -.015em; } html[lang="ar"] .mission-output h3 { line-height: 1.4; letter-spacing: 0; } .mission-output p { color: #dbe2ee; font-size: 15px; line-height: 1.8; } .output-note { font-size: 12px !important; color: var(--dim) !important; border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 22px; } .resource-link { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 22px 0; border-top: 1px solid var(--rule-strong); margin-top: 34px; font-size: 15px; } .resource-link:hover { text-decoration: underline; text-underline-offset: 5px; } .resource-link .arrow { flex-shrink: 0; font-size: 26px; } /* ============================================================ 04 — THE JOURNEY: three waypoints on one route ============================================================ */ .flight-path { background: var(--ink); padding-top: 0; } .flight-grid { display: grid; gap: 30px; } .flight-path .section-title em { color: var(--sky-blue); } .flight-map { display: none; } .map-route { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .wp circle { fill: var(--ink); stroke: var(--rule-strong); stroke-width: 1.5; transition: fill .35s, stroke .35s; } .wp-tick { stroke: var(--rule); stroke-width: 1; } .wp-halo { fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0; transition: opacity .35s; } .flight-map[data-active="1"] .wp-1 circle, .flight-map[data-active="2"] .wp-2 circle, .flight-map[data-active="3"] .wp-3 circle { fill: var(--gold); stroke: var(--gold); } .flight-map[data-active="3"] .wp-3 .wp-halo { fill: none; opacity: .6; } .flight-steps { position: relative; padding-inline-start: 26px; } .flight-steps::before { content: ""; position: absolute; inset-block: 12px 40px; inset-inline-start: 4px; width: 1px; background: var(--rule); } .flight-steps::after { content: ""; position: absolute; inset-block-start: 12px; inset-inline-start: 4px; width: 1px; height: var(--route, 0%); background: var(--trace); transition: height .2s linear; } .flight-step { position: relative; display: block; padding-block: 30px; border: 0; } .flight-step + .flight-step { border-top: 1px solid var(--rule); } .flight-step::before { content: ""; position: absolute; top: 42px; inset-inline-start: -26px; width: 9px; height: 9px; margin-inline-start: 0; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); transition: background .3s, box-shadow .3s; } .flight-step.live::before { background: var(--gold); box-shadow: 0 0 0 5px #eafe071f; } .step-number { display: block; font-size: 11px; color: var(--sky-blue); letter-spacing: .1em; margin-bottom: 6px; } .step-tag { font-size: 10px; letter-spacing: .14em; color: var(--dim); margin-bottom: 12px; } .flight-step h3 { font-size: clamp(22px, 6vw, 27px); line-height: 1.3; margin-bottom: 14px; font-weight: 700; } html[lang="ar"] .flight-step h3 { line-height: 1.45; } .flight-step p:not(.step-tag) { color: var(--dim); font-size: 15px; line-height: 1.85; } .flight-step a { display: inline-flex; gap: 14px; align-items: center; min-height: 44px; margin-top: 14px; color: var(--gold); font-size: 14px; } .flight-step a:hover { text-decoration: underline; text-underline-offset: 6px; } /* ============================================================ 05 — PARTNERS: a quiet chapter, no boxes ============================================================ */ .sponsors-section { background: #fff; } .sponsors-bg-pattern { display: none; } .tyai-banner { border-radius: 0; box-shadow: none; border: 0; border-top: 1px solid var(--ink); background: transparent; max-width: none; margin: 30px 0 0; overflow: visible; } .tyai-banner-inner { padding: 26px 0; flex-direction: column; gap: 18px; text-align: center; align-items: center; } .tyai-strip { height: 5px; opacity: .9; } .sponsors-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); margin-top: 0; max-width: none; } .sponsor-card { min-width: 0; max-width: none; min-height: 118px; padding: 22px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; transition: none; } .sponsor-card:nth-child(even) { border-inline-start: 1px solid var(--line); } .sponsor-card:hover { transform: none; box-shadow: none; } .sponsor-logo-box { width: 100%; height: 74px; display: flex; align-items: center; justify-content: center; } .sponsor-logo-box img { width: auto; height: auto; max-width: 100%; max-height: 64px; object-fit: contain; } .partner-note { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 22px; font-size: 14px; color: var(--body-c); } .partner-note a { min-height: 44px; display: inline-flex; align-items: center; color: var(--blue); text-decoration: underline; text-underline-offset: 6px; } /* ============================================================ 06 — QUESTIONS ============================================================ */ #faq { padding-top: 0; } #faq .narrow { max-width: var(--maxw); display: grid; gap: 4px; } .faq-heading { border-top: 1px solid var(--line); padding-top: 34px; } .faq-item { border: 0; border-top: 1px solid var(--line); background: transparent; border-radius: 0; } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-item:hover { box-shadow: none; } .faq-item summary { padding: 21px 0; font-size: 15px; line-height: 1.65; gap: 24px; } .faq-item summary::after { width: 24px; height: 24px; background: transparent; font-size: 22px; color: var(--blue); } .faq-body { padding: 0 0 22px; font-size: 14px; } /* ============================================================ 07 — DESTINATION: the end of the route ============================================================ */ .destination { background: var(--ink); padding-block: clamp(72px, 13vw, 168px); } .register-card { position: relative; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; text-align: start; overflow: visible; } .register-card::before { display: none; } .destination-mark { --mark: var(--gold); } .destination-mark .mono { font-size: 10px; letter-spacing: .16em; } .register-card h2 { position: relative; z-index: 2; max-width: 14ch; font-size: clamp(40px, 12vw, 96px); line-height: 1.06; margin-bottom: 22px; font-weight: 700; letter-spacing: -.02em; } html[lang="ar"] .register-card h2 { line-height: 1.25; letter-spacing: 0; } html[lang="en"] .register-card h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; } .register-card p { position: relative; z-index: 2; margin-inline: 0; color: #dbe2ee; font-size: 16px; max-width: 42ch; } .register-card .register-fine { font-size: 12px; color: var(--dim); margin-top: 16px; margin-bottom: 0; } .register-card .btn { position: relative; z-index: 2; min-height: 58px; justify-content: space-between; gap: 60px; margin-top: 26px; } .launch-trajectory { position: absolute !important; z-index: 1; width: 420px; height: 350px; inset-inline-end: -160px; top: -60px; pointer-events: none; } .launch-trajectory path, .launch-trajectory circle { fill: none; vector-effect: non-scaling-stroke; } .dest-arc { stroke: var(--trace); stroke-width: 1.5; opacity: .55; } .dest-halo { stroke: var(--gold); stroke-width: 1; opacity: .35; } .dest-node { fill: var(--gold); stroke: none; } .dest-cross { stroke: var(--gold); stroke-width: 1; opacity: .5; } [dir="rtl"] .launch-trajectory { transform: scaleX(-1); } /* ============================================================ HEADER / FOOTER / MOBILE CTA ============================================================ */ .site-header { background: var(--ink); color: #fff; border-bottom: 1px solid var(--rule); } .site-header.scrolled { box-shadow: none; } .header-inner { justify-content: space-between; gap: 12px; } .brand { flex-shrink: 0; padding-block: 12px; } .brand img, .site-header.scrolled .brand img { height: auto; width: 124px; } .header-actions { gap: 8px; margin-inline-start: auto; } .lang-toggle { color: #fff; border: 0; padding-inline: 8px; font-size: 13px; gap: 6px; border-radius: 2px; } .lang-toggle:hover { background: var(--blue); } .lang-toggle svg { width: 16px; } .nav-toggle { border: 1px solid var(--rule-strong); width: 44px; height: 44px; border-radius: 2px; } .nav-toggle span { background: #fff; height: 1px; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .main-nav { background: var(--ink); top: var(--header-h); } .main-nav a { color: #fff; position: relative; border-radius: 0; } .main-nav a:hover { color: #fff; background: #ffffff0c; } .main-nav a[aria-current="location"] { color: var(--gold); } .main-nav a[aria-current="location"]::after { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 4px; height: 4px; background: currentColor; } .motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 2px; padding: 8px 14px; font: 500 13px var(--font); cursor: pointer; } .motion-toggle:hover { border-color: var(--ink); } .motion-toggle[hidden] { display: none; } .site-footer { margin: 0; padding-block: 34px 110px; background: #fff; border-top: 1px solid var(--line); } .footer-inner { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; text-align: start; align-items: center; } .footer-logo { width: 78px; height: auto; } .footer-links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 22px; margin-inline-end: auto; } .footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; } .footer-line { width: 100%; border-top: 1px solid var(--line); padding-top: 22px; font-size: 13px; } .footer-disclaimer { font-size: 12px; color: var(--body-c); max-width: 85ch; } .mobile-registration { position: fixed; inset: auto 0 0; z-index: 80; background: var(--ink); color: #fff; border-top: 1px solid var(--rule-strong); padding: 10px 20px max(10px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: 14px; } .mobile-registration[hidden] { display: none; } .mobile-registration > span { font-size: 12px; } .mobile-registration .btn { font-size: 14px; padding-inline: 18px; gap: 18px; min-height: 46px; } .menu-open .mobile-registration { visibility: hidden; } /* ============================================================ PHONE — an alternate composition, not a collapsed desktop grid ============================================================ */ @media (max-width: 639px) { html { scroll-padding-bottom: 92px; } /* Phone composition: type at the top of the frame, the campaign badge rising from the bottom corner and cut by the event dock. */ .origin-stage { align-items: flex-start; padding-block-end: clamp(160px, 52vw, 230px); } .origin-type { max-width: 94%; } .origin-caption { max-width: 17ch; font-size: 10px; bottom: clamp(14px, 4vw, 22px); } .origin-stage { --badge-w: 94vw; --badge-e: -24vw; --badge-b: clamp(-190px, -42vw, -120px); } .origin-arc { inset: -6% -18%; width: 136%; height: 112%; } } @media (max-width: 359px) { :root { --gutter: 16px; } .header-inner { gap: 6px; } .brand img, .site-header.scrolled .brand img { width: 108px; } .header-actions { gap: 4px; } .lang-toggle { padding-inline: 5px; font-size: 12px; } .origin-title { font-size: 42px; } html[lang="en"] .origin-title { font-size: 40px; } .frontier-actions { gap: 5px; } .frontier-actions .btn { width: 100%; flex: 1 1 100%; } .frontier-actions .text-link { min-height: 44px; } .mission-line { flex-wrap: wrap; gap: 4px; } .event-detail strong { font-size: 13px; } .event-detail:last-child { align-items: start; flex-direction: column; } .countdown-inline [data-cd] { font-size: 22px; } .signal-content { font-size: 11px; } .mobile-registration { padding-inline: 14px; gap: 8px; } .mobile-registration > span { font-size: 11px; } .chapter-num { font-size: 38px; } } /* ============================================================ TABLET ============================================================ */ @media (min-width: 640px) { .mission-line { font-size: 11px; padding-block: 17px; } .mission-line .coordinates { display: inline; } .origin-stage { padding-block: clamp(30px, 6vw, 70px) clamp(60px, 12vw, 110px); } /* Tablet keeps the phone's stacking: type in the frame, badge rising from the corner. A side-by-side split puts copy on top of the badge. */ .origin-stage { --badge-w: min(88vw, 700px); --badge-e: -30vw; --badge-b: clamp(-260px, -32vw, -170px); align-items: flex-start; padding-block-end: clamp(160px, 30vw, 250px); } .origin-type { max-width: 78%; } .origin-stage .frontier-description { max-width: 33ch; } .origin-title { font-size: clamp(50px, min(9vw, 11vh), 96px); } html[lang="en"] .origin-title { font-size: clamp(46px, min(8vw, 11vh), 90px); } .origin-type { max-width: 74%; } .frontier-description { font-size: 16px; } .frontier-actions .btn { flex: 0 0 auto; min-width: 230px; } .origin-caption { max-width: 24ch; } .event-strip { grid-template-columns: 1fr 1fr 1.2fr; } .event-detail:last-child { grid-column: auto; border-inline-start: 1px solid var(--rule); border-top: 0; padding-inline-start: 20px; flex-direction: column; justify-content: center; align-items: flex-start; } .event-detail strong { font-size: 17px; } .countdown-inline [data-cd] { font-size: 24px; } .signal-content { flex-wrap: nowrap; font-size: 14px; padding-block: 26px; gap: 20px; } .chapter-num { font-size: 66px; } .benefits-layout { grid-template-columns: .8fr 1.2fr; gap: 50px; } .benefits-heading { align-self: start; padding-top: 28px; } .explorer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .role-button { min-height: 66px; font-size: 18px; } .output-holder { width: clamp(190px, 26vw, 230px); } .mission-output .output-figure { font-size: clamp(70px, 9vw, 86px); } .tyai-banner-inner { flex-direction: row; text-align: start; justify-content: space-between; align-items: center; padding: 32px 0; } .sponsors-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sponsor-card + .sponsor-card { border-inline-start: 1px solid var(--line); } #faq .narrow { grid-template-columns: .8fr 1.2fr; gap: 50px; } .faq-heading { grid-row: span 1; } .launch-trajectory { width: 640px; height: 540px; inset-inline-end: -180px; top: -80px; } } /* ============================================================ DESKTOP — the cinematic composition ============================================================ */ @media (min-width: 900px) { :root { --header-h: 88px; } .main-nav { background: transparent; margin-inline-start: auto; } .main-nav a { padding-inline: 10px; font-size: 12px; } .header-actions { margin-inline-start: 12px; } .nav-register { min-height: 44px; padding-inline: 18px; font-size: 13px; } .brand img, .site-header.scrolled .brand img { width: 142px; } /* Artwork moves to the outer edge; the headline crosses it. */ .origin-stage { padding-block: clamp(28px, 3.5vw, 64px) clamp(44px, 5vw, 88px); } .origin-stage { --badge-w: min(50vw, 680px); --badge-s: -11vw; --badge-e: auto; --badge-b: -11vw; } .origin-vessel { display: flex; } .origin-type { max-width: none; --type-inset: 43%; padding-inline-start: var(--type-inset); } .origin-title { font-size: clamp(52px, min(7.4vw, 10.4vh), 118px); margin-bottom: clamp(16px, 2.4vh, 28px); } html[lang="en"] .origin-title { font-size: clamp(48px, min(6.6vw, 10.8vh), 108px); } .frontier-description { font-size: 17px; max-width: 44ch; } /* The badge fills the inline-start half, so its caption is set in the type column instead — a caption need not touch its image. */ .origin-stage { flex-direction: column; justify-content: center; align-items: stretch; } .origin-caption { position: static; max-width: 30ch; margin-block-start: clamp(20px, 4vh, 46px); margin-inline-start: auto; margin-inline-end: var(--gutter); flex-direction: row; align-items: baseline; gap: 16px; text-align: start; } .origin-caption::before { align-self: center; width: 46px; flex: 0 0 46px; } .signal-content { font-size: 17px; letter-spacing: -.01em; } .signal-content > .mono { display: inline; font-size: 11px; letter-spacing: .12em; margin-inline-start: auto; color: var(--gold); } /* The rail: the route made permanent down the outer margin. */ .rail { display: flex; position: fixed; z-index: 60; inset-block: calc(var(--header-h) + 40px) 46px; inset-inline-start: clamp(18px, 2.2vw, 34px); width: 22px; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; color: var(--rail-ink, #fff); transition: color .4s ease; } .rail-line { position: relative; flex: 1 1 auto; width: 1px; background: currentColor; opacity: .22; } .rail-trace { position: absolute; inset: 0 0 auto; width: 1px; height: 0; background: var(--rail-trace, var(--sky-blue)); opacity: 1; } .rail-mark { writing-mode: vertical-rl; font-size: 9px; letter-spacing: .3em; opacity: .8; } .chapter-num { font-size: 92px; } .chapter-mark { gap: 20px; margin-bottom: 34px; } .benefits-layout { grid-template-columns: .85fr 1.4fr; gap: 100px; } .benefits-heading { position: sticky; top: 118px; } .why-card { grid-template-columns: 28px 1fr 1.25fr; gap: 26px; align-items: baseline; padding-block: 28px; } .benefit-number { grid-row: auto; } .why-card h3 { font-size: 21px; } .why-card p { grid-column: auto; font-size: 15px; } .explorer-grid { grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: start; } .role-picker { max-width: 460px; } .role-button { font-size: 24px; min-height: 76px; padding-inline: 6px; gap: 22px; } .role-button::after { content: "↗"; font: 400 22px var(--font); margin-inline-start: auto; opacity: 0; transition: opacity .25s, translate .25s; } .role-button[aria-selected="true"]::after, .role-button:hover::after { opacity: 1; } .output-holder { width: clamp(230px, 19vw, 290px); margin-bottom: 30px; } .mission-output .output-figure { font-size: clamp(88px, 7vw, 112px); } .mission-output h3 { font-size: clamp(34px, 3vw, 46px); } .mission-output p { font-size: 16px; } .flight-grid { grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: start; } .flight-sticky { position: sticky; top: 122px; } .flight-map { display: block; max-width: 430px; margin-top: 36px; } .flight-map svg { width: 100%; display: block; } .flight-readout { display: flex; justify-content: space-between; font-size: 11px; gap: 20px; border-top: 1px solid var(--rule); padding-top: 18px; letter-spacing: .1em; } .flight-readout > :last-child { color: var(--gold); } .flight-steps { padding-inline-start: 46px; } .flight-steps::before, .flight-steps::after { inset-inline-start: 8px; } .flight-step { padding-block: 64px; min-height: 320px; } .flight-step::before { top: 76px; inset-inline-start: -46px; width: 11px; height: 11px; } /* Controlled asymmetry: each waypoint sits further along the route. */ .flight-step:nth-child(2) { padding-inline-start: 7%; } .flight-step:nth-child(3) { padding-inline-start: 14%; } .flight-step h3 { font-size: 31px; } .step-number { font-size: 12px; } .sponsor-card { min-height: 160px; padding: 34px; } .sponsor-logo-box { height: 96px; } .sponsor-logo-box img { max-height: 82px; } #faq .narrow { gap: 90px; } .faq-heading { position: sticky; top: 118px; align-self: start; } .faq-item summary { font-size: 16px; padding: 23px 0; } .register-card .btn { width: auto; min-width: 320px; } .launch-trajectory { width: 760px; height: 640px; inset-inline-end: -110px; top: -90px; } .mobile-registration { display: none; } .site-footer { padding-bottom: 40px; } } @media (min-width: 1280px) { .chapter-num { font-size: 118px; } .origin-type { --type-inset: 45%; } .benefits-layout { gap: 120px; } .explorer-grid { gap: 120px; } .flight-grid { gap: 120px; } } /* ============================================================ MOTION STATES ============================================================ */ /* Masked headline lines only start hidden when motion will play. */ .js-motion .origin-title .tl i { transform: translateY(102%); } .js-motion .arc-live { stroke-dasharray: .0001 1; } .js-motion .seam-arc { stroke-dasharray: 1; stroke-dashoffset: 1; } .js-motion .dest-arc { stroke-dasharray: 1; stroke-dashoffset: 1; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .arrow, .why-card::after, .role-button, .role-button::before, .flight-steps::after { transition: none; } .btn:hover .arrow, .resource-link:hover .arrow { translate: none; } } .motion-paused { scroll-behavior: auto; } .motion-paused *, .motion-paused *::before, .motion-paused *::after { animation: none !important; transition: none !important; } .motion-paused .arrow { translate: none !important; } /* ============================================================ Responsive additions for the rebuilt chapters ============================================================ */ @media (min-width: 640px) { .briefing-data { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bd-lead { grid-column: 1 / -1; } } @media (min-width: 900px) { /* Chapter 01 reads as one wide briefing: heading, measure, instrument strip. */ .briefing { grid-template-columns: 1.1fr 1fr; gap: 90px; align-items: start; } .briefing .section-title { font-size: clamp(38px, 3.4vw, 54px); } .briefing-body { padding-top: 8px; } .briefing-body .prose { font-size: 19px; line-height: 1.75; } .briefing-body .prose + .prose { font-size: 16px; } .briefing-data { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); margin-top: 70px; } .bd-lead { grid-column: auto; } .bd-cell { padding-block: 26px 30px; } } /* ============================================================ REFINEMENT PASS Art-direction corrections on top of the composition above. Three problems are addressed: calls to action that still read as ordinary buttons, chapters that ran out of content before they ran out of padding, and a few passages that defaulted to centred or generic settings. ============================================================ */ /* ---------- The call to action is a waypoint on the route ---------- A hairline enters the field from the leading edge, runs under the label, and terminates on the launch mark. Activating the control extends the route across the field and opens a halo on the mark — the same activation the journey waypoints and the destination target use. Nothing here lifts, glows or grows. */ .btn { --chamfer: 14px; border-radius: 0; isolation: isolate; } .btn-sm { --chamfer: 9px; } .btn:hover { transform: none; } /* The trailing corner is cut, so the field reads as a marker rather than a rectangle. Removed while focused so the ring is never clipped. */ .btn-primary { clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); } [dir="rtl"] .btn-primary { clip-path: polygon(var(--chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer)); } .btn-primary:focus-visible { clip-path: none; } /* The route through the field. */ .btn::before { content: ""; position: absolute; z-index: 0; inset-inline-start: 0; top: 50%; width: var(--route-w, 16px); height: 1px; background: currentColor; opacity: .32; transition: width .5s cubic-bezier(.2, .7, .2, 1), opacity .3s; } .btn:hover::before, .btn:focus-visible::before { width: 100%; opacity: .2; } /* Label and launch mark travel independently along it. */ .btn > span { position: relative; z-index: 1; transition: translate .45s cubic-bezier(.2, .7, .2, 1); } .btn:hover > span:not(.rocket), .btn:focus-visible > span:not(.rocket) { translate: 4px 0; } [dir="rtl"] .btn:hover > span:not(.rocket), [dir="rtl"] .btn:focus-visible > span:not(.rocket) { translate: -4px 0; } .btn:hover .rocket, .btn:focus-visible .rocket { translate: 3px 0; } [dir="rtl"] .btn:hover .rocket, [dir="rtl"] .btn:focus-visible .rocket { translate: -3px 0; } /* The mark opens a waypoint halo. outline is used rather than a pseudo-element because the mark clips its own launch trail. */ .rocket { background: transparent; outline: 1px solid transparent; outline-offset: 0; transition: translate .45s cubic-bezier(.3, .8, .3, 1), outline-color .35s, outline-offset .45s cubic-bezier(.2, .7, .2, 1); } .btn:hover .rocket, .btn:focus-visible .rocket { outline-color: color-mix(in srgb, currentColor 38%, transparent); outline-offset: 5px; } /* The secondary action shares the language at a lower volume: a tick of route, no field, no competing mark. */ .frontier-actions .text-link, .register-card .text-link { position: relative; padding-inline-start: 22px; } .frontier-actions .text-link::before, .register-card .text-link::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 12px; height: 1px; background: currentColor; opacity: .5; transition: width .4s cubic-bezier(.2, .7, .2, 1); } .frontier-actions .text-link:hover::before { width: 18px; opacity: 1; } /* ---------- Chapter rhythm ---------- Every chapter previously opened and closed on the same measure, so the page read as a stack of equal bands and each one ended in dead space. Openings stay generous; closes are tightened, and the chapters that carry a sticky column close tighter still. */ .chapter { padding-block: clamp(58px, 9vw, 124px) clamp(44px, 6vw, 84px); } /* The origin is a full-viewport composition and sets its own frame, and chapter 04 continues 03 rather than opening its own. */ .origin { padding: 0; } .flight-path { padding-top: 0; } /* 03 and 04 are both dark and meet with no seam, so the boundary read as accidental space. A hairline carries the route across it. */ .mission-explorer + .flight-path { border-top: 1px solid var(--rule); } .destination { padding-block: clamp(72px, 12vw, 150px) clamp(64px, 9vw, 112px); } .mission-explorer { padding-bottom: clamp(48px, 6vw, 86px); } /* ---------- The route continues through the sticky columns ---------- Chapters 02 and 06 set their heading against a long list, which left the heading column empty for most of its height. The margin now carries the route down past the heading instead of nothing. */ @media (min-width: 900px) { .benefits-heading, .faq-heading { position: sticky; } .benefits-heading::after, .faq-heading::after { content: ""; position: absolute; inset-inline-start: 0; top: 100%; margin-block-start: 34px; width: 1px; height: clamp(80px, 13vh, 170px); background: linear-gradient(var(--line), transparent); } .benefits-heading::before, .faq-heading::before { content: ""; position: absolute; inset-inline-start: -2px; top: 100%; margin-block-start: 30px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); } } /* Chapter 04 closed with a full step's padding under the last waypoint. */ .flight-step:last-child { padding-block-end: 0; } @media (min-width: 900px) { .flight-step:last-child { padding-block-end: 0; min-height: 0; } } /* The guide link ran the full width of the chapter, stranding its arrow a screen away from its own sentence. The arrow now trails the sentence. */ .resource-link { justify-content: flex-start; gap: 16px; max-width: 70ch; } .resource-link .arrow { font-size: 20px; } /* ---------- Typography ---------- Latin body copy was set at the Arabic leading, which is what made it read as an untouched default. Arabic keeps the open setting it needs. */ html[lang="en"] .frontier-description { line-height: 1.62; } html[lang="en"] .briefing-body .prose { line-height: 1.62; } html[lang="en"] .flight-step p:not(.step-tag) { line-height: 1.68; } html[lang="en"] .mission-output p { line-height: 1.66; } html[lang="en"] .explorer-intro { line-height: 1.62; } html[lang="ar"] .frontier-description { line-height: 1.85; } /* Headings are given a measure so they break where the composition wants them to, not where the column happens to end. */ .section-title { max-width: 20ch; } html[lang="ar"] .section-title { max-width: 17ch; } .briefing .section-title { max-width: none; } /* ---------- 06 — questions as an index, not an accordion ---------- The list was already ruled rather than boxed, but the questions were set at body size and carried no numbering, which is what still made the chapter read as a default FAQ block. */ .faq-list { counter-reset: faq; } .faq-item summary { justify-content: flex-start; align-items: baseline; gap: 20px; font-size: clamp(17px, 2.1vw, 21px); font-weight: 600; line-height: 1.45; transition: color .25s; } html[lang="ar"] .faq-item summary { line-height: 1.6; } .faq-item summary::before { counter-increment: faq; content: counter(faq, decimal-leading-zero); flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--blue); direction: ltr; transform: translateY(-.35em); } .faq-item summary::after { margin-inline-start: auto; transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .faq-item:hover summary, .faq-item[open] summary { color: var(--electric-blue); } .faq-body { padding-inline-start: 46px; max-width: 74ch; } .faq-body p { font-size: 15px; } html[lang="en"] .faq-body p { line-height: 1.68; } /* ---------- 02 — the featured benefit actually leads ---------- It carried a modifier class and no visual difference from the five entries under it. */ .why-card-featured { border-top: 2px solid var(--ink); } .why-card-featured h3 { font-size: 22px; } .why-card-featured .benefit-number { color: var(--ink); } @media (min-width: 900px) { .why-card-featured h3 { font-size: 26px; letter-spacing: -.01em; } } /* ---------- 07 — the destination mark is already open ---------- This is the end of the route, so its launch mark rests in the activated state the other calls to action only reach on hover. */ .destination .btn { --route-w: 44px; } .destination .btn .rocket { outline-color: color-mix(in srgb, currentColor 30%, transparent); outline-offset: 5px; } .destination .btn:hover .rocket, .destination .btn:focus-visible .rocket { outline-offset: 9px; } /* ---------- Tablet ---------- Between 640 and 900 the campaign badge reaches under the type column, and the secondary action was landing on its white holding shape. The two actions stack against the inline-start edge instead, clear of it. */ @media (min-width: 640px) and (max-width: 899px) { .frontier-actions { flex-direction: column; align-items: flex-start; gap: 14px; } .frontier-actions .btn { min-width: 260px; } /* A harder crop on the badge also keeps the fine print off its edge. */ .origin-stage { --badge-w: min(80vw, 620px); --badge-e: -34vw; } .frontier-small { position: relative; z-index: 5; } } /* ---------- Phone ---------- Two things did not survive the collapse to one column: the origin caption was left floating over the campaign badge, and the instrument strip ended on a half-empty row. */ @media (max-width: 639px) { /* The stage stacks, so the caption can sit in the flow under the call to action instead of floating over the campaign badge. */ .origin-stage { flex-direction: column; justify-content: flex-start; align-items: stretch; } .origin-caption { position: static; margin-block-start: 18px; max-width: 32ch; flex-direction: row; align-items: baseline; gap: 12px; font-size: 10px; } .origin-caption::before { align-self: center; flex: 0 0 26px; width: 26px; } .origin-stage { padding-block-end: clamp(148px, 46vw, 208px); } .bd-cell:last-child { grid-column: 1 / -1; border-inline-start: 0; padding-inline-start: 0; } .faq-body { padding-inline-start: 32px; } .faq-item summary { gap: 14px; } /* The route through a full-width call to action starts at the label, not a third of the way across an empty field. */ .frontier-actions .btn { justify-content: space-between; } } /* Six partner marks retain their original proportions and colors. */ @media (max-width: 639px) { .sponsor-card:nth-child(5), .sponsor-card:nth-child(6) { grid-column: 1 / -1; border-inline-start: 0; } .sponsor-card:nth-child(5) img { max-width: 240px; max-height: 100px; } .sponsor-card:nth-child(5) .sponsor-logo-box { height: 100px; } } @media (min-width: 640px) { .sponsors-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sponsor-card { grid-column: auto; } .sponsor-card:nth-child(3n + 1) { border-inline-start: 0; } } @media (min-width: 1280px) { .sponsors-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sponsor-card { padding-inline: 16px; } .sponsor-card:nth-child(4) { border-inline-start: 1px solid var(--line); } } /* ---------- Wide viewports ---------- Past the container cap the badge kept travelling to the viewport edge while the headline stayed capped by viewport height, so the type was left stranded mid-canvas with a gap on either side. The badge is anchored to the container instead, at a constant overhang, so the type and the artwork stay one composition and the extra width becomes sky for the route to cross. */ @media (min-width: 1520px) { .origin-stage { --badge-s: calc(50vw - 860px); } .origin-type { padding-inline-start: 42%; } } /* ---------- 01 — the instrument strip reads at a distance ---------- The figures and labels were set smaller than the body copy above them, which made the strip look like a footnote rather than the chapter's closing statement. */ .bd-cell dt { font-size: 10px; letter-spacing: .16em; } .bd-cell dd { font-size: 16px; line-height: 1.55; } html[lang="en"] .bd-cell dd { line-height: 1.45; } .bd-lead dd { font-size: 18px; } @media (min-width: 640px) { .bd-cell dt { font-size: 11px; } .bd-cell dd { font-size: 17px; } .bd-lead dd { font-size: 19px; } } @media (min-width: 900px) { .bd-cell dd { font-size: 19px; } .bd-lead dd { font-size: 21px; } .bd-figure { font-size: clamp(64px, 6vw, 92px); } } /* ---------- The first viewport is a picture, not a text block ---------- The desktop composition was written for English and then mirrored wholesale, which put the badge on the same side Arabic wants to set against. Arabic lines are shorter than the English ones, so the type no longer reached a gutter and the whole block drifted to the middle of the frame. The artwork now holds the same side of the frame in both languages — a photograph does not flip — and only the type column changes side, so Arabic sets hard against the inline-end gutter exactly as English sets against the badge. */ @media (min-width: 900px) { .origin-art, .origin-orbits { inset-inline-start: auto; inset-inline-end: auto; left: var(--badge-s); right: auto; } [dir="rtl"] .origin-arc { transform: none; } /* The type column now reaches the inline-end gutter in Arabic, so the route marker moves to the quiet corner above the badge — the one part of the frame neither the artwork nor the type occupies, in either language. */ .origin-vessel { inset-inline-start: auto; inset-inline-end: auto; left: 6%; right: auto; inset-block-start: 6%; } .origin-vessel svg, [dir="rtl"] .origin-vessel svg { rotate: 34deg; } [dir="rtl"] .origin-type { padding-inline-start: var(--gutter); padding-inline-end: var(--type-inset); } /* The caption belongs under the type column, whichever side that is. */ [dir="rtl"] .origin-caption { margin-inline-start: 0; margin-inline-end: auto; } } /* ---------- Wide screens ---------- The badge stopped growing at 680px while the viewport kept going, so past about 1600 the frame opened a hole above it and the type read as an island. The artwork keeps its share of the frame and the headline keeps its scale. */ @media (min-width: 1600px) { .origin-stage { --badge-w: min(52vw, 900px); --badge-s: -9vw; --badge-b: -8vw; } .origin-type { --type-inset: 41%; } /* The viewport-height guard stays in the clamp: without it the headline outgrows its column and the designed line breaks wrap. */ .origin-title { font-size: clamp(88px, min(6.6vw, 11vh), 124px); } html[lang="en"] .origin-title { font-size: clamp(80px, min(5.7vw, 10.2vh), 108px); } .frontier-description { font-size: 18px; max-width: 46ch; } /* The type column ends on the same grid line as the header above it. */ .origin-type { padding-inline-end: calc((100vw - var(--maxw)) / 2 + var(--gutter)); } [dir="rtl"] .origin-type { padding-inline-start: calc((100vw - var(--maxw)) / 2 + var(--gutter)); } } /* ============================================================ HEADER — a flight deck, not a bar Over the first viewport the header has no field and no rule, so the navy runs unbroken from the top of the screen through the telemetry line and into the composition. It only becomes a surface once the page has moved under it, which is also the moment it needs to separate from what it is covering. ============================================================ */ /* The header is in flow above the composition, so it cannot be transparent — it would show the page ground. It carries the same navy instead and simply drops its rule at the top of the page, which is what made it read as a bar: the field then runs unbroken from the top of the screen through the telemetry line and into the first viewport. The rule and a little depth arrive only once the page moves under it. */ .site-header { background: var(--ink); border-bottom: 1px solid transparent; transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease; } .site-header.scrolled { background: color-mix(in srgb, var(--deep-blue) 92%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: var(--rule); } /* The open menu panel needs an opaque header above it. */ .menu-open .site-header { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; } @media (min-width: 900px) { /* Navigation reads as stations on the same route as everything else: no pills, no fields — a rule that draws under the current heading. */ .main-nav a { position: relative; color: #cbd6ea; transition: color .25s; } /* Arabic carries less optical size than Latin at the same point size; at 12px the connected baseline collapses into a bar. */ html[lang="ar"] .main-nav a { font-size: 14px; } .main-nav a:hover, .main-nav a[aria-current="location"] { color: #fff; background: transparent; } /* Clear of the text: Arabic descenders sit lower than the Latin baseline, and at 12px the rule was crossing the glyphs. */ .main-nav a::after { content: ""; position: absolute; inset-inline-start: 10px; inset-block-end: 5px; width: 0; height: 1px; background: var(--gold); top: auto; transition: width .4s cubic-bezier(.2, .7, .2, 1); } /* The earlier current-item rule pins its marker to top:50%, and that selector outranks the base rule above, which left the line sitting on the Arabic baseline. Reset the offsets here as well. */ .main-nav a:hover::after, .main-nav a[aria-current="location"]::after { width: calc(100% - 20px); top: auto; inset-block-end: 5px; height: 1px; background: var(--gold); } /* The rule marks the current section on its own. Colouring the label gold as well merged the glyphs into it at this size. */ .main-nav a[aria-current="location"] { color: #fff; } /* The language control is a switch, not a button-shaped object. */ .lang-toggle { color: #cbd6ea; } .lang-toggle:hover { background: transparent; color: #fff; } } /* ============================================================ ADJUSTMENTS ============================================================ */ /* ---------- The header centres its sections ---------- */ @media (min-width: 900px) { .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; } .brand { justify-self: start; } .main-nav { margin-inline-start: 0; justify-self: center; } .header-actions { margin-inline-start: 0; justify-self: end; } } /* ---------- The first screen carries the event facts ---------- The origin reserved a full viewport for itself and then sat under a header, so the date, the place and the countdown always began below the fold. It now measures itself against what is left of the screen and the type comes down enough to bring the three of them up. */ .origin { min-height: calc(100svh - var(--header-h)); } @media (min-width: 900px) { .origin-stage { padding-block: clamp(14px, 1.8vw, 30px) clamp(18px, 2.2vw, 38px); } .origin-title { font-size: clamp(44px, min(6vw, 7.4vh), 90px); margin-bottom: clamp(10px, 1.6vh, 18px); } html[lang="en"] .origin-title { font-size: clamp(40px, min(5.3vw, 7.6vh), 84px); } .frontier-description { font-size: 16px; } .frontier-actions { margin-block: clamp(10px, 1.6vh, 18px) 8px; } .origin-caption { margin-block-start: clamp(14px, 2.4vh, 30px); } } @media (min-width: 1600px) { .origin-title { font-size: clamp(64px, min(5.2vw, 8vh), 98px); } html[lang="en"] .origin-title { font-size: clamp(58px, min(4.7vw, 8.2vh), 90px); } } /* ---------- 01 — the instrument strip reads as four readings ---------- The lead cell set its figure at display size, which made a subsection's count look like a heading and pulled the eye away from the chapter's own title. Every cell now carries the same weight and centres on its own rule, so the strip reads as instrumentation rather than a headline followed by three footnotes. */ .bd-cell { align-items: center; justify-content: center; text-align: center; gap: 10px; } .bd-lead { flex-direction: column; align-items: center; } .bd-lead dt { flex: 0 0 auto; } .bd-lead dd { flex-direction: row; justify-content: center; align-items: baseline; gap: 10px; } .bd-figure { font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em; font-size: 26px; line-height: 1.2; color: var(--electric-blue); } @media (min-width: 900px) { .bd-figure { font-size: 30px; } .bd-cell { padding-block: 24px 28px; } /* Four equal readings: the first no longer claims extra width now that it no longer claims extra weight. */ .briefing-data { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- Short screens ---------- A laptop at 1440x760 has 110px less to give than the same width at 900, and the event facts are the part that must not fall off. The first viewport tightens rather than pushing them under the fold. */ @media (min-width: 900px) and (max-height: 840px) { .origin-stage { padding-block: 12px 14px; } .origin-title { font-size: min(5.6vw, 6.6vh); margin-bottom: 10px; } html[lang="en"] .origin-title { font-size: min(5vw, 6.8vh); } .frontier-description { font-size: 15px; max-width: 40ch; } .frontier-actions { margin-block: 12px 6px; } .origin-caption { margin-block-start: 12px; font-size: 10px; } /* On a short screen the badge reaches the top of the frame and there is no clear corner left for the route marker to sit in. */ .origin-vessel { display: none; } } /* Glass header and an uncropped, closely grouped hero. */ .landing-page { background: var(--ink); } .site-header { position: fixed; inset: 0 0 auto; background: linear-gradient(115deg, #ffffff12, #ffffff04), #07173fb3; border-bottom: 1px solid #ffffff30; box-shadow: 0 8px 30px #020a201f, inset 0 1px #ffffff12; backdrop-filter: blur(22px) saturate(1.45); -webkit-backdrop-filter: blur(22px) saturate(1.45); } .site-header.scrolled { background: linear-gradient(115deg, #ffffff12, #ffffff04), #07173fd1; border-bottom-color: #ffffff38; box-shadow: 0 8px 30px #020a2029; backdrop-filter: blur(22px) saturate(1.45); -webkit-backdrop-filter: blur(22px) saturate(1.45); } .origin { padding-top: var(--header-h); min-height: 0; } .origin-stage { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr); gap: 20px; width: 100%; max-width: 1480px; margin-inline: auto; padding: 24px var(--gutter) 28px; align-items: center; } .origin-visual { grid-row: 2; margin: 0; width: min(100%, 280px); justify-self: center; min-width: 0; } .origin-visual .origin-art { position: relative; inset: auto; width: 100%; aspect-ratio: 1; padding: 14%; background: #fff; border-radius: 50%; box-shadow: 0 0 60px #2e96f518; } .origin-orbits, .origin-arc, .origin-vessel { display: none; } .origin-stage .origin-type, [dir="rtl"] .origin-stage .origin-type { grid-row: 1; width: 100%; max-width: none; margin: 0; padding: 0; min-width: 0; } .origin-title .tl:nth-child(2), .origin-title .tl:nth-child(3) { margin-inline-start: 0; } .origin-title { font-size: clamp(44px, 10vw, 68px); } html[lang="en"] .origin-title { font-size: clamp(30px, 8vw, 58px); } .origin-stage .frontier-description { max-width: 46ch; } .origin-stage .frontier-actions { flex-direction: row; flex-wrap: wrap; gap: 12px 22px; } .origin-stage .frontier-actions .btn { min-width: 0; } .origin-visual .origin-caption, [dir="rtl"] .origin-visual .origin-caption { position: static; max-width: none; margin: 16px 0 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; font-size: 11px; } .origin-visual .origin-caption::before { display: none; } .origin-foot { background: transparent; } .tyai-strip { background-image: none; background-color: var(--blue-yonder); height: 2px; opacity: .4; } @media (min-width: 900px) { .origin-stage { direction: ltr; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 36px); padding-block: 24px; } .origin-visual { grid-area: 1 / 1; width: min(100%, 560px); justify-self: end; } .origin-stage .origin-type { grid-area: 1 / 2; direction: ltr; } [dir="rtl"] .origin-stage .origin-type { direction: rtl; } [dir="rtl"] .origin-stage .origin-type { max-width: 540px; justify-self: start; } .origin-title { font-size: clamp(54px, 5.5vw, 104px); } html[lang="en"] .origin-title { font-size: clamp(32px, 3.6vw, 62px); } .origin-stage .frontier-description { font-size: 16px; } } @media (min-width: 900px) and (max-height: 840px) { .origin-stage { padding-block: 20px; } .origin-visual { max-width: 450px; } .origin-title { font-size: clamp(48px, 7.5vh, 64px); } html[lang="en"] .origin-title { font-size: clamp(36px, 6.5vh, 54px); } } /* On phones, the campaign badge sits beside the heading, not below the copy. */ @media (max-width: 899px) { .origin-stage { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 14px; } .origin-stage .origin-type, [dir="rtl"] .origin-stage .origin-type { display: contents; } .origin-stage .eyebrow { grid-area: 1 / 1 / 2 / -1; margin: 0; } .origin-stage .origin-title { grid-area: 2 / 1; font-size: clamp(30px, 7.6vw, 66px); margin: 0; align-self: center; } html[lang="en"] .origin-stage .origin-title { font-size: clamp(22px, 5.6vw, 49px); letter-spacing: .02em; } .origin-stage .origin-visual { grid-area: 2 / 2; width: min(100%, 290px); justify-self: center; align-self: center; } .origin-visual .origin-caption, [dir="rtl"] .origin-visual .origin-caption { display: none; } .origin-stage .frontier-description { grid-area: 3 / 1 / 4 / -1; max-width: none; font-size: 14px; } .origin-stage .frontier-actions { grid-area: 4 / 1 / 5 / -1; margin: 0; } .origin-stage .frontier-small { grid-area: 5 / 1 / 6 / -1; margin: 0; } } /* Compact tabs keep every role and its answer together on phones/tablets. */ @media (max-width: 899px) { .explorer-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } .explorer-intro { margin-bottom: 20px; max-width: 54ch; } .role-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 5px; border: 1px solid var(--rule); border-radius: 12px; background: #ffffff08; max-width: none; } .role-button, .role-button[aria-selected="true"] { justify-content: center; min-height: 48px; padding: 9px 4px; border: 0; border-radius: 8px; font-size: 13px; line-height: 1.4; text-align: center; transition: background .2s, color .2s; } .role-button::before, .role-button::after, .role-number { display: none; } .role-button[aria-selected="true"] { background: var(--gold); color: var(--ink); } .role-button:focus-visible { outline-offset: 1px; } .mission-output { padding: 20px; border: 1px solid var(--rule); border-radius: 14px; background: #ffffff06; min-height: 320px; } .output-holder { display: none; } .output-top { gap: 6px 12px; font-size: 9px; } .mission-output h3 { font-size: 26px; margin-block: 14px 12px; } .mission-output p { font-size: 14px; } .mission-output .output-note { margin-top: 16px; padding-top: 14px; font-size: 11px !important; } } @media (max-width: 359px) { .role-button, .role-button[aria-selected="true"] { font-size: 11px; } .mission-output { padding: 16px; } html[lang="en"] .mission-output { min-height: 380px; } }