/* NOOR · noor2.css · the second cut's shell, for any page that wants it. The reels' language brought to the site: the night, one light that breathes, parchment type with the key phrase in gold, one idea per screen, arrivals on a fade and a lifted blur, the rooms under the thumb. Every class is prefixed n2- so it can sit beside the older pages' styles without touching them. Pairs with assets/noor2.js. Tokens: night #04060F to #0A1024; gold #C9A227 and #E9C86A, used only on the night, never on parchment; parchment #FFFEF7 at .86 / .62 for secondary text (both clear 4.5:1 on the night) and .38 for hairlines and dots only, never for words. Type is never under 14 px on a phone; 12 px is allowed only for the mono eyebrows, tracked at .16em or wider. Motion: one settled spring (--n2-spring, a linear() curve, with a bezier where linear() is not understood) for everything that moves in space: the bar's pill, the marks' pill, the sheet, the toast, the buttons, the cards, the top line; the bezier (--n2-ease) only for fades, blurs and colour, which must not overshoot. Nothing moves linearly, and nothing moves at all under prefers-reduced-motion (tests/rooms.mjs audits every transition and animation in this file against that rule). Depth without clutter: the hairline star behind the hook (in the shader), a gold hairline under each eyebrow with the screen's numeral at its right ("01 / 05"), a soft gold vignette that follows the screen being read, the column of marks at the right edge (one per screen, the read one a longer gold pill that moves as a liquid), gold hairlines between list rows, and one quiet progress line at the very top. Nothing that carries no meaning. */ :root{ --n2-night:#04060F; --n2-night2:#0A1024; --n2-gold:#C9A227; --n2-goldhi:#E9C86A; --n2-parch:#FFFEF7; --n2-parch2:rgba(255,254,247,.86); --n2-parch3:rgba(255,254,247,.62); --n2-parch4:rgba(255,254,247,.38); --n2-line:rgba(233,200,106,.16); --n2-sans:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --n2-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; --n2-ar:'Amiri',"Scheherazade New","Noto Naskh Arabic",serif; --n2-quran:'Amiri Quran','Amiri',"Scheherazade New","Noto Naskh Arabic",serif; --n2-ease:cubic-bezier(.2,.7,.2,1); --n2-spring:cubic-bezier(.2,.7,.2,1); --n2-safe-top:env(safe-area-inset-top,0px); --n2-safe-bottom:env(safe-area-inset-bottom,0px); --n2-bar-h:calc(72px + var(--n2-safe-bottom)); } @supports (transition-timing-function:linear(0,1)){ :root{--n2-spring:linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001)} } /* ------------------------------------------------------------ the page */ html[data-n2],body[data-n2]{color-scheme:dark} html[data-n2],html[data-n2] body,body[data-n2]{ margin:0;background:var(--n2-night);color:var(--n2-parch); font-family:var(--n2-sans);-webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;min-height:100vh;min-height:100svh} html[data-n2] *,html[data-n2] *::before,html[data-n2] *::after,body[data-n2] *{box-sizing:border-box} html[data-n2]{scroll-behavior:smooth;scroll-snap-type:y proximity} html[data-n2] body{padding-bottom:var(--n2-bar-h)} html[data-n2] ::selection{background:rgba(233,200,106,.35);color:var(--n2-parch)} /* the night that breathes: a CSS still underneath, the shader over it */ .n2-still,#n2-gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} .n2-still{background: radial-gradient(60% 40% at 50% 46%,rgba(233,200,106,.20),transparent 70%), linear-gradient(180deg,#0A1024 0%,#04060F 100%)} #n2-gl{opacity:0;transition:opacity 1.2s var(--n2-ease)} #n2-gl.n2-on{opacity:1} /* a soft gold vignette that follows the screen being read: one element, twice the viewport tall, moved on the spring to the hook of the screen */ .n2-vig{position:fixed;left:0;right:0;top:0;height:200vh;height:200svh;z-index:1;pointer-events:none; background:radial-gradient(52% 22% at 50% 50%,rgba(233,200,106,.11),rgba(233,200,106,.035) 45%,transparent 72%); transform:translateY(calc(var(--n2-vy,46vh) - 100vh));transition:transform 1.1s var(--n2-spring),opacity .6s var(--n2-ease);opacity:0} html.n2-live .n2-vig{opacity:1} /* the skip links: first in the page, off screen until one is focused, then a pill at the top left in the shell's own tokens (tests/rooms.mjs: what moves rides the spring, what fades the bezier) */ .n2-skips{position:fixed;left:16px;top:calc(var(--n2-safe-top) + 12px);z-index:40;display:flex;gap:8px;pointer-events:none} .n2-skip{position:relative;display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border-radius:999px; font-family:var(--n2-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none; color:var(--n2-parch);background:var(--n2-night2);border:1px solid var(--n2-goldhi);box-shadow:0 8px 30px rgba(0,0,0,.5); opacity:0;transform:translateY(-200%);pointer-events:none;transition:transform .5s var(--n2-spring),opacity .35s var(--n2-ease)} .n2-skip:focus,.n2-skip:focus-visible{opacity:1;transform:none;pointer-events:auto;outline:2px solid var(--n2-goldhi);outline-offset:3px} @media print{.n2-skips{display:none!important}} /* ------------------------------------------------- one line at the top */ .n2-top{position:fixed;top:0;left:0;right:0;z-index:20; padding:calc(var(--n2-safe-top) + 10px) 20px 12px; display:flex;align-items:center;justify-content:space-between;gap:12px; background:linear-gradient(180deg,rgba(4,6,15,.94),rgba(4,6,15,0)); transition:transform .6s var(--n2-spring),opacity .35s var(--n2-ease);pointer-events:none} .n2-top>*{pointer-events:auto} /* the quiet progress line: how far down the whole page the reader is, at the very top, its own element so it stays when the top line hides */ .n2-prog{position:fixed;left:0;top:var(--n2-safe-top);z-index:21;height:1px;width:100%;background:linear-gradient(90deg,var(--n2-gold),var(--n2-goldhi)); transform-origin:left;transform:scaleX(var(--n2-p,0));transition:transform .5s var(--n2-spring);pointer-events:none;opacity:.9} .n2-top.n2-hide{transform:translateY(-100%);opacity:0} .n2-brand{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--n2-parch);min-height:46px;align-items:center} .n2-brand .n2-ar{font-family:var(--n2-ar);font-size:24px;color:var(--n2-goldhi);line-height:1} .n2-brand .n2-en{font-family:var(--n2-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--n2-parch3)} .n2-pill{font-family:var(--n2-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--n2-parch3); text-decoration:none;border:1px solid var(--n2-line);border-radius:999px;padding:0 14px;min-height:46px;display:inline-flex;align-items:center; background:rgba(4,6,15,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .n2-pill{transform:scale(var(--ms,1));transition:color .25s var(--n2-ease),border-color .25s var(--n2-ease),transform .6s var(--n2-spring)} .n2-pill:hover{color:var(--n2-goldhi);border-color:rgba(233,200,106,.4)} .n2-pill.n2-press{--ms:.96;transition-duration:.25s,.25s,.15s} .n2-pill.n2-release{--ms:1.02} /* ------------------------------------------------ one idea per screen */ .n2-main{position:relative;z-index:2;max-width:44rem;margin:0 auto} .n2-idea{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding:calc(var(--n2-safe-top) + 88px) 26px 40px;position:relative} .n2-idea:not(.n2-short){scroll-snap-align:start;scroll-snap-stop:normal} .n2-idea.n2-short{min-height:0;justify-content:flex-start;padding-top:32px} .n2-main>.n2-idea.n2-short:first-child{padding-top:calc(var(--n2-safe-top) + 88px)} .n2-idea.n2-group{padding-top:6px;padding-bottom:14px} .n2-idea.n2-group .n2-h3{margin-top:10px} .n2-idea>*{opacity:0;transform:translateY(14px);filter:blur(10px); transition:opacity .9s var(--n2-ease),transform 1.1s var(--n2-spring),filter .9s var(--n2-ease)} .n2-idea.n2-in>*{opacity:1;transform:none;filter:blur(0)} .n2-idea.n2-in>*:nth-child(1){transition-delay:.05s} .n2-idea.n2-in>*:nth-child(2){transition-delay:.18s} .n2-idea.n2-in>*:nth-child(3){transition-delay:.31s} .n2-idea.n2-in>*:nth-child(4){transition-delay:.44s} .n2-idea.n2-in>*:nth-child(5){transition-delay:.57s} .n2-idea.n2-in>*:nth-child(6){transition-delay:.70s} .n2-idea.n2-in>*:nth-child(n+7){transition-delay:.8s} /* without the script the page still reads: the script adds n2-live */ html[data-n2]:not(.n2-live) .n2-idea>*{opacity:1;transform:none;filter:none} .n2-eyebrow{font-family:var(--n2-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--n2-goldhi);margin:0 0 18px;position:relative;line-height:1.5} .n2-eyebrow small{font-family:var(--n2-mono);font-size:12px;color:var(--n2-parch3);letter-spacing:.18em} /* a gold hairline under every eyebrow, fading to the right, drawn inside the margin so it adds no height; the screen's numeral ("01 / 05", set by the script on pages of two or more screens) floats at its right */ .n2-eyebrow::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:linear-gradient(90deg,rgba(233,200,106,.38),rgba(233,200,106,.08) 70%,rgba(233,200,106,0))} .n2-eyebrow .n2-of{float:right;margin:0 0 0 14px;font-family:var(--n2-mono);font-size:12px;letter-spacing:.16em;color:var(--n2-parch3);font-variant-numeric:tabular-nums;white-space:nowrap} .n2-h1,.n2-h2{font-family:var(--n2-sans);font-weight:800;letter-spacing:-.018em;line-height:1.08;margin:0 0 16px;text-wrap:balance;color:var(--n2-parch)} .n2-h1{font-size:clamp(28px,8vw,38px)} .n2-h2{font-size:clamp(24px,7vw,32px)} .n2-h3{font-family:var(--n2-sans);font-weight:600;font-size:18px;line-height:1.3;margin:22px 0 8px;color:var(--n2-parch)} .n2-g{color:var(--n2-goldhi)} .n2-p{font-size:16.5px;line-height:1.62;color:var(--n2-parch2);margin:0 0 12px;max-width:36ch} .n2-p.n2-wide{max-width:none} .n2-dim{color:var(--n2-parch3);font-size:15px;line-height:1.6;margin:0 0 12px;max-width:40ch} .n2-date{font-family:var(--n2-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--n2-parch3);margin:14px 0 0;line-height:1.7} .n2-src{font-family:var(--n2-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--n2-parch3);margin:6px 0 0;line-height:1.7} .n2-src a,.n2-date a{color:inherit} /* A FILLED CONTROL IS NOT A LINK IN A PARAGRAPH. This rule is one point more specific than a page's own `.mz-cta`, so it repainted every gold pill on the site with the gold it uses for prose links -- gold ink on a gold button, about 1.05:1, invisible. The buttons on /mizan were unreadable for exactly this reason. :where() has no specificity of its own, so this still weighs (0,1,1) and settles the same ties it settled before; it simply stops claiming anything that has named itself a button or a call to action, and those keep the ink they chose. */ .n2-main a:where(:not([class*="cta"]):not([class*="btn"]):not([class*="chip"])){color:var(--n2-goldhi);text-decoration-thickness:1px;text-underline-offset:3px} .n2-list-a{color:var(--n2-parch)} /* the Arabic */ .n2-quran{font-family:var(--n2-quran);font-size:clamp(26px,7.2vw,38px);line-height:1.9;direction:rtl;text-align:right;color:var(--n2-parch); margin:0 0 18px;text-shadow:0 0 28px rgba(233,200,106,.18);max-width:none} .n2-ref{font-family:var(--n2-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--n2-goldhi);margin:0 0 6px} .n2-meaning{font-size:18px;line-height:1.55;color:var(--n2-parch2);font-weight:500;margin:0 0 12px;max-width:34ch} .n2-meaning .n2-s{display:block;margin-bottom:8px} .n2-credit{font-family:var(--n2-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--n2-parch3);margin-top:14px;line-height:1.7} .n2-word-ar{font-family:var(--n2-ar);font-weight:700;font-size:clamp(48px,15vw,72px);line-height:1.2;color:var(--n2-goldhi);direction:rtl;text-align:right;margin:0;max-width:none} .n2-translit{font-family:var(--n2-sans);font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:14px;color:var(--n2-parch);margin:2px 0 14px} .n2-title-ar{font-family:var(--n2-ar);font-size:clamp(26px,7vw,34px);color:var(--n2-goldhi);direction:rtl;text-align:right;margin:0 0 10px;line-height:1.5} /* the reel */ .n2-reel{position:relative;height:min(60svh,560px);width:auto;max-width:100%;align-self:flex-start;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#000; border:1px solid var(--n2-line);margin:0 0 18px;box-shadow:0 24px 60px rgba(0,0,0,.5)} .n2-reel video{display:block;width:100%;height:100%;object-fit:cover} .n2-reel .n2-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(4,6,15,.25); border:0;cursor:pointer;color:var(--n2-parch);padding:0} .n2-reel .n2-play span{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%; background:rgba(4,6,15,.55);border:1px solid rgba(233,200,106,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .6s var(--n2-spring)} .n2-reel .n2-play:hover span{transform:scale(1.06)} .n2-reel .n2-play:active span{transform:scale(.96)} .n2-reel .n2-play svg{width:28px;height:28px;margin-left:4px} .n2-reel.n2-playing .n2-play{display:none} /* the controls: 46 px, a hairline, the phone's own share */ .n2-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .n2-btn{appearance:none;border:1px solid var(--n2-line);background:rgba(255,254,247,.04);color:var(--n2-parch); font:600 14px/1.2 var(--n2-sans);letter-spacing:.01em;text-decoration:none; min-height:46px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;cursor:pointer; transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--ms,1));will-change:transform; transition:background .25s var(--n2-ease),transform .6s var(--n2-spring),border-color .25s var(--n2-ease),box-shadow .4s var(--n2-ease); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .n2-btn.n2-mag,.n2-bar a.n2-mag{transition-duration:.25s,.22s,.25s,.4s} .n2-btn.n2-press,.n2-bar a.n2-press{--ms:.96;transition-duration:.15s} .n2-btn.n2-release,.n2-bar a.n2-release{--ms:1.02} .n2-btn:hover{background:rgba(233,200,106,.10);border-color:rgba(233,200,106,.4)} /* the one thing to press on a screen breathes; there is never more than one */ .n2-glow{animation:n2-breath 4.2s ease-in-out infinite} @keyframes n2-breath{0%,100%{box-shadow:0 0 0 rgba(233,200,106,0)}50%{box-shadow:0 0 28px rgba(233,200,106,.35)}} .n2-btn.n2-gold{background:linear-gradient(180deg,#E9C86A,#C9A227);color:#1a1405;border-color:transparent} .n2-btn.n2-gold:hover{background:linear-gradient(180deg,#F0D27A,#C9A227)} .n2-btn svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .n2-btn.n2-gold svg{stroke:#1a1405} .n2-btn:focus-visible,.n2-bar a:focus-visible,.n2-pill:focus-visible,.n2-brand:focus-visible{outline:2px solid var(--n2-goldhi);outline-offset:3px} .n2-toast{position:fixed;left:50%;bottom:calc(var(--n2-bar-h) + 18px);transform:translate(-50%,10px);opacity:0;z-index:25; background:rgba(255,254,247,.94);color:#1a1405;font:600 14px/1 var(--n2-sans);padding:13px 18px;border-radius:999px; transition:opacity .35s var(--n2-ease),transform .6s var(--n2-spring);pointer-events:none;white-space:nowrap} .n2-toast.n2-show{opacity:1;transform:translate(-50%,0)} /* ------------------------------------------- lists: rooms, shelves, walks */ .n2-rooms{list-style:none;margin:6px 0 24px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px} .n2-rooms li a{display:flex;flex-direction:column;justify-content:flex-end;min-height:76px;padding:12px 14px;border:1px solid var(--n2-line); border-radius:14px;text-decoration:none;color:var(--n2-parch);background:rgba(255,254,247,.035);transition:background .25s var(--n2-ease),transform .6s var(--n2-spring)} .n2-rooms li a:active{transform:scale(.98)} .n2-rooms li a:hover{background:rgba(233,200,106,.08)} .n2-rooms b{font-size:15px;font-weight:600;line-height:1.3} .n2-rooms span{font-family:var(--n2-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--n2-parch3);margin-top:4px} .n2-rooms .n2-ar{font-family:var(--n2-ar);font-size:18px;color:var(--n2-goldhi);margin-bottom:4px;line-height:1.3} /* a horizontal shelf of related things: one card at a time, snapping to the centre, fading at the edges, the finger's own momentum */ .n2-shelf{list-style:none;display:flex;gap:10px;margin:6px -26px 24px;padding:6px 26px;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .n2-shelf::-webkit-scrollbar{display:none} .n2-shelf>*{flex:0 0 min(78%,300px);scroll-snap-align:center;scroll-snap-stop:normal} .n2-shelf a{display:flex;flex-direction:column;justify-content:flex-end;min-height:120px;height:100%;padding:14px;border:1px solid var(--n2-line);border-radius:16px; text-decoration:none;color:var(--n2-parch);background:rgba(255,254,247,.035);transition:background .25s var(--n2-ease),transform .6s var(--n2-spring)} .n2-shelf a:active{transform:scale(.98)} .n2-shelf a:hover{background:rgba(233,200,106,.08)} .n2-shelf b{font-size:15px;font-weight:600;line-height:1.35} .n2-shelf small{display:block;font-family:var(--n2-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--n2-parch3);margin-top:6px} .n2-list{list-style:none;margin:6px 0 24px;padding:0} .n2-list li{position:relative} .n2-list li::before,.n2-list li:last-child::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(233,200,106,.30),rgba(233,200,106,.06))} .n2-list li:last-child::after{top:auto;bottom:0} .n2-list a{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 2px;text-decoration:none;color:var(--n2-parch);transition:transform .6s var(--n2-spring)} .n2-list a:active{transform:translateX(4px)} .n2-list a:hover b{color:var(--n2-goldhi)} .n2-list b{transition:color .25s var(--n2-ease)} .n2-list b{font-weight:600;font-size:16px;line-height:1.35;flex:1} .n2-list .n2-num{font-family:var(--n2-mono);font-size:12px;letter-spacing:.16em;color:var(--n2-parch3);min-width:2.6em} .n2-list .n2-ar{font-family:var(--n2-ar);font-size:20px;color:var(--n2-goldhi);direction:rtl;line-height:1.2} .n2-list small{display:block;font-size:14px;font-weight:400;color:var(--n2-parch3);margin-top:2px} /* a list whose line is a note rather than a name: the reference leads in the number column and the sentence beside it reads as body text, not a heading */ .n2-list.n2-notes b{font-weight:400;font-size:15px;color:var(--n2-parch2)} .n2-walk{display:flex;justify-content:space-between;gap:10px;margin-top:22px;flex-wrap:wrap} .n2-walk a{flex:1 1 40%;min-height:46px;display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--n2-line); border-radius:14px;text-decoration:none;color:var(--n2-parch);font-size:14px;font-weight:600;line-height:1.3;background:rgba(255,254,247,.035);transition:transform .6s var(--n2-spring),background .25s var(--n2-ease)} .n2-walk a:active{transform:scale(.98)} .n2-walk a:hover{background:rgba(233,200,106,.08)} .n2-walk a.n2-next{justify-content:flex-end;text-align:right} .n2-walk a .n2-walk-t{display:block;min-width:0} .n2-walk a small{font-family:var(--n2-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--n2-parch3);display:block;margin-bottom:3px} .n2-walk i{flex:1 1 40%} .n2-walk a svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .n2-facts{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px} .n2-facts li{border:1px solid var(--n2-line);border-radius:12px;padding:10px 12px;background:rgba(255,254,247,.03)} .n2-facts span{display:block;font-family:var(--n2-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--n2-parch3);margin-bottom:4px} .n2-facts b{font-weight:600;font-size:15px;line-height:1.35} .n2-facts b[lang="ar"]{font-family:var(--n2-ar);font-size:22px;line-height:1.2;color:var(--n2-goldhi)} /* the order of events a chapter names: a spine down the side with a mark at each step, the event on the line and its source under it. Written in logical properties so the spine moves to the right of the text in Arabic, Urdu, Farsi, Dari, Pashto and Kurdish without a second rule. */ .n2-tl{list-style:none;margin:8px 0 0;padding:0;padding-inline-start:22px;position:relative} .n2-tl::before{content:"";position:absolute;inset-inline-start:5px;top:8px;bottom:8px;width:1px; background:linear-gradient(180deg,rgba(233,200,106,.45),rgba(233,200,106,.10))} .n2-tl li{position:relative;padding:0 0 16px} .n2-tl li:last-child{padding-bottom:0} .n2-tl li::before{content:"";position:absolute;inset-inline-start:-21px;top:7px;width:9px;height:9px;border-radius:50%; background:var(--n2-night);border:1px solid var(--n2-goldhi);box-shadow:0 0 0 3px var(--n2-night)} .n2-tl b{display:block;font-weight:600;font-size:15px;line-height:1.4;color:var(--n2-parch)} .n2-tl small{display:block;font-size:13px;line-height:1.5;color:var(--n2-parch3);margin-top:3px} /* what the chapter says to actually do about the trial it describes */ .n2-shield{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px} .n2-shield li{border:1px solid var(--n2-line);border-inline-start:2px solid rgba(233,200,106,.45); border-radius:12px;padding:11px 14px;background:rgba(233,200,106,.05); font-size:15px;line-height:1.5;color:var(--n2-parch2)} /* the evidence badge, in the shell's dialect. The parchment rooms have worn one since the first cut -- Sunnah-confirmed, Scholars differ -- and the surah study graded each of its 114 virtue reports with the same words. The third state is the one the study needed and the rooms never had: a surah for which no authentic virtue report exists at all. */ .n2-ev{display:inline-block;font-family:var(--n2-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase; border:1px solid;border-radius:999px;padding:3px 10px;margin-inline-end:8px;white-space:nowrap;vertical-align:middle} .n2-ev-sunnah{color:var(--n2-goldhi);border-color:rgba(233,200,106,.45);background:rgba(233,200,106,.10)} .n2-ev-debated{color:rgba(226,214,186,.92);border-color:rgba(226,214,186,.35);background:rgba(226,214,186,.06)} .n2-ev-none{color:var(--n2-parch3);border-color:rgba(255,254,247,.22);background:rgba(255,254,247,.04)} .n2-quote{margin:0 0 14px;padding:0 0 0 16px;border-left:2px solid rgba(233,200,106,.4)} .n2-quote .n2-p{margin-bottom:6px} .n2-image{width:100%;max-width:420px;height:min(24svh,200px);border-radius:16px;background-size:cover;background-position:center; border:1px solid var(--n2-line);margin:0 0 18px;opacity:.85} .n2-hr{border:0;border-top:1px solid var(--n2-line);margin:20px 0} .n2-foot{position:relative;z-index:2;max-width:44rem;margin:0 auto;padding:12px 26px 30px;font-family:var(--n2-mono);font-size:13px; letter-spacing:.16em;text-transform:uppercase;color:var(--n2-parch3);line-height:1.9} .n2-foot a{color:var(--n2-parch3)} /* -------------------------------------------------------- under the thumb */ .n2-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,1fr); padding:8px 8px calc(var(--n2-safe-bottom) + 8px);margin:0; background:rgba(4,6,15,.62);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%); border-top:1px solid rgba(233,200,106,.12);font-family:var(--n2-sans)} .n2-bar a{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:52px;justify-content:center;text-decoration:none;position:relative;z-index:1; color:var(--n2-parch3);font:500 14px/1 var(--n2-sans);letter-spacing:.02em;border-radius:12px; transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--ms,1));transition:color .25s var(--n2-ease),background .25s var(--n2-ease),transform .6s var(--n2-spring)} .n2-pill-bg{position:absolute;left:8px;top:8px;height:52px;width:0;border-radius:12px;background:rgba(233,200,106,.10);border:1px solid rgba(233,200,106,.18); opacity:0;transform:translateX(0);transition:transform .7s var(--n2-spring),width .7s var(--n2-spring),opacity .4s var(--n2-ease);pointer-events:none} .n2-pill-bg.n2-show{opacity:1} .n2-bar a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .n2-bar a.n2-on{color:var(--n2-goldhi)} .n2-bar a:active{background:rgba(233,200,106,.08)} .n2-bar.n2-away{transform:translateY(110%)} @media (min-width:900px){.n2-bar.n2-away{transform:translate(-50%,110%)}} .n2-bar{transition:transform .7s var(--n2-spring)} /* ------------------------------------------------ the marks at the right: one per screen, the read one under a longer gold pill. The pill is one element: on a move it first stretches to cover both marks, then settles on the new one, both on the spring, so it travels as a liquid. Hidden from assistive tech: the screens keep their headings. */ .n2-dots{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:19;display:flex;flex-direction:column;gap:6px;padding:6px 4px;margin:0; transition:opacity .35s var(--n2-ease);pointer-events:auto} /* each mark is a 22 by 12 hit box with a 4 px dot at its centre */ .n2-dots i{display:block;width:22px;height:12px;position:relative;cursor:pointer;margin:0;padding:0} .n2-dots i::before{content:"";position:absolute;left:9px;top:4px;width:4px;height:4px;border-radius:50%;background:rgba(255,254,247,.22);transition:background .35s var(--n2-ease)} .n2-dots i.n2-on::before{background:rgba(255,254,247,.06)} .n2-dots .n2-dots-pill{position:absolute;left:13px;width:4px;height:14px;border-radius:2px;background:var(--n2-goldhi);box-shadow:0 0 10px rgba(233,200,106,.45); transition:top .6s var(--n2-spring),height .6s var(--n2-spring);pointer-events:none;top:5px} .n2-dots .n2-dots-pill.n2-stretch{transition:top .32s var(--n2-spring),height .32s var(--n2-spring)} html.n2-sheet-open .n2-dots{opacity:0;pointer-events:none} @media (min-width:900px){.n2-dots{right:calc(50% - 22rem - 26px)}} @media (min-width:900px){.n2-bar{left:50%;right:auto;width:min(44rem,100%);transform:translateX(-50%);border-radius:18px 18px 0 0;border-left:1px solid rgba(233,200,106,.12);border-right:1px solid rgba(233,200,106,.12)}} /* a sheet: rises on the spring, a handle to pull it shut, the safe area kept */ .n2-sheet-wrap{position:fixed;inset:0;z-index:30;background:rgba(4,6,15,.55);opacity:0;transition:opacity .35s var(--n2-ease); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .n2-sheet-wrap.n2-show{opacity:1} .n2-sheet{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;background:var(--n2-night2);color:var(--n2-parch); border:1px solid rgba(233,200,106,.22);border-bottom:0;border-radius:22px 22px 0 0;padding:10px 20px calc(var(--n2-safe-bottom) + 22px); box-shadow:0 -20px 60px rgba(0,0,0,.5);transform:translateY(100%);transition:transform .7s var(--n2-spring);touch-action:none} .n2-sheet-wrap.n2-show .n2-sheet{transform:none} .n2-sheet.n2-drag{transition:none} .n2-handle{display:block;width:40px;height:4px;border-radius:2px;background:var(--n2-parch4);margin:0 auto 16px} .n2-sheet p{margin:0 0 8px;font-size:15px;line-height:1.5;color:var(--n2-parch2)} .n2-sheet p b{color:var(--n2-parch);font-weight:600} .n2-sheet .n2-row{margin-top:12px} /* the notice the older pages carry is hidden under the second cut's bar */ html[data-n2] #noor-notice{display:none!important} /* -------------------------------------------------------------- motion */ @media (prefers-reduced-motion:reduce){ html[data-n2]{scroll-behavior:auto} .n2-idea>*{transition:none!important;opacity:1!important;transform:none!important;filter:none!important} /* nothing of the shell's moves: every n2- class, its pseudo-elements, and the night */ [class*="n2-"],[class*="n2-"]::before,[class*="n2-"]::after,#n2-gl{transition:none!important;animation:none!important} .n2-btn,.n2-bar a{transform:none!important} .n2-glow{animation:none!important} } @media (min-width:640px){ .n2-idea{padding-left:32px;padding-right:32px} .n2-top{padding-left:28px;padding-right:28px} } @media print{.n2-bar,.n2-top,#n2-gl,.n2-still,.n2-vig,.n2-dots,.n2-prog,.n2-sheet-wrap,.n2-toast{display:none!important} html[data-n2],html[data-n2] body{background:#fff;color:#111} .n2-g,.n2-eyebrow,.n2-ref,.n2-main a{color:#6b5410} .n2-p,.n2-dim,.n2-meaning,.n2-date,.n2-src,.n2-credit,.n2-foot,.n2-h1,.n2-h2,.n2-h3{color:#111}} /* --------------------------------------------------------------------------- the quiet guide, in the night noor-guide.js answers from the sources on the thirty chapters that carry a curated topic -- the Dajjal, the grave, the trials, Harut and Marut -- and it injects its own parchment stylesheet, written when every room on the site was parchment. Inside the shell's sheet that arrived as a cream card in a dark room, on the chapters a reader is most likely to be uneasy in, which is the last place to raise the brightness. Only the colours are set here; the shape, the rhythm and the behaviour stay the guide's own. Its