children. _Layout renders `.atmos > i.a-*`; this shell renders `.atmos > div.marble` and friends, so the two never both style one element. */ .atmos{position:fixed;inset:0;z-index:0;pointer-events:none} .atmos>*{position:absolute;inset:0} .atmos .marble{background: radial-gradient(1400px 900px at 50% -10%,#141210,transparent 60%), radial-gradient(1000px 800px at 100% 8%,#100f0d,transparent 55%), radial-gradient(1200px 900px at 0% 100%,#0d0c0b,transparent 60%),var(--bg)} .atmos .grain{opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .atmos .light{background:radial-gradient(760px 520px at 50% 0%,rgba(200,167,91,.08),transparent 62%)} .atmos .geo{opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23c8a75b' stroke-width='0.5'%3E%3Cpath d='M75 6 144 75 75 144 6 75Z'/%3E%3Cpath d='M75 34 116 75 75 116 34 75Z'/%3E%3C/g%3E%3C/svg%3E")} .atmos .vignette{background:radial-gradient(130% 95% at 50% 22%,transparent 42%,rgba(0,0,0,.55) 100%)} #dust{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5} /* ═════════════════ 3 · CINEMATIC INTRO ═════════════════ `overflow:hidden` is the one addition: the glow is 60vmax square and centred, so on a phone it hangs 90px past both edges. It is a radial gradient that has already faded to transparent by then — clipping it changes no visible pixel and stops the audit reporting a decoration as layout overflow. */ .intro{position:fixed;inset:0;z-index:6000;background:#040404;display:grid;place-items:center;overflow:hidden; transition:opacity 900ms var(--ease),visibility 900ms} .intro.done{opacity:0;visibility:hidden} .intro__glow{position:absolute;width:60vmax;height:60vmax;border-radius:50%; background:radial-gradient(circle,rgba(200,167,91,.18),transparent 60%);opacity:0;transform:scale(.4); animation:introGlow 2.8s var(--ease-in) forwards} .intro__mark{width:120px;height:120px;opacity:0;transform:scale(.86);animation:introMark 2.8s var(--ease-in) .25s forwards} .intro__word{position:absolute;bottom:32%;font-family:var(--font-display);font-size:clamp(18px,2.6vw,26px);letter-spacing:.12em;white-space:nowrap; color:var(--gold);opacity:0;animation:introWord 2.4s var(--ease) .9s forwards} html[data-lang="en"] .intro__word{letter-spacing:.32em;text-transform:uppercase} @keyframes introGlow{40%{opacity:1;transform:scale(1)}100%{opacity:.5;transform:scale(1.15)}} @keyframes introMark{35%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}} @keyframes introWord{40%{opacity:.9}100%{opacity:.9}} /* ═════════════════ 4 · SCROLL PROGRESS ═════════════════ */ .progress{position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:3000} .progress__fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold-antique),var(--gold-champagne))} /* ═════════════════ 5 · TOP UTILITY BAR ═════════════════ The thin band the first port dropped: the Hijri date, the basmala ligature and a 64px spacer, which is what centres the ligature under space-between. */ .topbar{position:relative;z-index:5;border-bottom:1px solid rgba(255,255,255,.05);font-family:var(--font-ui);font-size:12.5px;color:var(--txt2)} .topbar__inner{display:flex;align-items:center;justify-content:space-between;height:40px} .topbar .basmala{color:var(--acc);font-size:15px;font-family:var(--font-head)} /* ═════════════════ 6 · THE FLOATING PILL ═════════════════ */ .navwrap{position:sticky;top:0;z-index:2000} /* FULL BLEED, FLUSH TO THE BAND ABOVE IT — a deliberate departure from home.html, asked for directly. The comp floats a rounded pill inset 20px each side with 14px of air under the basmala band; this is one continuous header instead. So: width 100%, no max-width, no top margin, and no radius — a 999px radius on a full-bleed element only rounds its ends against the viewport edge, which reads as a mistake rather than as a pill. Revert by restoring `margin:14px auto 0;max-width:var(--maxw); width:calc(100% - 40px);border-radius:999px`. */ .navwrap .nav{position:relative;margin:0;max-width:none;width:100%;border-radius:0; background:color-mix(in srgb,var(--glass) 92%,transparent);-webkit-backdrop-filter:blur(26px) saturate(1.2);backdrop-filter:blur(26px) saturate(1.2); border:0;border-block:1px solid rgba(200,167,91,.16);box-shadow:0 14px 46px rgba(0,0,0,.42); /* site.css's `.nav` is a flex row of links; this one is a container. */ display:block;gap:normal;font-family:var(--font-body);font-size:inherit; transition:box-shadow var(--base) var(--ease),border-color var(--base),background var(--base)} .navwrap .nav::after{content:"";position:absolute;inset-inline:clamp(18px,4vw,72px);bottom:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(200,167,91,.32) 18%,rgba(243,224,166,.58) 50%,rgba(200,167,91,.32) 82%,transparent)} .navwrap .nav.scrolled{border-color:var(--glass-bd);box-shadow:0 16px 54px rgba(0,0,0,.58),0 0 0 1px rgba(200,167,91,.08)} /* The row keeps a real gutter now that the bar itself has none — without it the seal and the burger would sit hard against the viewport edge. */ .nav__inner{display:flex;align-items:center;gap:clamp(18px,2.2vw,36px);height:112px;padding-inline:clamp(18px,4vw,72px)} .nav__inner .brand{display:flex;align-items:center;gap:17px} .nav .brand__emblem{width:68px;height:68px;flex:none;overflow:visible;filter:var(--emb) drop-shadow(0 8px 15px rgba(0,0,0,.2)); transition:transform 650ms var(--ease),filter 650ms var(--ease)} .nav .brand:hover .brand__emblem{transform:translateY(-2px) scale(1.035);filter:var(--emb) drop-shadow(0 12px 22px rgba(200,167,91,.22))} .brand__copy{display:flex;flex-direction:column;justify-content:center;min-width:0} .brand__identity{display:flex;align-items:baseline;gap:11px;white-space:nowrap} .brand__name{position:relative;font-family:var(--font-display);font-size:clamp(31px,1.45rem + .72vw,39px);line-height:1;letter-spacing:.012em;white-space:nowrap; filter:drop-shadow(0 5px 12px rgba(44,31,11,.14))} .brand__name::after{content:"";position:absolute;inset-inline:8% 8%;bottom:-6px;height:1px; background:linear-gradient(90deg,transparent,rgba(200,167,91,.88) 22%,rgba(244,218,151,.96) 50%,rgba(200,167,91,.88) 78%,transparent); box-shadow:0 1px 7px rgba(200,167,91,.28)} /* Both spans are scoped to `.nav .brand__name` rather than left to site.css's own `.brand .nm-full` / `.nm-short` pair: site.css swaps them at 768–1099 as well, where this pill has room for the whole name. Three classes deep beats its two in every tier, so the swap happens where THIS header needs it and nowhere else. */ .nav .brand__name .nm-full{display:inline} .nav .brand__name .nm-short{display:none} .brand__sub{font-family:var(--font-ui);font-size:10.5px;font-weight:500;letter-spacing:.13em;color:var(--acc-text);text-transform:uppercase;white-space:nowrap} .brand__tagline{margin-top:13px;font-family:var(--font-ui);font-size:11px;font-weight:350;line-height:1.25;letter-spacing:.02em;color:var(--mut);white-space:nowrap} .nav__links{display:flex;align-items:center;gap:clamp(18px,1.7vw,32px);font-family:var(--font-ui);font-size:15px;margin-inline:auto} .nav__links a{position:relative;color:var(--txt2);padding:13px 1px;white-space:nowrap;transition:color var(--base) var(--ease),text-shadow var(--base)} .nav__links a::after{content:"";position:absolute;inset-inline:50% 50%;bottom:2px;height:1px;background:var(--acc);box-shadow:0 0 8px rgba(200,167,91,.6);transition:inset var(--base) var(--ease)} .nav__links a:hover{color:var(--txt);text-shadow:0 0 14px rgba(200,167,91,.4)} .nav__links a:hover::after,.nav__links a.active::after{inset-inline:0 0} .nav__links a.active{color:var(--acc-text)} .nav__tools{display:flex;align-items:center;gap:8px} .icobtn{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:rgba(200,167,91,.018); border:1px solid rgba(255,255,255,.08);color:var(--txt2);cursor:pointer;transition:all var(--base) var(--ease)} .icobtn:hover{color:var(--acc);border-color:rgba(200,167,91,.5);box-shadow:var(--gold-glow)} .icobtn svg{width:18px;height:18px} .lang{position:relative} .lang__menu{position:absolute;inset-inline-end:0;top:calc(100% + 10px);background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-bd);border-radius:14px;padding:6px;min-width:120px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all var(--base) var(--ease);box-shadow:0 12px 40px rgba(0,0,0,.5)} .lang.open .lang__menu{opacity:1;visibility:visible;transform:none} .lang__menu button{display:block;width:100%;text-align:start;background:none;border:none;color:var(--txt2);font-family:var(--font-ui);font-size:14px;padding:9px 12px;border-radius:9px;cursor:pointer;transition:all var(--base)} .lang__menu button:hover{background:rgba(200,167,91,.1);color:var(--acc-text)} .nav__burger{display:none;position:relative;background:none;border:none;color:var(--acc);font-size:22px;cursor:pointer;line-height:1.8} /* ── ENGLISH SETS WIDER ────────────────────────────────────────────────── Measured: the Latin wordmark is 380px where the Arabic one is 271, and «Official Website» is 128px set inline against «الموقع الرسمي»'s 55. The English pill therefore asked for 1213px of a 1074px row at 1440 — and its toolbar hung 88px past the pill's own rounded edge at EVERY width from 768 up, not at one breakpoint. The comp has the identical fault, hidden under `body{overflow-x:hidden}`. site.css already treats this as a property of the LANGUAGE rather than of a width (`html[data-lang="en"] .nav{gap:15px}`), and its own answer wherever the bar is tight is the short wordmark. Both are used here: the subtitle stacks instead of setting beside a wordmark half again as wide, and the English pill carries the short name. Arabic is untouched, and Arabic is what the comp is written in. */ html[data-lang="en"] .brand__identity{align-items:flex-start;flex-direction:column;gap:3px} html[data-lang="en"] .brand__sub{display:block} html[data-lang="en"] .nav .brand__name .nm-full{display:none} html[data-lang="en"] .nav .brand__name .nm-short{display:inline} /* The world's material change on the logo: gold foil in the Archive, a blind emboss on paper in the Manuscript. site.css's `.foil` already does exactly this, and `.brand__name` wears it. */ /* ═════════════════ 7 · BUTTONS ═════════════════ */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:15px;letter-spacing:.03em; border-radius:var(--r-md);padding:16px 34px;margin-bottom:0;cursor:pointer;border:1px solid transparent; transition:transform 150ms var(--ease),box-shadow 150ms var(--ease),filter 150ms var(--ease),border-color 150ms var(--ease)} .btn--gold{background:var(--gold-brushed);color:var(--on-gold);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 10px 30px rgba(0,0,0,.5)} .btn--gold:hover{filter:brightness(1.08);transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 16px 40px rgba(0,0,0,.55),var(--gold-glow)} .btn--ghost{background:transparent;color:var(--acc-text);border-color:rgba(200,167,91,.5)} /* the comp also recolours the label to --gold-champagne on hover; dropped, because champagne on parchment fails contrast in the Manuscript world */ .btn--ghost:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:var(--gold-glow)} /* ═════════════════ 8 · DIVIDER ═════════════════ */ .divider{display:flex;align-items:center;justify-content:center;gap:16px;margin-block:var(--sp7);color:var(--acc)} .divider::before,.divider::after{content:"";height:1px;flex:1 1 auto;max-width:160px;background:linear-gradient(to right,transparent,rgba(200,167,91,.55))} .divider::after{transform:scaleX(-1)} .divider i{width:11px;height:11px;border:1px solid var(--acc);transform:rotate(45deg);position:relative;display:block} .divider i::after{content:"";position:absolute;inset:2px;border:1px solid rgba(200,167,91,.5)} /* ═════════════════ 9 · HERO ═════════════════ A full-bleed BAND, reworked 2026-09-19 on the owner's direction: the slider runs the whole page width like a stage, shorter than the old hall, with the seal riding the band's inline-end side at reduced size. Content is re-aligned to --maxw through padding, so the band bleeds while the text still lines up with every section below. */ .hero{position:relative;width:100%;min-height:clamp(360px,48svh,470px);display:flex; flex-direction:column;justify-content:center;overflow:hidden; padding-block:clamp(20px,3vh,32px) clamp(16px,2.6vh,26px); padding-inline:max(clamp(20px,4vw,56px),calc((100% - var(--maxw))/2)); border-block:1px solid var(--edge); background: radial-gradient(120% 140% at 14% 50%,color-mix(in srgb,var(--acc) 8%,transparent),transparent 56%), linear-gradient(165deg,color-mix(in srgb,var(--paper) 90%,transparent),var(--bg) 74%)} .hero__inner{position:relative;z-index:2} .hero .eyebrow{display:block} .hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(3rem,1.8rem+5.4vw,5.8rem);line-height:1.1;letter-spacing:-.015em;margin-top:var(--sp5)} .hero__mini{width:64px;height:1px;margin:var(--sp6) 0 0;background:linear-gradient(90deg,var(--acc),transparent);position:relative} html[dir="ltr"] .hero__mini{background:linear-gradient(90deg,var(--acc),transparent)} .hero__mini::after{content:"";position:absolute;inset-inline-start:calc(50% - 4px);top:-3px;width:7px;height:7px;border:1px solid var(--acc);transform:rotate(45deg)} .hero__sub{margin-top:var(--sp6);color:#c9c4ba;font-weight:300;font-size:clamp(1.05rem,.9rem+.7vw,1.4rem);line-height:1.95;max-width:520px} .hero__cta{margin-top:var(--sp8);display:flex;gap:18px;flex-wrap:wrap} /* Royal live ledger — the hero's truthful, published-only update carousel. THE SLIDER IS THE BAND: it spans the full width; the crown line, the controls row and the progress hairline all run edge-gutter to edge-gutter, and the seal floats over its inline-end side. The slide text keeps a reading measure and reserves the seal's lane. */ .hero-updates{position:relative;min-width:0;width:100%;padding:0;border:0; border-radius:0;background:transparent;box-shadow:none;overflow:visible} .hero-updates__site-title{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .hero-updates__crown{position:relative;z-index:2;display:flex;align-items:center;gap:12px;margin-bottom:20px;font-family:var(--font-ui);font-size:10px;letter-spacing:.18em;color:var(--acc-text)} .hero-updates__crown::before{content:"@";font-size:0} .hero-updates__crown span{width:9px;height:9px;border:1px solid var(--acc);transform:rotate(45deg);box-shadow:0 0 15px color-mix(in srgb,var(--acc) 45%,transparent);animation:updateJewel 3s ease-in-out infinite} .hero-updates__crown i{height:1px;flex:1;background:linear-gradient(90deg,var(--acc),transparent);opacity:.55} .hero-updates__viewport{position:relative;z-index:2;display:grid;min-height:232px} /* The seal's lane: on wide screens the slide text and the crown line stop short of the overlaid emblem, while the controls and the progress hairline run the full band. */ @media(min-width:961px){ .hero-updates__viewport{padding-inline-end:clamp(270px,26vw,390px)} /* The crown line and the CONTROLS ROW stop at the seal's lane too — a hairline crossing behind the artwork reads as a scratch, and a button orphaned in the band's corner reads as lost. The far end of the rail is the seal's doorstep. */ .hero-updates__crown,.hero-updates__controls{padding-inline-end:clamp(270px,26vw,390px)} } /* Pure compositor work, deliberately: the old transition SCALED the slide (.985→1), which re-rasterises live text every frame — Arabic display glyphs shimmered and read as lag. Opacity + translate3d only, with the layer promoted, and the glyphs never repaint mid-flight. */ .hero-update{grid-area:1/1;align-self:center;opacity:0;visibility:hidden; transform:translate3d(0,16px,0);will-change:opacity,transform;backface-visibility:hidden; transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s} .hero-update.is-active{opacity:1;visibility:visible;transform:translate3d(0,0,0)} .hero-update__eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--font-ui);font-size:10px;letter-spacing:.16em;color:var(--acc-text)} .hero-update__eyebrow i{width:20px;height:1px;background:var(--acc);position:relative} .hero-update__eyebrow i::after{content:"";position:absolute;inset-inline-end:0;top:-2px;width:5px;height:5px;border:1px solid var(--acc);transform:rotate(45deg)} .hero-update h2{max-width:560px;margin:13px 0 11px;font-family:var(--font-display);font-size:clamp(1.9rem,2.5vw,2.9rem);font-weight:400;line-height:1.24;color:var(--txt)} .hero-update p{max-width:510px;color:var(--txt2);font-size:15px;line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .hero-update__meta{display:flex;align-items:center;gap:10px;margin:17px 0 22px;color:var(--mut);font-family:var(--font-ui);font-size:9px;letter-spacing:.09em} .hero-update__meta i{width:4px;height:4px;background:var(--acc);transform:rotate(45deg)} .hero-update .btn{position:relative;z-index:3;min-width:145px} .hero-updates__controls{position:relative;z-index:3;display:flex;align-items:center;gap:11px;padding-top:16px;border-top:1px solid var(--edge)} .hero-updates__controls>button{width:34px;height:34px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--acc) 36%,var(--edge));border-radius:50%;background:transparent;color:var(--acc-text);font:22px/1 serif;cursor:pointer;transition:background .2s,transform .2s,border-color .2s} .hero-updates__controls>button:hover{transform:translateY(-2px);border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,transparent)} /* A true slider row: one arrow at the rail's inline-start, the dot rail stretching, and the other arrow with the pause at the rail's far end — which stops at the seal's lane, so the pair lands beside the artwork, not orphaned in the band's corner. */ .hero-updates__dots{display:flex;align-items:center;gap:7px;flex:1} /* Segments, not pips: every dot takes an equal share of the rail, so together they span it edge to edge — the lit one reads by its gold, not by its length. */ .hero-updates__dots button{flex:1 1 0;min-width:0;height:3px;padding:0;border:0;border-radius:99px;background:color-mix(in srgb,var(--acc) 22%,transparent);cursor:pointer;transition:background .35s,box-shadow .35s} .hero-updates__dots button.is-active{background:var(--gold-brushed);box-shadow:0 0 14px color-mix(in srgb,var(--acc) 45%,transparent)} .hero-updates__pause span{width:8px;height:10px;border-inline:2px solid currentColor} .hero-updates.is-paused .hero-updates__pause span{width:0;height:0;border:5px solid transparent;border-inline-start:8px solid currentColor;border-inline-end:0} .hero-updates__progress{position:relative;z-index:3;margin-top:12px;height:1px;overflow:hidden} .hero-updates__progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,transparent,var(--acc),transparent);transform-origin:inline-start;animation:updateProgress 6.5s linear infinite} .hero-updates.is-paused .hero-updates__progress i{animation-play-state:paused} @keyframes updateProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes updateGleam{0%,72%{transform:translateX(-35%)}100%{transform:translateX(35%)}} @keyframes updateJewel{50%{transform:rotate(225deg) scale(1.15);box-shadow:0 0 24px color-mix(in srgb,var(--acc) 70%,transparent)}} /* the illuminated library vault — the comp's signature centrepiece */ /* The seal RIDES the slider: absolutely placed over the band's inline-end side (the left, in Arabic), vertically centred, decorative — pointer-events off, so the full-width controls beneath it stay clickable. */ .centerpiece{position:absolute;z-index:3;inset-block:0 clamp(36px,6.5vh,56px); margin-block:auto;height:fit-content; inset-inline-end:max(clamp(20px,4vw,56px),calc((100% - var(--maxw))/2)); width:clamp(230px,22vw,340px);display:grid;place-items:center;min-height:0; isolation:isolate;pointer-events:none} /* The bottom inset is the progress hairline's territory: the seal centres in the space ABOVE it, so the full-width line never crosses the artwork. */ /* NOT translateY(-50%), deliberately: the wrapper carries .reveal, whose finished state is transform:none — a transform-based centring would be erased the moment the page reveals. inset-block:0 + margin-block:auto centres without owning the transform channel. */ /* THE IDLE HOLDS STILL AT BAND SCALE. The emblem's ceremony floats the book, slides its shadow and breathes the star — measured for a 560px centrepiece. Scaled to a band ornament those translations snap across device pixels and read as SHAKING, on desktop and phone alike. Only the displacing idles rest; the ring spins and the diamonds' light-pulses are pure rotation and opacity, and they stay. */ .centerpiece .e-float,.centerpiece .e-shadeF,.centerpiece .e-breathe{animation:none} /* And the emblem's last two movers: the page-stack breath and the three floating motes. At band scale every one of them is a twitch. The motes are hidden outright — frozen mid-flight they would read as stray dots. */ .centerpiece .e-page-stack{animation:none} .centerpiece .p1,.centerpiece .p2,.centerpiece .p3, .centerpiece .p4,.centerpiece .p5,.centerpiece .p6{display:none} /* These carry an entrance AND an idle in one animation list; the entrance must survive (its `forwards` state is what makes the piece visible at all), so the list is restated with the idle dropped rather than switched off wholesale. */ .centerpiece .e-cartouche{animation:eRegaliaIn .75s var(--paper-ease) .72s forwards} .centerpiece .e-crown{animation:eCrownIn .65s var(--paper-ease) 1.28s forwards} .centerpiece .e-mini{animation:eIn .7s var(--paper-ease) 1.25s forwards} /* Idle-only scalers: the gems and the spine jewel. */ .centerpiece .e-crown-gem,.centerpiece .e-spine-gem,.centerpiece .e-spine-jewel{animation:none} /* And the crown-line jewel beside the eyebrow — it scaled every three seconds, right in the reader's text zone. */ .hero-updates__crown span{animation:none} /* The metal sheen that sweeps across the seal — base opacity 0, so switched off it simply never appears. The last mover in the band. */ .centerpiece .e-sheen{animation:none} .centerpiece__halo{position:absolute;width:min(128%,500px);aspect-ratio:1;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(243,224,166,.24) 0,rgba(200,167,91,.12) 27%,rgba(200,167,91,.045) 49%,transparent 70%); filter:blur(2px)} /* NO PULSE. The halo used to scale 5% on a seven-second breath — a 500px glow throbbing under the slide text and the seal alike, which the recordings showed as the whole band "shaking". A masthead the reader stares at must hold perfectly still. */ .centerpiece__sanctum{position:relative;width:min(100%,400px);aspect-ratio:1;display:grid;place-items:center} .centerpiece__sanctum::before,.centerpiece__sanctum::after{content:"";position:absolute;pointer-events:none;inset:7.5%;border-radius:50%;z-index:0} .centerpiece__sanctum::before{border:1px solid rgba(200,167,91,.26); box-shadow:0 0 0 7px rgba(200,167,91,.025),0 0 0 8px rgba(200,167,91,.10),0 28px 70px rgba(58,39,8,.14),inset 0 0 44px rgba(200,167,91,.055)} .centerpiece__sanctum::after{inset:12%;border:1px solid rgba(200,167,91,.14); background:radial-gradient(circle at 43% 34%,rgba(255,255,255,.16),transparent 28%),radial-gradient(circle,transparent 56%,rgba(200,167,91,.055) 57%,transparent 58%)} .centerpiece .cpiece{width:100%;z-index:2} .centerpiece .emblem{width:min(94%,560px);filter:drop-shadow(0 24px 30px rgba(73,49,10,.15))} .centerpiece .cpiece::before{width:min(96%,570px)} .centerpiece .e-r1{opacity:1} .centerpiece .e-r2{opacity:.76} .centerpiece .e-geo{opacity:.72} /* The engraved corners belonged to the old hall-sized centrepiece; at band scale they crowd the seal, so they rest. */ .centerpiece__corner{display:none;position:absolute;width:72px;height:72px;z-index:1;opacity:.62;pointer-events:none} .centerpiece__corner::before,.centerpiece__corner::after{content:"";position:absolute;background:linear-gradient(90deg,transparent,rgba(200,167,91,.72))} .centerpiece__corner::before{top:0;right:0;width:100%;height:1px} .centerpiece__corner::after{top:0;right:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(200,167,91,.72),transparent)} .centerpiece__corner--a{top:8%;right:8%} .centerpiece__corner--b{top:8%;left:8%;transform:scaleX(-1)} .centerpiece__corner--c{bottom:8%;right:8%;transform:scaleY(-1)} .centerpiece__corner--d{bottom:8%;left:8%;transform:scale(-1)} .centerpiece__plinth{position:absolute;bottom:7.2%;left:50%;width:34%;height:1px;z-index:3;transform:translateX(-50%); background:linear-gradient(90deg,transparent,rgba(200,167,91,.62),transparent);pointer-events:none} .centerpiece__plinth i{position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%) rotate(45deg); border:1px solid rgba(200,167,91,.78);background:var(--bg);box-shadow:0 0 0 4px rgba(200,167,91,.045)} @keyframes pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}} .vault{width:min(78%,460px);aspect-ratio:1;position:relative;filter:drop-shadow(0 30px 70px rgba(0,0,0,.6))} .vault__ring{animation:spin 90s linear infinite;transform-origin:center} .vault__ring--rev{animation:spin 120s linear infinite reverse;transform-origin:center} @keyframes spin{to{transform:rotate(360deg)}} .vault__float{animation:float 9s var(--ease) infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* Still, like everything else in the masthead now: the 8px bob showed up in the shake recordings as one more thing that would not hold its place. */ .scrolldown{position:absolute;bottom:8px;inset-inline:0;margin-inline:auto;width:22px;z-index:3;color:var(--acc);opacity:.7} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}} /* ═════════════════ 10 · SECTION HEADS ═════════════════ */ .sec-head{text-align:center;max-width:720px;margin:0 auto var(--sp6)} .sec-head h2{font-family:var(--font-head);font-weight:400;font-size:clamp(2rem,1.4rem+2.4vw,3rem);line-height:1.25;margin-top:12px} .sec-head p{color:var(--txt2);margin-top:16px} /* ═════════════════ 11 · CARDS ═════════════════ `background:var(--surf)` rather than the comp's literal gradient: the token already holds `linear-gradient(180deg,#1c1c1c,#151515)` in the Archive and the comp's own `#fbf8f2 → #f3ecdd` in the Manuscript. Same pixels, one source. */ .grid{display:grid;gap:28px} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .card{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:var(--sp6);margin-bottom:0;background:var(--surf); box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 -1px 0 rgba(0,0,0,.5) inset,0 12px 30px rgba(0,0,0,.45); transition:transform var(--base) var(--ease),box-shadow var(--base),background var(--base)} .card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none; background:linear-gradient(160deg,rgba(200,167,91,.5),rgba(200,167,91,.05) 30%,transparent 55%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;transition:opacity var(--base)} .card::after{content:"";position:absolute;top:0;inset-inline:0;height:40%;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)} .card:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 26px 60px rgba(0,0,0,.6),0 0 0 1px rgba(200,167,91,.25)} .card:hover::before{opacity:1} .card__ico{width:46px;height:46px;color:var(--acc);margin-bottom:var(--sp5);position:relative} .card h3{font-family:var(--font-head);font-weight:400;font-size:1.7rem;margin-bottom:10px;position:relative} .card p{color:var(--txt2);font-size:.98rem;position:relative} /* The desk's benefit card carries a body, so its length is the author's, not the layout's. The excerpt is already cut to ~150 characters on a word boundary in the view; this is the guard for what that cannot cut — a benefit written as one unbroken string — so the card can never grow taller than its row. */ .card__excerpt{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} .card__link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp5);color:var(--acc-text);font-family:var(--font-ui);font-size:14px;letter-spacing:.04em;position:relative} .card__link .arw{transition:transform var(--base) var(--ease)} .card:hover .card__link .arw{transform:translateX(-5px)} html[dir="ltr"] .card:hover .card__link .arw{transform:translateX(5px)} /* ── compact cards ── Four columns instead of three leaves each card ~240px wide at --maxw, and the full-size card (32px padding, 46px mark, 1.7rem head) has no room left inside that for an Arabic title. Everything here is class-only specificity so the responsive rules below — which drop .grid-4 to two columns and then one — keep winning on their own tiers without an !important anywhere. The 961–1100px band is the tight one: the container is fluid, so four columns there fall to ~200px. It steps down to three for that band only; the bound is closed at 961px so it cannot leak past the 960px two-column tier. */ .grid--compact{gap:20px} @media(min-width:961px) and (max-width:1100px){.grid--compact.grid-4{grid-template-columns:repeat(3,1fr)}} .grid--compact .card{padding:var(--sp5) 22px} .grid--compact .card__ico{width:36px;height:36px;margin-bottom:var(--sp4)} .grid--compact .card h3{font-size:1.32rem;margin-bottom:8px;line-height:1.45} .grid--compact .card p{font-size:.9rem;line-height:1.75} .grid--compact .card__link{margin-top:var(--sp4);font-size:13px} /* ═════════════════ 11b · «فائدةُ اليوم» ═════════════════ The desk's other two surfaces are POINTERS — a lesson, a sermon, each a title and a line of metadata. This one carries a passage of the archive itself, and a reader who cannot tell those apart at a glance has been told something false about the page. The separation is made with weight and material, never with more gold. Its column is wider, its ground is a shade warmer than the tiles beside it, and the ornament at the top is the same jewel mark the wing uses — the vocabulary is the comp's throughout. Restraint IS the luxury here: no second border colour, no heavier shadow, no glow. */ .desk__grid{grid-template-columns:1.35fr 1fr 1fr;align-items:stretch} .daily-wisdom{position:relative;display:flex;flex-direction:column; border-radius:var(--r-xl);padding:var(--sp7) var(--sp6) var(--sp6); /* The card's own ground, one step warmer than --surf, over the page. Both layers are opaque: a translucent card here would pick up the section's ornament through it. */ background:radial-gradient(120% 80% at 50% 0%,rgba(200,167,91,.10),transparent 46%),var(--surf); border:1px solid rgba(200,167,91,.22); box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 50px rgba(0,0,0,.28); transition:transform var(--base) var(--ease),box-shadow var(--base),border-color var(--base)} /* A hairline INSIDE the border, the way a plate is mounted inside its mat. */ .daily-wisdom::before{content:"";position:absolute;inset:5px;border-radius:calc(var(--r-xl) - 4px); border:1px solid rgba(200,167,91,.10);pointer-events:none} .daily-wisdom__ornament{display:flex;justify-content:center;margin-bottom:var(--sp5)} .daily-wisdom__ornament svg{width:34px;height:34px;color:var(--acc)} .daily-wisdom__head{display:flex;flex-direction:column;align-items:center;gap:6px; text-align:center;margin-bottom:var(--sp5)} .daily-wisdom__eyebrow{font-family:var(--font-ui);font-size:12px;letter-spacing:.18em; text-transform:uppercase;color:var(--acc-text)} .daily-wisdom__date{font-family:var(--font-ui);font-size:12px;letter-spacing:.06em;color:var(--mut)} /* Arabic carries its dignity in line-height and size, not in weight — the display face is already the voice. Shrinking it to fit more text is the one change that would make this look like a CMS tile again. */ /* The spaces around the `+` are load-bearing: inside clamp() and calc() the CSS grammar REQUIRES whitespace around + and -, and without it the whole declaration is a parse error the browser drops in silence — leaving the bare `h3` rule in site.css to size this instead. Nothing warns; the type is simply the wrong size. */ .daily-wisdom__title{font-family:var(--font-head);font-weight:400; font-size:clamp(1.45rem,1.15rem + .7vw,1.85rem);line-height:1.7;margin-bottom:12px} .daily-wisdom__text{color:var(--txt2);font-size:1rem;line-height:2; /* The server already cut this to ~150 characters on a word. The clamp is the guard for a benefit written as one unbroken string, which no word-cut can shorten. */ display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden; overflow-wrap:anywhere} /* With no heading of its own the passage IS the headline, and takes its presence. */ .daily-wisdom__text--lead{font-family:var(--font-head);color:var(--txt); font-size:clamp(1.2rem,1.05rem + .4vw,1.45rem);line-height:1.85;-webkit-line-clamp:6} /* margin-top:auto pins the footer to the bottom however short the passage is, so the three surfaces on this row keep one baseline for their actions. */ .daily-wisdom__foot{margin-top:auto;padding-top:var(--sp5);display:flex; flex-direction:column;gap:10px;align-items:center;text-align:center} .daily-wisdom__foot::before{content:"";width:64px;height:1px;margin-bottom:var(--sp4); background:linear-gradient(90deg,transparent,rgba(200,167,91,.45),transparent)} .daily-wisdom__source{font-family:var(--font-ui);font-size:12.5px;letter-spacing:.03em; color:var(--mut);line-height:1.7} .daily-wisdom__action{display:inline-flex;align-items:center;gap:8px;color:var(--acc-text); font-family:var(--font-ui);font-size:14px;letter-spacing:.04em} .daily-wisdom__action .arw{transition:transform var(--base) var(--ease)} /* ONE link, widened to the whole card. Not a wrapping around a heading and a footer: that hands a screen reader a single link whose name is the entire card, and it cannot be left as a bare href either or the card is unreachable by keyboard. This keeps the real, named link and lets the surface stand in for it. */ .daily-wisdom__action::after{content:"";position:absolute;inset:0;border-radius:inherit} .daily-wisdom:hover{transform:translateY(-4px);border-color:rgba(200,167,91,.38); box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 26px 62px rgba(0,0,0,.34)} .daily-wisdom:hover .daily-wisdom__action .arw{transform:translateX(-5px)} html[dir="ltr"] .daily-wisdom:hover .daily-wisdom__action .arw{transform:translateX(5px)} /* The ring belongs on the card, since the card is what the link covers. :has() draws it for the whole surface; the second rule is the fallback where :has() is not understood, and lands the ring on the link itself rather than nowhere. */ .daily-wisdom:has(.daily-wisdom__action:focus-visible){outline:2px solid var(--acc);outline-offset:4px} .daily-wisdom__action:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:4px} .daily-wisdom:has(.daily-wisdom__action:focus-visible) .daily-wisdom__action:focus-visible{outline:none} @media(prefers-reduced-motion:reduce){ .daily-wisdom,.daily-wisdom__action .arw{transition:none} .daily-wisdom:hover{transform:none} } /* ═════════════════ 12 · STATS ═════════════════ */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-block:1px solid var(--edge);padding-block:var(--sp6)} .stat{text-align:center} .stat__n{font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,1.6rem+3vw,4.2rem);line-height:1;color:var(--acc)} .stat__l{margin-top:10px;font-family:var(--font-ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)} /* ═════════════════ 13 · BOOK CARDS ═════════════════ */ .book{display:flex;flex-direction:column;gap:14px} .book__cover{aspect-ratio:2/3;border-radius:8px;border:1px solid rgba(200,167,91,.35);position:relative;overflow:hidden;box-shadow:0 14px 36px rgba(0,0,0,.55);background:linear-gradient(150deg,#20201c,#111110);transition:transform var(--base) var(--ease),box-shadow var(--base)} .book:hover .book__cover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(0,0,0,.65),var(--gold-glow)} .book__cover::before{content:"";position:absolute;inset:0;background:radial-gradient(130px 130px at 70% 18%,rgba(200,167,91,.20),transparent 60%)} .book__cover::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:linear-gradient(var(--gold-antique),var(--gold-champagne),var(--gold-antique));opacity:.75} .book__seal{position:absolute;inset-inline:0;bottom:22px;text-align:center;font-family:var(--font-head);color:var(--gold-champagne);font-size:1.15rem;padding-inline:14px} .book__t{font-family:var(--font-head);font-size:1.2rem;line-height:1.4} .book__m{color:var(--mut);font-family:var(--font-ui);font-size:12.5px;display:flex;gap:10px;align-items:center} .book__m .dot{width:3px;height:3px;background:var(--acc);border-radius:50%} /* ═════════════════ 14 · FEATURED AUTHOR ═════════════════ */ .author{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--sp7);align-items:center;position:relative} .author__glow{position:absolute;inset-inline-start:-6%;top:50%;transform:translateY(-50%);width:420px;height:420px;background:radial-gradient(circle,rgba(200,167,91,.14),transparent 62%);filter:blur(6px);z-index:0;pointer-events:none} /* The comp frames a SILHOUETTE here and captions it «قيد الإعداد / to come». That caption was true of the comp and is false here — the photograph exists, as the --portrait token — so the comp's museum frame keeps the real portrait. `width:min(100%,320px)` where the comp writes `max-width:320px`: the frame holds only absolutely-positioned children, so with `margin-inline:auto` suppressing the grid stretch an `auto` width had nothing to resolve against and the frame measured 2x3px. Same cap, same centring, a definite width. */ .author__portrait{position:relative;z-index:1;aspect-ratio:4/5;width:min(100%,320px);margin-inline:auto;border-radius:6px;overflow:hidden; background:linear-gradient(160deg,#201f1a,#131210); border:1px solid rgba(200,167,91,.30); box-shadow:0 0 0 10px rgba(0,0,0,.28),0 0 0 11px rgba(200,167,91,.10),0 30px 70px rgba(0,0,0,.6)} .portrait__fig{position:absolute;inset:0;width:100%;height:100%;color:rgba(210,185,120,.5)} .portrait__c{position:absolute;width:16px;height:16px;border:1px solid rgba(200,167,91,.5);z-index:2} .portrait__c.tl{top:10px;inset-inline-start:10px;border-inline-end:0;border-block-end:0} .portrait__c.br{bottom:38px;inset-inline-end:10px;border-inline-start:0;border-block-start:0} .portrait__cap{position:absolute;bottom:0;inset-inline:0;padding:9px;text-align:center;font-family:var(--font-ui);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt2);background:linear-gradient(0deg,rgba(0,0,0,.62),transparent);z-index:2} .author__body{position:relative;z-index:1} .author__body h2{font-family:var(--font-head);font-weight:400;font-size:clamp(2rem,1.4rem+2vw,2.8rem);margin:14px 0 18px} .author__body p{color:var(--txt2);margin-bottom:var(--sp6)} /* ═════════════════ 15 · PULL QUOTE ═════════════════ */ .quote-wrap{background:linear-gradient(180deg,#0c0c0c,#070707);border-block:1px solid var(--edge)} .quote{max-width:900px;margin-inline:auto;text-align:center;position:relative;padding-inline:40px} .quote .mark{font-family:var(--font-display);font-size:5rem;color:var(--acc);opacity:.35;line-height:.7} .quote blockquote{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,1.1rem+2vw,2.6rem);line-height:1.6;margin:12px 0 var(--sp6)} .quote cite{font-style:normal;color:var(--mut);font-family:var(--font-ui);font-size:14px;letter-spacing:.1em} .quote span.c{position:absolute;width:22px;height:22px;border:1px solid rgba(200,167,91,.5)} .quote span.c.tl{top:-8px;inset-inline-start:-8px;border-inline-end:0;border-block-end:0} .quote span.c.br{bottom:-8px;inset-inline-end:-8px;border-inline-start:0;border-block-start:0} /* ═════════════════ 16 · CTA BAND ═════════════════ */ .band{text-align:center} section.band{padding-block:clamp(42px,5.5vw,72px)} .band h2{font-family:var(--font-head);font-weight:400;font-size:clamp(2rem,1.4rem+2.4vw,3.2rem);margin-bottom:var(--sp5)} .band p{color:var(--txt2);max-width:560px;margin:0 auto var(--sp7)} /* ═════════════════ 17 · FOOTER ═════════════════ `background:var(--foot)` for the same reason `.card` uses `--surf`: the token already holds the comp's own two footer gradients, one per world. */ .footer{position:relative;z-index:1;border-top:1px solid rgba(200,167,91,.25);background:var(--foot);overflow:hidden} .footer__seal{text-align:center;padding-top:var(--sp9)} .footer__seal .emb{width:70px;height:70px;margin:0 auto var(--sp5);animation:sealSpin 70s linear infinite;transform-origin:center;filter:var(--emb)} @keyframes sealSpin{to{transform:rotate(360deg)}} .footer__calli{font-family:var(--font-display);font-size:clamp(2.2rem,1.4rem+3vw,3.6rem);line-height:1.4;background:var(--foil);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .footer__quote{color:var(--txt2);max-width:600px;margin:var(--sp5) auto 0;font-family:var(--font-head);font-size:1.15rem} .footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-top:var(--sp9)} .footer h4{font-family:var(--font-ui);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc-text);margin-bottom:18px} /* the comp's own `padding-block:6px` leaves a 37px target. Real padding, not an ::after overlay: these links are full-column blocks and an overlay taller than the link would take the neighbouring link's taps. */ .footer a{display:block;color:var(--txt2);font-size:14px;padding-block:10px;min-height:44px;transition:color var(--base)} .footer a:hover{color:var(--acc-text)} .footer__brand .brand__name{font-size:30px} .footer__brand p{color:var(--mut);font-size:13.5px;margin-top:14px;max-width:280px} .footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:var(--sp8);padding-block:var(--sp5);border-top:1px solid rgba(255,255,255,.06);color:var(--mut);font-family:var(--font-ui);font-size:12.5px} /* ═════════════════ 18 · SPOTLIGHT SEARCH ═════════════════ The comp's own panel. Its children are `.search__*`, site.css's are `.scrim/.box/.fld/.res/.it`, so only the `.search` shell itself is shared and this file — loading second — owns it here. */ .search{position:fixed;inset:0;z-index:5500;display:grid;place-items:start center;padding-top:14vh;opacity:0;visibility:hidden;transition:opacity var(--base) var(--ease),visibility var(--base)} .search.open{opacity:1;visibility:visible} .search__scrim{position:absolute;inset:0;background:rgba(4,4,4,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .search__box{position:relative;width:min(680px,92vw);background:linear-gradient(180deg,#161616,#101010);border:1px solid var(--glass-bd);border-radius:var(--r-xl);box-shadow:0 40px 120px rgba(0,0,0,.7),var(--gold-glow);transform:translateY(-14px) scale(.98);transition:transform var(--slow) var(--ease-in);overflow:hidden} .search.open .search__box{transform:none} .search__field{display:flex;align-items:center;gap:16px;padding:22px 26px;border-bottom:1px solid var(--edge)} .search__field svg{width:24px;height:24px;color:var(--acc);flex:none} .search__field input{flex:1;background:none;border:none;outline:none;color:var(--txt);font-family:var(--font-body);font-size:1.35rem;min-height:46px} .search__field input::placeholder{color:var(--mut)} .search__field kbd{font-family:var(--font-ui);font-size:11px;color:var(--mut);border:1px solid var(--edge);border-radius:6px;padding:3px 8px} .search__cats{display:flex;gap:8px;flex-wrap:wrap;padding:16px 26px 6px} .search__cats span{font-family:var(--font-ui);font-size:12.5px;color:var(--txt2);border:1px solid var(--edge);border-radius:999px;padding:6px 14px;cursor:pointer;transition:all var(--base)} .search__cats span:hover,.search__cats span.on{border-color:var(--acc);color:var(--acc-text);background:rgba(200,167,91,.08)} .search__results{padding:10px 14px 20px;max-height:44vh;overflow:auto} .search__group{font-family:var(--font-ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);padding:14px 12px 6px} .search__item{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;transition:background var(--base)} .search__item .ic{width:38px;height:38px;border-radius:9px;background:linear-gradient(150deg,#232320,#161512);border:1px solid rgba(200,167,91,.3);display:grid;place-items:center;color:var(--acc);font-family:var(--font-head);flex:none} .search__item b{font-family:var(--font-head);font-weight:400;font-size:1.05rem} .search__item small{display:block;color:var(--mut);font-family:var(--font-ui);font-size:12px} /* ═════════════════ 19 · REVEAL ═════════════════ */ .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--reveal) var(--ease-in),transform var(--reveal) var(--ease-in)} .reveal.in{opacity:1;transform:none} .hero .reveal{opacity:0;transform:translateY(20px);transition:opacity 900ms var(--ease-in),transform 900ms var(--ease-in)} body.revealed .hero .reveal{opacity:1;transform:none} body.revealed .navwrap{animation:navIn 800ms var(--ease-in) both} @keyframes navIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}} /* ═════════════════ 20 · NEUTRALISERS ═════════════════ Three site.css rules that out-specify a bare class here and would otherwise damage the comp's chrome. Nothing below invents design; each one restores what home.html already says. a · `.nav a::after` — site.css's hover underline, inherited by the brand and the curator door. Neither is positioned, so it resolved against the sticky `.navwrap` and drew a gold line across the whole header on hover. b · `.nav a` also hands them `color` and `padding-block`; the values happen to match, so only the pseudo needs removing. c · `.tl` is site.css's biography timeline (padding-inline-start:24px, margin-inline-start:8px, max-width:640px). Here `.tl` is a corner ornament: measured, the 16px corner rendered 25px wide. */ .nav .brand::after{content:none} .nav .nav__tools a::after,.nav .nav__tools button::after,.nav .nav__burger::after{ /* the transparent 44px touch expansion, and nothing else: no line, no glow */ content:"";position:absolute;top:50%;left:50%;inset-inline:auto;bottom:auto;transform:translate(-50%,-50%); width:100%;height:100%;min-width:44px;min-height:44px;background:none;box-shadow:none;border-radius:50%;transition:none} .portrait__c,.quote span.c{padding:0;margin:0;max-width:none} /* site.css reserves the pocket tier's thumb-nav strip on every page. This shell does not carry `.jnav` — the comp's own pocket control is the burger in the pill — so the reservation would leave an 86px band of ground below the footer. */ @media(max-width:767px){body[data-page="entrance"]{padding-bottom:calc(86px + env(safe-area-inset-bottom))}} /* ═════════════════ 21 · RESPONSIVE (the comp's own breakpoints) ═════════════════ */ @media(max-width:960px){ /* THE SAME SCENE, POCKET-SIZED — not a different page. The seal shrinks and keeps the band's left corner, the slide text stays start-aligned exactly as on the wide band, and the rail keeps its flanking arrows and stretching segments. */ /* text-align restated because site.css centres .hero at this tier; the band reads like the desktop scene, start-aligned. */ .hero{min-height:auto;padding-block:16px 12px;gap:8px;text-align:start} .hero__mini{margin-inline:auto}.hero__sub{margin-inline:auto}.hero__cta{justify-content:center} /* The pocket keeps the WEB COMPOSITION: the seal overlays the band's left, smaller, and the slide text reserves its lane — one scene on every screen. */ .centerpiece{inset-inline-end:var(--mobile-gutter,16px);width:min(33vw,170px); inset-block:0 40px} .hero-updates__viewport,.hero-updates__crown{padding-inline-end:calc(min(33vw,170px) + 14px)} .grid-3,.grid-4{grid-template-columns:1fr 1fr} /* Two columns cannot hold a feature and a pair. The benefit takes the full width as the row's header and the two pointers sit under it, which is the same hierarchy the desktop row states sideways. */ .desk__grid{grid-template-columns:1fr 1fr} .desk__grid .daily-wisdom{grid-column:1 / -1} .stats{grid-template-columns:1fr 1fr;gap:40px 24px} .author{grid-template-columns:1fr;gap:var(--sp7);text-align:center} .author__glow{inset-inline-start:50%;transform:translate(-50%,-50%)} .footer__grid{grid-template-columns:1fr 1fr} .nav__links{display:none} .nav__burger{display:block} /* with the link row gone the comp's flex row leaves the toolbar sitting against the wordmark; `.nav__links{margin-inline:auto}` was what pushed it to the far end, so the toolbar takes that job */ .nav__tools{margin-inline-start:auto} } @media(max-width:1320px) and (min-width:961px){ .nav__inner{height:82px;padding-inline:clamp(16px,2.3vw,34px);gap:16px} .nav .brand__emblem{width:48px;height:48px} .brand__name{font-size:27px} .brand__tagline{display:none} .nav__links{gap:clamp(14px,1.5vw,24px);font-size:14px} } /* ── THE POCKET PILL ──────────────────────────────────────────────────── home.html's pill does not fit a phone, and this is not a matter of taste. Measured on the comp at 375px: the brand is 187px, the five tools 212px, and the pill offers 251px — so the toolbar rendered at x = −106, straddling the wordmark, and the document scrolled 818px wide inside a 375px window. The comp hides the symptom with `body{overflow-x:hidden}`; the geometry is still wrong, and it stays wrong up to about 715px. The repair is this site's OWN answer at this tier, not a new one: · the world switch and the language menu move into the drawer, which already carries both (#wSegM, #langBtnM) — site.css makes exactly this call for #worldBtn and #langBtn at ≤560px; · the wordmark goes short, as it does in every other room at this tier; · the pill drops the `.container` gutter it has no use for inside a shape that is already inset 20px from both edges. Boundary at 767px: the project's responsive contract is Pocket < 768, and the audit measures that line. */ @media(max-width:767px){ .nav__inner{height:72px} .navwrap .nav{padding-inline:0} .nav__inner{padding-inline:14px;gap:10px} .nav__tools{margin-inline-start:auto;gap:4px} #themeBtn,#lang{display:none} .nav .brand__name .nm-full{display:none} .nav .brand__name .nm-short{display:inline} .brand__tagline{display:none} .nav .brand__emblem{width:48px;height:48px} .centerpiece__sanctum{width:100%} .centerpiece__corner{display:none} .centerpiece__sanctum::before{inset:8.5%} .centerpiece__sanctum::after{inset:13%} .centerpiece__plinth{bottom:6.5%;width:30%} } /* The entrance hall in the hand: ceremony first, density second, no dead air. */ @media(max-width:767px){ section{padding-block:42px} .container{padding-inline:var(--mobile-gutter,16px)} .hero{padding-block:12px 10px;gap:6px} .centerpiece__sanctum{width:100%} .hero-updates{padding:0;box-shadow:none} .hero-updates__viewport{min-height:216px} .hero-update h2{line-height:1.2;margin-block:11px 9px} .hero-update p{font-size:14px;line-height:1.7;-webkit-line-clamp:2} .hero-update__meta{margin:13px 0 18px} .hero-updates__controls{padding-top:12px} .scrolldown{display:none} .sec-head{margin-bottom:24px}.sec-head h2{font-size:clamp(1.8rem,8vw,2.45rem)} .grid{gap:12px}.card{padding:20px 18px}.card__ico{width:38px;height:38px;margin-bottom:12px} /* .grid--compact .card outranks the bare .card above (two classes to one), so this tier has to restate itself for it or the pocket cards keep desktop padding. One column wide, the compact head/body sizes are no longer wanted. */ .grid--compact{gap:12px} .grid--compact .card{padding:20px 18px} .grid--compact .card__ico{width:38px;height:38px;margin-bottom:12px} .grid--compact .card h3{font-size:1.7rem;margin-bottom:10px} .grid--compact .card p{font-size:.98rem} .stats{padding-block:22px;gap:22px 12px} .author{gap:26px}.author__portrait{width:min(76vw,270px)} .band p{margin-bottom:24px} .footer__seal{padding-top:46px}.footer__grid{grid-template-columns:1fr 1fr;gap:24px 18px;margin-top:38px}.footer__brand{grid-column:1/-1;text-align:center}.footer__bottom{margin-top:30px;text-align:center;justify-content:center} } @media(max-width:390px){ .hero{padding-top:10px}.centerpiece{width:min(38vw,135px)} .hero-updates__viewport{min-height:216px}.hero-updates{padding-inline:0} .footer__grid{grid-template-columns:1fr}.footer__brand{grid-column:auto} } @media(max-width:640px){ .hero-updates{padding:0;width:100%} .hero-updates__viewport{min-height:230px} /* The title shares the band with the seal's lane now, so it sizes to the column it actually has. */ .hero-update h2{font-size:clamp(1.35rem,6vw,1.85rem)} .hero-updates__controls{gap:8px} } @media(prefers-reduced-motion:reduce){.hero-updates::after,.hero-updates__crown span,.hero-updates__progress i{animation:none!important}.hero-update{transition:none}} @media(max-width:560px){ .grid-3,.grid-4{grid-template-columns:1fr} /* Its own composition rather than the desktop card squeezed: the ornament and the centred head are what survive, and the padding comes in to keep the Arabic measure comfortable instead of running the full width of a phone. */ .desk__grid{grid-template-columns:1fr} .daily-wisdom{padding:30px 24px 26px;border-radius:18px} .daily-wisdom::before{inset:4px;border-radius:15px} .daily-wisdom__ornament{margin-bottom:18px} .daily-wisdom__ornament svg{width:30px;height:30px} .daily-wisdom__head{margin-bottom:18px} .daily-wisdom__text{line-height:1.95} .daily-wisdom__foot{padding-top:20px} .daily-wisdom__foot::before{margin-bottom:16px} .stats{grid-template-columns:1fr 1fr} #dust{display:none} .brand__name{font-size:17px} /* the English pair is named explicitly: `html[data-lang="en"] .brand__sub` above out-specifies a bare `.brand__sub`, so without it the 128px Latin subtitle survived into the 320px pill and pushed the burger 27px past the viewport */ .brand__sub,html[data-lang="en"] .brand__sub{display:none} .brand__name::after{inset-inline:4% 4%;bottom:-5px} } @media(prefers-reduced-motion:reduce){ *{animation:none!important} .reveal,.hero .reveal{opacity:1!important;transform:none!important;transition:none!important} /* the overlay is dismissed by script; a visitor who asked for less motion never sees it at all, and if the script never runs it cannot trap them */ .intro{display:none} html{scroll-behavior:auto} } /* ═══════════════════════════════════════════════════════════════════════ ☀ THE MANUSCRIPT (day) — warm royal manuscript, NOT an inversion. Translated from the comp's `html[data-theme="light"]` to the world switch this site actually sets. Only the rules that change MORE than a token are here; everything else already follows --bg/--txt/--txt2/--mut/--edge/--acc/ --surf/--foot above. ═══════════════════════════════════════════════════════════════════════ */ .theme-toggle .i-sun{display:none} html[data-world="manuscript"] .theme-toggle .i-moon{display:none} html[data-world="manuscript"] .theme-toggle .i-sun{display:block} html[data-world="manuscript"] .centerpiece__halo{background:radial-gradient(circle,rgba(255,252,241,.94) 0,rgba(216,189,119,.17) 30%,rgba(166,132,61,.055) 53%,transparent 72%)} html[data-world="manuscript"] .centerpiece__sanctum::before{border-color:rgba(145,108,37,.36); box-shadow:0 0 0 7px rgba(166,132,61,.025),0 0 0 8px rgba(145,108,37,.13),0 30px 66px rgba(105,77,27,.13),inset 0 0 48px rgba(166,132,61,.07)} html[data-world="manuscript"] .centerpiece__sanctum::after{border-color:rgba(145,108,37,.19)} html[data-world="manuscript"] .centerpiece .emblem{filter:drop-shadow(0 25px 30px rgba(92,65,19,.18))} /* atmosphere → paper, not marble */ html[data-world="manuscript"] .atmos .marble{background: radial-gradient(1400px 900px at 50% -10%,#faf7f1,transparent 60%), radial-gradient(1000px 800px at 100% 8%,#f6f0e4,transparent 55%), radial-gradient(1200px 900px at 0% 100%,#f1ebdd,transparent 60%),#f1ebdd} html[data-world="manuscript"] .atmos .grain{opacity:.06;mix-blend-mode:multiply} html[data-world="manuscript"] .atmos .light{background:radial-gradient(760px 520px at 50% 0%,rgba(156,122,52,.10),transparent 62%)} html[data-world="manuscript"] .atmos .vignette{background:radial-gradient(130% 95% at 50% 22%,transparent 55%,rgba(120,96,40,.10) 100%)} /* chrome. --glass and --glass-bd have no semantic twin, so the comp's own light values are written out here. */ html[data-world="manuscript"] .topbar{border-bottom-color:var(--edge)} html[data-world="manuscript"] .navwrap .nav{background:rgba(251,248,242,.74);border-color:rgba(156,122,52,.16);box-shadow:0 10px 30px rgba(90,70,30,.10)} html[data-world="manuscript"] .navwrap .nav.scrolled{background:rgba(250,246,236,.85);border-color:rgba(156,122,52,.22);box-shadow:0 14px 40px rgba(90,70,30,.14)} html[data-world="manuscript"] .icobtn{border-color:rgba(120,96,40,.18)} html[data-world="manuscript"] .lang__menu{background:rgba(251,248,242,.74);border-color:rgba(156,122,52,.22);box-shadow:0 12px 40px rgba(90,70,30,.16)} html[data-world="manuscript"] .nav__burger{color:var(--acc)} /* museum-archive cards on paper */ html[data-world="manuscript"] .card{box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 12px 30px rgba(90,70,30,.10)} html[data-world="manuscript"] .card::after{background:linear-gradient(180deg,rgba(255,255,255,.4),transparent)} html[data-world="manuscript"] .card:hover{box-shadow:0 20px 44px rgba(90,70,30,.16),0 0 0 1px rgba(156,122,52,.32)} html[data-world="manuscript"] .hero__sub{color:#5a4f3c} /* books on a light shelf (parchment covers) */ html[data-world="manuscript"] .book__cover{background:linear-gradient(150deg,#efe4cf,#e4d6b8);box-shadow:0 14px 30px rgba(90,70,30,.20)} html[data-world="manuscript"] .book__cover::before{background:radial-gradient(130px 130px at 70% 18%,rgba(156,122,52,.18),transparent 60%)} /* the comp leaves the seal champagne on parchment; site.css already made this exact call for its own `.book .sl`, and the same reasoning applies here */ html[data-world="manuscript"] .book__seal{color:#6a5220} html[data-world="manuscript"] .author__portrait{background:linear-gradient(160deg,#f3ecdd,#e6dcc4);border-color:rgba(156,122,52,.35);box-shadow:0 0 0 10px rgba(255,253,249,.75),0 0 0 11px rgba(156,122,52,.16),0 24px 50px rgba(90,70,30,.18)} html[data-world="manuscript"] .portrait__fig{color:rgba(92,68,36,.44)} html[data-world="manuscript"] .portrait__c{border-color:rgba(156,122,52,.5)} html[data-world="manuscript"] .portrait__cap{color:#6b5f49;background:linear-gradient(0deg,rgba(235,226,208,.82),transparent)} html[data-world="manuscript"] .quote-wrap{background:linear-gradient(180deg,#f6efe1,#efe6d4)} /* spotlight search on paper */ html[data-world="manuscript"] .search__scrim{background:rgba(60,48,24,.34)} html[data-world="manuscript"] .search__box{background:linear-gradient(180deg,#fbf8f2,#f1ead9);border-color:rgba(156,122,52,.3)} html[data-world="manuscript"] .search__field input{color:#2d2418} html[data-world="manuscript"] .search__item .ic{background:linear-gradient(150deg,#f0e6d1,#e6d8bd);color:#8c6b2e} /* In the Manuscript the footer is paper too — aged parchment, one shade deeper than the page, so it closes the sheet instead of contradicting it. */ html[data-world="manuscript"] .footer{border-top-color:rgba(156,122,52,.5)} html[data-world="manuscript"] .footer a,html[data-world="manuscript"] .footer__brand p,html[data-world="manuscript"] .footer__quote{color:#5a4f3c} html[data-world="manuscript"] .footer h4{color:var(--gold-antique)} html[data-world="manuscript"] .footer a:hover{color:#7a5f28} html[data-world="manuscript"] .footer__bottom{color:#8a7f6b;border-top-color:rgba(90,70,30,.18)} html[data-world="manuscript"] .footer .divider{color:var(--gold-antique)} /* the calligraphic wordmark becomes a blind emboss on paper, like the nav */ html[data-world="manuscript"] .footer__calli{background:none;-webkit-text-fill-color:#6a5e49;color:#6a5e49; text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 1px rgba(70,54,26,.12)} /* ══ THE BOOKS — a section title set as a nameplate ═══════════════════════════ Deliberately NOT a bigger .eyebrow. That rule is Latin-shaped — uppercase and .34em of tracking — and tracking is the one thing that must never touch Arabic: it severs the cursive joins and the word stops being a word. So this is its own treatment, in Aref Ruqaa (--font-display), the face the site keeps for its most formal marks. At this size the stroke contrast is the whole effect, so nothing is layered over it but light. The foil follows the house pattern exactly (.footer__calli, .prayer-intro h1): a gradient clipped to the glyphs in the archive world, and flat engraved ink in the manuscript world, where gold gradient on cream reads as a smudge. */ .sec-head--books .books-title{ font-family:var(--font-display); font-size:clamp(2.9rem,1.7rem+4.6vw,5.2rem); font-weight:400; line-height:1.08; letter-spacing:0; padding-block:.14em; /* Aref Ruqaa's ascenders overflow a tight box */ background:var(--foil); background-size:230% 100%; background-position:0% 50%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--acc-text); /* fallback where background-clip:text is unsupported */ text-shadow:0 15px 38px rgba(0,0,0,.13); animation:booksFoil 11s ease-in-out 1.4s infinite; } html[data-world="manuscript"] .sec-head--books .books-title{ background:none; -webkit-text-fill-color:#5e4a25; color:#5e4a25; text-shadow:0 1px #fff,0 12px 28px rgba(80,57,20,.12); animation:none; } /* The caption keeps its words but yields the hierarchy — the nameplate is the title now. Scoped to this section so every other .sec-head h2 is untouched. */ .sec-head--books h2{ font-size:clamp(1rem,.72rem+.9vw,1.35rem); color:var(--txt2); margin-top:6px; } /* One slow pass of light across the leaf, not a loop of shine: 11s with a long dwell at either end, so it reads as catching the light rather than animating. */ @keyframes booksFoil{0%,62%{background-position:0% 50%}84%,100%{background-position:100% 50%}} /* The nameplate settles a beat after the rest of the head. Transform only — no opacity — so if the reveal observer never fires the title is still visible. */ .sec-head--books.reveal .books-title{transform:translateY(12px);transition:transform 950ms var(--paper-slow) 120ms} .sec-head--books.reveal.in .books-title{transform:none} @media(prefers-reduced-motion:reduce){ .sec-head--books .books-title{animation:none;transition:none;transform:none} }