/* ══════════════════════════════════════════════════════════════════════════
ANUPET ACADEMY — anupet.academy
Light-first, English-first. Ink on paper, with full-bleed dark reserved for
the photographic sections. Inter Tight carries the headings and Instrument
Serif is the one accent voice; Azonix from the brand kit is kept for the
small lockup only, where its weight reads as a mark rather than as shouting.
Palette from the identity: #00428d · #003366 · #0f52ba · #ff6b35 · #dfdfdf
Layout uses CSS logical properties, so one ruleset serves RTL and LTR.
══════════════════════════════════════════════════════════════════════════ */
@font-face{
font-family:'beIN';
src:url('../fonts/bein.woff2') format('woff2');
font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
font-family:'Azonix';
src:url('../fonts/azonix.woff2') format('woff2');
font-weight:400;font-style:normal;font-display:swap;
}
:root{
color-scheme: light;
/* brand */
--navy: #00428d;
--deep: #003366;
--sapphire: #0f52ba;
--azure: #1466e0;
--sky: #58b0f5;
--orange: #ff6b35;
--orange-dk: #cc4a12;
/* paper */
--bg: #f1f3f7; --bg-rgb: 241,243,247;
--bg2: #ffffff;
--bg3: #e7eaf1;
--ink: #081426; --ink-rgb: 8,20,38;
--mut: #566880; --mut-rgb: 86,104,128;
--line: rgba(8,20,38,.10);
--line2: rgba(8,20,38,.18);
--shadow: 0 16px 40px rgba(8,20,38,.08);
--shadow2: 0 34px 90px rgba(8,20,38,.15);
/* (public-ux · forms) The form focus colour, as a token rather than a
literal --navy: #00428d is dark blue on a #04070e field in dark mode,
which is a focus ring nobody can see. One name, two values. */
--focus: #00428d;
--focus-ring: rgba(0,66,141,.15);
--dark: #04070e;
/* type */
--ff-x: 'Azonix','Inter Tight',sans-serif; /* brand lockup only */
--ff-s: 'Instrument Serif',Georgia,serif; /* accent voice */
--ff-a: 'IBM Plex Sans Arabic',sans-serif; /* Arabic headings */
--ff-d: 'Inter Tight','IBM Plex Sans Arabic',sans-serif; /* headings */
--ff-b: 'Inter','IBM Plex Sans Arabic',sans-serif; /* body */
--ff-m: 'Inter Tight',ui-monospace,monospace; /* labels & numbers */
--ease: cubic-bezier(.16,1,.3,1);
--ease2: cubic-bezier(.4,0,.2,1);
--pad: clamp(18px,3.6vw,60px);
--maxw: 1760px;
}
/* dark surfaces — scoped token flip rather than a second stylesheet */
.on-dark{
--bg:#04070e; --bg-rgb:4,7,14; --bg2:#080f1c; --bg3:#0d1828;
--ink:#eaf2fc; --ink-rgb:234,242,252; --mut:#93aac9;
--line:rgba(234,242,252,.11); --line2:rgba(234,242,252,.2);
--azure:#58b0f5;
--focus:#58b0f5; --focus-ring:rgba(88,176,245,.22);
--shadow:0 16px 40px rgba(0,0,0,.5); --shadow2:0 34px 90px rgba(0,0,0,.62);
color-scheme:dark; background:var(--bg); color:var(--ink);
}
html[data-theme="dark"]{
color-scheme:dark;
--bg:#04070e; --bg-rgb:4,7,14; --bg2:#080f1c; --bg3:#0d1828;
--ink:#eaf2fc; --ink-rgb:234,242,252; --mut:#93aac9;
--line:rgba(234,242,252,.11); --line2:rgba(234,242,252,.2);
--azure:#58b0f5;
--focus:#58b0f5; --focus-ring:rgba(88,176,245,.22);
--shadow:0 16px 40px rgba(0,0,0,.5); --shadow2:0 34px 90px rgba(0,0,0,.62);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* `scrollbar-gutter` pairs with the scroll lock further down: that rule puts
`overflow:hidden` on HTML, which on a classic-scrollbar platform (Windows and
Linux Chrome/Firefox) takes the ~15px scrollbar away for as long as the drawer
is open, and the page behind it jumps sideways by that much and back again on
close. Reserving the gutter in both states costs nothing where scrollbars are
already overlays, which is every phone. */
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:auto;scrollbar-gutter:stable}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
background:var(--bg); color:var(--ink);
font-family:var(--ff-b); font-size:16px; line-height:1.72;
overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
transition:background .5s var(--ease2),color .5s var(--ease2);
}
body.is-locked{overflow:hidden}
/* (owner · phone) The scroll lock above cost the visitor the way out of the
menu, and on a phone that is the whole menu. `html` is not `overflow:visible`
here — it is `overflow-x:clip` — so the body's overflow does NOT propagate to
the viewport the way it does on a default document. It makes BODY a scroll
container of its own, at scroll offset 0, and `.nav`'s `position:sticky`
then sticks to that instead of to the viewport. Measured on a 375x812 phone
scrolled to y 1400 with the drawer open: the bar sat at y -1366.4, i.e. the
burger — which is the close X, the only control that dismisses the drawer on
a touch screen — was a thousand pixels above the top of the screen. The
screenshot is a full black sheet of links with no header on it at all.
The lock belongs one level up, on the element that actually owns the
viewport's scrollport. With it there the body goes back to being ordinary
flow (`clip`, so it still cannot scroll on its own but is not a scroll
container either) and the sticky bar has the viewport to stick to again:
measured after, nav at y 0, `elementFromPoint(35,33)` returns the burger,
no content shift behind the drawer, and a 400px wheel still moves scrollY
not at all.
The `body.is-locked` rule above is deliberately left as it was rather than
replaced: where `:has()` is not supported both of these drop and the lock is
exactly the one that shipped, which is the failure this replaces — not a
page that scrolls away behind an open menu. */
html:has(body.is-locked){overflow:hidden}
html:has(body.is-locked) body.is-locked{overflow:clip}
img,video{max-width:100%;display:block}
svg{display:block}
.ico{width:1em;height:1em;flex:0 0 auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--navy);color:#fff}
:where(h1,h2,h3,h4){font-family:var(--ff-d);font-weight:600;line-height:1.1;letter-spacing:-.022em}
[lang="ar"] :where(h1,h2,h3,h4){font-family:var(--ff-a);font-weight:600;line-height:1.4;letter-spacing:-.005em}
/* Azonix has caps only — it is used for display strings, never for body copy */
.azo{font-family:var(--ff-x);text-transform:uppercase;letter-spacing:.02em;font-weight:400}
.ser{font-family:var(--ff-s);font-style:italic;font-weight:400;letter-spacing:-.012em}
/* ═════════════════════════════════════════════════════════ primitives ══ */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap--tight{max-width:1300px}
.sect{position:relative;padding-block:clamp(66px,6.2vw,104px)}
.sect--band{background:var(--bg2);border-block:1px solid var(--line)}
/* Off-screen but readable by assistive tech. The identity band needs it: its
artwork carries baked English lettering, so the band's name has to be a real
bilingual element the language toggle can swap, not an aria-label attribute
(the toggle rewrites innerHTML and never touches attributes). */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0}
.eyebrow{font-family:var(--ff-m);font-weight:500;font-size:11.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--azure);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:'';width:34px;height:2px;background:currentColor;opacity:.6;border-radius:2px}
[lang="ar"] .eyebrow{font-family:var(--ff-b);font-weight:700;letter-spacing:.04em;font-size:13.5px}
.h-hero{font-size:clamp(2.2rem,5vw,4.6rem)}
.h-xl {font-size:clamp(1.85rem,3.4vw,3.2rem)}
.h-lg {font-size:clamp(1.65rem,2.7vw,2.5rem)}
.h-md, .page__cms h2{font-size:clamp(1.2rem,1.6vw,1.6rem)}
.lead{color:var(--mut);font-size:clamp(.99rem,1vw,1.1rem);line-height:1.8}
.muted{color:var(--mut)}
/* a heading that runs the full width with its note pushed to the far edge */
.spread{display:flex;align-items:flex-end;justify-content:space-between;
gap:clamp(22px,4vw,100px);flex-wrap:wrap}
.spread__side{max-width:54ch;color:var(--mut);font-size:1rem;line-height:1.8}
/* (D-054) The orphan `.shiny` colour utility and its unused `@keyframes shine`
that used to sit here were deleted: neither had a single user anywhere in
the repo, and the name collided with the headline sweep this round adds.
One `.shiny`, one `@keyframes shine` — both in the hero block below. */
.glass{position:relative;border-radius:22px;background:rgba(255,255,255,.66);
backdrop-filter:blur(16px) saturate(155%);-webkit-backdrop-filter:blur(16px) saturate(155%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),var(--shadow)}
.on-dark .glass{background:rgba(255,255,255,.05);
box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 20px 54px rgba(0,0,0,.5)}
/* ═══════════════════════════════════════════════════════════ buttons ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
padding:14px 26px;border-radius:999px;font-weight:600;font-size:.96rem;position:relative;
overflow:hidden;
transition:transform .4s var(--ease),scale .4s var(--ease),background .3s,box-shadow .4s,color .3s}
.btn .ico{width:18px;height:18px;transition:transform .4s var(--ease)}
[dir="rtl"] .btn .ico{transform:scaleX(-1)}
.btn:hover .ico{transform:translateX(5px)}
[dir="rtl"] .btn:hover .ico{transform:scaleX(-1) translateX(5px)}
/* D-036: buttons never move on hover — press feedback is the only motion
left, a plain scale that reverses the instant the pointer releases.
(r2 review) The independent `scale` property, not transform: GSAP leaves an
inline `transform` on any button it has tweened (the hero CTAs), and an
inline declaration outranks this rule — with `transform:scale()` here the
press was silently dead on exactly the two most-clicked buttons. `scale`
composes with an inline transform instead of being overwritten by it. */
.btn:active{scale:.97}
.btn--pri{background:var(--navy);color:#fff;box-shadow:0 14px 34px rgba(0,66,141,.3)}
.btn--pri:hover{background:var(--sapphire);
box-shadow:0 18px 44px rgba(15,82,186,.42),inset 0 0 0 1px rgba(255,255,255,.18)}
.btn--acc{background:var(--orange);color:#2a0c02;box-shadow:0 14px 34px rgba(255,107,53,.36)}
.btn--acc:hover{filter:brightness(1.07);
box-shadow:0 14px 34px rgba(255,107,53,.36),inset 0 0 0 1px rgba(255,255,255,.28)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.6px var(--line2)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.6px var(--navy);color:var(--navy)}
.on-dark .btn--ghost:hover{color:#fff;box-shadow:inset 0 0 0 1.6px var(--sky)}
.btn--sm{padding:11px 21px;font-size:.92rem}
.btn--block{width:100%}
/* ═════════════════════════════════════════════════════ page furniture ══ */
.grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme="dark"] .grain{mix-blend-mode:overlay;opacity:.05}
.progress{position:fixed;inset-block-start:0;inset-inline-start:0;height:3px;width:0;z-index:220;
background:linear-gradient(90deg,var(--navy),var(--sapphire),var(--orange))}
/* ══════════════════════════════════════════════ anubi · scoped tokens ═══ */
/* (anubi) The sanctum's palette. These are declared on `.hero` and `#ldr` and
NOWHERE ELSE — not on :root — because they are a scene's colours, not the
site's. The academy's own tokens (--navy, --sky, --bg, the two themes)
describe a bright product page and are read by three hundred other rules;
dropping a gold/obsidian set into :root would have repainted every one of
them. Scoping instead means the theme toggle keeps working everywhere and
the two dark surfaces below simply do not participate — they are obsidian
in both themes on purpose, the way the cinema sections already are.
Values are the lab's, unchanged. */
.hero,
#ldr{
--au-ink:#06050a;
--au-stone-800:#120f18;
--au-stone-700:#1e1929;
--au-line:#2e2740;
--au-line-soft:#221d30;
--au-gold-300:#f4dfa0;
--au-gold-400:#e8c96a;
--au-gold-500:#c9a227;
--au-gold-600:#8d6f18;
--au-papyrus:#efe4cd;
--au-faience:#3ab5aa;
/* Amiri is loaded on the home page only (see the css2 there); the
fallbacks are what a standalone page or a blocked font request lands on. */
--au-ff-dis:"Amiri","Instrument Serif",Georgia,"Times New Roman",serif;
--au-out:cubic-bezier(.22,1,.36,1);
--au-io:cubic-bezier(.65,0,.35,1);
}
/* ═══════════════════════════════════════════════════════════ preloader ═ */
/* (anubi) The mummy transformation, on the ground the hero stands in. The
canvas is the picture; the brand, the bar, the hint and the percentage sit
under it in one centred column. site.js still owns the LIFT — it writes
#ldrBar's width and #ldrPc's number, and it removes this element — so the
bar stays width-driven rather than adopting the lab's scaleX. */
.ldr{position:fixed;inset:0;z-index:400;background:var(--au-ink);
display:grid;place-items:center;align-content:center;gap:16px}
/* The gold pool the statue is lit from. A pseudo-element rather than a
gradient on .ldr itself, because the ground must stay flat obsidian behind
the canvas's own drop shadow. */
.ldr::before{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 50% at 50% 40%,rgba(232,201,106,.14),transparent 70%)}
/* No drop-shadow. It was here to lift the figure off the flat obsidian, and it
worked while the only thing on the canvas was a figure. The repaired levitate
take puts golden ribbons out to both edges of a 1092-wide frame, and a
drop-shadow is computed from the element's alpha BEFORE the mask trims it — so
the shadow of ribbons that reach the frame edge is a soft dark band down the
canvas's own boundary, offset 30px and blurred 40. That is the square around
the preloader. The mask's edge fade is what softens the figure now, and the
gold pool from .ldr::before is what separates it from the ground. */
.ldr__canvas{position:relative;-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000);mask-composite:intersect}
.ldr__brand{position:relative;font-family:var(--au-ff-dis);font-size:30px;
line-height:1.2;color:var(--au-papyrus)}
/* The bar is now a TRACK plus a fill, because site.js writes a percentage
width onto #ldrBar itself: with the gold on the same element the visitor
would see a 2px hairline growing out of nothing instead of a groove
filling, and a percentage needs a sized parent to resolve against at all. */
.ldr__track{position:relative;width:min(240px,60vw);height:2px;border-radius:2px;
background:var(--au-line);overflow:hidden}
.ldr__bar{position:absolute;inset-block-start:0;inset-inline-start:0;height:100%;width:0;
background:linear-gradient(90deg,var(--au-gold-500),var(--au-gold-300))}
.ldr__hint{position:relative;font-size:12px;color:rgba(239,228,205,.5)}
/* Kept, and muted: the number is a diagnostic the page has always shown, but
it is no longer the thing being watched. */
.ldr__pc{position:absolute;inset-block-end:26px;inset-inline-end:var(--pad);
font-family:var(--ff-m);font-size:12px;letter-spacing:.2em;
color:rgba(239,228,205,.28)}
/* ═══════════════════════════════════════════════════════════════ nav ═══ */
/* (D-056) The strip is obsidian, not the page surface. It is not sticky, so
the ONLY thing it is ever seen against is the top of the hero — and a white
band above a near-black film read as a torn-off edge. Making it dark in both
themes turns it into the first line of one continuous header block with the
bar below it. Literal colours for the same reason the cinema sections use
them: this strip's backdrop is fixed dark whatever the theme says.
(The standalone pages use `.page__top`, not this, so they are untouched.) */
.topbar{position:relative;z-index:120;border-block-end:1px solid rgba(88,176,245,.16);
background:#04070e;font-size:12px;color:rgba(234,242,252,.62)}
.topbar__in{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
max-width:var(--maxw);margin-inline:auto;padding:6px var(--pad)}
.topbar a{display:inline-flex;align-items:center;gap:7px;transition:color .25s}
.topbar a:hover{color:var(--sky)}
.topbar .ico{width:14px;height:14px;opacity:.75;color:var(--sky)}
.topbar__hrs{display:inline-flex;align-items:center;gap:8px}
.topbar__sp{margin-inline-start:auto}
.topbar__soc{display:flex;gap:15px}
/* ── (D-054) slim obsidian glass bar ────────────────────────────────────────
The floating capsule is gone. The bar is now full-bleed and has exactly two
states, and EVERY colour inside it is driven from the six tokens below
rather than from the page palette — that is what lets one set of rules serve
a bar sitting on the near-black hero AND the same bar sitting on the page's
own surface after it scrolls past. State A (default) is translucent obsidian
with an electric-blue hairline, floating over the hero. State B (`is-stuck`,
set by chrome() once the hero has scrolled away) is the solid theme surface
with a shadow. Only the tokens change between them, so the transition is one
interpolation and there is no second copy of the layout. */
.nav{
/* (D-056) The obsidian state was measured washed out: idle links at .66
alpha and a .16-alpha accent chip read as grey text and a ghost blob
against the film. The glass is darker now (.62, so the bar carries its own
ground rather than borrowing whatever frame is behind it), idle links sit
at #cfe0f4 — a real colour, not a faded white — and the active state is
white type on a solid-enough accent chip. Measured over the hero's
brightest frame, not just its darkest: see the report's contrast table. */
--nav-bg:rgba(4,7,14,.72);
--nav-ink:#ffffff;
--nav-mut:#cfe0f4;
--nav-hair:rgba(88,176,245,.45);
--nav-hover:rgba(255,255,255,.14);
--nav-accent:var(--sky);
--nav-accent-bg:rgba(88,176,245,.34);
--nav-active-ink:#ffffff;
--nav-shadow:none;
position:sticky;inset-block-start:0;z-index:130;
background:var(--nav-bg);
backdrop-filter:blur(18px) saturate(165%);
-webkit-backdrop-filter:blur(18px) saturate(165%);
border-block-end:1px solid var(--nav-hair);
box-shadow:var(--nav-shadow);
transition:background .4s var(--ease),border-color .4s var(--ease),
box-shadow .4s var(--ease)}
.nav.is-stuck{
--nav-bg:var(--bg2);
--nav-ink:var(--ink);
--nav-mut:var(--mut);
--nav-hair:var(--line);
--nav-hover:rgba(8,20,38,.06);
--nav-accent:var(--navy);
--nav-accent-bg:rgba(0,66,141,.10);
--nav-active-ink:var(--navy);
--nav-shadow:0 10px 34px rgba(8,20,38,.10)}
html[data-theme="dark"] .nav.is-stuck{
--nav-hover:rgba(255,255,255,.08);
--nav-accent:var(--sky);
--nav-accent-bg:rgba(88,176,245,.14);
--nav-active-ink:var(--sky);
--nav-shadow:0 10px 34px rgba(0,0,0,.5)}
.nav__in{display:flex;align-items:center;gap:clamp(8px,1vw,18px);
max-width:var(--maxw);margin-inline:auto;padding:11px var(--pad);
color:var(--nav-ink);transition:color .4s var(--ease)}
.brand{display:flex;align-items:center;gap:9px;flex-shrink:0}
.brand__mark{width:30px}
.brand__mark img{width:100%;height:auto}
.brand__txt{line-height:1.05}
.brand__name{font-family:var(--ff-x);font-weight:400;font-size:13px;letter-spacing:.09em;display:block}
/* (responsive sweep R8) 6.5px is below any readable floor — the sub-wordmark
was a grey smudge rather than a word. Raised to 8.5px with the tracking
pulled back from .34em to .22em so the lockup keeps its proportions: the
sub stays narrower than the 13px .brand__name above it, which is the
relationship that makes it read as a subtitle. */
.brand__sub{font-family:var(--ff-x);font-size:8.5px;letter-spacing:.22em;color:var(--azure);display:block}
/* inside the bar the sub-wordmark follows the bar's accent, not the page's:
--azure is a fixed brand blue and disappears against the obsidian state */
.nav .brand__sub{color:var(--nav-accent);transition:color .4s var(--ease)}
/* (D-054) The pill mechanic survives the new bar — it was the one part of the
old capsule worth keeping — but every colour in it now comes from the bar's
own tokens, so the same rule reads correctly over the hero and over the
page surface. */
.menu{position:relative;display:flex;align-items:center;gap:2px;margin-inline:auto}
.menu a{position:relative;padding:8px 13px;border-radius:999px;font-size:13.5px;font-weight:500;
color:var(--nav-mut);transition:color .25s,background .25s;white-space:nowrap}
.menu a:hover{color:var(--nav-ink);background:var(--nav-hover)}
/* (D-056) The active state needs to be unmistakable on both grounds: over the
hero a tinted chip alone read as a smudge, so the type goes to full white
and the chip gains a hairline of the accent itself. On the scrolled surface
the same two tokens resolve to navy-on-navy-tint, which is the treatment the
page already used. */
.menu a.is-active{color:var(--nav-active-ink);background:var(--nav-accent-bg);
box-shadow:inset 0 0 0 1px var(--nav-accent);font-weight:600}
.menu__has{display:flex;align-items:center;gap:7px}
.menu__has .ico{width:13px;height:13px;transition:transform .3s}
.nav__grp{position:static}
.nav__grp:hover .menu__has .ico{transform:rotate(180deg)}
/* (D-039) The dropdown opens over the dark photographic hero, where the old
.72-alpha glass pulled the hero's near-black through and read as a murky
grey slab with grey-on-grey text. It is now a near-solid surface with only
a light blur behind it, so the panel is its own object on the page and the
track titles sit at full ink contrast in both themes. */
/* (D-054) Reconciled with the new bar: the panel now hangs 8px off a
full-bleed edge rather than 14px off a floating capsule, and its radius
drops to 18px so it belongs to the same, squarer family. The blue top
hairline is the bar's own hairline continuing down into the panel, which is
what makes the dropdown read as descending FROM the bar rather than
hovering near it. It keeps the page's surface colour in both states: it is
an object on the page, and a panel that changed palette with the bar would
be a second design to maintain. */
.mega{position:absolute;inset-block-start:calc(100% + 8px);inset-inline-start:50%;translate:-50% 12px;
width:min(92vw,760px);padding:14px;border-radius:18px;z-index:140;
background:rgba(255,255,255,.96);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
/* the shorthand first, THEN the block-start override — reversing the two
would let `border` reset the blue hairline back to --line2 */
border:1px solid var(--line2);
border-block-start:2px solid var(--sky);
box-shadow:var(--shadow2);
display:grid;grid-template-columns:repeat(2,1fr);gap:6px;
opacity:0;visibility:hidden;transition:all .35s var(--ease)}
[dir="rtl"] .mega{translate:50% 12px}
.nav__grp:hover .mega,.mega:hover,.nav__grp:focus-within .mega{opacity:1;visibility:visible;translate:-50% 0}
[dir="rtl"] .nav__grp:hover .mega,[dir="rtl"] .mega:hover,[dir="rtl"] .nav__grp:focus-within .mega{translate:50% 0}
/* (r3) BOTH boxes need `min-width:0` — the item and its text column.
`min-width:auto` is the default for a grid item AND for a flex item, so the
long track name (04 · ICDL — International Computer Driving Licence) pushed
the row past its grid column and then past the panel's edge instead of
wrapping. Measured: 37px outside the panel before, 0 after. Wrapping onto a
second line is the deliberate choice here — truncating a course name with
an ellipsis loses information. */
.mega__i{position:relative;display:flex;align-items:flex-start;gap:13px;padding:13px;
border-radius:16px;transition:background .25s;min-width:0}
.mega__i:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.mega__c{min-width:0}
.mega__i::before{content:'';position:absolute;inset-block:10px;inset-inline-start:0;width:2px;
border-radius:2px;background:var(--accent);transform:scaleY(0);transform-origin:50% 0;
transition:transform .35s var(--ease)}
.mega__i:hover::before{transform:scaleY(1)}
html[data-theme="dark"] .mega{background:rgba(10,18,34,.96);border-color:rgba(255,255,255,.14)}
/* the track number becomes a tinted chip so each row is identifiable at a
glance without the panel needing a second colour anywhere else */
.mega__n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
font-family:var(--ff-m);font-size:13px;font-weight:600;padding:0;
background:color-mix(in srgb,var(--accent,var(--azure)) 12%,transparent);
/* the numeral is 13px type on a 12%-tinted chip — the raw orange accent
measured 2.37:1 there, so it takes the lift like every other accent TEXT */
color:var(--accent-lift,var(--azure))}
/* (D-058) Title-length-proof. `.mega__i` is an inside `.menu`, so it
inherited `white-space:nowrap` from the nav-link rule — which is right for a
one-word menu item and wrong for a course title. The ICDL row measured 478px
of text laid out on ONE line inside a 289px cell with overflow visible: the
title spilled straight across the neighbouring column and dragged the row
out of alignment. The grid columns were never the problem; they measure
362/362 and always did.
`anywhere` on top of normal wrapping is for D-059: once titles are
admin-authored, a single pasted unbroken token would overflow again, and a
dropdown must not be breakable by typing into a text field.
The row's own `align-items:flex-start` (see .mega__i) is what keeps a
two-line title from stretching its neighbour's hover chip. */
.mega__t{font-weight:700;font-size:15px;line-height:1.4;display:block;color:var(--ink);
white-space:normal;overflow-wrap:anywhere}
.mega__d{font-size:12.5px;color:var(--mut);line-height:1.6;display:block;
white-space:normal;overflow-wrap:anywhere}
/* `.menu a.mega__all`, not `.mega__all`. This row is an inside .menu, so
`.menu a{color:var(--nav-mut)}` above also matches it — and at (0,1,1) that
selector BEAT the plain class at (0,1,0). The row was painted #cfe0f4, the
pale blue the nav bar uses for idle links over the dark hero glass, on the
panel's own #e7eaf1. Two near-whites: measured on the live page, the link was
invisible in light mode and the owner reported it as a missing button.
It only showed in light mode, and that is the tell: the dark override below
is `html[data-theme="dark"] .mega__all`, which lands at (0,2,1) and happened
to out-rank .menu a by accident. The light rule never had that luck. Both are
pinned to the same shape now so neither can drift again. */
.menu a.mega__all{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:9px;
padding:15px;border-radius:18px;font-size:14px;font-weight:700;color:var(--navy);
background:var(--bg3);transition:background .25s}
/* --navy is a brand token and does not flip with the theme, so on the dark
panel's near-black --bg3 this row would be navy-on-black */
html[data-theme="dark"] .menu a.mega__all{color:var(--sky)}
/* :hover has the same trap one level deeper — `.menu a:hover` is (0,2,1) and
the plain `.mega__all:hover` was (0,2,0), so the hover tint never landed
either and the row lit up with the NAV's hover colour instead of its own. */
.menu a.mega__all:hover{color:var(--navy);background:rgba(0,66,141,.1)}
html[data-theme="dark"] .menu a.mega__all:hover{color:var(--sky);background:rgba(88,176,245,.14)}
.nav__cta{display:flex;align-items:center;gap:5px;flex-shrink:0}
.iconbtn{width:34px;height:34px;display:grid;place-items:center;border-radius:999px;cursor:pointer;
background:transparent;color:var(--nav-mut,var(--mut));box-shadow:none;border:0;
transition:color .25s,background .25s}
/* (owner · phone) Behind a pointer query, and that is the whole fix for the
"dark circle" in the owner's screenshot: a touch screen latches :hover onto
whatever the finger last landed on, so the burger kept this filled circle
for as long as the drawer it opened stayed open — one icon in the row wearing
a background none of its four neighbours had. A hover tint is a pointer
affordance; a finger has no hover to preview with. */
@media (hover:hover){
.iconbtn:hover{color:var(--nav-accent,var(--navy));background:var(--nav-hover,rgba(8,20,38,.07))}
}
.iconbtn .ico{width:17px;height:17px}
.lang{width:auto;padding:0 12px;font-family:var(--ff-m);font-size:11.5px;letter-spacing:.08em}
/* the bar's own buttons run compact */
.nav__cta .btn{padding:9px 18px;font-size:.86rem}
.nav__cta .btn .ico{width:15px;height:15px}
/* (D-054) The ghost CTA borrows the page's ink, which is invisible against
the obsidian state — inside the bar it follows the bar's tokens instead.
The primary CTA keeps --navy in both states: it is the one element that is
meant to stay the brand's blue no matter what is behind the bar. */
.nav__cta .btn--ghost{color:var(--nav-ink);box-shadow:inset 0 0 0 1.6px var(--nav-hair)}
.nav__cta .btn--ghost:hover{color:var(--nav-accent);box-shadow:inset 0 0 0 1.6px var(--nav-accent)}
/* `justify-content`, and it is load-bearing rather than tidy: `.iconbtn` above
centres its content with `place-items:center`, which is align-items plus
justify-ITEMS — and a flex container ignores the second. So the three bars
stacked from the TOP of the 34px button. Measured at 375: the bar stack's
centre sat at y 57.1 while every icon beside it centred on y 66.1, a 9px
lift, and it is most visible in the state the owner photographed — the open
drawer, where those same three bars are the close X. */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px}
.burger i{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:.35s var(--ease)}
.burger.is-open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open i:nth-child(2){opacity:0}
.burger.is-open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* (D-054) The drawer is the bar's obsidian state taken full-screen, in BOTH
themes: it is a transient overlay opened from a bar that is itself obsidian
at the top of the page, and matching it is what makes the two read as one
control rather than two. Literal colours rather than palette tokens for the
same reason the cinema sections use them — this surface is fixed dark by
design, so a theme flip must not wash it. */
/* (review · phone) `safe center`, not `center`, and it is the difference
between a menu and a trap. This is a centred flex column inside a scroll
container, and centred content that is TALLER than its container overflows at
BOTH ends — the leading overflow has no scroll origin, so the first rows sit
above the scrollport and cannot be reached by any gesture. The drawer grew
past the viewport when #games and /blog joined it: 11 anchors x 67.0px
(25.6px type x 1.72 line-height + 11px padding-block x2 + a 1px rule) + 10 x
2px gap + 150px of vertical padding = 907px against a 390x844 phone. The
rows that went out of reach were the top two — the home link and the courses
link. `safe` drops the alignment to `start` for exactly the case where
centring would push content out of view, and changes nothing when it fits.
Written alone rather than after a `center` fallback on purpose: a browser
that does not know `safe` drops the whole declaration and lands on the
initial `flex-start`, which is the behaviour we want there anyway — the
fallback would have handed those browsers back the bug. */
.drawer{position:fixed;inset:0;z-index:125;background:#04070e;color:#eaf2fc;
display:flex;flex-direction:column;justify-content:safe center;gap:2px;padding:110px var(--pad) 40px;
clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);overflow-y:auto}
.drawer.is-open{clip-path:inset(0 0 0 0)}
/* (owner · phone) The rule above says this surface "is the bar's obsidian state
taken full-screen", and that is true only at the top of the page. Open the
menu after scrolling and `is-stuck` has already swapped the bar to the page's
own surface: measured at 375, an open drawer of #04070e capped by a bar
painted rgb(255,255,255) with its icons at rgb(86,104,128) — a white header
on a black sheet, which is the row the owner photographed as not lining up.
The bar takes its obsidian tokens back for exactly as long as the drawer
holds the body locked. Restated rather than shared with `.nav` above because
the two are different states of one element, not a common base, and
`.nav.is-stuck` here matches `html[data-theme="dark"] .nav.is-stuck` at
(0,3,1) — equal weight, later in the file, so it wins in both themes. */
body.is-locked .nav.is-stuck{
--nav-bg:rgba(4,7,14,.72);
--nav-ink:#ffffff;
--nav-mut:#cfe0f4;
--nav-hair:rgba(88,176,245,.45);
--nav-hover:rgba(255,255,255,.14);
--nav-accent:var(--sky);
--nav-accent-bg:rgba(88,176,245,.34);
--nav-active-ink:#ffffff;
--nav-shadow:none}
.drawer a{font-size:clamp(1.6rem,6.4vw,2.5rem);font-weight:800;font-family:var(--ff-d);
padding-block:11px;border-block-end:1px solid rgba(88,176,245,.22);
opacity:0;transform:translateY(20px);transition:color .25s}
.drawer a:hover{color:var(--sky)}
[lang="ar"] .drawer a{font-family:var(--ff-a);font-weight:400}
.drawer.is-open a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.drawer.is-open a:nth-child(1){transition-delay:.16s}.drawer.is-open a:nth-child(2){transition-delay:.21s}
.drawer.is-open a:nth-child(3){transition-delay:.26s}.drawer.is-open a:nth-child(4){transition-delay:.31s}
.drawer.is-open a:nth-child(5){transition-delay:.36s}.drawer.is-open a:nth-child(6){transition-delay:.41s}
.drawer.is-open a:nth-child(7){transition-delay:.46s}.drawer.is-open a:nth-child(8){transition-delay:.51s}
/* (review · phone) …and on to 11, because the drawer now HAS 11 rows. The
cadence stopped at 9 while #games, /blog and the auth fork pushed the list
past it, and a row with no rule keeps transition-delay's initial 0 — so the
last two rows did not arrive late, they arrived FIRST, a tenth of a second
ahead of «الرئيسية» at the top. Same .05s step throughout. The signed-in
drawer is the long one (8 section rows + /blog + dashboard + notifications,
then the logout form as the 12th child), which is what sets 11 as the count
to reach. */
.drawer.is-open a:nth-child(9){transition-delay:.56s}
.drawer.is-open a:nth-child(10){transition-delay:.61s}.drawer.is-open a:nth-child(11){transition-delay:.66s}
/* (D-046) The authed drawer carries a POST logout form as its 10th child, so
the cadence needs one more beat and the form needs the entrance the
sibling anchors get from `.drawer a` — a