/* ========================================================= aask.sa — 2026 Redesign Design System Author: Hermes Agent Philosophy: Editorial. Anti-Grid. Tactile. Bilingual AR/EN. ========================================================= */ /* ---------- 1. DESIGN TOKENS ---------- */ :root { /* Colors — restrained palette, single accent */ --ink: #0A0E0A; /* near-black, primary background */ --ink-2: #11161A; /* deep ink for alternation */ --bone: #F4F1EA; /* paper-feel light background */ --bone-2: #E8E3D7; /* slightly deeper paper */ --emerald-deep: #0F3D2E; /* primary brand — deep Saudi green */ --emerald: #1A5741; /* hover / secondary */ --emerald-light: #2D7559; /* tertiary */ --gold: #B8954A; /* SPARSE accent — CTAs only */ --gold-soft: #D4B675; /* lighter gold for highlights */ --rule-dark: #1F2620; /* 1px borders on dark */ --rule-light: #D5CFC0; /* 1px borders on light */ --text-body-dark: #E8E5DE; /* body text on dark */ --text-body-light: #1A1A1A;/* body text on light */ --text-muted-dark: #9A9690; --text-muted-light: #5A554E; --error: #C4452E; --success: #4A8B5C; /* Typography */ --font-ar-display: 'Reem Kufi', 'Tajawal', system-ui, sans-serif; --font-ar-body: 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif; --font-en-display: 'Fraunces', 'Source Serif 4', Georgia, serif; --font-en-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* Fluid type scale (clamp) */ --fs-display: clamp(3rem, 9vw, 7.5rem); --fs-h1: clamp(2.5rem, 5.5vw, 4.75rem); --fs-h2: clamp(2rem, 4vw, 3.25rem); --fs-h3: clamp(1.5rem, 2.5vw, 2.125rem); --fs-h4: clamp(1.25rem, 1.8vw, 1.5rem); --fs-body: clamp(1rem, 1.15vw, 1.125rem); --fs-body-lg: clamp(1.125rem, 1.3vw, 1.25rem); --fs-small: clamp(0.875rem, 0.95vw, 0.9375rem); --fs-eyebrow: clamp(0.75rem, 0.85vw, 0.8125rem); /* Spacing scale */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; --sp-8: 8rem; --sp-9: 12rem; /* Layout */ --container: 1320px; --container-narrow: 880px; --container-text: 680px; --gutter: clamp(1.25rem, 4vw, 3rem); --section-y: clamp(5rem, 12vh, 10rem); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 200ms; --t-base: 400ms; --t-slow: 800ms; --t-slower: 1200ms; /* Borders */ --bw: 1px; --bw-thick: 2px; } /* ---------- 2. RESET & BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'kern', 'liga', 'calt', 'ss01'; } body { font-family: var(--font-en-body); font-size: var(--fs-body); line-height: 1.6; color: var(--text-body-light); background: var(--bone); overflow-x: hidden; } [lang="ar"] body, [dir="rtl"] body { font-family: var(--font-ar-body); line-height: 1.75; } img, video, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul, ol { list-style: none; } input, textarea, select { font: inherit; color: inherit; } /* Bilingual content toggle — default AR visible, EN hidden. When JS sets , EN shows and AR hides. */ [lang="ar"] .en, [dir="rtl"] .en { display: none; } [lang="en"] .ar, [dir="ltr"] .ar { display: none; } /* But nav brand always shows both wrapped spans; we want only the active one. The brand has its own .en/.ar spans handled below. */ /* Focus ring — gold, always visible on keyboard nav */ :focus-visible { outline: var(--bw-thick) solid var(--gold); outline-offset: 3px; border-radius: 2px; } /* Selection */ ::selection { background: var(--emerald-deep); color: var(--bone); } /* Skip link for accessibility */ .skip-link { position: absolute; top: -100px; left: var(--sp-2); z-index: 9999; background: var(--emerald-deep); color: var(--bone); padding: var(--sp-2) var(--sp-3); font-weight: 600; transition: top var(--t-fast) var(--ease-out); } .skip-link:focus { top: var(--sp-2); } /* ---------- 3. TYPOGRAPHY ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-en-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-body-light); } [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: var(--font-ar-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } .display { font-size: var(--fs-display); line-height: 0.95; font-weight: 400; letter-spacing: -0.035em; } [lang="ar"] .display, [dir="rtl"] .display { font-weight: 700; line-height: 1; letter-spacing: -0.015em; } p { max-width: 65ch; } p + p { margin-top: var(--sp-3); } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); display: inline-block; } [lang="ar"] .eyebrow, [dir="rtl"] .eyebrow { font-family: var(--font-ar-body); letter-spacing: 0; font-weight: 600; } .lead { font-size: var(--fs-body-lg); line-height: 1.5; color: var(--text-muted-light); max-width: 60ch; } [lang="ar"] .lead, [dir="rtl"] .lead { line-height: 1.65; } .mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; } .serif { font-family: var(--font-en-display); } [lang="ar"] .serif, [dir="rtl"] .serif { font-family: var(--font-ar-display); font-weight: 700; } /* RTL-specific adjustments */ [dir="rtl"] .eyebrow, [lang="ar"] .eyebrow { letter-spacing: 0; font-family: var(--font-ar-body); } /* ---------- 4. LAYOUT PRIMITIVES ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); } .container-text { max-width: var(--container-text); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); position: relative; } .section--dark { background: var(--ink); color: var(--text-body-dark); } .section--ink { background: var(--ink-2); color: var(--text-body-dark); } .section--bone { background: var(--bone); color: var(--text-body-light); } .section--bone-2 { background: var(--bone-2); color: var(--text-body-light); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4, .section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--text-body-dark); } .section--dark .eyebrow, .section--ink .eyebrow { color: var(--gold-soft); } .section--dark .lead, .section--ink .lead { color: var(--text-muted-dark); } /* Hairline border between sections */ .section + .section { border-top: var(--bw) solid transparent; } .section--dark + .section--bone, .section--ink + .section--bone { border-top-color: var(--ink); } /* Full-bleed */ .bleed { width: 100vw; margin-inline: calc(50% - 50vw); } /* ---------- 5. NAVIGATION ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(244, 241, 234, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: var(--bw) solid var(--rule-light); transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); } .nav.is-scrolled { background: rgba(244, 241, 234, 0.95); } .nav--dark { background: rgba(10, 14, 10, 0.85); border-bottom-color: var(--rule-dark); } .nav--dark.is-scrolled { background: rgba(10, 14, 10, 0.95); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: 76px; } .nav__brand { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-en-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); transition: opacity var(--t-fast) var(--ease-out); } .nav--dark .nav__brand { color: var(--bone); } .nav__brand:hover { opacity: 0.7; } .nav__brand .ar { display: none; } [lang="ar"] .nav__brand .ar, [dir="rtl"] .nav__brand .ar { display: inline; } [lang="ar"] .nav__brand .en, [dir="rtl"] .nav__brand .en { display: none; } /* (These are already handled by the global rule above; kept for explicitness) */ .nav__brand-mark { width: 36px; height: 36px; border: var(--bw-thick) solid var(--emerald-deep); display: grid; place-items: center; font-family: var(--font-en-display); font-weight: 700; font-size: 0.875rem; color: var(--emerald-deep); letter-spacing: -0.05em; } .nav--dark .nav__brand-mark { border-color: var(--bone); color: var(--bone); } [lang="ar"] .nav__brand-mark, [dir="rtl"] .nav__brand-mark { font-family: var(--font-ar-display); font-size: 0.75rem; } .nav__list { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); } .nav__link { font-size: var(--fs-small); font-weight: 500; color: var(--ink); position: relative; padding: 0.25rem 0; transition: color var(--t-fast) var(--ease-out); } .nav--dark .nav__link { color: var(--bone); } .nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: var(--bw); background: var(--gold); transition: width var(--t-base) var(--ease-out); } [dir="rtl"] .nav__link::after { left: auto; right: 0; } .nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; } .nav__link:hover { color: var(--emerald-deep); } .nav--dark .nav__link:hover { color: var(--gold-soft); } .nav__actions { display: flex; align-items: center; gap: var(--sp-2); } .nav__lang { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; padding: 0.4rem 0.75rem; border: var(--bw) solid currentColor; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .nav__lang:hover { background: var(--emerald-deep); color: var(--bone); border-color: var(--emerald-deep); } .nav--dark .nav__lang:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); } .nav__burger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .nav__burger span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out); } .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 920px) { .nav__list { display: none; } .nav__burger { display: flex; } .nav.is-open .nav__list { display: flex; position: fixed; inset: 76px 0 0 0; background: var(--bone); flex-direction: column; justify-content: flex-start; padding: var(--sp-6) var(--gutter); gap: var(--sp-4); align-items: flex-start; border-top: var(--bw) solid var(--rule-light); } .nav--dark.is-open .nav__list { background: var(--ink); border-top-color: var(--rule-dark); } .nav__list .nav__link { font-family: var(--font-en-display); font-size: var(--fs-h3); color: var(--ink); } .nav--dark .nav__list .nav__link { color: var(--bone); } [lang="ar"] .nav__list .nav__link, [dir="rtl"] .nav__list .nav__link { font-family: var(--font-ar-display); } .nav__list .nav__link::after { display: none; } .nav.is-open .nav__lang { display: none; } } /* ---------- 6. BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.95rem 1.5rem; font-family: var(--font-en-body); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.02em; border: var(--bw-thick) solid transparent; transition: all var(--t-base) var(--ease-out); position: relative; overflow: hidden; text-align: center; white-space: nowrap; } [lang="ar"] .btn, [dir="rtl"] .btn { font-family: var(--font-ar-body); letter-spacing: 0; } .btn__arrow { display: inline-block; transition: transform var(--t-base) var(--ease-out); font-family: var(--font-mono); } .btn:hover .btn__arrow { transform: translateX(4px); } [dir="rtl"] .btn:hover .btn__arrow { transform: translateX(-4px) scaleX(-1); } .btn--primary { background: var(--gold); color: var(--ink); border-color: var(--gold); } .btn--primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); } .btn--ghost { background: transparent; color: currentColor; border-color: currentColor; } .btn--ghost:hover { background: currentColor; color: var(--bone); } .section--dark .btn--ghost:hover { color: var(--ink); } .section--ink .btn--ghost:hover { color: var(--ink); } .btn--solid { background: var(--emerald-deep); color: var(--bone); border-color: var(--emerald-deep); } .btn--solid:hover { background: var(--emerald); border-color: var(--emerald); } .btn--lg { padding: 1.15rem 2rem; font-size: var(--fs-body); } .btn-group { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; } /* ---------- 7. HERO ---------- */ .hero { min-height: 92vh; display: flex; align-items: center; padding-block: calc(76px + var(--sp-6)) var(--sp-6); position: relative; overflow: hidden; background: var(--ink); color: var(--text-body-dark); } .hero__bg { position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(ellipse at 20% 30%, rgba(26, 87, 65, 0.18) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(184, 149, 74, 0.08) 0%, transparent 55%); pointer-events: none; } .hero__grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero__picture { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__bg-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) brightness(0.35) contrast(1.1); opacity: 0.6; } .hero__bg { background-image: radial-gradient(ellipse at 20% 30%, rgba(26, 87, 65, 0.18) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(184, 149, 74, 0.08) 0%, transparent 55%), linear-gradient(180deg, rgba(10, 14, 10, 0.5) 0%, rgba(10, 14, 10, 0.85) 100%); z-index: 1; } .hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: var(--sp-6); width: 100%; } .hero__eyebrow-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .hero__eyebrow-row::before { content: ''; width: 40px; height: 1px; background: var(--gold); } .hero__headline { font-size: var(--fs-display); line-height: 0.92; font-weight: 400; letter-spacing: -0.04em; color: var(--bone); max-width: 18ch; } [lang="ar"] .hero__headline, [dir="rtl"] .hero__headline { font-family: var(--font-ar-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1; max-width: 22ch; } .hero__headline em { font-style: italic; color: var(--gold-soft); font-family: var(--font-en-display); } [lang="ar"] .hero__headline em, [dir="rtl"] .hero__headline em { font-style: normal; font-family: var(--font-ar-display); color: var(--gold-soft); } .hero__sub { font-size: var(--fs-body-lg); line-height: 1.5; color: var(--text-muted-dark); max-width: 56ch; margin-top: var(--sp-3); } .hero__ctas { margin-top: var(--sp-4); } .hero__meta { margin-top: var(--sp-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); padding-top: var(--sp-4); border-top: var(--bw) solid var(--rule-dark); } .hero__meta-item { display: flex; flex-direction: column; gap: 0.25rem; } .hero__meta-num { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; color: var(--bone); letter-spacing: -0.02em; } .hero__meta-label { font-size: var(--fs-eyebrow); color: var(--text-muted-dark); text-transform: uppercase; letter-spacing: 0.1em; } @media (min-width: 1024px) { .hero__inner { grid-template-columns: 1.4fr 1fr; align-items: end; } .hero__headline { max-width: 14ch; } } /* ---------- 8. TRUST STRIP ---------- */ .trust { background: var(--bone); border-block: var(--bw) solid var(--rule-light); padding-block: var(--sp-4); } .trust__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .trust__item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--text-muted-light); font-weight: 500; } .trust__item strong { color: var(--ink); font-weight: 600; } .trust__dot { width: 6px; height: 6px; background: var(--emerald-deep); border-radius: 50%; } /* ---------- 9. SECTION HEADERS ---------- */ .section-header { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); max-width: 72ch; } .section-header--center { margin-inline: auto; text-align: center; } .section-header__row { display: flex; align-items: center; gap: var(--sp-2); } .section-header__row::before { content: ''; width: 32px; height: 1px; background: var(--gold); } .section-header h2 { font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.025em; max-width: 22ch; } .section-header--center h2 { margin-inline: auto; } .section-header .lead { margin-top: var(--sp-2); } /* ---------- 10. CARDS / GRID ---------- */ .cards { display: grid; gap: 1px; background: var(--rule-light); border: var(--bw) solid var(--rule-light); } .section--dark .cards, .section--ink .cards { background: var(--rule-dark); border-color: var(--rule-dark); } .card { background: var(--bone); padding: var(--sp-5) var(--sp-4); position: relative; transition: background var(--t-base) var(--ease-out); display: flex; flex-direction: column; gap: var(--sp-3); min-height: 280px; } .section--dark .card, .section--ink .card { background: var(--ink); color: var(--text-body-dark); } .card:hover { background: var(--bone-2); } .section--dark .card:hover, .section--ink .card:hover { background: var(--ink-2); } .card__num { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--gold); letter-spacing: 0.1em; } .card__title { font-size: var(--fs-h3); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; } [lang="ar"] .card__title, [dir="rtl"] .card__title { font-family: var(--font-ar-display); font-weight: 700; line-height: 1.25; } .card__body { color: var(--text-muted-light); font-size: var(--fs-body); line-height: 1.55; margin-top: auto; } .section--dark .card__body, .section--ink .card__body { color: var(--text-muted-dark); } .card__link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); font-weight: 500; color: var(--ink); margin-top: var(--sp-2); align-self: flex-start; position: relative; padding-bottom: 4px; } .section--dark .card__link, .section--ink .card__link { color: var(--bone); } .card__link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(1); transition: transform var(--t-base) var(--ease-out); } [dir="rtl"] .card__link::after { transform-origin: right; } .card__link:hover::after { transform: scaleX(0); } .card__link .arrow { font-family: var(--font-mono); } /* Asymmetric service grid — 3 cols × 2 rows on desktop. Item 1 is visually emphasized (emerald background) but keeps the same cell size. This gives 6 cells, all filled, with editorial hierarchy via color. */ .services-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule-light); border: var(--bw) solid var(--rule-light); } .section--dark .services-grid { background: var(--rule-dark); border-color: var(--rule-dark); } .services-grid__item { background: var(--bone); padding: var(--sp-5) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); position: relative; overflow: hidden; transition: background var(--t-base) var(--ease-out); min-height: 280px; } .section--dark .services-grid__item { background: var(--ink); color: var(--text-body-dark); } .services-grid__item:hover { background: var(--bone-2); } .section--dark .services-grid__item:hover { background: var(--ink-2); } .services-grid__item--feature { background: var(--emerald-deep); color: var(--bone); padding: var(--sp-6) var(--sp-5); } .services-grid__item--feature:hover { background: var(--emerald); } .services-grid__item-num { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--gold); letter-spacing: 0.1em; } .services-grid__item--feature .services-grid__item-num { color: var(--gold-soft); } .services-grid__item-title { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.015em; } .services-grid__item--feature .services-grid__item-title { font-size: clamp(1.75rem, 2.5vw, 2.5rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; } [lang="ar"] .services-grid__item-title, [dir="rtl"] .services-grid__item-title { font-family: var(--font-ar-display); font-weight: 700; } .services-grid__item-body { font-size: var(--fs-small); line-height: 1.6; color: inherit; opacity: 0.85; } .services-grid__item-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); font-weight: 500; margin-top: auto; color: inherit; align-self: flex-start; } .services-grid__item-link::after { content: '→'; font-family: var(--font-mono); transition: transform var(--t-base) var(--ease-out); } [dir="rtl"] .services-grid__item-link::after { content: '←'; } .services-grid__item-link:hover::after { transform: translateX(4px); } [dir="rtl"] .services-grid__item-link:hover::after { transform: translateX(-4px); } @media (min-width: 720px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- 12. BOOKS / PUBLICATIONS ---------- */ .book { display: grid; gap: var(--sp-3); position: relative; background: var(--bone); border: var(--bw) solid var(--rule-light); padding: var(--sp-4); transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); height: 100%; } .section--dark .book, .section--ink .book { background: var(--ink); border-color: var(--rule-dark); color: var(--text-body-dark); } .book:hover { transform: translateY(-4px); border-color: var(--gold); } .book__cover { aspect-ratio: 3/4; background: var(--ink-2); position: relative; overflow: hidden; display: block; border: var(--bw) solid var(--rule-dark); } .book__cover-picture { position: absolute; inset: 0; display: block; } .book__cover-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.7) brightness(0.5) contrast(1.1) sepia(0.1); transition: filter var(--t-base) var(--ease-out); } .book:hover .book__cover-img { filter: grayscale(0.4) brightness(0.6) contrast(1.1) sepia(0.1); } .book__cover-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; padding: var(--sp-3); background: linear-gradient(180deg, transparent 30%, rgba(10, 14, 10, 0.4) 60%, rgba(10, 14, 10, 0.85) 100%); } .book__cover-title { color: var(--bone); font-family: var(--font-en-display); font-size: 1rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; } [lang="ar"] .book__cover-title, [dir="rtl"] .book__cover-title { font-family: var(--font-ar-display); font-weight: 700; } .book__cover-placeholder { padding: var(--sp-3); text-align: center; color: var(--bone); font-family: var(--font-ar-display); font-size: var(--fs-body); line-height: 1.4; font-weight: 700; } [lang="en"] .book__cover-placeholder { font-family: var(--font-en-display); } .book__cover-badge { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 3; background: var(--gold); color: var(--ink); padding: 0.25rem 0.625rem; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } [dir="rtl"] .book__cover-badge { left: auto; right: var(--sp-2); } .book__title { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.01em; font-weight: 400; } [lang="ar"] .book__title, [dir="rtl"] .book__title { font-family: var(--font-ar-display); font-weight: 700; } .book__meta { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--text-muted-light); text-transform: uppercase; letter-spacing: 0.1em; margin-top: auto; } .section--dark .book__meta, .section--ink .book__meta { color: var(--text-muted-dark); } .books-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); } @media (min-width: 720px) { .books-grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- 12. AUTHORITY / TEAM PROFILE ---------- */ .profile-feature { display: grid; gap: var(--sp-5); align-items: center; padding-block: var(--sp-6); } @media (min-width: 900px) { .profile-feature { grid-template-columns: 0.8fr 1fr; gap: var(--sp-7); } } .profile-feature__portrait { aspect-ratio: 4/5; background: var(--ink-2); position: relative; overflow: hidden; border: var(--bw) solid var(--rule-dark); } .profile-feature__portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10, 14, 10, 0.85) 100%); pointer-events: none; z-index: 1; } .profile-feature__bg { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) brightness(0.6) contrast(1.1); } .profile-feature__portrait-img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .profile-feature__monogram { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-family: var(--font-ar-display); font-size: clamp(7rem, 18vw, 14rem); font-weight: 700; color: var(--bone); letter-spacing: -0.05em; text-shadow: 0 4px 24px rgba(0,0,0,0.5); opacity: 0.92; } [dir="ltr"] .profile-feature__monogram { font-family: var(--font-en-display); } .profile-feature__name-strip { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 2; padding: var(--sp-4) var(--sp-3); font-family: var(--font-en-display); font-size: var(--fs-body); color: var(--bone); font-weight: 500; letter-spacing: 0.01em; text-align: center; background: linear-gradient(180deg, transparent 0%, rgba(10, 14, 10, 0.6) 50%, var(--ink) 100%); } [lang="ar"] .profile-feature__name-strip, [dir="rtl"] .profile-feature__name-strip { font-family: var(--font-ar-display); font-weight: 700; } .profile-feature__name { font-size: var(--fs-h1); line-height: 0.95; letter-spacing: -0.025em; margin-bottom: var(--sp-2); } .profile-feature__title { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.15em; color: var(--gold); margin-bottom: var(--sp-3); } .profile-feature__bio { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--text-muted-light); } .section--dark .profile-feature__bio, .section--ink .profile-feature__bio { color: var(--text-muted-dark); } .profile-feature__creds { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); border-top: var(--bw) solid var(--rule-light); padding-top: var(--sp-4); } .section--dark .profile-feature__creds, .section--ink .profile-feature__creds { border-top-color: var(--rule-dark); } .profile-feature__cred { display: flex; gap: var(--sp-2); font-size: var(--fs-small); color: var(--text-muted-light); } .section--dark .profile-feature__cred, .section--ink .profile-feature__cred { color: var(--text-muted-dark); } .profile-feature__cred strong { color: var(--ink); font-weight: 600; flex-shrink: 0; } .section--dark .profile-feature__cred strong, .section--ink .profile-feature__cred strong { color: var(--bone); } .profile-feature__cred::before { content: '—'; color: var(--gold); flex-shrink: 0; } /* ---------- 13. CTA SECTION ---------- */ .cta { background: var(--emerald-deep); color: var(--bone); padding-block: var(--sp-8); position: relative; overflow: hidden; } .cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 50%, rgba(184, 149, 74, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 100% 50%, rgba(45, 117, 89, 0.2) 0%, transparent 50%); pointer-events: none; } .cta__inner { position: relative; display: grid; gap: var(--sp-5); text-align: center; max-width: 64ch; margin-inline: auto; } .cta h2 { color: var(--bone); font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.025em; max-width: 22ch; margin-inline: auto; } [lang="ar"] .cta h2, [dir="rtl"] .cta h2 { font-family: var(--font-ar-display); font-weight: 700; } .cta p { margin-inline: auto; color: rgba(244, 241, 234, 0.8); } .cta__actions { justify-content: center; } /* ---------- 14. CONTACT / FORMS ---------- */ .contact-grid { display: grid; gap: var(--sp-6); } @media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.2fr; gap: var(--sp-7); } } .contact-info { display: flex; flex-direction: column; gap: var(--sp-4); } .contact-info__item { display: flex; flex-direction: column; gap: 0.25rem; padding-block: var(--sp-3); border-bottom: var(--bw) solid var(--rule-light); } .contact-info__item:last-child { border-bottom: none; } .contact-info__label { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.15em; color: var(--gold); } .contact-info__value { font-size: var(--fs-body-lg); color: var(--ink); font-weight: 500; line-height: 1.3; word-break: break-word; } [dir="rtl"] .contact-info__value { font-family: var(--font-ar-body); } a.contact-info__value:hover { color: var(--emerald-deep); text-decoration: underline; text-underline-offset: 4px; } .form { display: flex; flex-direction: column; gap: var(--sp-3); } .form__row { display: grid; gap: var(--sp-3); } @media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } } .form__group { display: flex; flex-direction: column; gap: 0.5rem; } .form__label { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted-light); font-weight: 500; } [lang="ar"] .form__label, [dir="rtl"] .form__label { font-family: var(--font-ar-body); letter-spacing: 0; font-weight: 600; } .form__input, .form__textarea, .form__select { width: 100%; padding: 0.875rem 1rem; background: transparent; border: var(--bw) solid var(--rule-light); font-size: var(--fs-body); color: var(--ink); transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); font-family: inherit; } .section--dark .form__input, .section--dark .form__textarea, .section--dark .form__select { border-color: var(--rule-dark); color: var(--bone); background: transparent; } .form__input:focus, .form__textarea:focus, .form__select:focus { outline: none; border-color: var(--gold); background: rgba(184, 149, 74, 0.04); } .form__textarea { min-height: 140px; resize: vertical; font-family: inherit; line-height: 1.6; } .form__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B8954A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-inline-end: 2.5rem; } [dir="rtl"] .form__select { background-position: left 1rem center; padding-inline-end: 1rem; padding-inline-start: 2.5rem; } .form__submit { margin-top: var(--sp-2); align-self: flex-start; } .form__consent { display: flex; gap: 0.5rem; font-size: var(--fs-small); color: var(--text-muted-light); align-items: flex-start; line-height: 1.5; } .form__consent input { margin-top: 4px; flex-shrink: 0; } /* ---------- 15. FOOTER ---------- */ .footer { background: var(--ink); color: var(--text-body-dark); padding-block: var(--sp-7) var(--sp-3); border-top: var(--bw) solid var(--rule-dark); } .footer__main { display: grid; gap: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: var(--bw) solid var(--rule-dark); } @media (min-width: 720px) { .footer__main { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-5); } } .footer__brand { display: flex; flex-direction: column; gap: var(--sp-3); } .footer__brand-name { font-family: var(--font-en-display); font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.015em; color: var(--bone); line-height: 1.2; } [lang="ar"] .footer__brand-name, [dir="rtl"] .footer__brand-name { font-family: var(--font-ar-display); font-weight: 700; } .footer__brand-tag { font-size: var(--fs-small); color: var(--text-muted-dark); max-width: 32ch; line-height: 1.6; } .footer__col-title { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.15em; color: var(--gold-soft); margin-bottom: var(--sp-3); font-weight: 500; } [lang="ar"] .footer__col-title, [dir="rtl"] .footer__col-title { font-family: var(--font-ar-body); letter-spacing: 0; font-weight: 600; } .footer__list { display: flex; flex-direction: column; gap: 0.75rem; } .footer__list a { color: var(--text-body-dark); font-size: var(--fs-small); transition: color var(--t-fast) var(--ease-out); } .footer__list a:hover { color: var(--gold-soft); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); font-size: var(--fs-eyebrow); color: var(--text-muted-dark); font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; flex-wrap: wrap; } .footer__social { display: flex; gap: var(--sp-2); } .footer__social a { width: 36px; height: 36px; display: grid; place-items: center; border: var(--bw) solid var(--rule-dark); color: var(--text-body-dark); transition: all var(--t-fast) var(--ease-out); } .footer__social a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); } .footer__social svg { width: 16px; height: 16px; } /* ---------- 16. ARTICLES / INSIGHTS ---------- */ .article-card { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--bone); border: var(--bw) solid var(--rule-light); transition: all var(--t-base) var(--ease-out); height: 100%; } .article-card--has-image { padding: 0; overflow: hidden; } .article-card--has-image .article-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } .article-card__image { aspect-ratio: 16/9; background: var(--ink-2); position: relative; overflow: hidden; } .article-card__image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) brightness(0.65) contrast(1.1); transition: filter var(--t-base) var(--ease-out); } .article-card--has-image:hover .article-card__image img { filter: grayscale(0.3) brightness(0.7) contrast(1.1); } .section--dark .article-card, .section--ink .article-card { background: var(--ink); border-color: var(--rule-dark); color: var(--text-body-dark); } .article-card:hover { border-color: var(--gold); transform: translateY(-2px); } .article-card__meta { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted-light); } .section--dark .article-card__meta, .section--ink .article-card__meta { color: var(--text-muted-dark); } .article-card__meta-dot { width: 4px; height: 4px; background: var(--gold); border-radius: 50%; } .article-card__title { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.01em; font-weight: 400; } [lang="ar"] .article-card__title, [dir="rtl"] .article-card__title { font-family: var(--font-ar-display); font-weight: 700; } .article-card__excerpt { color: var(--text-muted-light); font-size: var(--fs-small); line-height: 1.6; } .section--dark .article-card__excerpt, .section--ink .article-card__excerpt { color: var(--text-muted-dark); } .article-card__link { font-size: var(--fs-small); font-weight: 500; color: var(--gold); margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem; } .article-card__link::after { content: '→'; font-family: var(--font-mono); transition: transform var(--t-base) var(--ease-out); } [dir="rtl"] .article-card__link::after { content: '←'; } .article-card__link:hover::after { transform: translateX(4px); } [dir="rtl"] .article-card__link:hover::after { transform: translateX(-4px); } .articles-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 640px) { .articles-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .articles-grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- 17. RESEARCH / PUBLICATION DETAIL ---------- */ .service-hero { padding-block: calc(76px + var(--sp-7)) var(--sp-6); background: var(--ink); color: var(--text-body-dark); position: relative; overflow: hidden; } .service-hero--with-bg { padding-block: calc(76px + var(--sp-8)) calc(var(--sp-8) + var(--sp-3)); } .service-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .service-hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.7) brightness(0.3) contrast(1.1); opacity: 0.5; } .service-hero--with-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 10, 0.55) 0%, rgba(10, 14, 10, 0.85) 100%); z-index: 1; } .service-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(26, 87, 65, 0.2) 0%, transparent 50%); pointer-events: none; } .service-hero__inner { position: relative; display: grid; gap: var(--sp-3); max-width: 80ch; z-index: 2; } .service-hero__breadcrumb { display: flex; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted-dark); } .service-hero__breadcrumb a { color: var(--gold-soft); } .service-hero__breadcrumb a:hover { color: var(--bone); } .service-hero h1 { font-size: var(--fs-display); line-height: 0.95; color: var(--bone); font-weight: 400; letter-spacing: -0.03em; max-width: 16ch; } [lang="ar"] .service-hero h1, [dir="rtl"] .service-hero h1 { font-family: var(--font-ar-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; max-width: 18ch; } .service-hero__intro { font-size: var(--fs-body-lg); color: var(--text-muted-dark); max-width: 60ch; margin-top: var(--sp-3); } .service-body { display: grid; gap: var(--sp-6); } @media (min-width: 900px) { .service-body { grid-template-columns: 1fr 1.4fr; gap: var(--sp-7); } } .service-body__aside { position: sticky; top: 100px; align-self: start; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--bone-2); border: var(--bw) solid var(--rule-light); } .service-body__aside h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); } .service-body__aside-list { display: flex; flex-direction: column; gap: 0.5rem; } .service-body__aside-list a { font-size: var(--fs-small); color: var(--text-muted-light); padding-block: 0.25rem; border-bottom: var(--bw) solid transparent; transition: all var(--t-fast) var(--ease-out); } .service-body__aside-list a:hover, .service-body__aside-list a.is-active { color: var(--emerald-deep); border-bottom-color: var(--gold); } .service-body__content h2 { font-size: var(--fs-h2); margin-block: var(--sp-5) var(--sp-3); font-weight: 400; letter-spacing: -0.02em; } .service-body__content h2:first-child { margin-top: 0; } .service-body__content h3 { font-size: var(--fs-h3); margin-block: var(--sp-4) var(--sp-2); font-weight: 500; } .service-body__content p { margin-bottom: var(--sp-3); } .service-body__content ul, .service-body__content ol { padding-inline-start: 1.5rem; margin-bottom: var(--sp-3); } [dir="rtl"] .service-body__content ul, [dir="rtl"] .service-body__content ol { padding-inline-start: 0; padding-inline-end: 1.5rem; } .service-body__content ul { list-style: none; } .service-body__content ul li { position: relative; padding-inline-start: 1.25rem; margin-bottom: 0.5rem; line-height: 1.65; } .service-body__content ul li::before { content: '—'; position: absolute; inset-inline-start: 0; color: var(--gold); } .service-body__content ol { list-style: decimal; } .service-body__content ol li { margin-bottom: 0.5rem; padding-inline-start: 0.5rem; } .service-body__content blockquote { border-inline-start: 3px solid var(--gold); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; font-family: var(--font-en-display); font-style: italic; font-size: var(--fs-h4); color: var(--text-muted-light); line-height: 1.4; max-width: 60ch; } [lang="ar"] .service-body__content blockquote, [dir="rtl"] .service-body__content blockquote { font-family: var(--font-ar-display); font-style: normal; font-weight: 700; } /* ---------- 18. RESEARCH / PUBLICATION DETAIL ---------- */ .research-card { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--bone); border: var(--bw) solid var(--rule-light); transition: all var(--t-base) var(--ease-out); position: relative; } .research-card:hover { border-color: var(--gold); } .research-card__type { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); } .research-card__title { font-size: var(--fs-h4); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; } [lang="ar"] .research-card__title, [dir="rtl"] .research-card__title { font-family: var(--font-ar-display); font-weight: 700; } .research-card__pub { font-size: var(--fs-small); color: var(--text-muted-light); font-style: italic; line-height: 1.5; } .research-card__cta { font-size: var(--fs-small); font-weight: 500; color: var(--emerald-deep); display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; } .research-card__cta::after { content: '↗'; font-family: var(--font-mono); } .research-card__cta:hover { color: var(--emerald); } /* ---------- 19. FAQ ---------- */ .faq { display: flex; flex-direction: column; } .faq__item { border-bottom: var(--bw) solid var(--rule-light); } .section--dark .faq__item, .section--ink .faq__item { border-bottom-color: var(--rule-dark); } .faq__item:first-child { border-top: var(--bw) solid var(--rule-light); } .section--dark .faq__item:first-child, .section--ink .faq__item:first-child { border-top-color: var(--rule-dark); } .faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; padding: var(--sp-3) 0; text-align: start; font-family: var(--font-en-display); font-size: var(--fs-h4); font-weight: 500; color: var(--ink); line-height: 1.3; letter-spacing: -0.01em; transition: color var(--t-fast) var(--ease-out); } [lang="ar"] .faq__question, [dir="rtl"] .faq__question { font-family: var(--font-ar-display); font-weight: 700; } .section--dark .faq__question, .section--ink .faq__question { color: var(--bone); } .faq__question:hover { color: var(--emerald-deep); } .faq__icon { width: 24px; height: 24px; flex-shrink: 0; position: relative; transition: transform var(--t-base) var(--ease-out); } .faq__icon::before, .faq__icon::after { content: ''; position: absolute; inset: 50% 0; height: 1.5px; margin-top: -1px; background: currentColor; } .faq__icon::after { transform: rotate(90deg); transition: transform var(--t-base) var(--ease-out); } .faq__item[aria-expanded="true"] .faq__icon::after { transform: rotate(0); } .faq__answer { overflow: hidden; max-height: 0; transition: max-height var(--t-slow) var(--ease-in-out); } .faq__item[aria-expanded="true"] .faq__answer { max-height: 600px; } .faq__answer-inner { padding-bottom: var(--sp-3); color: var(--text-muted-light); font-size: var(--fs-body); line-height: 1.65; max-width: 70ch; } .section--dark .faq__answer-inner, .section--ink .faq__answer-inner { color: var(--text-muted-dark); } /* ---------- 20. PAGE HEADER (interior pages) ---------- */ .page-header { padding-block: calc(76px + var(--sp-7)) var(--sp-6); background: var(--ink); color: var(--text-body-dark); position: relative; overflow: hidden; } .page-header--with-bg { padding-block: calc(76px + var(--sp-8)) calc(var(--sp-8) + var(--sp-3)); } .page-header__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .page-header__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) brightness(0.3) contrast(1.1); opacity: 0.6; } .page-header h1 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1; color: var(--bone); font-weight: 400; letter-spacing: -0.03em; max-width: 18ch; } [lang="ar"] .page-header h1, [dir="rtl"] .page-header h1 { font-family: var(--font-ar-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; } .page-header__lead { font-size: var(--fs-body-lg); color: var(--text-muted-dark); max-width: 60ch; margin-top: var(--sp-2); } /* ---------- 21. UTILITIES ---------- */ .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mb-0 { margin-bottom: 0; } .text-center { text-align: center; } .text-muted { color: var(--text-muted-light); } .section--dark .text-muted, .section--ink .text-muted { color: var(--text-muted-dark); } .gold { color: var(--gold); } /* ---------- 22. SCROLL REVEAL (Motion) ---------- Note: We use a simple "fade-in-up" animation that fires once on intersect. Default state is VISIBLE — the .anim class is only added by JS when the browser supports IO AND the page is fully loaded, so users without JS (or with screenshot tools) see the full content immediately. */ .reveal { opacity: 1; transform: none; } .reveal.anim { animation: reveal-up 1s var(--ease-out) both; } @keyframes reveal-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } .reveal-clip { clip-path: inset(0 0 0 0); } .reveal-clip.anim { animation: reveal-clip-l 1.2s var(--ease-out) both; } [dir="rtl"] .reveal-clip.anim { animation-name: reveal-clip-r; } @keyframes reveal-clip-l { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes reveal-clip-r { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal, .reveal-clip { opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* ---------- 23. PRINT ---------- */ @media print { .nav, .footer, .cta, .nav__burger { display: none; } body { color: #000; background: #fff; } a { text-decoration: underline; } }