/* =========================================================================== GAHEZ stylesheet Generated by tools/build.mjs — edit the sources in src/, not this file. =========================================================================== */ /* --- styles/tokens/tokens.css --- */ /* Design tokens. The single source of truth for colour, radius, shadow, spacing, container and easing values. ROADMAP/05 §06, §92. Extracted from the original styles.css — content unchanged. */ /* ============================================================ Gahez (جاهز) — Pre-Launch Landing Light-first · Blue #2563EB → Cyan #22D3EE · Green #22C55E Decorative shapes + motion · Dark mode via [data-theme="dark"] ============================================================ */ /* Local Cairo (variable font — covers all weights) */ @font-face { font-family: "Cairo"; src: url("Assets/Cairo.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; } :root { /* Brand palette (fixed) */ --blue: #2563EB; --blue-600: #1D4ED8; --cyan: #22D3EE; --green: #22C55E; --navy: #0F172A; --gradient: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%); /* ---------- LIGHT THEME (default) ---------- */ --bg: #FFFFFF; /* white bands */ --bg-alt: #E7F0FE; /* clearly tinted bands */ --surface: #FFFFFF; /* cards */ --surface-2: #EDF3FC; /* nested / hover */ --border: rgba(15, 23, 42, 0.12); --border-strong: rgba(15, 23, 42, 0.18); --text: #33415A; --text-soft: #4A5A72; --heading: #0F172A; --muted: #647089; /* Decorative only — 2.56:1 on white, below the 4.5:1 text threshold. Never use for text. ROADMAP/05 §54. */ --muted-2: #94A3B8; --accent: #2563EB; /* readable accent for text/icons */ --icon-color: #2563EB; --ok: #16A34A; --logo-color: #0F172A; --btn-primary-text: #FFFFFF; --tag-color: #2563EB; --tag-bg: rgba(37, 99, 235, 0.08); --tag-border: rgba(37, 99, 235, 0.20); --ok-bg: rgba(22, 163, 74, 0.10); --ok-border: rgba(22, 163, 74, 0.26); --ok-text: #15803D; --gradient-soft: linear-gradient(135deg, rgba(37,99,235,0.09), rgba(34,211,238,0.09)); --input-bg: #F8FAFF; --header-bg: rgba(255, 255, 255, 0.82); --glass: rgba(255, 255, 255, 0.86); --glass-border: rgba(15, 23, 42, 0.10); --footer-bg: #F3F7FF; --switch-off: rgba(15, 23, 42, 0.14); --knob-shadow: 0 1px 4px rgba(15, 23, 42, 0.28); --ambient1: rgba(37, 99, 235, 0.10); --ambient2: rgba(34, 211, 238, 0.12); --ambient3: rgba(34, 197, 94, 0.07); --dot: rgba(37, 99, 235, 0.09); --ring-color: rgba(37, 99, 235, 0.20); --orb-blue: rgba(37, 99, 235, 0.55); --orb-cyan: rgba(34, 211, 238, 0.55); --blob-opacity: 0.12; --card-shadow: 0 14px 34px -14px rgba(37, 99, 235, 0.24), 0 4px 12px rgba(15, 23, 42, 0.07); --shadow-blue: 0 16px 34px -12px rgba(37, 99, 235, 0.45); --radius: 16px; --radius-lg: 22px; --radius-sm: 10px; --maxw: var(--container-max); /* legacy alias */ --header-h: 74px; /* --------------------------------------------------------------------- Type scale. One ramp for both scripts; sizes are fluid between the mobile and desktop ends so headings never need per-page tuning. ROADMAP/05 §09. --------------------------------------------------------------------- */ --text-display: clamp(2.4rem, 6vw, 4rem); --text-h1: clamp(2rem, 5vw, 3.2rem); --text-h2: clamp(1.7rem, 3.6vw, 2.7rem); --text-h3: 1.15rem; --text-h4: 1rem; --text-lead: clamp(1rem, 1.6vw, 1.15rem); --text-body: 1rem; --text-small: 0.92rem; --text-caption: 0.86rem; --text-label: 0.82rem; /* Leading is per-script. Arabic carries ascenders, descenders and diacritics that a Latin-tuned 1.18 crushes, so the two scripts get different values rather than one compromise. Set on below. ROADMAP/01 §10. */ --leading-tight: 1.32; --leading-body: 1.9; /* Tracking is per-script too. Arabic is cursive: negative tracking crushes the joins and positive tracking visually severs them, so Arabic gets none. The Latin values live under html[lang="en"]. */ --tracking-display: 0; --tracking-label: 0; --weight-regular: 400; --weight-medium: 600; --weight-bold: 700; --weight-black: 800; /* --------------------------------------------------------------------- Spacing. 8px based. ROADMAP/05 §11. --------------------------------------------------------------------- */ --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-section: clamp(64px, 9vw, 120px); /* --------------------------------------------------------------------- Containers and breakpoints. Breakpoints are tokenised so the same threshold is not re-invented in every file. ROADMAP/05 §13, §51. --------------------------------------------------------------------- */ --container-max: 1180px; --container-pad: 24px; --container-narrow: 800px; --bp-sm: 430px; --bp-md: 640px; --bp-lg: 860px; --bp-xl: 980px; /* --------------------------------------------------------------------- Motion. Durations and easing are tokens so a single change slows or sharpens the whole site. ROADMAP/05 §26, §27. --------------------------------------------------------------------- */ --motion-instant: 120ms; --motion-fast: 200ms; --motion-normal: 300ms; --motion-slow: 450ms; --motion-slower: 700ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-emphasis: cubic-bezier(0.65, 0, 0.35, 1); /* --------------------------------------------------------------------- Stacking order. Named so no one has to guess whether 99 beats 100. ROADMAP/05 §06. --------------------------------------------------------------------- */ --z-behind: -2; --z-base: 0; --z-content: 2; --z-raised: 3; --z-sticky: 90; --z-header: 100; --z-overlay: 200; /* Dual-script type system (ROADMAP/01 §10, decision D2). Cairo covers Arabic and Latin, so it leads in both stacks and the site keeps one voice across scripts. Inter follows for Latin where it is available locally. */ --font-ar: "Cairo", "Segoe UI", system-ui, sans-serif; --font-en: "Cairo", Inter, "Segoe UI", system-ui, sans-serif; --font: var(--font-ar); --ease: var(--ease-standard); /* legacy alias */ /* ---- Section rhythm (light) ---- */ --mint-bg: #E4FBEF; --mint-border: rgba(34, 197, 94, 0.20); --wash-solid: #EEF5FF; --wash-bg: linear-gradient(180deg, #F3F9FF 0%, #E9F2FE 100%); --bold-grad: linear-gradient(135deg, #1E40AF 0%, #2563EB 55%, #1D4ED8 100%); --bold-text: #FFFFFF; --bold-text-soft: rgba(255, 255, 255, 0.90); --bold-border: rgba(255, 255, 255, 0.22); /* ---- Shadow + spacing scale (polish) ---- */ --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-md: 0 10px 26px -12px rgba(37, 99, 235, 0.22); --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 24px; --sp-5: 40px; --sp-6: 64px; } /* --------------------------------------------------------------------------- Per-script typography. The Arabic and English sites share one visual identity but not one set of typographic values. Applying Latin tracking conventions to Arabic is a real defect, not a nuance: the script is connected. --------------------------------------------------------------------------- */ html[lang="en"] { --font: var(--font-en); --leading-tight: 1.12; --leading-body: 1.65; --tracking-display: -0.02em; --tracking-label: 0.06em; } /* Arabic keeps default (zero) tracking and looser leading. Stated explicitly so the intent survives the next edit. */ html[lang="ar"] { --font: var(--font-ar); --leading-tight: 1.32; --leading-body: 1.9; --tracking-display: 0; --tracking-label: 0; } /* ---------- DARK THEME ---------- */ html[data-theme="dark"] { --bg: #0B1220; --bg-alt: #0D1626; --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.15); --text: #C9D4E4; --text-soft: #C2CDDE; --heading: #FFFFFF; --muted: #8A97AC; --muted-2: #64748B; --accent: #22D3EE; --icon-color: #22D3EE; --ok: #22C55E; --logo-color: #FFFFFF; --btn-primary-text: #06121F; --tag-color: #22D3EE; --tag-bg: rgba(34, 211, 238, 0.08); --tag-border: rgba(34, 211, 238, 0.22); --ok-bg: rgba(34, 197, 94, 0.10); --ok-border: rgba(34, 197, 94, 0.28); --ok-text: #86EFAC; --gradient-soft: linear-gradient(135deg, rgba(37,99,235,0.18), rgba(34,211,238,0.12)); --input-bg: rgba(0, 0, 0, 0.25); --header-bg: rgba(11, 18, 32, 0.80); --glass: rgba(11, 18, 32, 0.86); --glass-border: rgba(255, 255, 255, 0.14); --footer-bg: rgba(0, 0, 0, 0.22); --switch-off: rgba(255, 255, 255, 0.14); --knob-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); --ambient1: rgba(37, 99, 235, 0.22); --ambient2: rgba(34, 211, 238, 0.12); --ambient3: rgba(34, 197, 94, 0.06); --dot: rgba(255, 255, 255, 0.03); --ring-color: rgba(34, 211, 238, 0.22); --orb-blue: rgba(37, 99, 235, 0.5); --orb-cyan: rgba(34, 211, 238, 0.45); --blob-opacity: 0.16; --card-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6); --shadow-blue: 0 18px 45px -15px rgba(37, 99, 235, 0.55); /* ---- Section rhythm (dark) ---- */ --mint-bg: #0A1A16; --mint-border: rgba(34, 197, 94, 0.18); --wash-solid: #0C1526; --wash-bg: linear-gradient(180deg, #0D1728 0%, #0B1220 100%); --bold-grad: linear-gradient(135deg, #0B2A6B 0%, #123E8C 55%, #0E4F86 100%); --bold-text: #FFFFFF; --bold-text-soft: rgba(255, 255, 255, 0.86); --bold-border: rgba(255, 255, 255, 0.16); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4); --shadow-md: 0 14px 34px -16px rgba(0, 0, 0, 0.6); } /* --- styles/tokens/academy-brand.css --- */ /* Academy's own colour, scoped to html[data-brand="academy"]. ROADMAP/05 §07-08 own the semantic colour system this overrides. The hub (gahez.space itself) is the company's blue. Every other page is still the academy product's own marketing content — build.mjs sets data-brand="academy" on every page except the ones with header_variant: "hub" — so it carries its own accent (emerald, matching the family palette: violet Agent, teal Tools, rose Live, emerald Academy) until it has a subdomain and a repo of its own. Only the accent-bearing tokens are overridden; the neutral surface/text/border tokens stay shared, so this is a recolour, not a second theme to maintain. */ html[data-brand="academy"] { --blue: #059669; --blue-600: #047857; --cyan: #34d399; --gradient: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%); --gradient-soft: linear-gradient(135deg, rgba(5, 150, 105, 0.09), rgba(52, 211, 153, 0.09)); --accent: #059669; --icon-color: #059669; --tag-color: #059669; --tag-bg: rgba(5, 150, 105, 0.08); --tag-border: rgba(5, 150, 105, 0.2); --ambient1: rgba(5, 150, 105, 0.1); --ambient2: rgba(52, 211, 153, 0.12); --dot: rgba(5, 150, 105, 0.09); --ring-color: rgba(5, 150, 105, 0.2); --orb-blue: rgba(5, 150, 105, 0.55); --orb-cyan: rgba(52, 211, 153, 0.55); --card-shadow: 0 14px 34px -14px rgba(5, 150, 105, 0.24), 0 4px 12px rgba(15, 23, 42, 0.07); --shadow-blue: 0 16px 34px -12px rgba(5, 150, 105, 0.45); --shadow-md: 0 10px 26px -12px rgba(5, 150, 105, 0.22); --bold-grad: linear-gradient(135deg, #065f46 0%, #059669 55%, #047857 100%); } html[data-brand="academy"][data-theme="dark"] { --accent: #34d399; --icon-color: #34d399; --tag-color: #34d399; --tag-bg: rgba(52, 211, 153, 0.08); --tag-border: rgba(52, 211, 153, 0.22); --gradient-soft: linear-gradient(135deg, rgba(5, 150, 105, 0.18), rgba(52, 211, 153, 0.12)); --ambient1: rgba(5, 150, 105, 0.22); --ambient2: rgba(52, 211, 153, 0.12); --ring-color: rgba(52, 211, 153, 0.22); --orb-blue: rgba(5, 150, 105, 0.5); --orb-cyan: rgba(52, 211, 153, 0.45); --card-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6); --shadow-blue: 0 18px 45px -15px rgba(5, 150, 105, 0.55); --bold-grad: linear-gradient(135deg, #0b3b2e 0%, #0f5c46 55%, #0a6b4f 100%); } /* --- styles/base/reset.css --- */ /* Element defaults and reset. Extracted from the original styles.css — content unchanged. */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: var(--leading-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--motion-slow) var(--ease-standard), color var(--motion-slow) var(--ease-standard); } /* Ambient background */ body::before { content: ""; position: fixed; inset: 0; z-index: var(--z-behind); background: radial-gradient(55% 50% at 82% -5%, var(--ambient1), transparent 62%), radial-gradient(45% 45% at 6% 6%, var(--ambient2), transparent 60%), radial-gradient(50% 50% at 50% 108%, var(--ambient3), transparent 60%), var(--bg); transition: background var(--motion-slow) var(--ease-standard); } body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-behind); pointer-events: none; background-image: radial-gradient(var(--dot) 1.4px, transparent 1.4px); background-size: 40px 40px; mask-image: radial-gradient(85% 65% at 50% 0%, #000, transparent 78%); -webkit-mask-image: radial-gradient(85% 65% at 50% 0%, #000, transparent 78%); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* --- styles/base/layout.css --- */ /* Container, section rhythm and layout helpers. Extracted from the original styles.css — content unchanged. */ /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); position: relative; z-index: var(--z-content); } section { position: relative; padding-block: var(--space-section); overflow: hidden; } .section-tinted { background: var(--bg-alt); border-block: 1px solid var(--border); } .section-tag { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-label); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); color: var(--tag-color); padding: 6px 14px; border-radius: 999px; background: var(--tag-bg); border: 1px solid var(--tag-border); margin-bottom: 18px; } .section-head { max-width: 46rem; margin-bottom: var(--space-xl); } /* Paragraph measure. Arabic sets wider than Latin at the same character count, so the cap is expressed in rem rather than a character count. */ .lead { max-width: 42rem; } .section-head.center .lead { margin-inline: auto; } .section-head.center { margin-inline: auto; text-align: center; } h1, h2, h3, h4 { line-height: var(--leading-tight); font-weight: var(--weight-black); letter-spacing: var(--tracking-display); color: var(--heading); /* Arabic headlines break badly on tight measures; balance keeps the last line from stranding a single word. */ text-wrap: pretty; } h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); } .lead { color: var(--text-soft); font-size: var(--text-lead); } .gradient-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Small-caps tracking is a Latin typographic device. Applied to Arabic it breaks the cursive joins, so it is scoped. */ html[lang="en"] .section-tag { text-transform: uppercase; } /* --- styles/components/buttons.css --- */ /* Buttons. Extracted from the original styles.css — content unchanged. */ /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 1rem; padding: 15px 28px; border-radius: 14px; transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); white-space: nowrap; } .btn svg { width: 20px; height: 20px; } .btn-primary { background: var(--gradient); color: var(--btn-primary-text); box-shadow: var(--shadow-blue); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -12px rgba(37,99,235,0.55); } .btn-outline { background: var(--surface); color: var(--heading); border: 1px solid var(--border-strong); box-shadow: var(--card-shadow); } .btn-outline:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--surface-2); } .btn-block { width: 100%; } .btn-lg { padding: 17px 34px; font-size: 1.05rem; } /* --- styles/components/header.css --- */ /* Header, navigation and toggles. Extracted from the original styles.css — content unchanged. */ /* ---------- Header ---------- */ .header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header); height: var(--header-h); display: flex; align-items: center; transition: background var(--motion-normal) var(--ease-standard), border-color var(--motion-normal) var(--ease-standard), box-shadow .3s; border-bottom: 1px solid transparent; } .header.scrolled { background: var(--header-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--border); } .header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* latin-only: the wordmark is always Latin, so its tracking is a constant. */ .brand { display: inline-flex; align-items: center; gap: 12px; font-weight: var(--weight-black); font-size: 1.35rem; letter-spacing: -0.02em; color: var(--heading); } .brand .logo-mark { width: 46px; height: auto; color: var(--logo-color); } .brand .logo-mark path, .brand .logo-mark polygon { fill: currentColor; } .header-actions { display: flex; align-items: center; gap: 10px; } /* Pill toggles (lang + theme) */ .pill { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px; background: var(--surface); box-shadow: var(--card-shadow); } .lang-toggle { font-size: 0.82rem; font-weight: 700; } .lang-toggle button { padding: 6px 13px; border-radius: 999px; color: var(--muted); transition: var(--motion-fast) var(--ease-standard); } .lang-toggle button.active { background: var(--gradient); color: var(--btn-primary-text); } .theme-toggle { width: 40px; height: 40px; justify-content: center; } .theme-toggle button { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: var(--motion-fast) var(--ease-standard); } .theme-toggle button svg { width: 19px; height: 19px; } .theme-toggle .moon { display: none; } html[data-theme="dark"] .theme-toggle .sun { display: none; } html[data-theme="dark"] .theme-toggle .moon { display: grid; } .theme-toggle button:hover { color: var(--accent); background: var(--surface-2); } .header .btn { padding: 11px 20px; font-size: 0.92rem; } .nav-cta-hide { display: inline-flex; } /* ---------- Toggle switch (brand motif) ---------- */ html[dir="rtl"] .toggle-switch.on .knob { inset-inline-start: 4px; inset-inline-end: calc(var(--w) - var(--h) + 4px); } /* ============================================================ DECORATIVE SHAPES + MOTION ============================================================ */ /* Animations */ .d1 { animation-delay: -1.5s; } .d2 { animation-delay: -3s; } .d3 { animation-delay: -4.5s; } .d4 { animation-delay: -6s; } /* The language toggle is a pair of links: the URL, not JavaScript, decides the language (ROADMAP/03 §72). Keep the pill styling that the buttons had. */ .lang-toggle a { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; color: var(--muted); transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); } .lang-toggle a:hover { color: var(--heading); } .lang-toggle a[aria-current="true"] { background: var(--surface-2); color: var(--heading); } /* --- styles/sections/hero.css --- */ /* Hero, countdown and trust bar. Extracted from the original styles.css — content unchanged. */ /* ---------- Hero ---------- */ .hero { padding-block-start: calc(var(--header-h) + clamp(32px, 5.5vw, 66px)); padding-block-end: clamp(48px, 6vw, 86px); } .hero-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 4.5vw, 64px); align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-text); font-weight: 700; font-size: 0.9rem; margin-bottom: 24px; } .hero-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(34,197,94,0.6); animation: pulse 2.2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } } .hero h1 { font-size: var(--text-display); margin-bottom: 22px; } .hero .lead { max-width: 560px; margin-bottom: 32px; font-size: clamp(1.02rem, 1.7vw, 1.2rem); } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; } .hero-micro { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.9rem; } .hero-micro svg { width: 18px; height: 18px; color: var(--ok); flex: none; } /* Hero visual */ .hero-visual { position: relative; } .mock-dot:nth-child(1){ background:#ff5f57; } .mock-dot:nth-child(2){ background:#febc2e; } .mock-dot:nth-child(3){ background:#28c840; } .mock-stat .v.c { color: var(--blue); } .mock-stat .v.g { color: var(--ok); } .mock-stat .v.b { color: var(--blue-600); } /* ---------- Countdown ---------- */ /* ---------- Trust bar ---------- */ .trust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 34px; } .trust-item { display: inline-flex; align-items: center; gap: 10px; color: var(--text-soft); font-weight: 600; font-size: 0.96rem; } .trust-item svg { width: 20px; height: 20px; color: var(--icon-color); flex: none; } .trust-sep { width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2); } /* ---------- Hero composition ---------- The visual and the copy are weighted differently now: the copy block leads, the product scene sits slightly lower and wider so the two do not read as a symmetrical pair of boxes. */ .hero-grid { align-items: start; } .hero-copy { padding-block-start: clamp(0px, 2vw, 28px); } /* The launch date is a secondary, factual line — not a scarcity device. ROADMAP/04 §62. */ .hero-launch { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-block-start: var(--space-md); font-size: var(--text-caption); color: var(--muted); } .hero-launch-k { font-weight: var(--weight-medium); } .hero-launch-date { font-weight: var(--weight-bold); color: var(--text-soft); } .hero-launch-sep { flex: 1; height: 1px; background: var(--border); min-width: 12px; } .hero-launch-cd { display: inline-flex; align-items: baseline; gap: 1px; font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); color: var(--text-soft); /* Each value keeps its own direction so the digits are never reordered by the surrounding RTL line. */ unicode-bidi: isolate; } .hero-launch-cd .u { color: var(--muted-2); font-weight: var(--weight-medium); margin-inline-end: 8px; font-size: 0.9em; } /* Seconds tick every second; on a marketing page that is noise, so they are shown only where there is room for them to be a detail rather than a timer. */ @media (max-width: 640px) { .hero-launch-sec { display: none; } } /* --- styles/sections/content.css --- */ /* Value flow, features, proof, founding and pricing sections. Extracted from the original styles.css — content unchanged. */ /* ---------- Value flow ---------- */ /* ---------- Features ---------- */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--card-shadow); transition: transform var(--motion-normal) var(--ease-standard), border-color var(--motion-normal) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard); position: relative; overflow: hidden; } .feature-card::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 3px; background: var(--gradient); transform: scaleX(0); transform-origin: inline-start; transition: transform var(--motion-normal) var(--ease-standard); } .feature-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: 0 26px 50px -24px rgba(37,99,235,0.4); } .feature-card:hover::after { transform: scaleX(1); } .feature-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--gradient-soft); border: 1px solid var(--tag-border); margin-bottom: 18px; } .feature-ico svg { width: 26px; height: 26px; color: var(--icon-color); stroke-width: 1.7; } .feature-card :is(h2, h3) { font-size: var(--text-h3); font-weight: var(--weight-bold); margin-bottom: 8px; } .feature-card p { color: var(--muted); font-size: 0.94rem; } /* ---------- Proof ---------- */ .proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; } .proof-points { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; } .proof-point { display: flex; gap: 14px; align-items: flex-start; } .proof-point .check { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg); border: 1px solid var(--ok-border); } .proof-point .check svg { width: 16px; height: 16px; color: var(--ok); } .proof-point p { color: var(--text-soft); } .proof-point strong { color: var(--heading); } .proof-quote { margin-top: 22px; padding: 18px 20px; border-radius: var(--radius); background: var(--gradient-soft); border: 1px solid var(--tag-border); font-size: 1.05rem; font-weight: 600; color: var(--heading); } /* ---------- Founding ---------- */ .founding-card { background: linear-gradient(140deg, rgba(37,99,235,0.10), rgba(34,211,238,0.06)); border: 1px solid var(--tag-border); border-radius: var(--radius-lg); padding: clamp(30px, 5vw, 54px); text-align: center; position: relative; overflow: hidden; box-shadow: var(--card-shadow); } .founding-card > * { position: relative; z-index: var(--z-content); } .founding-card h2 { margin-bottom: 14px; } .founding-card .lead { max-width: 640px; margin-inline: auto; } .perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 26px; } .perk { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); font-weight: 600; font-size: 0.94rem; color: var(--heading); box-shadow: var(--card-shadow); } .perk svg { width: 18px; height: 18px; color: var(--accent); } .seats { max-width: 460px; margin: 0 auto 26px; } .seats-row { display: flex; justify-content: space-between; font-size: 0.86rem; color: var(--muted); font-weight: 600; margin-bottom: 8px; } /* ---------- Pricing ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; } .price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 26px; position: relative; box-shadow: var(--card-shadow); transition: transform var(--motion-normal) var(--ease-standard), border-color .3s; } .price-card:hover { transform: translateY(-5px); } .price-card.featured { border-color: var(--tag-border); background: var(--gradient-soft); } .price-badge { position: absolute; inset-block-start: -13px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--gradient); color: var(--btn-primary-text); font-size: 0.76rem; font-weight: 800; padding: 5px 14px; border-radius: 999px; } html[dir="rtl"] .price-badge { transform: translateX(50%); } .price-card :is(h2, h3) { font-size: 1.3rem; } .price-card .aud { color: var(--muted); font-size: 0.92rem; margin: 6px 0 18px; } .price-soon { font-size: 1.6rem; font-weight: 800; margin-bottom: 4px; } .price-note { color: var(--muted); font-size: 0.85rem; margin-bottom: 20px; } .price-list { display: flex; flex-direction: column; gap: 11px; margin-bottom: 24px; } .price-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-soft); font-size: 0.94rem; } .price-list svg { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 3px; } /* ---------- FAQ ---------- */ .faq-list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); transition: border-color .3s; } .faq-item.open { border-color: var(--border-strong); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; text-align: start; font-weight: 700; font-size: 1.03rem; color: var(--heading); } .faq-q .icon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--accent); transition: transform var(--motion-normal) var(--ease-standard), background var(--motion-normal), color .3s; } .faq-item.open .faq-q .icon { background: var(--gradient); color: #fff; transform: rotate(45deg); } .faq-q .icon svg { width: 15px; height: 15px; } .faq-a { max-height: 0; overflow: hidden; transition: max-height var(--motion-slow) var(--ease-standard); } .faq-a p { padding: 0 22px 22px; color: var(--muted); } /* A service is not a product feature. This note carries that distinction visually wherever a service could be mistaken for one. ROADMAP/04 §65. */ .feature-note { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--text-caption); } /* Two-column CTA: copy beside the form. */ .cta-grid { display: grid; gap: clamp(28px, 5vw, 56px); grid-template-columns: 1fr; align-items: start; } @media (min-width: 860px) { .cta-grid { grid-template-columns: 1fr 1fr; } } /* --------------------------------------------------------------------------- The problem beat (ROADMAP/02 §08). Deliberately not a card grid: it is a list of symptoms and a single conclusion, so it reads as an argument rather than a feature comparison. --------------------------------------------------------------------------- */ .problem-grid { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: 1fr; align-items: start; } @media (min-width: 860px) { .problem-grid { grid-template-columns: 1.1fr 0.9fr; } } .problem-list { display: grid; gap: var(--space-sm); } .problem-list li { position: relative; padding-inline-start: 26px; color: var(--text-soft); font-size: var(--text-lead); line-height: 1.6; } /* A short rule rather than a bullet or a tick: these are symptoms, not features. */ .problem-list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.75em; width: 14px; height: 2px; background: var(--muted-2); } .problem-note { border-inline-start: 3px solid var(--accent); padding-inline-start: var(--space-lg); } .problem-note p { color: var(--text-soft); } .problem-punch { margin-top: var(--space-md); font-size: var(--text-h3); font-weight: var(--weight-black); color: var(--heading); } /* --------------------------------------------------------------------------- Platform layers (ROADMAP/04 §08). Replaces the twelve-item feature grid that made the homepage read as an academy catalogue (ROADMAP/04 §23). --------------------------------------------------------------------------- */ .layers { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--space-xl); } .layer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-lg); transition: border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); } .layer:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); transform: translateY(-2px); } .layer-n { display: block; font-size: var(--text-label); font-weight: var(--weight-black); color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: var(--space-xs); } .layer :is(h2, h3) { font-size: var(--text-h3); font-weight: var(--weight-bold); margin-bottom: 6px; } .layer p { color: var(--muted); font-size: var(--text-small); line-height: 1.65; } .section-foot { margin-top: var(--space-lg); text-align: center; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: var(--weight-bold); } .link-arrow::after { content: ""; width: 16px; height: 2px; background: currentColor; transition: width var(--motion-fast) var(--ease-standard); } .link-arrow:hover::after { width: 26px; } /* Card headings keep their visual weight regardless of which heading level the document outline requires. ROADMAP/05 §54. */ .faq-group :is(h2, h3), .post-card :is(h2, h3), .integration-card :is(h2, h3), .checkout-card :is(h2, h3) { font-size: var(--text-h3); font-weight: var(--weight-bold); } /* --- styles/sections/connected-flow.css --- */ /* ConnectedFlow — the signature GAHEZ scene. ROADMAP/05 §94. The chain Lead → Student → Group → Teacher → Session → Payment → Performance, drawn as one record gaining context rather than seven systems handing files to each other. Three behaviours, one markup: desktop the stage pins while the rail draws and nodes light in turn narrow a vertical sequence, never pinned, never trapped reduced motion the finished state, everything readable at once The markup is an ordered list, so the narrative survives with no CSS at all. */ .cf { /* The base section rule sets overflow:hidden, which establishes a scroll container and silently stops position:sticky from working. The scene has nothing to clip, so it opts out. */ overflow: visible; /* Scroll length for the pinned scene. Seven nodes need room to land without the page feeling held hostage. */ --cf-scroll: 240vh; --cf-count: 7; position: relative; padding: 0; background: var(--wash-solid); border-block: 1px solid var(--border); } .cf-stage { padding-block: var(--space-2xl); } .cf-head { max-width: 46rem; margin-bottom: var(--space-lg); } .cf-head .lead { max-width: 42rem; } /* --------------------------------------------------------------- the scene */ .cf-scene { position: relative; } .cf-rail { position: absolute; /* Span dot-centre to dot-centre. A dot sits at the start of its grid cell, so the far end stops one cell short, plus half a dot. */ inset-inline-start: 14px; inset-inline-end: calc(100% / var(--cf-count) - 14px); inset-block-start: 13px; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; } .cf-rail-fill { position: absolute; inset-block: 0; inset-inline-start: 0; /* --cf-p is written by the scene script, 0 to 1 */ inline-size: calc(var(--cf-p, 0) * 100%); background: linear-gradient(to var(--cf-to, left), var(--blue), var(--cyan)); transition: inline-size 120ms linear; } html[dir="ltr"] .cf { --cf-to: right; } html[dir="rtl"] .cf { --cf-to: left; } .cf-nodes { position: relative; display: grid; grid-template-columns: repeat(var(--cf-count), 1fr); gap: var(--space-sm); list-style: none; margin: 0; padding: 0; } .cf-node { position: relative; display: grid; gap: 6px; align-content: start; padding-inline-end: var(--space-sm); } .cf-dot { inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); display: block; position: relative; z-index: var(--z-content); transition: border-color var(--motion-normal) var(--ease-standard), background var(--motion-normal) var(--ease-standard), transform var(--motion-normal) var(--ease-emphasis); } .cf-dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--border-strong); transition: background var(--motion-normal) var(--ease-standard), transform var(--motion-normal) var(--ease-emphasis); transform: scale(0.6); } .cf-label { font-weight: var(--weight-black); font-size: var(--text-h4); color: var(--muted); transition: color var(--motion-normal) var(--ease-standard); } .cf-desc { font-size: var(--text-small); line-height: 1.6; /* De-emphasis is a step between two readable colours, not a fade below legibility. Un-reached is --muted (4.5:1); reached is --text-soft (7:1), so arriving increases contrast rather than merely changing hue. */ color: var(--muted); transition: color var(--motion-normal) var(--ease-standard); } /* Reached: the record has arrived here. */ .cf-node.is-on .cf-dot { border-color: var(--accent); background: var(--surface); } .cf-node.is-on .cf-dot::after { background: var(--accent); transform: scale(1); } .cf-node.is-on .cf-label { color: var(--heading); } .cf-node.is-on .cf-desc { color: var(--text-soft); } /* Current: where the record is right now. */ .cf-node.is-now .cf-dot { transform: scale(1.18); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent); } /* --------------------------------------------------------------- pinned */ @media (min-width: 861px) and (prefers-reduced-motion: no-preference) { .cf { block-size: var(--cf-scroll); } .cf-stage { position: sticky; inset-block-start: 0; block-size: 100vh; display: flex; align-items: center; } .cf-desc { min-block-size: 4.5em; } } /* --------------------------------------------------------------- narrow */ @media (max-width: 860px) { /* Vertical sequence. Never pinned — ROADMAP/05 §45 and §94. */ .cf-nodes { grid-template-columns: 1fr; gap: var(--space-lg); } .cf-node { grid-template-columns: 28px 1fr; grid-template-areas: "dot label" "dot desc"; gap: 4px var(--space-md); padding-inline-end: 0; } .cf-dot { grid-area: dot; } .cf-label { grid-area: label; } .cf-desc { grid-area: desc; padding-block-end: var(--space-sm); } /* The rail becomes the spine of the list. */ .cf-rail { inset-inline-start: 13px; inset-inline-end: auto; inset-block: 14px 14px; inline-size: 2px; block-size: auto; } .cf-rail-fill { inline-size: 100%; block-size: calc(var(--cf-p, 0) * 100%); } } /* --------------------------------------------------------------- reduced */ @media (prefers-reduced-motion: reduce) { .cf { block-size: auto; } .cf-stage { position: static; block-size: auto; } .cf-rail-fill { inline-size: 100%; block-size: 100%; transition: none; } .cf-dot, .cf-dot::after, .cf-label, .cf-desc { transition: none; } .cf-node .cf-dot { border-color: var(--accent); } .cf-node .cf-dot::after { background: var(--accent); transform: scale(1); } .cf-node .cf-label { color: var(--heading); } .cf-node .cf-desc { color: var(--text-soft); } .cf-node.is-now .cf-dot { transform: none; box-shadow: none; } } /* --------------------------------------------------------------- the record The point of the scene is that one record gains context as it travels, so the record itself is on screen, filling in as the chain advances. Every field is part of the verified data model (ROADMAP/04 §64). */ .cf-record { margin-block-start: var(--space-lg); margin-inline: auto; max-inline-size: 44rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; } .cf-record-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 12px 16px; background: var(--surface-2); border-block-end: 1px solid var(--border); } .cf-record-title { font-weight: var(--weight-bold); font-size: var(--text-label); color: var(--heading); } .cf-record-id { font-size: var(--text-label); font-weight: var(--weight-bold); color: var(--accent); font-variant-numeric: tabular-nums; /* An identifier keeps its own direction, or RTL moves the # to the end. */ direction: ltr; unicode-bidi: isolate; } .cf-record-body { display: grid; grid-template-columns: 1fr 1fr; } .cf-field { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-md); align-items: baseline; padding: 9px 16px; border-block-start: 1px solid var(--border); font-size: var(--text-small); /* Fields arrive as the record reaches each step. */ opacity: 0; transform: translateY(-4px); transition: opacity var(--motion-normal) var(--ease-enter), transform var(--motion-normal) var(--ease-enter); } .cf-field:nth-child(-n+2) { border-block-start: 0; } .cf-field:nth-child(odd) { border-inline-end: 1px solid var(--border); } /* seven fields into two columns leaves one spanning the last row */ .cf-field:last-child { grid-column: 1 / -1; border-inline-end: 0; } .cf-field dt { color: var(--muted); font-weight: var(--weight-medium); } .cf-field dd { color: var(--heading); font-weight: var(--weight-bold); margin: 0; } .cf-field.is-on { opacity: 1; transform: none; } /* The field that just landed. */ .cf-field.is-new { background: color-mix(in srgb, var(--accent) 7%, transparent); } @media (max-width: 760px) { .cf-record-body { grid-template-columns: 1fr; } .cf-field:nth-child(odd) { border-inline-end: 0; } .cf-field:nth-child(2) { border-block-start: 1px solid var(--border); } } @media (max-width: 640px) { .cf-field { grid-template-columns: 1fr; gap: 2px; } .cf-record { margin-block-start: var(--space-lg); } } @media (prefers-reduced-motion: reduce) { .cf-field { opacity: 1; transform: none; transition: none; } .cf-field.is-new { background: transparent; } } /* --- styles/sections/composition.css --- */ /* Section grammars. ROADMAP/05 §81 flags "every heading centred" and "every feature three columns" as signs of generic design, and ROADMAP/03 §79 asks for variation driven by the story rather than by a template. Each grammar below is a different shape. A section picks one; it does not invent a new layout of its own. .sec-split argument on one side, conclusion on the other .sec-grid a system shown as a system — equal parts, editorial head .sec-showcase claim beside product evidence .sec-band a single statement across the full measure */ /* --------------------------------------------------------------- split */ .sec-split .section-head { max-width: 34rem; margin-bottom: var(--space-xl); } /* --------------------------------------------------------------- grid */ .sec-grid .section-head { max-width: 40rem; } /* Six layers as three columns of two. auto-fit produced 4 + 2 orphans at desktop width, which reads as an accident rather than a composition. */ .sec-grid .layers { grid-template-columns: repeat(3, 1fr); } @media (max-width: 980px) { .sec-grid .layers { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .sec-grid .layers { grid-template-columns: 1fr; } } /* The layers are a system, so they share edges rather than floating as separate cards. One surface, divided. */ .sec-grid .layers { gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); } .sec-grid .layer { border: 0; border-radius: 0; border-inline-end: 1px solid var(--border); border-block-end: 1px solid var(--border); padding: var(--space-lg); background: transparent; } @media (min-width: 981px) { .sec-grid .layer:nth-child(3n) { border-inline-end: 0; } .sec-grid .layer:nth-last-child(-n+3) { border-block-end: 0; } } @media (max-width: 980px) and (min-width: 621px) { .sec-grid .layer:nth-child(2n) { border-inline-end: 0; } .sec-grid .layer:nth-last-child(-n+2) { border-block-end: 0; } } @media (max-width: 620px) { .sec-grid .layer { border-inline-end: 0; } .sec-grid .layer:last-child { border-block-end: 0; } } .sec-grid .layer:hover { transform: none; background: var(--surface-2); border-color: var(--border); } .sec-grid .section-foot { text-align: start; margin-top: var(--space-lg); } /* --------------------------------------------------------------- showcase */ .sec-showcase .proof-grid { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { /* Deliberately uneven: the evidence gets more room than the claim. */ .sec-showcase .proof-grid { grid-template-columns: 0.85fr 1.15fr; } } /* --------------------------------------------------------------- band */ .sec-band .founding-card { text-align: start; display: grid; gap: var(--space-lg); align-items: center; grid-template-columns: 1fr; max-width: none; } @media (min-width: 900px) { .sec-band .founding-card { grid-template-columns: 1.15fr 0.85fr; } .sec-band .founding-card .perks, .sec-band .founding-card .seats-note, .sec-band .founding-card .btn { grid-column: 2; } .sec-band .founding-card .section-tag, .sec-band .founding-card h2, .sec-band .founding-card .lead { grid-column: 1; } .sec-band .founding-card h2 { margin-block-end: var(--space-sm); } } .sec-band .founding-card .perks { justify-content: start; } .sec-band .founding-card .seats-note { margin: 0; } .sec-band .founding-card .btn { justify-self: start; } .sec-band .founding-card .section-tag { justify-self: start; margin-bottom: var(--space-sm); } /* --------------------------------------------------------------- problem */ /* The dash before each symptom draws in rather than appearing, so the list reads as a tally being counted out. */ .problem-list li::before { transform: scaleX(0); transform-origin: var(--dash-origin, right); transition: transform var(--motion-normal) var(--ease-standard); } html[dir="ltr"] .problem-list li::before { --dash-origin: left; } .reveal.in .problem-list li::before, .problem-list.in li::before { transform: scaleX(1); } .problem-list li:nth-child(1)::before { transition-delay: 60ms; } .problem-list li:nth-child(2)::before { transition-delay: 140ms; } .problem-list li:nth-child(3)::before { transition-delay: 220ms; } .problem-list li:nth-child(4)::before { transition-delay: 300ms; } .problem-list li:nth-child(5)::before { transition-delay: 380ms; } @media (prefers-reduced-motion: reduce) { .problem-list li::before { transform: scaleX(1); transition: none; } } /* --------------------------------------------------------------- bars The collection scene's chart. Bars grow once, on entry — a value arriving, not a loop. */ .pbars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; block-size: 118px; padding-block-end: 4px; } .pbar { position: relative; display: block; block-size: 100%; } .pbar i { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--h, 40%); border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--accent) 26%, transparent); transform: scaleY(0); transform-origin: bottom; transition: transform var(--motion-slow) var(--ease-enter); } .pscene.is-played .pbar i { transform: scaleY(1); } .pbar:nth-child(1) i { transition-delay: 40ms; } .pbar:nth-child(2) i { transition-delay: 90ms; } .pbar:nth-child(3) i { transition-delay: 140ms; } .pbar:nth-child(4) i { transition-delay: 190ms; } .pbar:nth-child(5) i { transition-delay: 240ms; } .pbar:nth-child(6) i { transition-delay: 290ms; } .pbar:nth-child(7) i { transition-delay: 340ms; } .pbar.is-today { --h: 94%; } .pbar.is-today i { background: var(--accent); } .pbar-cap { position: absolute; inset-block-end: calc(var(--h, 94%) + 6px); inset-inline: 0; text-align: center; font-size: 0.62rem; font-weight: var(--weight-bold); color: var(--accent); white-space: nowrap; } .pstate.is-warn { color: #B45309; } @media (prefers-reduced-motion: reduce) { .pbar i { transform: scaleY(1); transition: none; } } /* --------------------------------------------------------------- aside A heading that stays beside its content rather than sitting above it, centred, like every other section on the page. */ .sec-aside .container { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .sec-aside .container { grid-template-columns: 0.8fr 1.2fr; } .sec-aside .section-head { margin-bottom: 0; position: sticky; inset-block-start: calc(var(--header-h) + var(--space-lg)); } } .sec-aside .section-head { max-width: 28rem; } /* A deliberate two-up. Four cards in an auto-fit grid became 3 + 1 at desktop width, which reads as an accident. */ .features-grid.grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 760px) { .features-grid.grid-2 { grid-template-columns: 1fr; } } /* Equal heights so a card with an extra note line does not orphan its neighbour. */ .features-grid.grid-2 .feature-card { display: flex; flex-direction: column; } .features-grid.grid-2 .feature-card .feature-note { margin-block-start: auto; } /* --------------------------------------------------------------- statement An editorial moment: one idea at display size, generous measure, no card and no grid. Used where a section is the page's thesis rather than a list of things. ROADMAP/05 §23 allows this kind of exception, and §24 requires it still feel like the same system. */ .sec-statement .container { max-width: 52rem; } .sec-statement .section-head { max-width: none; margin-bottom: 0; text-align: center; } .sec-statement h2 { font-size: var(--text-display); margin-block-end: var(--space-lg); } .sec-statement .lead { font-size: var(--text-lead); max-width: 44rem; margin-inline: auto; } .sec-statement .section-tag { margin-inline: auto; } /* --- styles/sections/hub.css --- */ /* The company hub homepage: hero with an ambient "connection" network, the product grid, and the short "why Gahez" section. The network reuses the existing .reveal/.text-reveal machinery (see base/motion.css and scripts/reveal.js) rather than a new observer: it is just an SVG that happens to carry .reveal-timed lines. Nothing here adds a constantly-running background — ROADMAP/01 §43 and §45 rule that out on purpose. The lines draw themselves once, on arrival; after that, only two nodes keep a slow, low-amplitude pulse to read as "alive" rather than "static screenshot". */ /* ---------- Hero ---------- */ .hub-hero { position: relative; overflow: hidden; padding-block-start: calc(var(--header-h) + clamp(40px, 7vw, 96px)); padding-block-end: clamp(64px, 8vw, 120px); background: var(--bg); } /* Two soft, blurred glows drifting very slowly — the "glassy" depth behind the stars and the constellation. Plain divs, not the network's SVG, because a CSS blur() on the SVG would blur the stars and the text-safe mask along with it. */ .hub-nebula { position: absolute; inset: 0; z-index: var(--z-behind); overflow: hidden; pointer-events: none; } .hub-nebula::before, .hub-nebula::after { content: ""; position: absolute; border-radius: 50%; filter: blur(64px); opacity: 0.16; } .hub-nebula::before { inline-size: 30rem; block-size: 30rem; background: radial-gradient(circle, var(--blue), transparent 70%); inset-inline-start: -6rem; inset-block-start: -5rem; } .hub-nebula::after { inline-size: 26rem; block-size: 26rem; background: radial-gradient(circle, var(--cyan), transparent 70%); inset-inline-end: -4rem; inset-block-start: 8rem; } html[data-theme="dark"] .hub-nebula::before, html[data-theme="dark"] .hub-nebula::after { opacity: 0.34; } @media (prefers-reduced-motion: no-preference) { .hub-nebula::before { animation: hub-nebula-a 24s ease-in-out infinite alternate; } .hub-nebula::after { animation: hub-nebula-b 30s ease-in-out infinite alternate; } } @keyframes hub-nebula-a { from { transform: translate(0, 0); } to { transform: translate(2.5rem, 1.8rem); } } @keyframes hub-nebula-b { from { transform: translate(0, 0); } to { transform: translate(-2rem, 2.4rem); } } .hub-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--z-base); /* Fades only at the very bottom, into the next section — the network is meant to be seen, not hinted at. */ -webkit-mask-image: linear-gradient(180deg, black 82%, transparent 100%); mask-image: linear-gradient(180deg, black 82%, transparent 100%); } .net-star { fill: var(--heading); opacity: 0.35; } html[data-theme="dark"] .net-star { fill: #fff; opacity: 0.55; } @media (prefers-reduced-motion: no-preference) { .net-star { animation: hub-twinkle 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); } } @keyframes hub-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.9; } } html[data-theme="dark"] .net-star { animation-name: hub-twinkle-dark; } @keyframes hub-twinkle-dark { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* Soft, glowing — a constellation, not a wiring diagram. The blur comes from the SVG filter on the enclosing (see hubNetGlow in the markup); these rules set the colour the glow is made of. */ .hub-net .net-line { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); stroke-width: 2.2; stroke-linecap: round; } .hub-net .net-line.is-accent { stroke: url(#hubNetGradient); stroke-width: 2.6; } .hub-net .net-node { fill: color-mix(in srgb, var(--accent) 60%, var(--muted-2)); } .hub-net .net-node.is-accent { fill: var(--accent); } html[data-theme="dark"] .hub-net .net-line { stroke: color-mix(in srgb, var(--accent) 60%, var(--border-strong)); } html[data-theme="dark"] .hub-net .net-node { fill: color-mix(in srgb, var(--accent) 75%, var(--muted-2)); } /* The line draws itself in once, on arrival — never a looping reveal. */ @media (prefers-reduced-motion: no-preference) { .hub-net .net-line { stroke-dasharray: 620; stroke-dashoffset: 620; transition: stroke-dashoffset 1.7s var(--ease-enter); } /* .hub-net carries .reveal itself (it is the observed element, not a wrapper around one), so the "revealed" selector targets .hub-net.in directly rather than a `.reveal.in` ancestor. */ .hub-net.in .net-line { stroke-dashoffset: 0; } .hub-net .net-node { opacity: 0; transform-origin: center; transform: scale(0.4); transition: opacity var(--motion-slow) var(--ease-enter), transform var(--motion-slow) var(--ease-emphasis); } .hub-net.in .net-node { opacity: 1; transform: scale(1); } /* After the draw-in settles, two accent lines carry a slow, continuous "current" — short dashes travelling along the connection, the one ongoing motion the background keeps. ROADMAP/01 §43 rules out a constantly-shifting scene; a single quiet current along two lines, reinforcing the "connection" idea, is not that. */ .hub-net.in .net-line.is-accent { animation: hub-current 9s linear 1.8s infinite; } .hub-net .net-node.is-accent { animation: hub-pulse 5.5s ease-in-out 2.4s infinite; } .hub-net .net-node.is-accent:nth-of-type(2) { animation-delay: 3.6s; } } @media (prefers-reduced-motion: reduce) { .hub-net .net-line { stroke-dashoffset: 0; } .hub-net .net-node { opacity: 1; transform: none; } } @keyframes hub-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes hub-current { from { stroke-dasharray: 10 14; stroke-dashoffset: 0; } to { stroke-dasharray: 10 14; stroke-dashoffset: -240; } } .hub-hero .container { position: relative; z-index: var(--z-content); } .hub-hero-copy { max-width: 42rem; margin-inline: auto; text-align: center; } .hub-hero h1 { font-size: var(--text-display); margin-bottom: 20px; } .hub-hero .lead { margin-inline: auto; margin-bottom: 34px; font-size: clamp(1.02rem, 1.7vw, 1.2rem); } .hub-hero .hero-cta { justify-content: center; margin-bottom: 26px; } .hub-hero .hero-micro { justify-content: center; } /* ---------- Product grid ---------- */ .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); } .product-card { --card-accent: var(--accent); position: relative; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--motion-normal) var(--ease-standard), border-color var(--motion-normal) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard); } .product-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--card-accent); opacity: 0.85; } .product-card:hover, .product-card:focus-visible { transform: translateY(-4px); border-color: color-mix(in srgb, var(--card-accent) 45%, var(--border)); box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--card-accent) 55%, transparent); } .product-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--card-accent) 14%, var(--surface)); color: var(--card-accent); margin-bottom: 4px; } .product-icon svg { width: 24px; height: 24px; } .product-card h3 { font-size: var(--text-h3); color: var(--heading); margin: 0; } .product-card p { color: var(--text-soft); font-size: var(--text-small); line-height: 1.7; margin: 0; flex: 1; } .product-go { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-bold); font-size: var(--text-small); color: var(--card-accent); } .product-go svg { width: 16px; height: 16px; transition: transform var(--motion-fast) var(--ease-standard); } /* Arabic RTL: "forward" points to the visual left. */ html[dir="rtl"] .product-go svg { transform: scaleX(-1); } .product-card:hover .product-go svg { transform: translateX(3px); } html[dir="rtl"] .product-card:hover .product-go svg { transform: scaleX(-1) translateX(3px); } /* ---------- Why Gahez ---------- */ .hub-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); } .hub-value h4 { display: flex; align-items: center; gap: 10px; font-size: var(--text-h4); color: var(--heading); margin: 0 0 6px; } .hub-value h4 svg { width: 20px; height: 20px; color: var(--accent); flex: none; } .hub-value p { color: var(--text-soft); font-size: var(--text-small); line-height: 1.7; margin: 0; } /* The network sliced across a narrow, tall viewport reads as dense rather than atmospheric, and its lines cross straight through the paragraph. ROADMAP/01 §49 rules out heavy background animation on mobile outright, so the hero relies on the text reveal and the gradient word for its motion there instead of trying to shrink the desktop scene into place. */ @media (max-width: 760px) { .hub-net { display: none; } } @media (max-width: 640px) { .hub-hero-copy { text-align: start; } .hub-hero .hero-cta, .hub-hero .hero-micro { justify-content: flex-start; } } /* ---------- Story: fragmentation -> connection ---------- */ .story-scene { position: relative; max-inline-size: 46rem; margin-inline: auto; margin-block: var(--space-2xl) var(--space-lg); aspect-ratio: 800 / 360; } .story-lines { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; } .story-line { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); stroke-width: 2; stroke-linecap: round; } @media (prefers-reduced-motion: no-preference) { .story-line { stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1.1s var(--ease-enter); } .story-scene.in .story-line:nth-child(1) { stroke-dashoffset: 0; transition-delay: .05s; } .story-scene.in .story-line:nth-child(2) { stroke-dashoffset: 0; transition-delay: .18s; } .story-scene.in .story-line:nth-child(3) { stroke-dashoffset: 0; transition-delay: .31s; } .story-scene.in .story-line:nth-child(4) { stroke-dashoffset: 0; transition-delay: .44s; } } @media (prefers-reduced-motion: reduce) { .story-line { stroke-dashoffset: 0; } } .story-icon { position: absolute; /* Physical left, not inset-inline-start: the SVG lines beside this are drawn in the SVG's own physical coordinate space, which never mirrors for RTL. Logical positioning here would flip the icons but not the lines under them, so the two would stop lining up on an Arabic page. */ left: var(--x); inset-block-start: var(--y); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; opacity: 0; } @media (prefers-reduced-motion: no-preference) { .story-icon { transition: opacity var(--motion-slow) var(--ease-enter), transform var(--motion-slow) var(--ease-emphasis); } .story-scene.in .story-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @media (prefers-reduced-motion: reduce) { .story-icon { opacity: 1; } } .story-tile { display: inline-flex; align-items: center; justify-content: center; inline-size: 46px; block-size: 46px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--accent); box-shadow: var(--shadow-sm); } .story-tile svg { inline-size: 22px; block-size: 22px; } .story-label { font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--muted); max-inline-size: 7rem; line-height: 1.4; } .story-hub { position: absolute; left: var(--x, 21%); inset-block-start: var(--y, 50%); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; inline-size: 84px; block-size: 84px; border-radius: 50%; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 8%, transparent), var(--card-shadow); } .story-hub .logo-mark { inline-size: 40px; color: var(--accent); fill: currentColor; } @media (prefers-reduced-motion: no-preference) { .story-hub { opacity: 0; transform: translate(-50%, -50%) scale(0.6); transition: opacity var(--motion-slower) var(--ease-emphasis) .5s, transform var(--motion-slower) var(--ease-emphasis) .5s; } .story-scene.in .story-hub { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @media (prefers-reduced-motion: reduce) { .story-hub { opacity: 1; } } .story-caption { max-inline-size: 34rem; margin-inline: auto; text-align: center; color: var(--text-soft); font-weight: var(--weight-medium); } @media (max-width: 760px) { .story-lines { display: none; } .story-scene { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); margin-block: var(--space-xl) var(--space-md); } .story-icon { position: static; transform: none !important; flex-direction: row; gap: var(--space-sm); text-align: start; } .story-label { max-inline-size: none; } .story-hub { position: static; transform: none !important; margin-block-start: var(--space-xs); } } /* --- styles/components/product-scene.css --- */ /* Product scenes. Custom visualisations of the real GAHEZ console. They are built from verified capabilities only (ROADMAP/04 §64) and never depict a feature the product does not have — a visual makes a claim exactly as a sentence does (ROADMAP/05 §97). Figures inside a scene are illustrative and are labelled as such by .pscene-note, quietly, without turning into a disclaimer. */ .pscene { position: relative; margin: 0; } .pscene-frame { position: relative; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); overflow: hidden; /* The frame is the thing that clips in on entry; see motion.css. */ } /* A single hairline of accent along the top edge, in place of the old decorative gradient border. */ .pscene-frame::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: linear-gradient( to var(--flow-dir, left), var(--cyan), var(--blue) 45%, transparent 85% ); } /* ---------------------------------------------------------------- chrome */ .pscene-chrome { display: flex; align-items: center; gap: var(--space-sm); padding: 12px 16px; border-block-end: 1px solid var(--border); background: var(--surface-2); } .pscene-dots { display: inline-flex; gap: 6px; } .pscene-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; background: var(--border-strong); } .pscene-dots i:nth-child(1) { background: #ff5f57; } .pscene-dots i:nth-child(2) { background: #febc2e; } .pscene-dots i:nth-child(3) { background: #28c840; } .pscene-title { font-size: var(--text-label); font-weight: var(--weight-bold); color: var(--muted); } .pscene-branch { margin-inline-start: auto; font-size: var(--text-label); font-weight: var(--weight-bold); color: var(--tag-color); background: var(--tag-bg); border: 1px solid var(--tag-border); border-radius: 999px; padding: 4px 12px; } /* ---------------------------------------------------------------- body */ .pscene-body { display: grid; grid-template-columns: 132px 1fr; } .pscene-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-inline-end: 1px solid var(--border); background: var(--surface-2); } .pscene-navitem { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--muted); white-space: nowrap; } .pscene-navitem svg { width: 15px; height: 15px; flex: none; } .pscene-navitem.is-current { background: var(--surface); color: var(--heading); font-weight: var(--weight-bold); box-shadow: var(--shadow-sm); } .pscene-navitem.is-current svg { color: var(--accent); } .pscene-main { padding: 16px; display: grid; gap: 14px; align-content: start; } /* ---------------------------------------------------------------- metrics */ .pscene-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pmetric { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; display: grid; gap: 4px; } .pmetric-k { font-size: 0.72rem; color: var(--text-soft); font-weight: var(--weight-medium); } .pmetric-v { font-size: 1.35rem; font-weight: var(--weight-black); color: var(--heading); font-variant-numeric: tabular-nums; line-height: 1.1; } .pmetric-v.is-ok { color: var(--ok); } .pmetric-v.is-accent { color: var(--accent); } /* ---------------------------------------------------------------- table */ .pscene-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .prow { display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; font-size: 0.78rem; border-block-start: 1px solid var(--border); } .prow:first-child { border-block-start: 0; } .prow-head { background: var(--surface-2); color: var(--muted); font-weight: var(--weight-bold); font-size: 0.7rem; } .pcell-main { font-weight: var(--weight-bold); color: var(--heading); } .pcell-main em { font-style: normal; font-weight: var(--weight-medium); color: var(--muted); } .pcell-sub { color: var(--muted); } .pstate { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-bold); font-size: 0.72rem; white-space: nowrap; } .pstate svg { width: 13px; height: 13px; } .pstate.is-done { color: var(--ok); } /* The live row swaps state once, when the scene plays: Zoom logs the session and the row resolves. Both capabilities are verified. */ .pstate-swap { position: relative; display: inline-grid; } .pstate-from, .pstate-to { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: opacity var(--motion-normal) var(--ease-standard), transform var(--motion-normal) var(--ease-standard); } .pstate-from { color: var(--accent); } .pstate-to { color: var(--ok); opacity: 0; transform: translateY(6px); } .plive { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); } .prow.is-resolved .pstate-from { opacity: 0; transform: translateY(-6px); } .prow.is-resolved .pstate-to { opacity: 1; transform: none; } .prow.is-live { background: color-mix(in srgb, var(--accent) 5%, transparent); } .prow.is-resolved { background: color-mix(in srgb, var(--ok) 7%, transparent); } /* ---------------------------------------------------------------- toast */ .pscene-toast { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-text); font-size: 0.76rem; font-weight: var(--weight-medium); line-height: 1.5; } .pscene-toast svg { width: 15px; height: 15px; flex: none; } .ptoast-ico { display: inline-flex; } /* ---------------------------------------------------------------- caption */ .pscene-note { margin-block-start: 10px; text-align: center; font-size: 0.72rem; /* --muted-2 is 2.56:1 on white and fails for text. */ color: var(--muted); } /* ---------------------------------------------------------------- responsive */ @media (max-width: 980px) { .pscene-body { grid-template-columns: 108px 1fr; } .pscene-navitem span:not(.is-current) { font-size: 0.72rem; } } @media (max-width: 640px) { .pscene-body { grid-template-columns: 1fr; } /* The sidebar becomes a horizontal rail rather than disappearing: navigation across modules is part of what the scene is showing. */ .pscene-nav { flex-direction: row; overflow-x: auto; border-inline-end: 0; border-block-end: 1px solid var(--border); padding: 10px; scrollbar-width: none; } .pscene-nav::-webkit-scrollbar { display: none; } .pscene-branch { display: none; } .pscene-metrics { grid-template-columns: 1fr 1fr; } .pscene-metrics .pmetric:last-child { grid-column: span 2; } .prow { grid-template-columns: 1fr auto; font-size: 0.74rem; } .prow .pcell-sub { display: none; } } /* A compact scene for use beside copy, with no module navigation. */ .pscene-sm .pscene-main { padding: 14px; gap: 12px; } .pscene-sm .pscene-chrome { padding: 10px 14px; } .pscene-sm .prow { grid-template-columns: 1fr auto; } .pscene-sm .pcell-sub { display: none; } /* --- styles/components/forms.css --- */ /* Forms and validation states. Extracted from the original styles.css — content unchanged. */ /* ---------- Forms ---------- */ .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--card-shadow); position: relative; z-index: var(--z-content); } .form-tabs { display: flex; gap: 8px; padding: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 26px; } .form-tab { flex: 1; padding: 12px; border-radius: 10px; font-weight: 700; font-size: 0.95rem; color: var(--muted); transition: var(--motion-fast) var(--ease-standard); } .form-tab.active { background: var(--gradient); color: var(--btn-primary-text); } .form-panel { display: none; animation: fadeIn var(--motion-slow) var(--ease-standard); } .form-panel.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .field { margin-bottom: 16px; } .field label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--text-soft); margin-bottom: 8px; } /* --muted-2 fails contrast for text (2.56:1); these are read, so they use --muted. */ .field label .opt { color: var(--muted); font-weight: 500; } .field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border-radius: 12px; background: var(--input-bg); border: 1px solid var(--border-strong); color: var(--heading); font-family: inherit; font-size: 1rem; transition: border-color var(--motion-fast), box-shadow .2s; } .field textarea { min-height: 110px; resize: vertical; } .field input::placeholder { color: var(--muted); } .field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); } .field input.invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.14); } .field .err { display: none; color: #dc2626; font-size: 0.82rem; margin-top: 6px; } .field.show-err .err { display: block; } .form-note { text-align: center; font-size: 0.82rem; color: var(--muted); margin-top: 14px; } .form-note a { color: var(--accent); } .form-success { display: none; text-align: center; padding: 20px 10px; } .form-success.show { display: block; animation: fadeIn var(--motion-slow) var(--ease-standard); } .form-success .ok-ico { width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg); border: 1px solid var(--ok-border); } .form-success .ok-ico svg { width: 34px; height: 34px; color: var(--ok); } .form-success :is(h2, h3) { font-size: 1.4rem; margin-bottom: 8px; } .form-success p { color: var(--text-soft); } .cta-final .container { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; } /* --- styles/components/footer.css --- */ /* Footer. Extracted from the original styles.css — content unchanged. */ /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--border); padding-block: 54px 30px; background: var(--footer-bg); position: relative; overflow: hidden; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer .brand { font-size: 1.5rem; margin-bottom: 14px; } .footer .brand .logo-mark { width: 50px; } .footer-about { color: var(--muted); max-width: 340px; font-size: 0.95rem; } .footer-tag { color: var(--accent); font-weight: 700; margin-top: 12px; font-size: 0.92rem; } /* Column labels. Uppercase and tracking are Latin devices; Arabic gets neither (ROADMAP/01 §10). */ .footer-col h4 { font-size: var(--text-label); letter-spacing: var(--tracking-label); color: var(--muted); margin-bottom: 16px; font-weight: var(--weight-bold); } html[lang="en"] .footer-col h4 { text-transform: uppercase; } .footer-col a, .footer-col p { display: block; color: var(--text-soft); margin-bottom: 10px; font-size: 0.95rem; transition: color .2s; } .footer-col a:hover { color: var(--accent); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.88rem; } .footer-bottom a { color: var(--muted); } .footer-bottom a:hover { color: var(--accent); } .footer-social { display: flex; gap: 10px; } .footer-social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); transition: var(--motion-fast) var(--ease-standard); } .footer-social a:hover { border-color: var(--accent); transform: translateY(-2px); } .footer-social svg { width: 18px; height: 18px; color: var(--text-soft); } /* --- styles/components/interactions.css --- */ /* Micro-interactions. Interaction feedback, not decoration. Each state below answers one of the questions in ROADMAP/05 §28: what can I press, what am I on, what changed, what just happened. Everything uses transform and opacity, and everything is direction-aware. */ /* --------------------------------------------------------------- buttons */ .btn { position: relative; transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); } /* A press should feel like a press. Without this, a click has no acknowledgement at all between hover and navigation. */ .btn:active { transform: translateY(0) scale(0.985); } .btn-primary:hover { transform: translateY(-2px); } .btn-outline:hover { transform: translateY(-2px); } /* The primary CTA carries a light sweep on hover — one pass, tied to the pointer being there, not a loop. */ .btn-primary { overflow: hidden; isolation: isolate; } .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to var(--sweep-to, left), transparent, rgba(255, 255, 255, 0.22), transparent ); transform: translateX(var(--sweep-from, 100%)); transition: transform var(--motion-slower) var(--ease-standard); pointer-events: none; } html[dir="rtl"] .btn-primary { --sweep-to: left; --sweep-from: -100%; } html[dir="ltr"] .btn-primary { --sweep-to: right; --sweep-from: -100%; } .btn-primary:hover::after { transform: translateX(var(--sweep-to-end, 100%)); } html[dir="rtl"] .btn-primary:hover::after { --sweep-to-end: 100%; } /* --------------------------------------------------------------- nav */ .main-nav a { position: relative; padding-block: 4px; transition: color var(--motion-fast) var(--ease-standard); } .main-nav a::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 100%; block-size: 2px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: var(--u-origin, right); transition: transform var(--motion-fast) var(--ease-standard); } html[dir="ltr"] .main-nav a::after { --u-origin: left; } .main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); } /* The current page keeps its underline; it is state, not hover. */ .main-nav a.active::after { transform: scaleX(1); opacity: 0.45; } /* --------------------------------------------------------------- cards */ .feature-card, .price-card, .post-card { transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); } .feature-card:hover, .post-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); box-shadow: var(--card-shadow); } /* --------------------------------------------------------------- links */ .link-arrow::after { transition: inline-size var(--motion-fast) var(--ease-standard); } /* Inline text links get an underline that draws rather than appearing. */ .legal a, .form-note a, .footer-col a { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: var(--ul-pos, 100%) 100%; background-repeat: no-repeat; transition: background-size var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); } html[dir="ltr"] .legal a, html[dir="ltr"] .form-note a, html[dir="ltr"] .footer-col a { --ul-pos: 0%; } .legal a:hover, .form-note a:hover, .footer-col a:hover { background-size: 100% 1px; color: var(--heading); } /* --------------------------------------------------------------- accordion */ .faq-q { transition: color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard); } .faq-q .icon { transition: transform var(--motion-normal) var(--ease-emphasis), color var(--motion-fast) var(--ease-standard); } .faq-item.open .faq-q .icon { transform: rotate(135deg); color: var(--accent); } .faq-item.open .faq-q { color: var(--heading); } .faq-item { transition: border-color var(--motion-fast) var(--ease-standard); } .faq-item.open { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } /* --------------------------------------------------------------- forms */ .field input, .field select, .field textarea { transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard); } .field input:focus, .field select:focus, .field textarea:focus { background: var(--surface); } /* The ring alone is a valid focus indicator, but keyboard focus should be unmistakable. ROADMAP/05 §55. */ .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* A field that failed validation says so, and stops saying so as you fix it. */ .field input.invalid { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); } .field .err { display: block; max-block-size: 0; opacity: 0; overflow: hidden; transition: max-block-size var(--motion-normal) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard); } .field.show-err .err { max-block-size: 3em; opacity: 1; } /* --------------------------------------------------------------- theme */ /* The theme switch is a considered change, not a flash. Colour-bearing surfaces cross-fade; text does not, so reading is never disturbed. */ body, .header, .pscene-frame, .feature-card, .price-card, .layer, .cf-record { transition: background-color var(--motion-normal) var(--ease-standard), border-color var(--motion-normal) var(--ease-standard); } #theme-toggle svg { transition: transform var(--motion-normal) var(--ease-emphasis), opacity var(--motion-fast) linear; } #theme-toggle:hover svg { transform: rotate(18deg); } /* --------------------------------------------------------------- reduced */ @media (prefers-reduced-motion: reduce) { .btn, .btn:active, .btn-primary:hover, .btn-outline:hover, .feature-card:hover, .post-card:hover { transform: none; } .btn-primary::after { display: none; } .main-nav a::after { transition: none; } .faq-q .icon { transition: none; } .field .err { transition: none; } #theme-toggle:hover svg { transform: none; } body, .header, .pscene-frame, .feature-card, .price-card, .layer, .cf-record { transition: none; } } /* --- styles/base/motion.css --- */ /* GAHEZ motion primitives. Every animation on the site must be one of these, or a documented addition to the list. One-off animations are not permitted. ROADMAP/05 §93. All primitives are direction-aware (§91) and reduced-motion aware (§44). Reduced motion is handled here, once, not at each usage site. */ /* --------------------------------------------------------------------------- Reveal — the default content entrance. A masked wipe rather than a fade-up: content is uncovered along the reading direction, which is why it flips in RTL. ROADMAP/05 §30 bans building the site out of repeated fade-ups. --------------------------------------------------------------------------- */ .reveal { opacity: 0; clip-path: inset(0 0 22% 0); transform: translateY(14px); transition: opacity var(--motion-slow) var(--ease-enter), clip-path var(--motion-slower) var(--ease-enter), transform var(--motion-slower) var(--ease-enter); } .reveal.in { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } /* --------------------------------------------------------------------------- Stagger — coordinated sequencing across a group. The delay steps are tokens of intent, not arbitrary numbers: each step is one --motion-instant apart, so the whole sequence stays inside a single perceived beat. --------------------------------------------------------------------------- */ .reveal[data-delay="1"] { transition-delay: 80ms; } .reveal[data-delay="2"] { transition-delay: 160ms; } .reveal[data-delay="3"] { transition-delay: 240ms; } .reveal[data-delay="4"] { transition-delay: 320ms; } .reveal[data-delay="5"] { transition-delay: 400ms; } /* --------------------------------------------------------------------------- TextReveal — for headline moments only. Lines rise from behind a mask. Used sparingly: if every heading did this the effect would stop meaning anything. --------------------------------------------------------------------------- */ /* Each line is its own clipping window, so the text rises from behind a mask rather than sliding as one block. Lines are explicit in the markup, which also stops long Arabic headlines wrapping unpredictably. */ .text-reveal .tr-line { display: block; overflow: hidden; /* room for descenders and Arabic diacritics, which a tight mask would clip */ padding-block-end: 0.12em; margin-block-end: -0.12em; } .text-reveal .tr-line > * { display: block; transform: translateY(105%); transition: transform var(--motion-slower) var(--ease-enter); } .text-reveal.in .tr-line > * { transform: none; } .text-reveal.in .tr-line:nth-child(2) > * { transition-delay: 110ms; } .text-reveal.in .tr-line:nth-child(3) > * { transition-delay: 220ms; } /* --------------------------------------------------------------------------- Step chain — a short, unpinned sequence of steps. Used where a page needs three or four ordered steps (the demo page, for instance). The full signature scene lives in sections/connected-flow.css. --------------------------------------------------------------------------- */ .flow { --flow-line: 2px; position: relative; display: grid; gap: var(--space-md); margin-top: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .flow-step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 18px; box-shadow: var(--shadow-sm); opacity: 0.55; transform: translateY(10px); transition: opacity var(--motion-slow) var(--ease-enter), transform var(--motion-slow) var(--ease-enter), border-color var(--motion-slow) var(--ease-enter), box-shadow var(--motion-slow) var(--ease-enter); } .flow-step.is-active { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--card-shadow); } /* The connector. It grows from the start edge toward the next step, so in RTL it grows right-to-left without any extra rule. */ .flow-step::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: calc(var(--space-md) * -1); width: var(--space-md); height: var(--flow-line); background: var(--accent); transform: scaleX(0); transition: transform var(--motion-slow) var(--ease-standard); } /* transform-origin takes no logical keyword, so the direction is set explicitly. The connector must grow away from its own step, which is the right edge in RTL and the left edge in LTR. */ html[dir="rtl"] .flow-step::after { transform-origin: right; } html[dir="ltr"] .flow-step::after { transform-origin: left; } .flow-step:last-child::after { content: none; } .flow-step.is-linked::after { transform: scaleX(1); } .flow-step .n { font-size: var(--text-label); font-weight: var(--weight-black); color: var(--accent); font-variant-numeric: tabular-nums; } .flow-step :is(h2, h3, h4) { font-size: var(--text-h4); margin-top: var(--space-xs); } .flow-step p { color: var(--muted); font-size: 0.9rem; margin-top: 4px; } /* On narrow screens the chain becomes vertical. It must never become trapped horizontal scrolling. ROADMAP/05 §45, §94. */ @media (max-width: 640px) { .flow { grid-template-columns: 1fr; } .flow-step::after { inset-block-start: auto; inset-block-end: calc(var(--space-md) * -1); inset-inline-start: 28px; inset-inline-end: auto; width: var(--flow-line); height: var(--space-md); transform: scaleY(0); transform-origin: top; } .flow-step.is-linked::after { transform: scaleY(1); } } /* --------------------------------------------------------------------------- Counter — a number resolving to its value. Used only where the number is real; see ROADMAP/04 §64. --------------------------------------------------------------------------- */ .counter { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- Reduced motion. Everything above must still be readable and complete — motion clarifies the relationships, it does not carry them. ROADMAP/05 §44. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .reveal, .text-reveal .tr-line > * { opacity: 1; clip-path: none; transform: none; transition: none; } .flow-step { opacity: 1; transform: none; transition: none; } .flow-step::after { transform: scaleX(1); transition: none; } @media (max-width: 640px) { .flow-step::after { transform: scaleY(1); } } } /* --------------------------------------------------------------------------- Product scene entrance. The frame arrives as a surface, then its contents populate — the order the real console loads in. Rows and the follow-up toast are held back so the session being logged reads as an event rather than as decoration. --------------------------------------------------------------------------- */ .pscene-frame { opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity var(--motion-slow) var(--ease-enter), transform var(--motion-slower) var(--ease-enter); } .pscene.is-played .pscene-frame, .reveal.in .pscene-frame { opacity: 1; transform: none; } .prow[data-step] { opacity: 0; transform: translateY(8px); transition: opacity var(--motion-normal) var(--ease-enter), transform var(--motion-normal) var(--ease-enter), background var(--motion-slow) var(--ease-standard); } .prow[data-step].is-in { opacity: 1; transform: none; } .pscene-toast { opacity: 0; transform: translateY(10px); transition: opacity var(--motion-normal) var(--ease-enter), transform var(--motion-normal) var(--ease-enter); } .pscene-toast.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .pscene-frame, .prow[data-step], .pscene-toast, .pstate-from, .pstate-to { opacity: 1; transform: none; transition: none; } .prow.is-live .pstate-from { opacity: 0; } .prow.is-live .pstate-to { opacity: 1; } } /* --- styles/base/responsive.css --- */ /* Responsive breakpoints and reduced motion. Extracted from the original styles.css — content unchanged. */ /* ---------- Responsive ---------- */ @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { max-width: 520px; margin-inline: auto; width: 100%; } .proof-grid { grid-template-columns: 1fr; } .cta-final .container { grid-template-columns: 1fr; } .features-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about-col { grid-column: 1 / -1; } } @media (max-width: 640px) { .container { padding-inline: 18px; } .features-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; } .nav-cta-hide { display: none; } .trust-sep { display: none; } .hero-cta .btn { flex: 1 1 100%; } html[dir="rtl"] .flow-arrow svg { transform: none; } .footer-grid { grid-template-columns: 1fr; } html[dir="rtl"] .countdown-float { transform: none; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* --- styles/sections/v2.css --- */ /* Second-generation section treatments, decorative motifs, mobile and iOS parity. Loaded last because it intentionally overrides earlier rules. ROADMAP/06 R3 tracks folding this into the system it patches. Extracted from the original styles.css — content unchanged. */ /* ============================================================ v2 — Section rhythm, new shapes, mobile, iOS parity, polish ============================================================ */ /* ---- Cross-browser / iOS Safari parity ---- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; } * { -webkit-tap-highlight-color: transparent; } body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: none; } .field input, .field select { font-size: 16px; } /* ---- New section treatments ---- */ .section-mint { background: var(--mint-bg); border-block: 1px solid var(--mint-border); } .section-wash { background: var(--wash-bg); border-block: 1px solid var(--border); } .section-cta-bold { background: var(--bold-grad); border-block: none; color: var(--bold-text-soft); } .section-cta-bold .section-tag { color: #fff; background: rgba(255,255,255,0.14); border-color: var(--bold-border); } .section-cta-bold h2, .section-cta-bold h3 { color: var(--bold-text); } .section-cta-bold .lead, .section-cta-bold .hero-micro, .section-cta-bold .hero-micro span { color: var(--bold-text-soft); } .section-cta-bold .hero-micro svg { color: #fff; } .section-cta-bold .gradient-text { -webkit-text-fill-color: #fff; color: #fff; background: none; } /* ---- New decorative motifs ---- */ /* ---- SVG shape dividers ---- */ .section-divider { position: relative; height: 52px; line-height: 0; overflow: hidden; } .section-divider svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .section-divider path { fill: var(--below, var(--bg)); } .section-divider.from-white { background: var(--bg); } .section-divider.from-mint { background: var(--mint-bg); } .section-divider.to-white { --below: var(--bg); } .section-divider.to-bold path { fill: #1E40AF; } @media (max-width: 640px) { .section-divider { height: 34px; } } /* ---- Polish / micro-interactions ---- */ .btn:active { transform: translateY(-1px) scale(0.99); } .feature-ico { transition: transform var(--motion-normal) var(--ease-standard); } .feature-card:hover .feature-ico { transform: rotate(-4deg) scale(1.06); } .flow-step, .perk { transition: transform var(--motion-normal) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard); } .flow-step:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(37,99,235,.35); } .section-tag { box-shadow: var(--shadow-sm); } .btn:focus-visible, .faq-q:focus-visible, .footer-social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ============================================================ MOBILE PASS (<=640) + small-phone (<=430) + tap targets ============================================================ */ @media (max-width: 640px) { section { padding-block: clamp(48px, 11vw, 72px); } .section-head { margin-bottom: 34px; } .lang-toggle button { min-height: 40px; padding: 9px 15px; } .theme-toggle { width: 44px; height: 44px; } .theme-toggle button { width: 40px; height: 40px; } .footer-social a { width: 44px; height: 44px; } .faq-q { padding: 18px; min-height: 56px; } .btn { padding: 15px 24px; } .header .container { gap: 10px; } .header-actions { gap: 8px; } .hero { padding-block-start: calc(var(--header-h) + 26px); } .hero h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); } .hero .lead { font-size: 1.02rem; } .price-card.featured { margin-top: 16px; } .price-card { padding: 26px 22px; } .founding-card { padding: 32px 20px; } .perks { gap: 8px; } .footer-bottom { flex-direction: column; text-align: center; } .footer-social { justify-content: center; } } @media (max-width: 430px) { :root { --header-h: 64px; } .brand { font-size: 1.15rem; gap: 8px; } .brand .logo-mark { width: 38px; } .hero-cta { gap: 10px; } } @media (max-width: 560px) { .deco-ring, .deco-dots, .deco-meshgrid, .deco-card, } /* ---- Sticky bottom CTA bar (mobile only) ---- */ .mobile-cta-bar { display: none; } @media (max-width: 640px) { .mobile-cta-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--glass); border-top: 1px solid var(--border); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); transform: translateY(110%); transition: transform var(--motion-slow) var(--ease-standard); } .mobile-cta-bar.show { transform: none; } .mobile-cta-bar .btn { flex: 1; min-height: 52px; padding: 14px; } .mobile-cta-note { flex: none; max-width: 38%; font-size: 0.72rem; line-height: 1.3; color: var(--muted); font-weight: 600; } } /* ---- Header navigation (desktop inline + mobile hamburger) ---- */ .main-nav { display: flex; align-items: center; gap: 4px; } .main-nav a { padding: 8px 13px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; color: var(--text-soft); transition: color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard); } .main-nav a:hover, .main-nav a.active { color: var(--accent); background: var(--surface-2); } .nav-toggle { display: none; } .nav-menu { display: none; } @media (max-width: 860px) { .main-nav { display: none; } .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--heading); box-shadow: var(--card-shadow); } .nav-toggle svg { width: 22px; height: 22px; } .nav-menu { position: fixed; inset-block-start: var(--header-h); inset-inline: 0; z-index: var(--z-sticky); background: var(--header-bg); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--border); padding: 12px 18px 20px; display: flex; flex-direction: column; gap: 4px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity var(--motion-normal) var(--ease-standard), transform var(--motion-normal) var(--ease-standard); } .nav-menu.open { transform: none; opacity: 1; pointer-events: auto; } .nav-menu a { padding: 13px 10px; min-height: 48px; display: flex; align-items: center; font-weight: 700; color: var(--text-soft); border-radius: 10px; } .nav-menu a:hover, .nav-menu a.active { background: var(--surface-2); color: var(--accent); } } /* --- styles/utilities/a11y.css --- */ /* Accessibility utilities and small additions. Extracted from the original styles.css — content unchanged. */ /* ---------- Skip link (a11y) ---------- */ .skip-link { position: absolute; inset-inline-start: 12px; inset-block-start: -100px; z-index: var(--z-overlay); padding: 12px 20px; border-radius: 0 0 12px 12px; background: var(--accent); color: #fff; font-weight: 700; transition: inset-block-start .18s var(--ease-standard); } .skip-link:focus-visible { inset-block-start: 0; } /* ---------- Founding programme note (replaces the removed progress bar) ---------- */ .seats-note { max-width: 460px; margin: 0 auto 26px; color: var(--muted); font-size: 0.92rem; font-weight: 600; } /* Collapsed FAQ answers are hidden from assistive tech via [hidden]; keep the animated max-height behaviour for sighted users. */ .faq-a[hidden] { display: block; } /* --- styles/base/transitions.css --- */ /* Cross-document view transitions. The site is static multi-page, so navigation is a real document load. The View Transitions API lets the browser carry one frame across that load, which is what makes a set of pages feel like one product (ROADMAP/05 §41, §42). Nothing is intercepted and nothing is delayed. In a browser without support, navigation is exactly as it was — ROADMAP/05 §43 is explicit that a transition must never make navigation slower. */ @view-transition { navigation: auto; } /* The shell persists across the load, so the header and footer do not flash. */ .header { view-transition-name: gahez-header; } .site-footer { view-transition-name: gahez-footer; } ::view-transition-old(gahez-header), ::view-transition-new(gahez-header), ::view-transition-old(gahez-footer), ::view-transition-new(gahez-footer) { animation: none; mix-blend-mode: normal; } /* The page body crossfades with a short lift. Fast enough to read as continuity rather than as a wait. */ ::view-transition-old(root) { animation: gahez-page-out var(--motion-fast) var(--ease-exit) both; } ::view-transition-new(root) { animation: gahez-page-in var(--motion-normal) var(--ease-enter) both; } @keyframes gahez-page-out { to { opacity: 0; transform: translateY(-6px); } } @keyframes gahez-page-in { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }