/* ========================================================= Rahma Connections - shared stylesheet --------------------------------------------------------- System: - Palette: warm cream ground, deep pine green primary, walnut + soft gold secondaries, near-black text. - Type: expressive display serif for headings + Rumi, humanist sans for body. Chicago style, no em dashes. - Ornament: an eight-point star motif used sparingly as divider, corner mark, and page-load moment. - Voice: quiet, confident, clear. Privacy and process surfaced early. ========================================================= */ :root { /* palette 1 - Pine & Gold (default) */ --bg: #f4efe6; --bg-soft: #ede5d6; --ink: #1f2922; --ink-soft: #3a4640; --ink-mute: #6b7168; --rule: #d9cfbd; --primary: #2d4a3e; --primary-ink: #f4efe6; --accent: #8a6a3b; --gold: #c9a86a; /* type */ --serif: "Cormorant Garamond", "Cardo", "EB Garamond", Georgia, serif; --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --arabic: "Amiri", "Scheherazade New", serif; /* ornament opacity */ --ornament-alpha: 0.55; /* geometry */ --measure: 62ch; --radius: 2px; } /* palette variants (applied via [data-palette] on ) */ html[data-palette="pine"] { --bg:#f4efe6; --bg-soft:#ede5d6; --ink:#1f2922; --ink-soft:#3a4640; --ink-mute:#6b7168; --rule:#d9cfbd; --primary:#2d4a3e; --primary-ink:#f4efe6; --accent:#8a6a3b; --gold:#c9a86a; } html[data-palette="walnut"] { --bg:#efe7db; --bg-soft:#e5d9c5; --ink:#2a1c12; --ink-soft:#4a3524; --ink-mute:#7a6450; --rule:#d6c3a8; --primary:#6b3f2a; --primary-ink:#efe7db; --accent:#a8754a; --gold:#d9b48a; } html[data-palette="indigo"] { --bg:#f0ece4; --bg-soft:#e4dfd3; --ink:#1a2030; --ink-soft:#2e3650; --ink-mute:#67708a; --rule:#cfc9ba; --primary:#2a3a5a; --primary-ink:#f0ece4; --accent:#5a7a8a; --gold:#b8a878; } html[data-palette="parchment"]{ --bg:#f6f1ea; --bg-soft:#ece5d7; --ink:#2a271e; --ink-soft:#45402f; --ink-mute:#7a6a52; --rule:#d9cdb6; --primary:#3d3a2e; --primary-ink:#f6f1ea; --accent:#7a6a52; --gold:#c4a878; } html[data-palette="sage"] { --bg:#faf6f0; --bg-soft:#ece6d6; --ink:#0f1614; --ink-soft:#2a342f; --ink-mute:#6a7268; --rule:#d2c9b5; --primary:#1f2a28; --primary-ink:#faf6f0; --accent:#4a5a52; --gold:#a89878; } html[data-palette="twilight"] { --bg:#f5f0ea; --bg-soft:#ebe3d9; --ink:#2a1f3e; --ink-soft:#3d2f58; --ink-mute:#7a6c90; --rule:#d6c8bd; --primary:#4a3370; --primary-ink:#f5f0ea; --accent:#8a6fb0; --gold:#d4a878; } html[data-palette="dusk"] { --bg:#f7f1ee; --bg-soft:#ede2dd; --ink:#2e1f3a; --ink-soft:#4a2e4a; --ink-mute:#846680; --rule:#d9c8c8; --primary:#5a2e5a; --primary-ink:#f7f1ee; --accent:#a05c88; --gold:#d8b074; } html[data-palette="midnight"] { --bg:#f1ece2; --bg-soft:#e4ddcd; --ink:#0e1624; --ink-soft:#2a3447; --ink-mute:#6a7388; --rule:#d2c8b5; --primary:#1a2847; --primary-ink:#f1ece2; --accent:#5a6a8a; --gold:#d4a142; } html[data-palette="clay"] { --bg:#f6ecdb; --bg-soft:#e9dac2; --ink:#2c1810; --ink-soft:#4a2c1e; --ink-mute:#7a6150; --rule:#d8c4a4; --primary:#8b3a1f; --primary-ink:#f6ecdb; --accent:#b8643f; --gold:#cc9a52; } html[data-palette="charcoal"] { --bg:#f2ede5; --bg-soft:#e5dfd2; --ink:#111218; --ink-soft:#2a2c35; --ink-mute:#6a6c75; --rule:#d2cdc0; --primary:#1f2026; --primary-ink:#f2ede5; --accent:#5a5c68; --gold:#d9a349; } html[data-palette="ocean"] { --bg:#eef0ea; --bg-soft:#dfe3d9; --ink:#0e1a1c; --ink-soft:#263638; --ink-mute:#607078; --rule:#c8d0c4; --primary:#16424a; --primary-ink:#eef0ea; --accent:#4a6e74; --gold:#c09449; } /* typography variants */ html[data-type="classical"] { --serif: "Cardo", "EB Garamond", Georgia, serif; --sans: "Inter Tight", -apple-system, sans-serif; } html[data-type="modern"] { --serif: "Cormorant Garamond", Georgia, serif; --sans: "Inter Tight", -apple-system, sans-serif; } html[data-type="editorial"] { --serif: "Fraunces", Georgia, serif; --sans: "Inter Tight", sans-serif; } html[data-type="quiet"] { --serif: "Cormorant Garamond", serif; --sans: "Work Sans", sans-serif; } /* ornament density */ html[data-ornament="whisper"] { --ornament-alpha: 0.22; } html[data-ornament="present"] { --ornament-alpha: 0.55; } html[data-ornament="ample"] { --ornament-alpha: 0.85; } /* ---------- base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); color: var(--ink); } body { font-family: var(--sans); font-size: 17px; line-height: 1.65; letter-spacing: 0.002em; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--gold); color: var(--ink); } a { color: var(--primary); text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity .2s; } a:hover { opacity: 0.7; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); letter-spacing: -0.005em; line-height: 1.12; margin: 0; } h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); } h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); } h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); } p { margin: 0 0 1.1em; text-wrap: pretty; max-width: var(--measure); } .eyebrow { font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; } .lead { font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.45; color: var(--ink-soft); font-style: italic; max-width: 54ch; } /* ---------- layout ---------- */ .wrap { max-width: 1160px; margin: 0 auto; padding: 0 40px; } .wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 40px; } /* ---------- legal pages (privacy / terms / refund) ---------- */ .legal-prose { padding-top: 0; } .legal-block { padding: 56px 44px; border-radius: 2px; } .legal-block + .legal-block { margin-top: 0; } .legal-block:nth-child(odd) { background: var(--bg-soft); } .legal-block:nth-child(even) { background: var(--bg); } .legal-prose h2 { display: inline-block; font-family: var(--serif); font-size: 1.85rem; font-weight: 600; letter-spacing: -0.005em; margin-top: 0; margin-bottom: 22px; padding: 14px 24px; background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: 2px; } .legal-block:nth-child(even) .legal-prose h2, .legal-block:nth-child(even) > h2 { background: var(--bg-soft); } .legal-prose h2:first-child { margin-top: 0; } .legal-prose p { margin-top: 14px; max-width: 64ch; } .legal-prose a { color: var(--primary); } .legal-list { list-style: none; padding: 0; margin: 18px 0 0; } .legal-list li { position: relative; padding-left: 24px; margin-top: 10px; max-width: 64ch; } .legal-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 10px; height: 1px; background: var(--ink-mute); } .legal-note { margin-top: 56px; padding: 32px 44px 0; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-mute); font-style: italic; max-width: 64ch; } @media (max-width: 640px) { .legal-block { padding: 36px 22px; } .legal-note { padding: 28px 22px 0; } } @media (max-width: 640px) { .wrap, .wrap-narrow { padding: 0 22px; } } section { padding: 96px 0; border-top: 1px solid var(--rule); } section.first { border-top: none; padding-top: 56px; } /* legal pages: tighten gap between hero lead and the rule below it */ body[data-page="privacy"] section.first, body[data-page="terms"] section.first, body[data-page="refund"] section.first { padding-bottom: 40px; } /* ---------- accessibility ---------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 1px; } .skip-link { position: absolute; top: 8px; left: 8px; padding: 10px 16px; background: var(--primary); color: var(--primary-ink); font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; text-decoration: none; border-radius: 2px; transform: translateY(-200%); transition: transform 0.15s ease; z-index: 1000; } .skip-link:focus { transform: translateY(0); } /* ---------- header ---------- */ .site-header { padding: 28px 40px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--rule); background: var(--bg); } .brand { display: flex; align-items: center; gap: 14px; color: var(--ink); border: none; } .brand .mark { width: 56px; height: 56px; color: var(--primary); opacity: 0.95; } .brand .name { font-family: var(--serif); font-size: 20px; letter-spacing: 0.01em; line-height: 1.1; } .brand .name em { font-style: italic; color: var(--ink-soft); font-size: 14px; display: block; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--sans); font-weight: 500; margin-top: 2px; } nav.primary { display: flex; align-items: center; gap: 28px; font-family: var(--sans); font-size: 14px; letter-spacing: 0.02em; } nav.primary a { color: var(--ink-soft); border: none; padding: 6px 0; position: relative; white-space: nowrap; } nav.primary a[aria-current="page"] { color: var(--ink); } nav.primary a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; transform: translateX(-50%) rotate(45deg); } @media (max-width: 900px) { .site-header { flex-direction: column; align-items: flex-start; padding: 22px; } nav.primary { flex-wrap: wrap; gap: 14px 20px; } } /* mobile nav: hamburger pattern below 720px */ .nav-toggle { display: none; position: absolute; top: 22px; right: 22px; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; color: var(--ink); align-items: center; justify-content: center; } .nav-toggle:hover { border-color: var(--ink-soft); } .nav-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 5px; width: 18px; } .nav-toggle-bars span { display: block; height: 1.5px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; } body.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } body.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 720px) { .site-header { padding: 18px 22px; position: relative; } .nav-toggle { display: inline-flex; } nav.primary { display: none; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 8px; } body.nav-open nav.primary { display: flex; } nav.primary a { display: block; width: 100%; padding: 14px 4px; border-bottom: 1px solid var(--rule); font-size: 14px; } nav.primary a:last-child { border-bottom: none; } nav.primary a[aria-current="page"]::after { display: none; } nav.primary a[aria-current="page"] { color: var(--primary); } } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--rule); padding: 64px 40px 48px; background: var(--bg-soft); color: var(--ink-soft); font-family: var(--sans); font-size: 14px; margin-top: 96px; } .footer-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; align-items: start; } .footer-grid h4 { font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--ink-mute); margin-bottom: 16px; } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid ul li { margin-bottom: 8px; } .footer-grid a { color: var(--ink-soft); border: none; } .footer-grid a:hover { color: var(--primary); } .footer-note { max-width: 1160px; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--ink-mute); font-size: 12px; letter-spacing: 0.04em; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer-legal { display: inline-flex; gap: 10px; align-items: baseline; } .footer-legal a { color: var(--ink-mute); border: none; } .footer-legal a:hover { color: var(--primary); } .footer-legal span[aria-hidden] { color: var(--rule); } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-grid ul li { margin-bottom: 0; } .footer-grid ul li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); } .footer-grid ul li:last-child a { border-bottom: none; } .footer-legal { padding: 16px 0 0; } .footer-legal a { display: inline-block; padding: 8px 0; } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14px; letter-spacing: 0.04em; padding: 14px 22px; border: 1px solid var(--primary); background: var(--primary); color: var(--primary-ink); border-radius: var(--radius); cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); opacity: 1; } .btn.ghost { background: transparent; color: var(--ink); } .btn.ghost:hover { background: var(--ink); color: var(--bg); } .btn .arrow { transition: transform .2s; } .btn:hover .arrow { transform: translateX(3px); } /* ---------- ornament primitives ---------- */ .ornament-rule { display: flex; align-items: center; justify-content: center; gap: 24px; opacity: var(--ornament-alpha); color: var(--accent); margin: 0 auto; padding: 0; } .ornament-rule::before, .ornament-rule::after { content: ""; flex: 1; height: 1px; background: currentColor; max-width: 140px; opacity: 0.5; } .ornament-rule svg, .ornament-rule img { width: 22px; height: 22px; flex: none; } .corner-mark { position: absolute; width: 60px; height: 60px; color: var(--accent); opacity: var(--ornament-alpha); pointer-events: none; } /* ---------- hero block (shared) ---------- */ .page-hero { position: relative; padding: 96px 0 88px; text-align: left; } .page-hero .eyebrow { margin-bottom: 20px; display: inline-block; } .page-hero h1 { font-family: var(--serif); font-weight: 400; font-style: italic; color: var(--ink); max-width: 18ch; } .page-hero .lead { margin-top: 28px; } /* ---------- utilities ---------- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } @media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 36px; } } .pill { display: inline-block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-mute); } .arabic { font-family: var(--arabic); direction: rtl; font-weight: 400; } /* card */ .card { background: var(--bg-soft); border: 1px solid var(--rule); padding: 36px 32px; border-radius: var(--radius); position: relative; } .card h3 { margin-bottom: 12px; } .card .num { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 28px; line-height: 1; margin-bottom: 16px; display: block; } /* pull quote */ .pull { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.3; color: var(--ink); max-width: 28ch; text-wrap: balance; } .pull cite { display: block; font-style: normal; font-family: var(--sans); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin-top: 20px; } /* list with fine rules */ .fine-list { list-style: none; padding: 0; margin: 0; } .fine-list li { padding: 20px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 40px 1fr; gap: 20px; align-items: baseline; } .fine-list li:last-child { border-bottom: 1px solid var(--rule); } .fine-list .idx { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 20px; } .fine-list h4 { font-family: var(--serif); font-weight: 500; font-size: 20px; margin-bottom: 4px; } .fine-list p { margin: 0; color: var(--ink-soft); } /* image placeholders */ .photo-ph { background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--rule) 80%, transparent) 0 1px, transparent 1px 12px), var(--bg-soft); border: 1px solid var(--rule); aspect-ratio: 4 / 5; display: flex; align-items: flex-end; justify-content: flex-start; padding: 16px; color: var(--ink-mute); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: 0.04em; position: relative; } .photo-ph.square { aspect-ratio: 1/1; } .photo-ph.wide { aspect-ratio: 16/10; } /* real photographs (replace .photo-ph when an image is wired in) */ .photo { position: relative; display: block; width: 100%; min-width: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--rule); background: var(--bg-soft); } .photo img { display: block; width: 100%; height: 100%; object-fit: cover; /* gentle warmth so photos sit in the same palette as the site */ filter: saturate(0.95); } .photo.square { aspect-ratio: 1 / 1; } .photo.wide { aspect-ratio: 16 / 10; } .photo.tall { aspect-ratio: 3 / 4; } /* When the photo should stretch to fill its grid cell instead of holding a fixed aspect */ .photo.fill { aspect-ratio: auto; height: 100%; min-height: 100%; } /* callout */ .callout { background: var(--bg-soft); border-left: 2px solid var(--gold); padding: 24px 28px; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink-soft); } /* tweaks panel */ .tweaks { position: fixed; bottom: 20px; right: 20px; width: 260px; background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 12px 30px -12px rgba(0,0,0,0.18); padding: 18px 18px 16px; z-index: 9999; font-family: var(--sans); font-size: 13px; display: none; } .tweaks.open { display: block; } .tweaks h4 { font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px; font-weight: 500; display: flex; justify-content: space-between; } .tweaks h4 button { background: none; border: none; color: var(--ink-mute); cursor: pointer; font-size: 16px; line-height: 1; } .tweaks .field { margin-bottom: 14px; } .tweaks label { display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; } .tweaks .swatches { display: flex; gap: 6px; flex-wrap: wrap; } .tweaks .swatches button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; position: relative; } .tweaks .swatches button[aria-pressed="true"] { border-color: var(--ink); } .tweaks select { width: 100%; padding: 6px 8px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 12px; border-radius: 2px; } /* ---------- animated geometry (home hero, offset & gold) ---------- */ .geometry-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .geometry-bg .svg-wrap { position: absolute; top: 50%; right: -60px; width: 520px; height: 520px; transform: translateY(-50%); color: var(--gold); } @media (max-width: 900px) { .geometry-bg .svg-wrap { right: -140px; width: 400px; height: 400px; opacity: 0.7; } } .geometry-bg svg { width: 100%; height: 100%; display: block; opacity: 0.85; } .geometry-bg .ring-a { transform-origin: 200px 200px; animation: rahma-spin 80s linear infinite; } .geometry-bg .ring-b { transform-origin: 200px 200px; animation: rahma-spin-rev 110s linear infinite; } .geometry-bg .ring-c { transform-origin: 200px 200px; animation: rahma-spin 150s linear infinite; } .geometry-bg .ring-breathe { transform-origin: 200px 200px; animation: rahma-breathe 8s ease-in-out infinite; } .geometry-bg .glow { position: absolute; top: 50%; right: -100px; width: 620px; height: 620px; transform: translateY(-50%); background: radial-gradient(circle at center, color-mix(in oklch, var(--gold) 40%, transparent) 0%, color-mix(in oklch, var(--gold) 15%, transparent) 35%, transparent 70%); animation: rahma-glow 10s ease-in-out infinite; filter: blur(6px); pointer-events: none; } @keyframes rahma-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rahma-spin-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes rahma-breathe { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.08); opacity: 1; } } @keyframes rahma-glow { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } } /* ---------- Counterpoint rosette background ---------- Two stacked rosette marks turning gently against each other, replacing the earlier concentric-ring geometry. The original SVG markup remains in each page's HTML (hidden here) so the prior look can be restored by removing the rules in this block and the matching display-none below. */ .geometry-bg .svg-wrap > svg { display: none; } .geometry-bg .svg-wrap::before, .geometry-bg .svg-wrap::after { content: ""; position: absolute; inset: 0; background-image: url("images/rahma-logo.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; transform-origin: center; } .geometry-bg .svg-wrap::before { opacity: 0.1; animation: rahma-counter-back 36s linear infinite; } .geometry-bg .svg-wrap::after { opacity: 0.35; animation: rahma-counter-front 60s linear infinite; } @keyframes rahma-counter-back { from { transform: rotate(360deg) scale(0.9); } to { transform: rotate(0deg) scale(0.9); } } @keyframes rahma-counter-front { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .geometry-bg .ring-a, .geometry-bg .ring-b, .geometry-bg .ring-c, .geometry-bg .ring-breathe, .geometry-bg .glow, .geometry-bg .svg-wrap::before, .geometry-bg .svg-wrap::after { animation: none; } .geometry-bg .svg-wrap::before { transform: rotate(0deg) scale(0.9); } } .hero > *:not(.geometry-bg) { position: relative; z-index: 1; } .hero { isolation: isolate; } /* page-hero geometry: subtler, smaller, positioned behind the page-hero block */ .page-hero { position: relative; overflow: visible; isolation: isolate; } .page-hero > *:not(.geometry-bg) { position: relative; z-index: 1; } .page-hero .geometry-bg { /* break out of the wrap so the geometry can sit against the viewport edge */ position: absolute; top: 0; bottom: 0; left: 50%; right: auto; width: 100vw; max-width: 100vw; transform: translateX(-50%); overflow: hidden; pointer-events: none; z-index: 0; } .page-hero .geometry-bg .svg-wrap { width: 420px; height: 420px; right: 40px; left: auto; top: 50%; opacity: 0.85; } .page-hero .geometry-bg .glow { width: 520px; height: 520px; right: 0; left: auto; top: 50%; opacity: 0.7; } @media (max-width: 900px) { .page-hero .geometry-bg .svg-wrap { right: -80px; width: 340px; height: 340px; opacity: 0.55; } .page-hero .geometry-bg .glow { right: -120px; width: 420px; height: 420px; } } /* left-side variant for visual rhythm on alternating pages */ .page-hero.geom-left .geometry-bg .svg-wrap { right: auto; left: 40px; } .page-hero.geom-left .geometry-bg .glow { right: auto; left: 0; } @media (max-width: 900px) { .page-hero.geom-left .geometry-bg .svg-wrap { left: -80px; } .page-hero.geom-left .geometry-bg .glow { left: -120px; } } /* Home hero geometry - also escape the wrap */ .hero .geometry-bg { position: absolute; top: 0; bottom: 0; left: 50%; right: auto; width: 100vw; max-width: 100vw; transform: translateX(-50%); overflow: hidden; pointer-events: none; z-index: 0; } .hero .geometry-bg .svg-wrap { right: clamp(70px, 7vw, 170px); left: auto; width: clamp(280px, 22vw, 360px); height: clamp(280px, 22vw, 360px); top: 50%; } .hero .geometry-bg .glow { right: clamp(40px, 5vw, 140px); left: auto; width: clamp(360px, 28vw, 440px); height: clamp(360px, 28vw, 440px); top: 50%; } @media (max-width: 1100px) { .hero .geometry-bg .svg-wrap { right: 60px; width: 300px; height: 300px; } .hero .geometry-bg .glow { right: 30px; width: 380px; height: 380px; } } @media (max-width: 900px) { .hero .geometry-bg .svg-wrap { right: 30px; width: 240px; height: 240px; opacity: 0.8; } .hero .geometry-bg .glow { right: 10px; width: 320px; height: 320px; } } @media (max-width: 640px) { .hero .geometry-bg .svg-wrap { right: 20px; width: 180px; height: 180px; opacity: 0.6; } .hero .geometry-bg .glow { right: 10px; width: 240px; height: 240px; } } /* hero variations (home only) */ .hero { position: relative; padding: 80px 0 96px; overflow: visible; } .hero .corner-mark.tl { top: 24px; left: 24px; } .hero .corner-mark.tr { top: 24px; right: 24px; transform: scaleX(-1); } .hero .corner-mark.bl { bottom: 24px; left: 24px; transform: scaleY(-1); } .hero .corner-mark.br { bottom: 24px; right: 24px; transform: scale(-1, -1); } .hero-center { text-align: center; padding: 72px 0 96px; } .hero-center .bismillah { font-family: var(--arabic); font-size: clamp(2rem, 4vw, 3rem); color: var(--primary); margin-bottom: 36px; direction: rtl; } .hero-center .rumi { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2rem, 4.5vw, 3.8rem); line-height: 1.18; letter-spacing: -0.01em; color: var(--ink); max-width: 20ch; margin: 0 auto; text-wrap: balance; } .hero-center .attr { font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); margin-top: 56px; display: block; } .hero-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: center; padding: 64px 0 88px; } .hero-split .rumi { font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.15; color: var(--ink); max-width: 16ch; text-wrap: balance; } .hero-split .bismillah { font-family: var(--arabic); font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--primary); margin-bottom: 20px; } .hero-split .bismillah-translit { font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); margin-top: 6px; display: block; } @media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; gap: 36px; } } .hero-serene { padding: 120px 0; text-align: center; background: radial-gradient(ellipse at center, color-mix(in oklch, var(--gold) 22%, transparent) 0%, transparent 60%), var(--bg); } .hero-serene .rumi { font-family: var(--serif); font-style: italic; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.15; color: var(--ink); max-width: 22ch; margin: 40px auto 0; text-wrap: balance; } .hero-editorial { padding: 64px 0 88px; } .hero-editorial .kicker { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1.6vw, 1.4rem); color: var(--accent); margin-bottom: 24px; } .hero-editorial .rumi { font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; max-width: 14ch; } .hero-editorial .rumi em { font-style: italic; color: var(--primary); } /* rules */ hr.rule { border: none; height: 1px; background: var(--rule); margin: 48px 0; }