/* ═══════════════════════════════════════════════════════════════ moosazafar.com — shared stylesheet for every page Edit once here; all pages update. Accessibility notes (please keep these intact): - --muted / --a2 / --accent are all >= 4.5:1 against --bg in both themes. The old palette had --muted at 1.74:1, which was effectively invisible. Do not darken these values. - No text is set below 0.7rem (11.2px). - Every animation is disabled under prefers-reduced-motion. ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg:#050504; --text:#ede8df; --muted:#8a8478; /* 5.49:1 on --bg */ --a2:#a39c8e; /* 7.48:1 on --bg */ --border:#2e2b25; --accent:#c9a96e; /* 9.11:1 on --bg */ --green:#7fae86; --serif:'Cormorant',Georgia,'Times New Roman',serif; --sans:'Syne',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --pad:3rem; /* horizontal page padding */ --micro:.72rem; /* smallest label size */ } @media (prefers-color-scheme:light){ :root{ --bg:#f2efe8; --text:#0c0b09; --muted:#6b6862; /* 4.84:1 */ --a2:#57544e; /* 6.57:1 */ --border:#d5d0c6; --accent:#7d5f2e; /* 5.15:1 */ --green:#3d6b43; } } html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;} body{ background:var(--bg);color:var(--text); font-family:var(--sans);min-height:100vh;overflow-x:hidden; } /* Focus visibility — was entirely absent before. */ :focus-visible{outline:2px solid var(--accent);outline-offset:3px;} /* Skip link for keyboard users */ .skip{ position:absolute;left:.5rem;top:-3rem;z-index:600; background:var(--accent);color:var(--bg); padding:.6rem 1rem;font-size:.8rem;text-decoration:none; transition:top .18s; } .skip:focus{top:.5rem;} /* ── DECORATIVE LAYERS ──────────────────────────────────────── */ #bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;} #grain{ position:fixed;inset:-50%;width:200%;height:200%; z-index:1;pointer-events:none;opacity:.03; } .js #grain{animation:gr .4s steps(2) infinite;} @keyframes gr{ 0%{transform:translate(0,0)}25%{transform:translate(-1%,-2%)} 50%{transform:translate(2%,1%)}75%{transform:translate(-2%,2%)} } .cm{position:fixed;width:14px;height:14px;z-index:2;opacity:.2;} .cm::before,.cm::after{content:'';position:absolute;background:var(--text);} .cm::before{width:1px;height:100%;left:50%;transform:translateX(-50%);} .cm::after{width:100%;height:1px;top:50%;transform:translateY(-50%);} .cm.tl{top:1.5rem;left:1.5rem}.cm.tr{top:1.5rem;right:1.5rem} .cm.bl{bottom:1.5rem;left:1.5rem}.cm.br{bottom:1.5rem;right:1.5rem} /* ── CUSTOM CURSOR ────────────────────────────────────────────── Only on devices with a real pointer, and only when JS is running. Previously `cursor:none` was global, so touch and no-JS visitors lost all pointer feedback. ─────────────────────────────────────────────────────────────── */ #cdot,#cring{display:none;} @media (hover:hover) and (pointer:fine){ .js.cursor-on body{cursor:none;} .js.cursor-on #cdot,.js.cursor-on #cring{display:block;} } #cdot{ width:6px;height:6px;background:var(--accent);border-radius:50%; position:fixed;z-index:500;pointer-events:none;transform:translate(-50%,-50%); } #cring{ width:36px;height:36px;border:1px solid var(--accent);opacity:.45; border-radius:50%;position:fixed;z-index:499;pointer-events:none; transform:translate(-50%,-50%);transition:width .25s,height .25s,opacity .25s; } #cring.big{width:58px;height:58px;opacity:.8;} /* ── PRELOADER ────────────────────────────────────────────────── Hidden by default. Only a JS-capable browser ever shows it, and it clears on real font/asset readiness with a hard 900ms cap — the old version faked a random 1.4-2.5s progress bar and held the whole page at opacity:0 behind it. ─────────────────────────────────────────────────────────────── */ #pre{display:none;} .js.loading #pre{ display:flex;position:fixed;inset:0;background:var(--bg);z-index:400; flex-direction:column;justify-content:flex-end; padding:2.5rem var(--pad) 2rem;gap:1.2rem; transition:opacity .45s ease; } .js.loading.done #pre{opacity:0;pointer-events:none;} .plbl{font-size:var(--micro);color:var(--muted);letter-spacing:.18em;text-transform:uppercase;} #pbarw{width:100%;height:1px;background:var(--border);} #pbar{height:100%;background:var(--accent);width:0%;transition:width .35s ease;} /* ── PAGE WRAPPER ─────────────────────────────────────────────── Deliberately never transparent and never animated. The old build held #page at opacity:0 and depended on JS adding a class to fade it in, so any script failure produced a permanently blank site. Fading it here would reintroduce that: a transition that never advances (background tab, throttled renderer) leaves the element stuck at its start value. #pre is already a full-screen opaque overlay, so it hides the content on its own. The content underneath simply stays visible. ─────────────────────────────────────────────────────────────── */ #page{ position:relative;z-index:3;min-height:100vh; display:flex;flex-direction:column; opacity:1; } /* ── NAV ────────────────────────────────────────────────────────── Scoped to the primary nav on purpose. As a bare `nav` selector this also matched `