/* Newsreader now loads via in Base.astro (parallel fetch, no @import chain) */ /* ============================================================ SILSILA — site design system Palette: deep green + cream (matches Logo.jpg), brass accent. Type: a deliberate two-voice system — SERIF (--serif: Newsreader) the soul — titles, story prose, wordmark. old-world, authentic, literary. SANS (--sans: Inter) the machine — nav, labels, meta, buttons, data. precise, modern, technological. The contrast between the two IS the brand. Arabic: Amiri. ============================================================ */ :root{ /* ============ R7 "Divided" ROLLOUT (2026-07-08) ============ Producer applied the R7 home design site-wide: canvas moves to the R7 blue-black, accents to R7 light gold, UI font to Space Grotesk. Variable NAMES stay stable — only values remapped. */ --serif:'Newsreader',Georgia,'Times New Roman',serif; --sans:'Space Grotesk',system-ui,sans-serif; --bg:#0A0D13; /* canvas — R7 blue-black */ --bg-2:#10141C; --panel:#141924; /* card surface — R7 card */ --panel-2:#11151E; --ink:#EAEEF5; /* R7 text */ --ink-soft:#C6CCD8; --muted:#8B93A3; /* R7 muted */ --muted-2:#7E8798; /* R7 #6B7382 lifted for AA on --bg */ --brass:#E0C089; /* R7 gold accent (CTAs, active, links) */ --brass-hi:#EDD2A4; /* hover/highlight gold */ --brass-deep:#C9A468; /* pressed */ --crimson:#6D1112; /* brand secondary — crimson (villains tint) */ --gold:#C17834; /* end times tint — brand copper */ --gold-hi:#E7BE8A; /* brand gold */ --gold-deep:#9C5E28; --teal:#5FA597; /* parables / quran tint */ --violet:#8E86C9; /* prophets tint */ --rose:#C97B96; /* women of islam tint */ --emerald:#4FB286; /* fresh green accent */ --fight:#C77B3A; /* relationship-map: fought beside */ --lead:#5E86C9; /* relationship-map: leadership */ /* ---- Brand palette swatches (producer 2026-06-29) ---- */ --primary:#2E4A39; /* forest green */ --primary-deep:#16271D; /* near-black green */ --secondary:#7A211C; /* crimson red */ --secondary-deep:#3B130D; /* dark maroon */ --accent:#C07E3F; /* copper (left swatch) */ --accent-soft:#E0C089; /* light gold/tan (right swatch) */ --neutral:#D8CDB2; /* cream sand */ --neutral-deep:#211F1E; /* charcoal */ --white:#FFFFFF; --black:#000000; --line:rgba(234,238,245,.12); --line-soft:rgba(234,238,245,.07); --shadow:0 30px 80px rgba(0,0,0,.5); --wrap:1440px; /* R7: 1440 max canvas, matches home .r7-main */ } /* ============================================================ LIGHT THEME (TRIAL) — toggle via [data-theme="light"] on . Only the neutral surface/text/line tokens flip; brand copper/gold and the intentionally-dark cinematic sections (hero image, green art-band, posters) keep their own backgrounds so the warmth + contrast survive on a light page. If the trial doesn't hold up, delete this block + the .theme-toggle rules + the toggle button/script in Nav.astro + the pre-paint script in Base.astro. ============================================================ */ :root[data-theme="light"]{ --bg:#F6F3EC; /* warm off-white canvas */ --bg-2:#EDE8DD; --panel:#FFFFFF; /* card surface */ --panel-2:#F1ECE2; --ink:#1B1B1F; /* near-black text */ --ink-soft:#3C3C42; --muted:#5E5E66; --muted-2:#6E6E76; /* darkened for AA on cream */ --brass:#A8601F; /* copper darkened for contrast on light surfaces */ --brass-hi:#9A5A1A; /* gold-highlight darkened so kickers stay legible on cream */ --line:rgba(20,20,25,.14); --line-soft:rgba(20,20,25,.08); --shadow:0 24px 60px rgba(0,0,0,.16); } /* nav flips to a light glass bar in light mode (its default bg is dark green) */ :root[data-theme="light"] .nav{background:linear-gradient(180deg,rgba(255,255,255,.72),transparent)} :root[data-theme="light"] .nav.scrolled{background:rgba(246,243,236,.86);border-bottom-color:var(--line-soft);box-shadow:0 14px 40px -16px rgba(0,0,0,.14)} /* film-grain overlay is meant for dark; soften on light so it doesn't muddy */ :root[data-theme="light"] body::after{opacity:.025} /* cinematic surfaces stay dark in light mode (Netflix billboard rule): re-declare the dark token set inside the hero + billboard so scrims, text, pills and buttons all resolve against near-black — not cream. */ :root[data-theme="light"] .hero-drop, :root[data-theme="light"] .billboard{ --bg:#0A0D13;--bg-2:#10141C;--panel:#141924;--panel-2:#11151E; --ink:#EAEEF5;--ink-soft:#C6CCD8;--muted:#8B93A3;--muted-2:#7E8798; --brass:#E0C089;--brass-hi:#EDD2A4; --line:rgba(234,238,245,.12);--line-soft:rgba(234,238,245,.07); background:#0A0D13} /* theme toggle button (lives in nav-right) */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto; border:1px solid var(--line-soft);border-radius:999px;background:rgba(244,239,230,.06);color:var(--muted); cursor:pointer;transition:.25s;padding:0} .theme-toggle:hover{color:var(--ink);border-color:var(--brass);background:rgba(193,120,52,.08)} .theme-toggle svg{width:17px;height:17px} :root:not([data-theme="light"]) .theme-toggle .ic-sun{display:none} :root[data-theme="light"] .theme-toggle .ic-moon{display:none} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:300; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; min-height:100vh; } /* film grain */ body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; } .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px} /* R7: side padding matches home .r7-main/.r7-nav-inner */ .serif{font-family:var(--sans);font-weight:700;letter-spacing:-.02em} .arabic{font-family:'Amiri',serif;direction:rtl} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .kicker{font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--brass);font-weight:600} .label{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2);font-weight:600} /* ---------- NAV (R7 pill style, 2026-07-08) ---------- */ .nav{position:sticky;top:0;z-index:500; background:rgba(10,13,19,.85);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4); border-bottom:1px solid rgba(234,238,245,.07); transition:background .45s ease,box-shadow .45s ease} .nav.scrolled{background:rgba(10,13,19,.92);box-shadow:0 14px 44px -14px rgba(0,0,0,.65)} .nav .row{display:flex;align-items:center;justify-content:space-between;height:62px;margin-bottom:0;gap:14px} .brand{display:flex;align-items:center;gap:8px;flex:0 0 auto} .brand-logo{height:38px;width:auto;display:block} @media(max-width:680px){.brand-logo{height:32px}} .nav .links{display:flex;align-items:center;gap:4px;flex:1;justify-content:center} /* R7: centered like home .r7-links */ .nav .links a{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:99px;border:1px solid transparent; font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--muted);transition:background .2s ease,color .2s ease;position:relative;white-space:nowrap} .nav .links a:not(.btn):not(.navbtn):hover{background:rgba(234,238,245,.06);color:var(--ink)} .nav .links a.on{background:rgba(224,192,137,.14);border-color:rgba(224,192,137,.3);color:var(--ink)} .nav .links a svg{flex:0 0 auto} .nav .links a.on svg{stroke:var(--brass)} /* right cluster: search + CTA */ .nav-right{display:flex;align-items:center;gap:18px;flex:0 0 auto} .nav-right{gap:10px} .nav .btn{padding:9px 18px;font-size:12px;font-weight:700;border-radius:99px;white-space:nowrap} .searchbar{display:flex;align-items:center;gap:8px;background:rgba(234,238,245,.06);border:1px solid rgba(234,238,245,.1);border-radius:99px;padding:7px 14px;color:var(--muted);transition:.25s;width:170px} @media(max-width:1180px){.searchbar{width:140px}} .searchbar:focus-within{border-color:var(--brass);background:rgba(244,239,230,.1);color:var(--ink-soft)} .searchbar svg{flex:0 0 auto} .searchbar input{flex:1;background:none;border:none;outline:none;color:var(--ink);font-size:13px;letter-spacing:.02em;min-width:0} .searchbar input::placeholder{color:var(--muted-2)} .btn{display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.03em;font-weight:700; padding:11px 22px;border-radius:99px;border:1px solid var(--brass);color:var(--brass);transition:.3s;cursor:pointer;background:transparent} .btn:hover{background:var(--brass);color:#0A0D13;transform:translateY(-2px)} .btn.solid{background:var(--brass);color:#0A0D13;border-color:var(--brass)} .btn.solid:hover{background:var(--brass-hi);border-color:var(--brass-hi);color:#0A0D13;transform:translateY(-2px)} .btn.ghost{border-color:var(--line);color:var(--ink);background:rgba(234,238,245,.04);backdrop-filter:blur(6px)} .btn.ghost:hover{border-color:var(--brass);color:var(--brass-hi);background:rgba(224,192,137,.08)} /* ---------- NAV: burger + full-screen sheet (≤900px) ---------- */ .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:10px; border:1px solid var(--line-soft);border-radius:8px;background:rgba(244,239,230,.05);cursor:pointer;flex:0 0 auto} .nav-burger span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:.25s} .nav-burger:hover span{background:var(--brass-hi)} .nav-sheet{position:fixed;inset:0;z-index:700;display:flex;flex-direction:column;gap:26px; padding:18px 22px calc(28px + env(safe-area-inset-bottom)); background:rgba(11,11,13,.97);backdrop-filter:blur(18px); opacity:0;transition:opacity .28s ease} .nav-sheet.open{opacity:1} .nav-sheet[hidden]{display:none} .nav-sheet-head{display:flex;align-items:center;justify-content:space-between;height:56px} .nav-sheet-close{width:44px;height:44px;border:1px solid var(--line-soft);border-radius:50%;background:none; color:var(--ink);font-size:26px;line-height:1;cursor:pointer;transition:.25s} .nav-sheet-close:hover{border-color:var(--brass);color:var(--brass-hi)} .nav-sheet-search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px; padding:13px 16px;color:var(--muted);background:rgba(244,239,230,.05)} .nav-sheet-search:focus-within{border-color:var(--brass);color:var(--ink-soft)} .nav-sheet-search input{flex:1;background:none;border:none;outline:none;color:var(--ink);font-size:16px;min-width:0} .nav-sheet-search input::placeholder{color:var(--muted-2)} .nav-sheet-links{display:flex;flex-direction:column} .nav-sheet-links a{display:flex;align-items:center;min-height:56px;font-size:22px;font-weight:600;letter-spacing:-.01em; color:var(--ink-soft);border-bottom:1px solid var(--line-soft);transition:color .2s} .nav-sheet-links a:hover{color:var(--ink)} .nav-sheet-links a.on{color:var(--brass-hi)} .nav-sheet-links a.on::before{content:"";width:18px;height:2px;background:var(--brass);border-radius:2px;margin-right:12px} .nav-sheet-join{margin-top:auto;justify-content:center;padding:15px 20px;font-size:15px} /* icon pills need more room than the old text links — burger kicks in at 1080 */ @media(max-width:1080px){ .nav .links{display:none} .nav .searchbar{display:none} .nav-burger{display:flex} } /* ---------- HERO ---------- */ .hero{position:relative;min-height:90vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden} .hero-glow{position:absolute;top:38%;left:50%;width:1300px;height:1300px;transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(193,120,52,.10),rgba(95,165,151,.05) 34%,transparent 64%);pointer-events:none} /* faint arabic calligraphy watermark */ .hero-script{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none; font-family:'Amiri',serif;font-size:46vw;line-height:1;color:var(--ink);opacity:.022;white-space:nowrap;direction:rtl} .hero-inner{position:relative;z-index:2} .hero .eyebrow{margin-bottom:26px} .hero h1{font-family:var(--sans);font-weight:800;font-size:clamp(46px,8vw,104px);line-height:.96;letter-spacing:-.04em;margin-bottom:26px;max-width:14ch} .hero h1 em{font-style:italic;color:var(--brass-hi)} .hero .sub{font-family:var(--sans);font-size:clamp(16px,1.9vw,21px);color:var(--ink-soft);max-width:600px;line-height:1.6;font-weight:400} .hero .sub b{color:var(--ink);font-weight:500} .hero .cta-row{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap} .hero .hint{margin-top:46px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:14px} .hero .hint .ln{width:42px;height:1px;background:var(--brass);opacity:.5} /* ---------- SECTION ---------- */ section.block{padding:100px 0;border-top:1px solid var(--line-soft);position:relative} .sec-head{display:flex;align-items:baseline;gap:22px;margin-bottom:14px} .sec-no{font-family:var(--serif);font-size:clamp(18px,2vw,24px);color:var(--muted-2);letter-spacing:.02em;font-variant-numeric:tabular-nums} .sec-head h2{font-family:var(--sans);font-weight:800;font-size:clamp(28px,4vw,46px);line-height:1.02;letter-spacing:-.03em} .sec-desc{font-family:var(--sans);font-size:17px;color:var(--muted);max-width:640px;margin-bottom:46px;line-height:1.6} /* ---------- 3 WAYS ---------- */ .ways{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .way{border:1px solid var(--line-soft);border-radius:6px;padding:32px 28px;background:linear-gradient(165deg,var(--panel),var(--bg-2));transition:.4s} .way:hover{border-color:var(--line);transform:translateY(-4px)} .way .ic{width:46px;height:46px;border-radius:50%;border:1px solid var(--brass);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--brass)} .way h3{font-family:var(--sans);font-weight:700;font-size:22px;letter-spacing:-.02em;margin-bottom:10px} .way p{font-size:14px;color:var(--muted);line-height:1.6} /* ---------- CATALOG / POSTERS ---------- */ .tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px} .tab{font-size:13px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);padding:9px 18px;border-radius:40px;cursor:pointer;transition:.3s;background:transparent} .tab:hover{color:var(--ink);border-color:var(--line)} .tab.on{background:var(--brass);color:#0B0B0D;border-color:var(--brass);font-weight:500} .tab.lens-link{color:var(--brass-hi);border-color:rgba(193,120,52,.45);background:rgba(193,120,52,.08)} .tab.lens-link:hover{color:#0B0B0D;border-color:var(--brass);background:var(--brass)} .story-lens-dock{margin:-8px 0 28px} .story-lens-tiles{margin-bottom:0} .story-lens-tile{appearance:none;text-align:left;font:inherit;cursor:pointer} .story-lens-tile.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 20px 70px -42px var(--acc)} .story-lens-tile:focus-visible{outline:2px solid var(--acc);outline-offset:4px} .catalog.is-discover-mode{display:none} .discover-mode-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px} .discover-mode{appearance:none;border:1px solid var(--line);background:rgba(244,239,230,.05);color:var(--muted); border-radius:999px;padding:10px 16px;font:800 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.24s} .discover-mode:hover,.discover-mode.on{border-color:var(--brass);background:rgba(193,120,52,.14);color:var(--ink)} .discover-mode:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px} .story-discover-panel .surprise-stage{padding-top:0} .story-fact-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;columns:auto} .story-fact-card{margin:0;min-height:190px} .story-fact-card .fact-line{font-size:15.5px;line-height:1.45} .story-fact-card.is-long .fact-line{font-size:14px} .story-shuffle-stage{justify-content:flex-start;padding-top:0;padding-bottom:28px} .story-shuffle-stage .surprise-card{width:min(760px,100%);text-align:left} @media(max-width:760px){ .story-fact-wall{grid-template-columns:1fr} .story-shuffle-stage .surprise-card{text-align:center} } /* search results header (stories page, ?q= active) */ .search-head{display:flex;align-items:baseline;gap:16px;margin:0 0 26px;font-size:16px;color:var(--ink-soft)} .search-head a{font-size:13px;color:var(--brass);transition:.2s} .search-head a:hover{color:var(--brass-hi)} .catalog{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .pcard{position:relative;z-index:1;transform-origin:center center;overflow:visible;border:none;background:transparent; transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s cubic-bezier(.2,.7,.2,1);display:block} /* Netflix-polished: clean art with 12px radius, title sits BELOW the poster */ .pcard .poster{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--panel);border-radius:14px;border:1px solid rgba(234,238,245,.09); transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .3s cubic-bezier(.2,.7,.2,1)} /* loading shimmer — sits under the art; the loaded image simply covers it */ .pcard .poster::before{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(100deg,transparent 32%,rgba(244,239,230,.07) 50%,transparent 68%); background-size:200% 100%;animation:posterShimmer 1.4s linear infinite} @keyframes posterShimmer{from{background-position:130% 0}to{background-position:-130% 0}} .pcard .poster img,.pcard .poster svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1} /* bookmark / "My List" toggle (idea #8) — works on cards + any [data-bm-id] */ .bm-btn{position:absolute;top:8px;right:8px;z-index:6;width:32px;height:32px;border-radius:50%;border:1px solid var(--line); background:rgba(10,10,12,.6);backdrop-filter:blur(4px);color:var(--ink-soft);font-size:16px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:.2s;opacity:0} .pcard:hover .bm-btn,.bm-btn.on,.bm-btn:focus-visible{opacity:1} .bm-btn:hover{border-color:var(--brass);color:var(--brass-hi);transform:scale(1.1)} .bm-btn.on{color:var(--brass-hi);border-color:var(--brass);background:rgba(193,120,52,.16)} /* R7: text sits under the art, LEFT-aligned */ .pcard .meta{position:static;padding:9px 2px 0;text-align:left} .pcard .cat{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-hi);margin-bottom:6px;display:block} .pcard .nm{display:block;font-family:var(--sans);font-weight:600;font-size:13.5px;letter-spacing:-.01em;color:var(--ink);line-height:1.2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pcard .sub-meta{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;letter-spacing:.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .honor{font-family:'Amiri',serif;color:var(--brass-hi);font-weight:400;font-size:.8em;line-height:0;vertical-align:-.06em} .pcard .ar{display:block;font-family:'Amiri',serif;font-size:13px;color:var(--muted);margin-top:3px;direction:rtl;text-align:center} /* grade chip sitting on the poster art (top-right) */ .grade.on-poster{position:absolute;top:12px;right:12px;z-index:4;backdrop-filter:blur(4px)} /* R7 hover — art lifts, gold hairline (replaces the Netflix scale) */ .pcard.live:hover{z-index:5} .pcard.live:hover .poster{transform:translateY(-5px);border-color:rgba(224,192,137,.5);box-shadow:0 16px 38px -16px rgba(0,0,0,.72)} .pcard .badge{position:absolute;top:10px;left:10px;z-index:4;font-size:9px;letter-spacing:.14em;text-transform:uppercase; padding:5px 10px;border-radius:99px;font-weight:700;display:flex;align-items:center;gap:6px} .pcard .badge.play{background:var(--brass);color:#0A0D13} .pcard .parts-n{position:absolute;top:12px;right:12px;z-index:4;font-size:10px;color:var(--ink-soft);background:rgba(20,20,22,.7); border:1px solid var(--line);padding:4px 9px;border-radius:30px;backdrop-filter:blur(4px)} .pcard.hide{display:none} /* ---------- EMAIL / CTA BAND ---------- */ .band{border-top:1px solid var(--line-soft);position:relative;overflow:hidden;padding:110px 0;text-align:center} .band .glow{position:absolute;bottom:-340px;left:50%;transform:translateX(-50%);width:1000px;height:660px; background:radial-gradient(ellipse,rgba(193,120,52,.10),transparent 66%)} .band-inner{position:relative;z-index:2;max-width:620px;margin:0 auto} .band h2{font-family:var(--sans);font-weight:800;font-size:clamp(28px,4.2vw,46px);line-height:1.02;letter-spacing:-.03em;margin-bottom:16px} .band p{color:var(--muted);font-size:16px;margin-bottom:30px} .signup{display:flex;gap:10px;max-width:460px;margin:0 auto 16px} .signup input{flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:3px;color:var(--ink); padding:14px 16px;font-family:inherit;font-size:15px;outline:none;transition:.3s} .signup input:focus{border-color:var(--brass)} .signup .btn{flex-shrink:0} .signup-note{font-size:12px;color:var(--muted-2);min-height:18px} .or{margin:26px 0 8px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)} .wa{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);border:1px solid var(--line); padding:12px 22px;border-radius:40px;transition:.3s} .wa:hover{border-color:#3fbf6f;color:#fff} .wa svg{fill:#3fbf6f} /* ---------- FOOTER ---------- */ footer{padding:60px 0 50px;border-top:1px solid var(--line-soft)} .foot{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap} .foot .col h4{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px} .foot .col .tag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px} .foot .col p{font-size:13px;color:var(--muted);max-width:280px} .foot .who{display:flex;align-items:center;gap:14px;margin-bottom:14px} .foot .who img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid var(--line)} .foot .who .n{font-size:14px;color:var(--ink)} .foot .who .r{font-size:12px;color:var(--muted-2)} .foot a.fl{display:block;font-size:13px;color:var(--muted);padding:6px 0;transition:.25s} .foot a.fl:hover{color:var(--ink)} .socials{display:flex;gap:12px;margin-top:8px} .socials a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.3s} .socials a:hover{border-color:var(--brass);background:var(--brass)} .socials a:hover svg{fill:#0B0B0D} .socials svg{fill:var(--muted);transition:.3s} .copy{margin-top:46px;padding-top:24px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between; font-size:12px;color:var(--muted-2);letter-spacing:.04em;flex-wrap:wrap;gap:10px} /* ---------- STORY READER ---------- */ .reader-hero{position:relative;padding:72px 0 56px;overflow:hidden} .reader-hero .bg{position:absolute;inset:0;z-index:0} /* ambient art wash: blurred poster fills the hero with the story's color world */ .reader-hero .bg img,.reader-hero .bg svg{width:100%;height:100%;object-fit:cover;opacity:.5; filter:blur(48px) saturate(1.15);transform:scale(1.4)} .reader-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.5),var(--bg) 94%)} .reader-hero .inner{position:relative;z-index:2;max-width:780px} .crumb{font-size:12px;letter-spacing:.04em;color:var(--muted);margin-bottom:24px} .crumb a:hover{color:var(--ink)} .reader-hero .title-row{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin:8px 0 14px} .reader-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,6vw,68px);line-height:1.02;letter-spacing:-.02em;margin:0} .reader-hero .arttl{font-family:'Amiri',serif;font-size:clamp(20px,2.4vw,30px);color:var(--brass-hi);direction:rtl;opacity:.9} .reader-hero .blurb{font-family:var(--serif);font-size:19px;color:var(--ink-soft);max-width:620px;line-height:1.6;margin-bottom:26px} .reader-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap} /* trailer */ .trailer{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:1px solid var(--line);margin:38px 0; background:radial-gradient(circle at 50% 40%,#232327,#111113 72%);display:flex;align-items:center;justify-content:center;cursor:pointer} .trailer .play{width:78px;height:78px;border-radius:50%;border:1px solid var(--brass);display:flex;align-items:center;justify-content:center;transition:.4s;z-index:5;background:rgba(17,17,19,.4)} .trailer:hover .play{background:var(--brass)} .trailer .play svg{fill:var(--brass);transition:.4s;margin-left:4px} .trailer:hover .play svg{fill:#0B0B0D} .trailer .ph{position:absolute;bottom:18px;left:22px;z-index:5;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .trailer .soon-tag{position:absolute;top:16px;right:18px;z-index:5;font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);border:1px solid var(--line);padding:5px 11px;border-radius:30px;background:rgba(17,17,19,.5)} /* compact "trailer coming" strip — replaces the screen-tall empty 16:9 box */ .trailer-soon{display:flex;align-items:center;gap:14px;border:1px solid var(--line-soft);border-radius:12px; padding:16px 20px;margin:38px 0;background:linear-gradient(160deg,var(--panel),var(--bg-2)); color:var(--muted);font-size:14px;flex-wrap:wrap;scroll-margin-top:90px} .trailer-soon .ic{width:40px;height:40px;border-radius:50%;border:1px solid var(--brass);display:flex; align-items:center;justify-content:center;color:var(--brass);flex-shrink:0} .trailer-soon .ic svg{margin-left:2px} .trailer-soon b{color:var(--ink-soft);font-weight:600} .trailer-soon .soon{margin-left:auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted-2);border:1px solid var(--line);padding:5px 11px;border-radius:30px;white-space:nowrap} /* audio player */ .player{border:1px solid var(--line-soft);border-radius:8px;padding:26px;background:linear-gradient(160deg,var(--panel),var(--bg-2));margin:30px 0} .player .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px;gap:16px;flex-wrap:wrap} .player .head .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:6px} .player .head h4{font-family:var(--sans);font-weight:700;font-size:21px;letter-spacing:-.02em} .modes{display:flex;gap:8px;flex-wrap:wrap} .mode{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:7px 13px;border-radius:30px;cursor:pointer;transition:.3s} .mode.on{background:var(--brass);color:#0B0B0D;border-color:var(--brass);font-weight:500} .wave{display:flex;align-items:center;gap:3px;height:56px;margin:6px 0 20px} .wave .bar{flex:1;background:var(--brass);opacity:.35;border-radius:2px;height:20%} .wave.playing .bar{animation:eq 1s ease-in-out infinite} @keyframes eq{0%,100%{height:16%}50%{height:88%}} .pcontrols{display:flex;align-items:center;gap:16px} .pbtn{width:50px;height:50px;border-radius:50%;background:var(--brass);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s;flex-shrink:0} .pbtn:hover{background:var(--brass-hi)} .pbtn svg{fill:#0B0B0D;margin-left:2px} .pbar{flex:1;height:4px;background:var(--line);border-radius:3px;position:relative;cursor:pointer} .pbar .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--brass);border-radius:3px} .ptime{font-size:12px;color:var(--muted-2);font-variant-numeric:tabular-nums;min-width:84px;text-align:right} .player .soon-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:5px 11px;border-radius:30px} /* read text */ .read{max-width:720px;margin:0 auto;padding:30px 0 20px} /* first-person toggle (idea #21) */ .fp-toggle{display:flex;align-items:center;gap:10px;justify-content:center;margin:0 0 38px} .fp-toggle .fp-lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)} .fp-b{border:none;background:none;color:var(--muted);font-size:13px;letter-spacing:.02em;padding:4px 0;cursor:pointer;border-bottom:1px solid transparent;transition:.2s} .fp-b:hover{color:var(--ink-soft)} .fp-b.on{color:var(--brass-hi);border-bottom-color:var(--brass);font-weight:600} /* content-language switch (idea #7) — translates the story, page stays English */ .clang{display:flex;align-items:center;gap:16px;justify-content:center;margin:0 0 30px;flex-wrap:wrap} .clang .cl-lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)} .cl-b{border:none;background:none;color:var(--muted);font-size:14px;letter-spacing:.02em;padding:4px 2px;cursor:pointer;border-bottom:1px solid transparent;transition:.2s} .cl-b:hover{color:var(--ink-soft)} .cl-b.on{color:var(--brass-hi);border-bottom-color:var(--brass);font-weight:600} .cl-note{font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:0 0 30px;text-align:center} .cl-coming{text-align:center;padding:52px 0} .cl-coming>div{font-size:22px;color:var(--ink-soft);margin-bottom:10px;font-family:'Amiri',serif} .cl-coming>span{font-size:13px;color:var(--muted-2)} #readLang[dir="rtl"] .part p,#readLang[dir="rtl"] .part h3{font-family:'Amiri',serif;text-align:right;line-height:2.05} #readLang[dir="rtl"] .ayah .tr{font-family:'Amiri',serif;direction:rtl} /* Share-a-Line (#83) */ .shareline-pill{position:absolute;z-index:70;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px; font-family:var(--sans);font-size:12.5px;font-weight:600;color:#0B0B0D;background:var(--brass-hi);border:none; padding:8px 14px;border-radius:999px;cursor:pointer;box-shadow:0 10px 30px -10px rgba(0,0,0,.8);white-space:nowrap} .shareline-pill span{font-family:var(--serif);font-size:15px;line-height:1} .shareline-pill::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%); border:6px solid transparent;border-top-color:var(--brass-hi);border-bottom:0} .shareline-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px} .shareline-modal.open{display:flex} .sl-scrim{position:absolute;inset:0;background:rgba(4,4,6,.78);backdrop-filter:blur(3px)} .sl-panel{position:relative;z-index:1;width:min(460px,100%)} .sl-x{position:absolute;top:-38px;right:0;background:none;border:none;color:var(--muted);font-size:30px;line-height:1;cursor:pointer} .sl-x:hover{color:var(--ink)} .sl-card{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;padding:44px 40px; background:radial-gradient(120% 80% at 50% 12%,color-mix(in srgb,var(--acc) 22%,#0B0B0D),#0B0B0D 70%); border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center} .sl-card::before{content:"";position:absolute;top:44px;left:40px;width:64px;height:6px;background:var(--acc);border-radius:3px} .sl-mark{position:absolute;top:52px;left:38px;font-family:var(--serif);font-size:96px;line-height:.6;color:var(--acc);opacity:.5} .sl-quote{position:relative;z-index:1;color:var(--ink);line-height:1.4;letter-spacing:-.01em;margin:24px 0 0; display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden} .sl-attr{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:6px} .sl-title{color:var(--acc);font-size:19px} .sl-brand{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--muted-2)} .sl-actions{display:flex;gap:10px;justify-content:center;margin-top:18px} .sl-note{text-align:center;font-family:var(--sans);font-size:12.5px;color:var(--brass-hi);min-height:18px;margin-top:12px} /* One Beat at a Time (#79) */ .readtools{display:flex;justify-content:center;margin:-12px 0 30px} .beat-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-family:var(--sans);font-size:12.5px;letter-spacing:.02em;padding:7px 15px;border-radius:999px;cursor:pointer;transition:.2s} .beat-toggle:hover{color:var(--ink-soft);border-color:var(--acc,var(--brass))} .beat-toggle .bt-ic{font-size:14px;line-height:1} .beat-toggle.on{color:var(--brass-hi);border-color:var(--brass);background:color-mix(in srgb,var(--brass) 12%,transparent)} .beat-hidden{display:none!important} .beat-on .part{margin-bottom:30px} .beat-on .part>*{animation:beatIn .5s ease both} @keyframes beatIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .beatbar{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:60;display:flex;align-items:center;gap:16px;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:7px 7px 7px 20px;box-shadow:0 18px 50px -18px rgba(0,0,0,.9)} .beat-prog{font-family:var(--sans);font-size:12px;letter-spacing:.12em;color:var(--muted-2);white-space:nowrap} .beat-next{padding:9px 20px;font-size:13px;white-space:nowrap} @media(prefers-reduced-motion:reduce){.beat-on .part>*{animation:none}} .part{margin-bottom:54px;scroll-margin-top:90px} .part .pno{font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.06em;color:var(--brass);margin-bottom:6px} .part h3{font-family:var(--serif);font-weight:600;font-size:clamp(25px,3vw,34px);line-height:1.08;margin-bottom:22px;letter-spacing:-.015em} .part p{font-family:var(--serif);font-size:19px;line-height:1.8;color:var(--ink-soft);margin-bottom:22px;font-weight:400} .part p.lead::first-letter{font-family:var(--serif);font-weight:600;font-size:74px;line-height:.7;float:left;margin:8px 14px 0 0;color:var(--brass)} .part p em{color:var(--ink);font-style:italic} .ayah{border-left:2px solid var(--brass);background:rgba(193,120,52,.05);padding:22px 26px;margin:30px 0;border-radius:0 6px 6px 0} .ayah .ar{font-family:'Amiri',serif;font-size:28px;line-height:1.9;color:var(--brass-hi);margin-bottom:12px;direction:rtl;text-align:right} .ayah .tr{font-family:var(--serif);font-size:17px;color:var(--ink-soft);font-style:italic;margin-bottom:8px} .ayah .ref{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)} .signoff{text-align:center;font-family:var(--serif);font-style:italic;font-weight:400;font-size:26px;color:var(--brass-hi);margin:60px 0 20px} /* kebab + source panel (citations hidden here, off main read) */ .kebab{background:none;border:1px solid var(--line);color:var(--brass);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:20px;flex-shrink:0;transition:.3s;line-height:1} .kebab:hover{background:var(--brass);color:#0B0B0D} .srcdrawer{position:fixed;inset:0;z-index:1000;display:none} .srcdrawer.open{display:block} .srcdrawer .scrim{position:absolute;inset:0;background:rgba(8,8,10,.7);backdrop-filter:blur(4px)} .srcdrawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,92vw);background:linear-gradient(180deg,var(--panel),var(--bg-2)); border-left:1px solid var(--line);padding:34px 32px;overflow-y:auto;transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1)} .srcdrawer.open .panel{transform:none} .srcdrawer .x{position:absolute;top:20px;right:24px;font-size:26px;color:var(--ink);cursor:pointer;line-height:1} .srcdrawer .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:8px} .srcdrawer h4{font-family:var(--sans);font-weight:700;font-size:26px;letter-spacing:-.02em;margin-bottom:14px} .srcdrawer .summary{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:8px} .srcdrawer .lab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin:26px 0 10px} .cite{padding:15px 0;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;gap:14px} .cite .nm{font-size:15px;color:var(--ink)} .cite .nm small{display:block;color:var(--muted);font-size:12px;margin-top:3px} .grade{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:30px;font-weight:600;flex-shrink:0;white-space:nowrap} .g-sahih{background:rgba(95,165,151,.16);color:#7fc0b6;border:1px solid rgba(95,165,151,.4)} .g-hasan{background:rgba(193,120,52,.14);color:var(--brass-hi);border:1px solid var(--line)} .g-isra{background:rgba(197,107,92,.14);color:#e09384;border:1px solid rgba(197,107,92,.4)} .g-todo{background:rgba(255,255,255,.05);color:var(--muted-2);border:1px dashed var(--line)} .disc{margin-top:24px;font-size:12px;color:var(--muted-2);font-style:italic;line-height:1.6;border-top:1px solid var(--line-soft);padding-top:18px} /* part nav */ .partnav{position:sticky;top:74px;z-index:40;background:rgba(20,20,22,.9);backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft);padding:12px 0} .partnav .strip{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent)} .partnav .strip::-webkit-scrollbar{display:none} .partnav a{flex-shrink:0;font-size:12px;letter-spacing:.04em;color:var(--muted);padding:6px 0;border-bottom:1px solid transparent;transition:.25s} .partnav a:hover{color:var(--ink);border-bottom-color:var(--brass)} /* modal (coming soon) */ .cmodal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(8,8,10,.8);backdrop-filter:blur(6px)} .cmodal.open{display:flex} .cmodal .box{max-width:420px;width:100%;border:1px solid var(--line);border-radius:10px;overflow:hidden; background:linear-gradient(170deg,var(--panel),var(--bg-2));box-shadow:var(--shadow);position:relative;text-align:center;padding:40px 34px} .cmodal .box .cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:12px} .cmodal .box h3{font-family:var(--sans);font-weight:700;font-size:30px;margin-bottom:14px} .cmodal .box p{color:var(--muted);font-size:14px;margin-bottom:24px;line-height:1.6} .cmodal .x{position:absolute;top:14px;right:20px;color:var(--ink);cursor:pointer;font-size:24px;line-height:1} .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)} .reveal.in{opacity:1;transform:none} /* ============================================================ APP-HOME: billboard, rows, countdown, explore ============================================================ */ /* billboard */ /* billboard — cinematic hero, StreamFlix-style (left-aligned overlay) */ /* ---- multi-functional hero (Salam + Hijri frame · Next Drop focus) ---- */ .hero-drop{position:relative;overflow:hidden;min-height:clamp(500px,68vh,640px);display:flex;flex-direction:column;justify-content:center;padding:104px clamp(20px,5vw,72px) 64px;border-bottom:1px solid var(--line-soft)} .hero-drop .hero-glow{position:absolute;top:34%;left:62%;width:1100px;height:1100px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(193,120,52,.10),transparent 60%);pointer-events:none;z-index:0} .hero-drop .hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:right center;background-repeat:no-repeat} /* left→right scrim keeps the text legible; bottom fade blends into the rows */ .hero-drop .hero-bg::after{content:"";position:absolute;inset:0;background: linear-gradient(90deg,var(--bg) 0%,rgba(11,11,13,.88) 24%,rgba(11,11,13,.36) 51%,rgba(11,11,13,.12) 72%,rgba(11,11,13,.38) 100%), linear-gradient(0deg,var(--bg) 1%,rgba(11,11,13,.30) 22%,transparent 46%)} .hero-ribbon{position:absolute;top:84px;left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);display:flex;justify-content:space-between;align-items:center;gap:16px 24px;font-size:13px;color:var(--muted);z-index:2;flex-wrap:wrap} .hero-salam{display:inline-flex;align-items:center;gap:9px} .hero-salam .ar{font-family:'Amiri',serif;font-size:18px;color:var(--brass-hi)} .hero-salam .sep{opacity:.4} .hero-salam .greet{text-transform:capitalize} .hero-hijri{color:var(--muted-2);letter-spacing:.02em} .hero-hijri .hijri-h{color:var(--brass-hi);font-size:11px;letter-spacing:.1em} .hero-body{position:relative;z-index:1;max-width:640px;margin-top:26px;display:flex;flex-direction:column;flex:1} .hero-kicker{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-hi);font-weight:800;margin-bottom:14px} .hero-arc{color:var(--ink)} .hero-meta-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px} .hero-part{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0B0B0D;background:var(--brass);border:1px solid var(--brass);border-radius:999px;padding:5px 11px;white-space:nowrap} .hero-lesson{font-size:12px;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:rgba(11,11,13,.28)} .hero-title{font-size:clamp(44px,5.8vw,76px);font-weight:900;letter-spacing:-.04em;line-height:.94;margin:0;color:var(--ink);max-width:14ch;text-transform:uppercase} .hero-tag{margin:20px 0 0;font-size:clamp(15px,1.5vw,18px);color:var(--muted);max-width:42ch;line-height:1.6} .hero-tag .hl{color:var(--brass-hi);font-weight:500} .hero-learn{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:22px} .hero-learn span{font-size:12px;font-weight:700;color:var(--muted);border:1px solid var(--line-soft);border-radius:999px;background:rgba(244,239,230,.045);padding:6px 10px} .hero-clock{display:inline-flex;align-items:center;gap:10px;margin:24px 0 26px;padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(11,11,13,.34);backdrop-filter:blur(8px);color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;width:fit-content} .hero-clock-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:800} .hero-clock b{font-size:15px;color:var(--brass-hi);font-weight:850} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .hero-actions .btn{padding:14px 28px;font-size:14px;font-weight:600;border-radius:4px;letter-spacing:.04em} .hero-notify{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:10px 8px;transition:color .2s} .hero-notify:hover,.hero-notify.done{color:var(--brass-hi)} @media(max-width:640px){ .hero-ribbon{position:static;margin-bottom:24px} /* keep the subject (sits right in the art) inside the phone frame */ .hero-drop .hero-bg{background-position:72% center} .hero-drop{padding-top:88px;justify-content:flex-start;min-height:680px} .hero-body{margin-top:0;flex:none} .hero-learn{margin-top:18px;padding-top:0} .hero-title{font-size:clamp(36px,12vw,52px)} .hero-clock{width:100%;justify-content:flex-start;overflow:hidden} } .billboard{position:relative;height:62vh;min-height:460px;max-height:660px;display:flex;align-items:center;overflow:hidden} /* breathing brass glow (top-right) */ .billboard::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(54% 64% at 74% 24%,rgba(231,190,138,.26),rgba(193,120,52,.1) 42%,transparent 66%); animation:heroGlow 6s ease-in-out infinite} /* cinematic edge vignette */ .billboard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(125% 85% at 50% 40%,transparent 50%,rgba(8,8,10,.58) 100%)} @keyframes heroGlow{0%,100%{opacity:.55}50%{opacity:1}} .bb-bg{position:absolute;inset:0;z-index:0} .bb-bg svg,.bb-bg img{width:100%;height:100%;object-fit:cover} /* slow Ken-Burns drift on the active slide's art */ @keyframes kenburns{0%{transform:scale(1.05) translate(0,0)}100%{transform:scale(1.14) translate(-1.6%,-1.2%)}} .bb-slide .bb-bg{transform:scale(1.05);transform-origin:60% 40%} .bb-slide.on .bb-bg{animation:kenburns 18s ease-out forwards} .bb-bg::after{content:"";position:absolute;inset:0;background: linear-gradient(90deg,var(--bg) 0%,rgba(6,20,15,.92) 26%,rgba(6,20,15,.55) 48%,transparent 72%), linear-gradient(0deg,var(--bg) 0%,transparent 32%)} .bb-inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto} .bb-kicker{display:block;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-hi);font-weight:600;margin-bottom:14px} .bb-title{font-family:var(--sans);font-weight:900;font-size:clamp(48px,7.2vw,104px);line-height:.92;letter-spacing:-.045em;margin:0 0 18px;max-width:62%; background:linear-gradient(178deg,#FFFDF8 0%,#F4EFE6 46%,#E7BE8A 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; filter:drop-shadow(0 6px 28px rgba(0,0,0,.6))} .bb-ar{font-family:'Amiri',serif;font-size:18px;color:var(--brass-hi);margin-bottom:8px;direction:rtl} .bb-subline{font-size:clamp(13px,1.5vw,16px);letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink);margin-bottom:14px} .bb-cat{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink-soft);margin-bottom:14px} .bb-meta{display:inline-flex;gap:8px;align-items:center} .bb-meta span{opacity:.5} .bb-fmts{display:inline-flex;gap:6px} .bb-tag{font-family:var(--sans);font-size:clamp(15px,1.4vw,18px);color:var(--ink-soft);max-width:460px;line-height:1.55;margin-bottom:28px;text-shadow:0 1px 8px rgba(0,0,0,.4)} .bb-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px} .bb-sub-actions{display:flex;gap:12px;flex-wrap:wrap} .bb-arrow{display:none} /* scroll-down hint */ .bb-scroll{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;animation:bbBob 2s ease-in-out infinite;backdrop-filter:blur(4px)} .bb-scroll:hover{color:var(--ink);border-color:var(--ink)} @keyframes bbBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,5px)}} /* authenticity grade chip */ .grade{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:99px;border:1px solid;white-space:nowrap} .grade.g-sahih{color:#7FD0A8;border-color:rgba(127,208,168,.45);background:rgba(127,208,168,.1)} .grade.g-hasan{color:#E7BE8A;border-color:rgba(193,120,52,.45);background:rgba(193,120,52,.1)} .grade.g-isra{color:#8E86C9;border-color:rgba(142,134,201,.45);background:rgba(142,134,201,.1)} .grade.g-todo{color:var(--muted);border-color:var(--line);background:rgba(244,239,230,.05)} /* format chips (watch/read/listen) */ .fmt{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-soft);border-radius:3px;padding:3px 7px;background:rgba(0,0,0,.25)} /* slideshow slides */ .bb-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none;background:var(--bg);z-index:0} .bb-slide.on{opacity:1;pointer-events:auto;z-index:1} .bb-slide .bb-bg{position:absolute;inset:0;z-index:0} .bb-slide .bb-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:142px} /* slide indicators — thin bars */ .bb-dots{position:absolute;bottom:22px;right:32px;z-index:3;display:flex;gap:6px} .bb-dot{width:28px;height:3px;border-radius:2px;border:none;background:rgba(244,239,230,.3);cursor:pointer;transition:background .3s;padding:0} .bb-dot.on{background:var(--brass)} /* prev/next arrows */ .bb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;background:rgba(0,0,0,.25);border:none;color:var(--cream);font-size:28px;width:40px;height:60px;border-radius:6px;cursor:pointer;opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)} .billboard:hover .bb-arrow{opacity:.65} .bb-arrow:hover{opacity:1!important;background:rgba(0,0,0,.5)} .bb-prev{left:12px} .bb-next{right:12px} /* strip: countdown + streak side by side */ .strip{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin:34px 0 6px} .scard2{border:1px solid var(--line-soft);border-radius:8px;padding:22px 24px;background:linear-gradient(160deg,var(--panel),var(--bg-2))} .cd-head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;flex-wrap:wrap} .cd-title{font-family:'Inter',sans-serif;font-weight:600;font-size:20px;color:var(--ink)} .cd-clock{display:flex;gap:14px} .cd-u{display:flex;flex-direction:column;align-items:center;min-width:52px;border:1px solid var(--line);border-radius:6px;padding:10px 6px;background:rgba(193,120,52,.05)} .cd-n{font-family:'Inter',sans-serif;font-size:30px;font-weight:700;color:var(--brass-hi);font-variant-numeric:tabular-nums;line-height:1} .cd-l{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-top:6px} .cd-live{font-family:'Inter',sans-serif;font-size:26px;color:var(--brass-hi)} /* streak styles removed — feature killed for the website (see FEATURES.md) */ /* horizontal poster rows */ .rows{padding:30px 0 0} .rows-lead{padding:34px 0 0} /* lead row sits high, drop strip follows */ .row{margin-bottom:52px} .rows .row:last-child{margin-bottom:0} /* minimized home: only 1 row — kill trailing gap */ /* R7 chaptered head: title · subtitle · fading hairline · see-all. ::after = the hairline; flex `order` slots it between the note and the link. */ .row .rhead{display:flex;align-items:center;gap:14px;margin-bottom:14px} .row .rhead h3{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.01em;white-space:nowrap} .row .rhead-note{flex:0 0 auto;font-size:11.5px;letter-spacing:.02em;color:var(--muted-2);margin:0;white-space:nowrap} .row .rhead a{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted);transition:.25s; display:inline-flex;gap:5px;align-items:center;white-space:nowrap;order:9} .row .rhead a:hover{color:var(--brass)} .row .rhead::after{content:"";order:8;flex:1;height:1px;min-width:40px; background:linear-gradient(90deg,rgba(234,238,245,.18),transparent)} /* generous vertical padding so a hovered card's soft shadow isn't clipped by the horizontal scroll (overflow-x:auto also clips overflow-y); negative margins pull neighbours back so row spacing is unchanged. */ .row-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:46px 0 84px;margin:-36px 0 -70px;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 56px),transparent); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 56px),transparent)} .row-track::-webkit-scrollbar{display:none} .row-track .pcard{flex:0 0 210px;width:210px;scroll-snap-align:start} .row-track .pcard .nm{font-size:14.5px} /* explore band (entry buttons to interactive modules) */ .xband{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:10px 0 8px} .xtile{position:relative;border:1px solid var(--line-soft);border-radius:8px;padding:24px 20px;overflow:hidden; background:linear-gradient(160deg,var(--panel),var(--bg-2));transition:.35s;display:block} .xtile:hover{border-color:var(--brass);transform:translateY(-4px)} .xtile .xk{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:10px} .xtile h4{font-family:var(--sans);font-weight:700;font-size:21px;margin-bottom:6px;letter-spacing:-.01em} .xtile p{font-size:13px;color:var(--muted);line-height:1.5} .xtile .arr{position:absolute;top:20px;right:22px;color:var(--brass);font-size:18px;opacity:.6;transition:.3s} .xtile:hover .arr{opacity:1;transform:translateX(3px)} /* ---- NEXT DROP premiere strip ---- */ .dropstrip{position:relative;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center; margin:14px 0 8px;padding:28px 34px;border-radius:14px;overflow:hidden; border:1px solid var(--line-soft);background:linear-gradient(160deg,var(--panel),var(--bg-2))} .drop-glow{position:absolute;right:-80px;top:-120px;width:420px;height:420px;border-radius:50%; background:radial-gradient(circle,rgba(193,120,52,.07),transparent 66%);pointer-events:none} .drop-crest{position:absolute;right:30px;top:50%;transform:translateY(-50%);width:300px;height:300px; color:var(--brass);opacity:.06;pointer-events:none} .drop-main{position:relative;z-index:2;min-width:0} .drop-kicker{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:12px} .drop-arc{color:var(--ink-soft);letter-spacing:.16em} .drop-dot{width:8px;height:8px;border-radius:50%;background:var(--brass-hi);box-shadow:0 0 0 0 rgba(193,120,52,.6);animation:dropPulse 2s infinite} @keyframes dropPulse{0%{box-shadow:0 0 0 0 rgba(193,120,52,.5)}70%{box-shadow:0 0 0 9px rgba(193,120,52,0)}100%{box-shadow:0 0 0 0 rgba(193,120,52,0)}} .drop-title{font-family:var(--sans);font-weight:800;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.03em;line-height:1.04;color:var(--ink);display:flex;align-items:center;gap:14px;flex-wrap:wrap} .drop-part{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-hi); border:1px solid var(--brass);border-radius:30px;padding:5px 13px;white-space:nowrap} .drop-tag{font-size:15px;color:var(--muted);line-height:1.55;margin-top:12px;max-width:46ch} .drop-actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap} .drop-notify.done{background:transparent;color:var(--brass-hi);border:1px solid var(--brass);cursor:default} .drop-aside{position:relative;z-index:2;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px} .drop-when{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)} .drop-clock{display:flex;gap:10px} .drop-clock .cd-u{display:flex;flex-direction:column;align-items:center;min-width:62px;padding:12px 8px; border:1px solid var(--line);border-radius:10px;background:rgba(20,20,22,.55)} .drop-clock .cd-n{font-family:var(--sans);font-size:34px;font-weight:800;color:var(--brass-hi);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em} .drop-clock .cd-l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-top:7px} .drop-live{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:22px;color:var(--brass-hi)} /* Explore / film wayfinding cards: image first, label below like story cards */ .xfeature-head{display:flex;align-items:center;margin:64px 0 20px;flex-wrap:wrap;gap:14px} .xfeature-head h2{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.01em;white-space:nowrap} .xfeature-head .sub{font-size:11.5px;color:var(--muted-2);order:9} .xfeature-head::after{content:"";order:8;flex:1;height:1px;min-width:40px; background:linear-gradient(90deg,rgba(234,238,245,.18),transparent)} .xfeature{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .xfeat{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:transparent;border-radius:12px; transition:transform .3s cubic-bezier(.2,.7,.2,1)} .xfeat:hover{transform:translateY(-4px)} .xfeat-media{display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--panel); border:1px solid var(--line-soft);box-shadow:0 16px 38px -22px rgba(0,0,0,.72)} .xfeat-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s} .xfeat:hover .xfeat-img{transform:scale(1.045);filter:saturate(1.04) contrast(1.04)} .xfeat-overlay{padding:11px 4px 0;text-align:center;background:none} .xfeat .xk{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-hi);margin-bottom:5px} .xfeat h4{font-family:var(--sans);font-weight:650;font-size:14.5px;line-height:1.2;letter-spacing:-.01em;color:var(--ink)} .xfeat p{font-size:11.5px;color:var(--muted);line-height:1.35;margin-top:4px} .xfeature--4 .xfeat h4{font-size:15.5px} /* Home ARTICLES cards — GLOBAL (cards are JS-injected, must not rely on Astro scoping) */ .art-h{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:transparent;border-radius:12px; transition:transform .25s} .art-h:hover{transform:translateY(-4px)} .art-h-media,.art-h-more-media{display:grid;place-items:center;aspect-ratio:16/10;border-radius:12px;overflow:hidden; border:1px solid var(--line-soft);background:var(--panel);box-shadow:0 16px 38px -22px rgba(0,0,0,.72)} .art-h-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.03);transition:transform .5s,filter .3s} .art-h:hover .art-h-media img{transform:scale(1.045);filter:saturate(1) contrast(1.07)} .art-h-copy{display:block;padding:11px 4px 0;text-align:center} .art-h-cat{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--brass-hi);margin-top:5px} .art-h-q{margin:0;font-family:var(--sans);font-weight:650;letter-spacing:-.01em;font-size:14.5px;line-height:1.2;color:var(--ink); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .art-h-ex,.art-h-go{display:none} .art-h-more-media{border-style:dashed;color:var(--brass-hi);font-size:13px;font-weight:850;letter-spacing:.14em;text-transform:uppercase} /* Home DOWNLOADS shelf mini-cards — GLOBAL (cards are JS-injected, must not rely on Astro scoping) */ .dl-band-row .dl-mini{flex:0 0 172px;width:172px;border-radius:14px;border:1px solid var(--line); background:var(--panel);overflow:hidden;transition:transform .25s,border-color .25s;text-decoration:none;color:inherit;display:block} .dl-band-row .dl-mini:hover{transform:translateY(-3px);border-color:rgba(231,190,138,.35)} .dl-mini-top{aspect-ratio:210/297;display:flex;align-items:center;justify-content:center;background:var(--panel-2);position:relative} .dl-mini-top svg{color:var(--muted-2);opacity:.5} .dl-mini-badge{position:absolute;top:7px;left:7px;font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px} .dl-mini-badge.free{background:rgba(29,158,117,.18);color:#1D9E75;border:1px solid rgba(29,158,117,.3)} .dl-mini-badge.paid{background:rgba(193,120,52,.14);color:var(--brass-hi);border:1px solid rgba(193,120,52,.3)} .dl-mini-body{padding:10px 12px 12px} .dl-mini-body h4{font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:-.01em;line-height:1.2;color:var(--ink);margin:0 0 3px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .dl-mini-body span{font-size:11px;color:var(--muted-2)} /* "Everything" wall heading */ .wall-head{display:flex;align-items:center;margin:30px 0 20px;flex-wrap:wrap;gap:14px} .wall-head h2{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.01em;white-space:nowrap} .wall-head a{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;order:9} .wall-head a:hover{color:var(--brass)} .wall-head::after{content:"";order:8;flex:1;height:1px;min-width:40px; background:linear-gradient(90deg,rgba(234,238,245,.18),transparent)} /* ============================================================ EXPLORE PAGE — interactive modules (ported from designer demo) ============================================================ */ .demo{border:1px solid var(--line-soft);background:linear-gradient(160deg,var(--panel),var(--bg-2));border-radius:8px;overflow:hidden} .demo-body{padding:30px} .try{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:20px;display:inline-flex;align-items:center;gap:10px} .try::before{content:"\25CF";font-size:8px;animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}} /* great arcs */ .arclist{border-top:1px solid var(--line-soft)} .arcrow{border-bottom:1px solid var(--line-soft)} .arcrow .top{display:flex;align-items:center;justify-content:space-between;padding:22px 6px;cursor:pointer;transition:.3s} .arcrow .top:hover{padding-left:14px} .arcrow .top h4{font-family:var(--sans);font-weight:600;font-size:22px;color:var(--ink)} .arcrow .top .ix{font-family:'Inter',sans-serif;color:var(--brass);font-size:14px;margin-right:18px} .arcrow .meta{font-size:11px;color:var(--muted-2);letter-spacing:.1em;text-transform:uppercase;margin-right:16px} .arcrow .top .pl{color:var(--brass);font-size:22px;transition:transform .4s} .arcrow.open .pl{transform:rotate(45deg)} .arcrow .eps{max-height:0;overflow:hidden;transition:max-height .5s ease} .arcrow .eps ul{list-style:none;padding:0 6px 22px} .arcrow .eps li{padding:10px 0 10px 26px;color:var(--muted);font-size:15px;border-top:1px solid var(--line-soft);position:relative} .arcrow .eps li::before{content:"";position:absolute;left:2px;top:18px;width:7px;height:7px;border:1px solid var(--brass);transform:rotate(45deg)} /* era portals */ .eras{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px} .era-pill{font-size:13px;color:var(--muted);border:1px solid var(--line);padding:10px 16px;border-radius:30px;cursor:pointer;transition:.3s} .era-pill:hover{color:var(--ink)} .era-pill.on{background:var(--brass);color:#0B0B0D;border-color:var(--brass);font-weight:500} .era-panel{border:1px solid var(--line-soft);border-radius:8px;padding:32px;background:rgba(193,120,52,.03)} .era-panel h3{font-family:var(--sans);font-weight:700;font-size:28px;margin-bottom:14px} .era-panel p{color:var(--muted);font-size:16px;max-width:640px;margin-bottom:24px} .era-figs{display:flex;gap:14px;flex-wrap:wrap} .fig{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:9px 16px 9px 9px;border-radius:40px} .fig .med{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,var(--brass-hi),var(--brass-deep));display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;color:#0B0B0D;font-size:15px} .fig span{font-size:14px;color:var(--ink)} /* timeline */ .tl-wrap{overflow-x:auto;padding:30px 4px 10px;scrollbar-width:none} .tl-wrap::-webkit-scrollbar{display:none} .tl{position:relative;min-width:920px;height:120px} .tl .axis{position:absolute;top:60px;left:0;right:0;height:1px;background:var(--line)} .tl .axis-fill{position:absolute;top:60px;left:0;height:2px;background:linear-gradient(90deg,var(--brass-deep),var(--brass-hi));width:0;transition:width .6s cubic-bezier(.4,0,.2,1);z-index:1} .tl .pt{position:absolute;top:52px;width:17px;height:17px;border-radius:50%;background:var(--bg);border:2px solid var(--brass);cursor:pointer;transform:translateX(-50%);transition:.3s;z-index:2} .tl .pt:hover,.tl .pt.on{background:var(--brass);box-shadow:0 0 0 6px rgba(193,120,52,.16)} .tl .yr{position:absolute;top:84px;transform:translateX(-50%);font-size:12px;color:var(--muted-2);letter-spacing:.05em} .tl-detail{margin-top:20px;border:1px solid var(--line-soft);border-radius:8px;padding:26px;min-height:96px} .tl-detail .y{font-family:'Inter',sans-serif;color:var(--brass);font-size:15px;margin-bottom:6px} .tl-detail h4{font-family:var(--sans);font-weight:700;font-size:24px;margin-bottom:8px} .tl-detail p{color:var(--muted);font-size:15px} /* relationship map */ .rmap{display:grid;grid-template-columns:1fr 300px;gap:24px} .rmap svg{width:100%;height:auto;display:block;background:radial-gradient(circle at 50% 42%,rgba(193,120,52,.06),transparent 72%);border:1px solid var(--line-soft);border-radius:8px} /* Cytoscape canvas map */ .cymap{width:100%;height:580px;border:1px solid var(--line-soft);border-radius:8px; background:radial-gradient(circle at 50% 42%,rgba(193,120,52,.07),transparent 72%);touch-action:none} .edge{cursor:pointer} .edge path{fill:none;stroke-width:1.6;opacity:.4;transition:opacity .4s,stroke-width .4s} .edge text{font-size:9.5px;fill:#8aa39a;letter-spacing:.03em;opacity:0;transition:opacity .4s;paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round} .edge.dim path{opacity:.05} .edge.hot path{opacity:1;stroke-width:3;filter:drop-shadow(0 0 5px currentColor)} .edge.hot text{opacity:1;fill:var(--ink)} .node{cursor:pointer;transition:opacity .35s} .node .ring{fill:none;stroke:currentColor;stroke-opacity:.16;transition:.35s} .node .core{fill:var(--panel-2);stroke:var(--brass);stroke-width:1.5;transition:.35s} .node.center .core{fill:url(#gold-rad);stroke:var(--brass-hi);stroke-width:2} .node .ini{fill:var(--brass);font-family:'Inter',sans-serif;font-weight:700;font-size:14px;text-anchor:middle} .node.center .ini{fill:#0B0B0D;font-size:17px} .node .nm{fill:var(--muted);font-size:10.5px;font-weight:500;text-anchor:middle;transition:.35s;paint-order:stroke;stroke:var(--bg);stroke-width:3.5px;stroke-linejoin:round} .node:hover .core,.node.sel .core{stroke:var(--brass-hi);stroke-width:2.6;filter:drop-shadow(0 0 9px rgba(193,120,52,.55))} .node:hover .nm,.node.sel .nm{fill:var(--ink)} .node.sel .ring{stroke-opacity:.5} .node.dim{opacity:.15} .rinfo{border:1px solid var(--line-soft);border-radius:8px;padding:24px;align-self:start;background:linear-gradient(170deg,var(--panel),var(--bg-2))} .rinfo .role{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:6px} .rinfo h4{font-family:var(--sans);font-weight:700;font-size:22px;margin-bottom:4px} .rinfo .cnt{font-size:12px;color:var(--muted-2);margin-bottom:12px} .rinfo .rel{font-size:13px;color:var(--muted);padding:10px 0;border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:10px} .rinfo .rel .pill{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:30px;border:1px solid currentColor;flex-shrink:0} .rinfo .rel b{color:var(--ink);font-weight:600} .rinfo .hintline{font-size:12px;color:var(--muted-2);font-style:italic;padding-top:14px} .legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px} .legend span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px} .legend i{width:18px;height:3px;border-radius:2px;display:inline-block} .srckey{margin-top:12px;font-size:11.5px;color:var(--muted-2);line-height:1.5} .srckey b{color:var(--brass-hi);font-weight:600} /* denser Meccan map: smaller labels, honorific marks, source chips */ .node .nm{font-size:9.5px} .node.center .nm{font-size:12px;fill:var(--ink)} .node .ini{font-size:11px} .node.center .ini{font-size:18px} .node .nm .hon{fill:var(--brass-hi);font-size:8px} .clantag{font-weight:600;letter-spacing:.04em} .relsrc{margin-left:auto;display:inline-flex;gap:3px;flex-shrink:0} .rinfo .rel{flex-wrap:wrap} .placerel{flex-direction:column;align-items:flex-start;gap:3px} .placerel .prole{color:var(--muted-2);font-size:12px;line-height:1.45} .srctag{font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--brass-hi);background:rgba(193,120,52,.12); border:1px solid var(--line);border-radius:4px;padding:1px 5px;line-height:1.5;cursor:help} /* places map */ .pmap{display:grid;grid-template-columns:1fr 260px;gap:24px} .pmap svg{width:100%;height:auto;border:1px solid var(--line-soft);border-radius:8px;background:#08221c} /* map view toggle (Today / 7th century) */ .maptoggle{display:inline-flex;gap:4px;margin-bottom:18px;border:1px solid var(--line);border-radius:40px;padding:4px;background:rgba(0,0,0,.2)} .mtog{font-size:12px;letter-spacing:.03em;color:var(--muted);border:none;background:transparent;padding:8px 16px;border-radius:30px;cursor:pointer;transition:.25s} .mtog:hover{color:var(--ink)} .mtog.on{background:var(--brass);color:#0B0B0D;font-weight:600} .mapview[hidden]{display:none} /* jsVectorMap world map */ .worldmap{width:100%;height:520px;border:1px solid var(--line-soft);border-radius:8px;background:#06140f;overflow:hidden} /* stylized 7th-century Arabia map */ .arabiamap{border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;background:#05140f} .arabiamap svg{width:100%;height:auto;display:block} .arabiamap .aland{fill:#10302a;stroke:rgba(193,120,52,.35);stroke-width:1} .arabiamap .arabia-main{fill:#143a32} .arabiamap .agrid line{stroke:var(--line-soft);stroke-width:1} .arabiamap .asea{fill:#4f6b62;font-family:var(--sans);font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-style:italic;text-anchor:middle} .arabiamap .aregion{fill:#6E847A;font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-anchor:middle} .arabiamap .atitle{fill:var(--brass-hi);font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.04em;text-anchor:middle} .arabiamap .aroute{fill:none;stroke:var(--brass);stroke-width:1.6;stroke-dasharray:6 6;opacity:0;transition:opacity .5s} .arabiamap .aroute.show{opacity:.9;animation:dash 1.4s linear infinite} .arabiamap .apin{cursor:pointer} .arabiamap .apin .halo{fill:var(--brass);opacity:0;transform-box:fill-box;transform-origin:center;transition:.3s} .arabiamap .apin.on .halo{opacity:.18;animation:halopulse 1.9s infinite} .arabiamap .apin .dot{fill:var(--brass);transition:.3s;filter:drop-shadow(0 0 5px rgba(193,120,52,.6))} .arabiamap .apin:hover .dot,.arabiamap .apin.on .dot{fill:var(--brass-hi)} .arabiamap .apin text{fill:var(--ink-soft);font-family:var(--sans);font-size:12px;letter-spacing:.01em;paint-order:stroke;stroke:#05140f;stroke-width:3px;stroke-linejoin:round} .arabiamap .apin:hover text,.arabiamap .apin.on text{fill:var(--ink)} .worldmap .jvm-zoom-btn{background:var(--panel);border:1px solid var(--line);color:var(--brass-hi);border-radius:5px;width:24px;height:24px;line-height:22px;font-size:16px} .worldmap .jvm-zoom-btn:hover{background:var(--brass);color:#0B0B0D} .jvm-tooltip{background:var(--panel);border:1px solid var(--brass);color:var(--ink);font-family:var(--sans); font-size:12px;border-radius:5px;padding:6px 10px;box-shadow:var(--shadow)} .land{fill:#10302a;stroke:var(--line);stroke-width:1} .pgrid{stroke:var(--line-soft);stroke-width:1} .pin{cursor:pointer} .pin .halo{fill:var(--brass);opacity:0;transform-box:fill-box;transform-origin:center;transition:.3s} .pin.on .halo{opacity:.18;animation:halopulse 1.9s infinite} @keyframes halopulse{0%,100%{transform:scale(1);opacity:.2}50%{transform:scale(1.6);opacity:.03}} .pin .dot{fill:var(--brass);transition:.3s;filter:drop-shadow(0 0 5px rgba(193,120,52,.6))} .pin:hover .dot,.pin.on .dot{fill:var(--brass-hi)} .pin text{fill:var(--muted);font-size:11px;font-family:'Inter'} .pin.on text{fill:var(--ink)} .route{fill:none;stroke:var(--brass);stroke-width:1.6;stroke-dasharray:6 6;opacity:0;transition:opacity .5s} .route.show{opacity:.9;animation:dash 1.4s linear infinite} @keyframes dash{to{stroke-dashoffset:-24}} .pinfo{border:1px solid var(--line-soft);border-radius:8px;padding:22px;align-self:start} .pinfo .role{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:8px} .pinfo h4{font-family:var(--sans);font-weight:700;font-size:24px;margin-bottom:14px} .pinfo li{list-style:none;font-size:14px;color:var(--muted);padding:8px 0 8px 20px;border-top:1px solid var(--line-soft);position:relative} .pinfo li::before{content:"\203A";position:absolute;left:0;color:var(--brass)} .pinfo .tnote{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:14px} /* ---------- FAMILY TREE (The Prophets' Line, idea #11) ---------- */ .treemap{display:grid;grid-template-columns:1fr 300px;gap:24px} .treewrap{border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;background:#05140f} .treemap #treeSvg{width:100%;height:auto;display:block;background:radial-gradient(circle at 64% 92%,rgba(193,120,52,.08),transparent 64%)} .tedge{fill:none;stroke:rgba(193,120,52,.4);stroke-width:1.4} .tedge.dash{stroke-dasharray:5 6;stroke:rgba(193,120,52,.28)} .tspouse{stroke:rgba(95,165,151,.5);stroke-width:1.2;stroke-dasharray:2 4} .tnode{cursor:pointer} .tnode .tbox{fill:#0e302a;stroke:rgba(193,120,52,.35);stroke-width:1;transition:.25s} .tnode .tlabel{fill:var(--ink-soft);font-family:var(--sans);font-size:13px;font-weight:600;transition:.25s} .tnode .tlabel .hon{fill:var(--brass-hi);font-family:'Amiri',serif} .tnode:hover .tbox,.tnode.on .tbox{fill:#16463b;stroke:var(--brass)} .tnode:hover .tlabel,.tnode.on .tlabel{fill:var(--ink)} .tnode.k-spouse .tbox{fill:#1a2420;stroke:rgba(95,165,151,.35)} .tnode.k-spouse .tlabel{fill:var(--muted);font-weight:500;font-size:12px} .tnode.k-group .tbox{fill:#221f3a;stroke:rgba(142,134,201,.4)} .tnode.k-group .tlabel{fill:#b9b2e0;font-size:12px} .tnode.k-link .tbox{fill:transparent;stroke:none} .tnode.k-link .tlabel{fill:var(--muted-2);font-style:italic;font-size:11px;letter-spacing:.04em} .tnode[data-id="muhammad"] .tbox{fill:#3a2c10;stroke:var(--brass-hi);stroke-width:1.6;filter:drop-shadow(0 0 10px rgba(193,120,52,.5))} .tnode[data-id="muhammad"] .tlabel{fill:var(--brass-hi);font-size:14px} .treeothers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 18px;border-top:1px solid var(--line-soft)} .treeothers .to-lead{font-size:12px;color:var(--muted);letter-spacing:.02em;margin-right:4px} .treeothers .to-chip{font-size:12px;color:var(--ink-soft);border:1px solid var(--line-soft);border-radius:20px;padding:4px 11px;background:rgba(193,120,52,.04)} /* ---------- RESPONSIVE ---------- */ @media(max-width:920px){ .catalog{grid-template-columns:repeat(3,1fr)} .ways{grid-template-columns:1fr} .rmap,.pmap,.treemap{grid-template-columns:1fr} .xband{grid-template-columns:repeat(2,1fr)} .xfeature{grid-template-columns:repeat(3,1fr)} .strip{grid-template-columns:1fr} .dropstrip{grid-template-columns:1fr;gap:22px;padding:24px 22px} .dropstrip .drop-aside{text-align:left;align-items:flex-start} .drop-crest{display:none} } @media(max-width:640px){ .wrap{padding:0 20px} .row .rhead-note{display:none} .xfeature .xfeat:last-child{grid-column:span 2} section.block,.band{padding:64px 0} .nav .row{gap:12px} .nav-right{gap:8px} .nav .btn{padding:6px 10px;font-size:11px;white-space:nowrap} .catalog{grid-template-columns:repeat(2,1fr);gap:14px} .signup{flex-direction:column} .hero{min-height:84vh} .billboard{height:auto;min-height:0;padding-top:130px} .xband{grid-template-columns:1fr} .xfeature{grid-template-columns:repeat(2,1fr)} .drop-clock .cd-u{min-width:50px} .drop-clock .cd-n{font-size:27px} .row-track .pcard{flex-basis:140px;width:140px} .row.trending{margin-top:12px} .billboard .bb-dots{bottom:14px} .billboard .bb-scroll{bottom:12px} } /* trending rail — full-size posters that scroll, left-flush to the content edge, bleeding off the right under the viewport (Angel / Apple TV+ pattern). */ .billboard[hidden]{display:none} /* hero (not billboard) now precedes trending → no overlap pull-up needed */ .row.trending{position:relative;z-index:6;margin-top:8px;margin-bottom:22px} .row.trending .row-track{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden; padding:24px 0 30px;margin:0;scrollbar-width:none} .row.trending .row-track::-webkit-scrollbar{display:none} .row.trending .row-track .pcard{flex:0 0 210px;width:210px} /* keep slideshow dots + scroll cue above the overlapping posters */ .billboard .bb-dots{bottom:120px} .billboard .bb-scroll{bottom:116px} /* wide displays: use the extra width — fuller catalog + bigger poster rows */ @media(min-width:1500px){ .catalog{grid-template-columns:repeat(5,1fr)} .row-track .pcard{flex:0 0 240px;width:240px} } /* ============================================================ ACCESSIBILITY — keyboard focus + reduced motion ============================================================ */ /* one designed focus ring everywhere; only for keyboard (focus-visible) */ :focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px} .pcard:focus-visible,.xfeat:focus-visible,.xtile:focus-visible{outline-offset:5px;border-radius:12px} .nav .links a:focus-visible,.foot a:focus-visible{outline-offset:5px} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .reveal{opacity:1;transform:none} .bb-slide .bb-bg,.bb-slide.on .bb-bg{animation:none;transform:none} } /* ============================================================ THE GOLDEN CHAIN — scroll-driven seerah timeline Contained editorial panel; a hand-drawn golden thread meanders down a left gutter (SVG, never crosses text); one sans voice per entry — serif lives only in the era numerals. ============================================================ */ .chain{position:relative} /* the shell: a designed surface, not edge-to-edge void */ .chain-shell{position:relative;margin-top:6px;border:1px solid var(--line-soft);border-radius:24px; background:linear-gradient(180deg,#151517 0%,#111113 40%,#0E0E10 100%); padding:34px clamp(22px,4.5vw,72px) 64px;overflow:hidden} .chain-lenses{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 8px;margin-bottom:18px; border-bottom:1px solid var(--line-soft)} .lens{font-size:11.5px;letter-spacing:.03em;color:var(--muted);border:1px solid var(--line); padding:6px 13px;border-radius:30px;cursor:pointer;transition:color .2s,border-color .2s,background .2s;background:transparent;margin-bottom:8px} .lens:hover{color:var(--ink)} .lens.on{background:var(--brass);color:#0B0B0D;border-color:var(--brass);font-weight:600} /* body: thread gutter on the left, one uniform content column */ .chain-body{position:relative;max-width:860px;margin:0 auto;padding:26px 0 10px clamp(72px,9vw,120px)} .chain-thread-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none} .chain-path-base{fill:none;stroke:rgba(244,239,230,.10);stroke-width:1.5;stroke-linecap:round} .chain-path-fill{fill:none;stroke:url(#chainGrad);stroke-width:2;stroke-linecap:round} .chain-spark-dot{fill:var(--brass-hi)} /* era chapter — the one serif display moment; no wash, no glow */ .chain-era{position:relative;text-align:left;padding:46px 0 10px;margin:0} .chain-era-years{display:block;font-family:var(--serif);font-size:clamp(30px,3.2vw,40px);font-weight:500; line-height:1;letter-spacing:-.01em;color:var(--era-tint);font-variant-numeric:tabular-nums} .chain-era h3{font-family:var(--sans);font-weight:750;font-size:18px;letter-spacing:-.01em; color:var(--ink);margin:8px 0 4px} .chain-era p{font-size:13px;color:var(--muted-2);max-width:52ch;margin:0;line-height:1.55} /* quiet-years gap — distance you feel */ .chain-gap{position:relative;display:flex;align-items:center} .chain-gap span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2); opacity:0;transition:opacity .8s} .chain-gap.in span{opacity:.8} /* event link — one column, one voice, uniform measure */ .chain-event{position:relative;margin:38px 0;max-width:640px; opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)} .chain-event.in{opacity:1;transform:none} .chain-event.dim{opacity:.16;filter:saturate(.4)} .chain-entry{position:relative;transition:opacity .4s;text-align:left} .chain-event:not(.lit) .chain-entry{opacity:.7} /* the node sits ON the curve — chain.js computes its left per height */ .chain-node{position:absolute;top:0;width:12px;height:12px;border-radius:50%; border:2px solid var(--muted-2);background:var(--bg);z-index:3; transition:border-color .4s,background .4s;display:flex;align-items:center;justify-content:center} .chain-event.major .chain-node{width:16px;height:16px;border:none;background:transparent} .chain-node svg{width:100%;height:100%;fill:var(--muted-2);transition:fill .4s} .chain-event.lit .chain-node{border-color:var(--brass);background:#1a130a} .chain-event.lit .chain-node svg{fill:var(--brass-hi)} /* type: year = small caps label · title = sans bold · lede = sans body · meta = quiet line */ .chain-when{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase; color:var(--link-tint,var(--brass-hi));margin-bottom:6px;font-variant-numeric:tabular-nums} .chain-entry h4{font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px} .chain-lede{font-family:var(--sans);font-size:14px;color:var(--muted);line-height:1.62;margin:0 0 8px;max-width:58ch;font-weight:400} .chain-meta{font-size:11px;color:var(--muted-2);letter-spacing:.01em;line-height:1.5;max-width:64ch} /* story hookup — the chain feeds the catalog */ .chain-story{display:flex;align-items:center;gap:10px;margin-top:12px;text-decoration:none;color:inherit} .chain-story-poster{flex:0 0 34px;width:34px;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:var(--bg-2)} .chain-story-poster img{width:100%;height:100%;object-fit:cover;display:block} .chain-story-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .chain-story-txt em{font-style:normal;font-weight:650;font-size:12.5px;color:var(--ink-soft)} .chain-story-txt span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--brass);transition:color .2s} .chain-story:hover .chain-story-txt span{color:var(--brass-hi)} /* the last link: you */ .chain-you{position:relative;text-align:left;padding:60px 0 8px;max-width:640px; opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)} .chain-you.in{opacity:1;transform:none} .chain-you .chain-node.you{width:18px;height:18px;border:none;background:transparent} .chain-you.lit .chain-node.you svg{fill:var(--brass-hi)} .chain-you-years{display:block;font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);color:var(--brass-hi);font-style:italic} .chain-you h3{font-family:var(--sans);font-weight:800;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.025em;color:var(--ink);margin:8px 0 10px} .chain-you p{font-size:14px;color:var(--muted);max-width:52ch;margin:0 0 22px;line-height:1.62} @media(max-width:900px){ .chain-shell{padding:24px 16px 48px;border-radius:18px} .chain-body{padding-left:44px} .chain-event{margin:30px 0} .chain-era{padding:36px 0 8px} } @media (prefers-reduced-motion:reduce){ .chain-event,.chain-you,.chain-gap span{opacity:1;transform:none} .chain-spark-dot{display:none} } /* ============================================================ WATCH PAGE — cinematic films (landscape 16:9) ============================================================ */ /* --- featured hero --- */ .film-hero{position:relative;min-height:clamp(440px,64vh,680px);display:flex;align-items:flex-end; overflow:hidden;border-bottom:1px solid var(--line-soft)} .fh-art{position:absolute;inset:0;z-index:0} .fh-art img,.fh-art svg{width:100%;height:100%;object-fit:cover;display:block} .fh-scrim{position:absolute;inset:0;background: linear-gradient(90deg,var(--bg) 0%,rgba(11,11,13,.72) 38%,rgba(11,11,13,.15) 100%), linear-gradient(0deg,var(--bg) 2%,rgba(11,11,13,0) 60%)} .fh-body{position:relative;z-index:1;max-width:1180px;width:100%;margin:0 auto; padding:0 var(--gutter,32px) clamp(40px,6vw,72px);} .fh-kick{display:inline-block;font-size:11px;letter-spacing:.34em;text-transform:uppercase; color:var(--brass-hi);font-weight:700;margin-bottom:16px} .fh-title{font-size:clamp(34px,5.4vw,64px);line-height:1.02;letter-spacing:-.01em;margin:0 0 16px; max-width:16ch;text-wrap:balance} .fh-logline{font-family:var(--sans);font-size:clamp(15px,1.5vw,18px);line-height:1.6;color:var(--ink-soft); max-width:56ch;margin:0 0 22px} .fh-facts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:26px} .fh-cta{display:flex;gap:14px;flex-wrap:wrap} /* --- lineup grid --- */ .film-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:26px} .film-card{display:flex;flex-direction:column;text-align:left;padding:0;border:none;cursor:pointer; background:transparent;color:inherit;font:inherit;border-radius:14px;transition:transform .3s cubic-bezier(.2,.6,.2,1)} .film-card:hover{transform:translateY(-6px)} .film-card:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:14px} .film-art{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden; border:1px solid var(--line-soft);box-shadow:0 20px 44px -22px rgba(0,0,0,.7);background:var(--panel-2)} .film-art img,.film-art svg{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s cubic-bezier(.2,.6,.2,1),filter .3s} .film-card:hover .film-art img,.film-card:hover .film-art svg{transform:scale(1.05)} .film-art::after{display:none} .film-badge{position:absolute;top:11px;left:11px;z-index:2;font-size:10px;letter-spacing:.08em; text-transform:uppercase;font-weight:700;padding:4px 9px;border-radius:30px;backdrop-filter:blur(6px)} .film-badge.st-live{background:rgba(193,120,52,.92);color:#0B0B0D} .film-badge.st-prod{background:rgba(244,239,230,.14);color:var(--ink);border:1px solid var(--line)} .film-badge.st-soon{background:rgba(11,11,13,.6);color:var(--muted);border:1px solid var(--line-soft)} .film-run{position:absolute;bottom:11px;right:11px;z-index:2;font-size:11px;font-weight:600; color:var(--ink);padding:3px 8px;border-radius:5px;background:rgba(11,11,13,.62);backdrop-filter:blur(4px)} .film-card .film-badge,.film-card .film-run{display:none} .film-play{position:absolute;top:50%;left:50%;z-index:2;width:56px;height:56px; transform:translate(-50%,-50%) scale(.8);display:grid;place-items:center;font-size:20px;color:#0B0B0D; background:rgba(224,192,137,.94);border-radius:50%;opacity:0;transition:opacity .3s,transform .3s; box-shadow:0 10px 30px rgba(0,0,0,.5);padding-left:3px} .film-card:hover .film-play,.film-card:focus-visible .film-play{opacity:1;transform:translate(-50%,-50%) scale(1)} .film-card.st-soon .film-play,.film-card.st-prod .film-play{background:rgba(244,239,230,.9)} .film-meta{padding:12px 3px 0;text-align:center} .film-kick{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--brass-hi);font-weight:700;margin-bottom:7px} .film-card .film-kick,.film-card .film-tag{display:none} .film-nm{display:block;font-family:var(--sans);font-weight:650;font-size:16px;line-height:1.2;margin-bottom:0;color:var(--ink)} .film-tag{display:block;font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--muted)} /* --- lightbox player --- */ .film-player{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px} .fp-back{position:absolute;inset:0;background:rgba(4,4,6,.82);backdrop-filter:blur(8px)} .fp-modal{position:relative;z-index:1;width:min(960px,100%);max-height:92vh;overflow:auto; background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow); animation:fpIn .32s cubic-bezier(.2,.7,.2,1)} @keyframes fpIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}} .fp-close{position:absolute;top:12px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%; border:1px solid var(--line);background:rgba(11,11,13,.6);color:var(--ink);font-size:24px;line-height:1; cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,border-color .2s} .fp-close:hover{background:rgba(193,120,52,.9);border-color:transparent;color:#0B0B0D} .fp-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:16px 16px 0 0;overflow:hidden} .fp-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .fp-frame.fp-soon{display:grid} .fp-poster{position:absolute;inset:0} .fp-poster img,.fp-poster svg{width:100%;height:100%;object-fit:cover;display:block} .fp-soon-body{position:relative;z-index:1;align-self:center;justify-self:center;text-align:center; max-width:420px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:16px} .fp-soon-body p{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0} .fp-info{padding:22px 26px 26px} .fp-kick{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--brass-hi);font-weight:700;margin-bottom:8px} .fp-info h2{font-size:26px;line-height:1.15;margin:0 0 12px} .fp-info p{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0 0 16px} .fp-info .fmt.sub{text-transform:none;letter-spacing:0} @media(max-width:640px){ .film-grid{grid-template-columns:1fr;gap:22px} .fh-title{max-width:100%} } .fp-soon-body .film-badge{position:static;top:auto;left:auto} /* live-player email capture — turn a website viewer into a subscriber, not a lost YouTube view */ .fp-capture{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)} .fp-capture-lead{display:block;font-family:var(--sans);font-size:14px;color:var(--ink-soft);margin-bottom:10px} .fp-capture .signup{display:flex;gap:10px;max-width:420px} .fp-capture .signup input{flex:1;min-width:0} /* Watch-the-Films home row — 4-up variant of the xfeat grid */ .xfeature--4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.xfeature--4{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.xfeature--4{grid-template-columns:repeat(2,1fr)}.xfeature--4 .xfeat:last-child{grid-column:auto}} /* ============================================================ STORYTELLER SURFACES — mood-first browse (#72) + Hook Wall (#74) ============================================================ */ /* tint accents shared by mood tiles + hook cards */ .t-crimson{--acc:#C56B5C;--acc-dk:#3a1714} .t-gold{--acc:#E7BE8A;--acc-dk:#3a2c10} .t-teal{--acc:#5FA597;--acc-dk:#0e302a} .t-violet{--acc:#8E86C9;--acc-dk:#221f3a} .t-rose{--acc:#C97B96;--acc-dk:#33161f} /* --- mood chooser tiles --- */ .mood-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px} .mood-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px; min-height:150px;padding:20px;border-radius:14px;overflow:hidden;text-decoration:none; background:linear-gradient(150deg,var(--acc-dk),var(--panel) 78%); border:1px solid var(--line-soft);transition:transform .3s cubic-bezier(.2,.6,.2,1),border-color .3s} .mood-tile::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 85% 0%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 60%);opacity:.7;transition:opacity .3s} .mood-tile:hover{transform:translateY(-5px);border-color:var(--acc)} .mood-tile:hover::after{opacity:1} .mood-tile>*{position:relative;z-index:1} .mood-tile-label{font-size:26px;line-height:1;color:var(--ink);letter-spacing:-.01em} .mood-tile-blurb{font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);line-height:1.45;max-width:24ch} .mood-tile-count{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);font-weight:700;margin-top:2px} /* --- mood shelves --- */ .feel-block{margin-top:52px;scroll-margin-top:90px} .feel-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px; padding-bottom:12px;border-bottom:1px solid var(--line-soft)} .feel-head h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em} .feel-head p{font-family:var(--sans);font-size:14px;color:var(--muted)} /* --- The Hook Wall --- */ .hook-wall{columns:3;column-gap:18px} .hook-card{position:relative;display:block;break-inside:avoid;margin:0 0 18px;padding:26px 24px 20px; border-radius:14px;text-decoration:none;background:var(--panel);border:1px solid var(--line-soft); border-left:3px solid var(--acc);transition:transform .3s cubic-bezier(.2,.6,.2,1),border-color .3s,background .3s} .hook-card:hover{transform:translateY(-4px);background:var(--panel-2);border-left-color:var(--acc)} .hook-quote{position:absolute;top:6px;left:14px;font-family:var(--serif);font-size:52px;line-height:1; color:var(--acc);opacity:.24} .hook-line{display:block;position:relative;z-index:1;font-size:19px;line-height:1.42;color:var(--ink); letter-spacing:-.005em} .hook-card.is-long .hook-line{font-size:16.5px;line-height:1.5} .hook-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px} .hook-cat{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .hook-cta{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--acc);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s} .hook-card:hover .hook-cta{opacity:1;transform:none} /* --- The Did-You-Know Wall (#84) --- */ .fact-wall{columns:3;column-gap:18px} .fact-card{position:relative;display:block;break-inside:avoid;margin:0 0 18px;padding:22px 24px 20px; border-radius:14px;text-decoration:none;background:var(--panel);border:1px solid var(--line-soft); border-top:3px solid var(--acc);transition:transform .3s cubic-bezier(.2,.6,.2,1),border-color .3s,background .3s} .fact-card:hover{transform:translateY(-4px);background:var(--panel-2)} .fact-badge{display:inline-block;font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase; font-weight:800;color:var(--acc);margin-bottom:12px} .fact-line{display:block;font-size:18px;line-height:1.45;color:var(--ink);letter-spacing:-.005em} .fact-card.is-long .fact-line{font-size:16px;line-height:1.52} .fact-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px} .fact-cat{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .fact-cta{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--acc);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s} .fact-card:hover .fact-cta{opacity:1;transform:none} @media(max-width:900px){ .fact-wall{columns:2} } @media(max-width:600px){ .fact-wall{columns:1} } .story-fact-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;columns:auto} .story-fact-card.fact-card{margin:0;min-height:190px} .story-fact-card .fact-line{font-size:15.5px;line-height:1.45} .story-fact-card.is-long .fact-line{font-size:14px} @media(max-width:1100px){.story-fact-wall{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.story-fact-wall{grid-template-columns:1fr}} /* --- The Rogues (#81) --- */ .rogues-hero{padding:70px 0 8px;position:relative;overflow:hidden;text-align:center; background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,#C56B5C 16%,transparent),transparent 62%)} .rogues-hero .rogues-kick{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#C56B5C;font-weight:800} .rogues-hero h1{font-family:var(--serif);font-size:clamp(42px,7vw,84px);line-height:.98;letter-spacing:-.03em;color:var(--ink);margin:14px 0 16px} .rogues-hero p{max-width:52ch;margin:0 auto;color:var(--muted);font-size:16px;line-height:1.6} /* --- Surprise Me (#82) --- */ .surprise-stage{display:flex;justify-content:center;padding:14px 0 40px} .surprise-card{position:relative;width:min(680px,100%);text-align:center;padding:52px 40px 40px; border-radius:20px;background:var(--panel);border:1px solid var(--line-soft);border-top:3px solid var(--acc); box-shadow:0 30px 80px -46px rgba(0,0,0,.9);transition:opacity .18s ease,transform .18s ease} .surprise-card.rolling{opacity:0;transform:scale(.98)} .surprise-kick{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);font-weight:800} .surprise-quote{display:block;font-family:var(--serif);font-size:60px;line-height:.5;color:var(--acc);opacity:.28;margin:14px 0 4px} .surprise-line{font-size:24px;line-height:1.45;color:var(--ink);letter-spacing:-.01em;margin:0 auto 22px;max-width:34ch} .surprise-card.is-long .surprise-line{font-size:19px;line-height:1.55} .surprise-meta{display:flex;flex-direction:column;gap:4px;margin-bottom:26px} .surprise-cat{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .surprise-title{font-size:20px;color:var(--ink-soft)} .surprise-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .story-shuffle-stage{justify-content:flex-start;padding-top:0;padding-bottom:28px} .story-shuffle-stage .surprise-card{width:min(760px,100%);text-align:left} .story-shuffle-stage .surprise-line{margin-left:0;margin-right:0} .story-shuffle-stage .surprise-actions{justify-content:flex-start} @media(max-width:900px){ .mood-tiles{grid-template-columns:repeat(2,1fr)} .hook-wall{columns:2} } @media(max-width:600px){ .mood-tiles{grid-template-columns:1fr} .hook-wall{columns:1} .surprise-card{padding:40px 24px 32px} .surprise-line{font-size:21px} .story-shuffle-stage .surprise-card{text-align:center} .story-shuffle-stage .surprise-line{margin-left:auto;margin-right:auto} .story-shuffle-stage .surprise-actions{justify-content:center} } /* --- binge chain: "Watch next" on the reader (#73) --- */ .binge{margin-top:8px} .binge-head{margin-bottom:22px} .binge-kick{display:inline-block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);font-weight:700;margin-bottom:10px} .binge-head h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin-bottom:6px} .binge-head p{font-family:var(--sans);font-size:14.5px;color:var(--muted)} /* home Hook Wall strip (below the mood tiles) */ .hookwall-strip{position:relative;display:flex;align-items:center;gap:18px;margin-top:16px;padding:22px 26px; border-radius:14px;text-decoration:none;overflow:hidden; background:linear-gradient(120deg,var(--panel),var(--panel-2));border:1px solid var(--line-soft); transition:transform .3s cubic-bezier(.2,.6,.2,1),border-color .3s} .hookwall-strip:hover{transform:translateY(-3px);border-color:var(--brass)} .hookwall-quote{font-size:64px;line-height:1;color:var(--brass);opacity:.4;flex-shrink:0} .hookwall-copy{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0} .hookwall-kick{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);font-weight:700} .hookwall-copy strong{font-size:clamp(18px,2.2vw,23px);color:var(--ink);letter-spacing:-.01em;font-weight:500} .hookwall-cta{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--brass-hi);white-space:nowrap;flex-shrink:0} @media(max-width:560px){.hookwall-strip{flex-direction:column;align-items:flex-start;gap:10px}.hookwall-quote{display:none}}