/* ==========================================================================
Minbur UI polish layer. Load AFTER style.css:
1. Design tokens (brand colours from the logo, spacing, type, motion)
2. Rhythm: spacing and type scale for headings, cards, views and the sermon feed
3. Interaction: hover, press and focus for buttons, menus, cards, details, inputs
4. Accessibility helpers (skip link, .sr, focus ring, reduced motion, touch, forced colours)
To go back to the old look, remove the one line. Nothing in style.css is edited
except one font import. Legacy variables (--ac, --ac2, --bg, --bd, --mut, --r, --sh)
are re-pointed here, so every existing rule picks up the new values.
========================================================================== */
/* ---------- 1. TOKENS ---------- */
:root{
/* brand: the same olive, gold and ink the landing page already uses */
--ink:#10261b; /* deepest green: headings, header text */
--ink-2:#17382a;
--olive:#587010; /* primary action: white text 5.6:1 */
--olive-d:#44580c; /* hover / links: on white 7.6:1 */
--gold-b:#d8a010; /* brand gold: fills and accents (never text on white) */
--gold-l:#efbf3f;
--paper:#f5f7f0; /* page */
--stone:#dfe5d3; /* borders */
--stone-2:#eef1e6; /* quiet fills, row hover */
--lapis:#24557a; /* focus ring and informational blue: 7.7:1 on white */
--text:#1d2a21; /* body: 14:1 on paper */
--text-2:#4a564c; /* secondary text: 6.9:1 on paper (old --mut was 4.4:1) */
/* legacy names re-pointed at the brand (this is what recolours the whole app) */
--bg:var(--paper);--fg:var(--text);--bd:var(--stone);--mut:var(--text-2);
--ac:var(--olive-d);--ac2:var(--olive);--ring:0 0 0 3px #fff,0 0 0 6px var(--lapis);
/* spacing: 4px base, used for every gap, padding and margin below */
--sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2rem;--sp-7:3rem;--sp-8:4.5rem;
/* type scale (1.2 ratio) */
--fs-xs:.8125rem;--fs-sm:.9375rem;--fs-md:1rem;--fs-lg:1.1875rem;--fs-xl:1.4375rem;
--fs-2xl:clamp(1.65rem,1.25rem + 1.4vw,2.25rem);
--font-ui:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
--font-hd:"Bricolage Grotesque",Inter,system-ui,sans-serif;
--font-ar:Amiri,"Scheherazade New",serif;
/* shape and depth: one radius family, one shadow family tinted with ink instead of grey */
--r:14px;--r-sm:10px;--r-pill:999px;
--sh-1:0 1px 2px #10261b14;
--sh:0 1px 2px #10261b10,0 10px 26px -14px #10261b33;
--sh-hover:0 2px 4px #10261b12,0 18px 36px -16px #10261b4d;
/* motion */
--ease:cubic-bezier(.2,.7,.2,1);--ease-in:cubic-bezier(.4,0,1,1);
--dur-1:.14s;--dur-2:.24s;--dur-3:.45s;
interpolate-size:allow-keywords;
}
:root.tv{--ac:#a9c43c;--ac2:#8fa82a;--stone:#26324a;--text-2:#9fb0c7}
body:not(.lp){
color:var(--text);
background:var(--paper); /* the two coloured glows are gone: calmer, and text contrast no longer depends on where you scroll */
font-family:var(--font-ui);font-size:var(--fs-md);line-height:1.6;
font-feature-settings:"cv11","ss01";text-rendering:optimizeLegibility;
}
body.hc{--paper:#000;--text:#fff;--text-2:#fff;--stone:#fff;--ac:#fff;--ac2:#fff;background:#000}
::selection{background:#efbf3f88;color:var(--ink)}
/* ---------- 2. RHYTHM ---------- */
body:not(.lp) :is(h1,h2,h3,h4){font-family:var(--font-hd);color:var(--ink);letter-spacing:-.02em;text-wrap:balance}
body:not(.lp) h1{font-size:var(--fs-2xl);font-weight:800;line-height:1.12;margin:0 0 var(--sp-4)}
body:not(.lp) h2{font-size:var(--fs-xl);font-weight:700;line-height:1.2;margin:var(--sp-6) 0 var(--sp-3)}
body:not(.lp) h3{font-size:var(--fs-lg);font-weight:700;line-height:1.3;margin:var(--sp-5) 0 var(--sp-2)}
body:not(.lp) :is(h1,h2,h3):first-child{margin-top:0}
:lang(ar) :is(h1,h2,h3),:lang(ur) :is(h1,h2,h3){font-family:var(--font-ar);letter-spacing:0;line-height:1.5}
p,ul,ol{margin:0 0 var(--sp-4)}
.card :is(p,li){max-width:68ch;text-wrap:pretty}
.card :is(ul,ol){padding-inline-start:1.3em}.card li+li{margin-top:var(--sp-1)}
.card>:last-child{margin-bottom:0}
/* views and cards: one vertical rhythm (24px between blocks, 24px inside cards) */
.view{padding:var(--sp-6) clamp(var(--sp-4),4vw,var(--sp-7))}
.view>h1:first-child{margin-bottom:var(--sp-5)}
.view>*+*{margin-top:var(--sp-4)}
.view>.card{margin-block:var(--sp-4)}
.card{padding:var(--sp-5);margin:var(--sp-4) 0;border-radius:var(--r);border-color:var(--stone);box-shadow:var(--sh);
transition:box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.card:hover{box-shadow:var(--sh)} /* static cards no longer pretend to be clickable */
.grid4{gap:var(--sp-4)}.grid4>.card{margin:0}
.stats{gap:var(--sp-4)}.two{gap:var(--sp-5)}
.bar2,.bar4{gap:var(--sp-3)}
.note-sm{font-size:var(--fs-xs);line-height:1.5;color:var(--text-2)}
small{color:var(--text-2)}
label{color:var(--text);font-weight:600;font-size:var(--fs-sm)}
.portal .view>h1{padding-bottom:var(--sp-3);border-bottom:1px solid var(--stone);margin-bottom:var(--sp-5)}
/* sermon text: a reading measure, Arabic with room for harakat, quieter labels */
#live>*{max-width:46rem;margin-inline:auto}
#feed{display:grid;gap:var(--sp-3);padding-bottom:var(--sp-7)}
#feed .card{margin:0;padding:var(--sp-5) var(--sp-5) var(--sp-4);line-height:1.7;position:relative}
#feed .card.now{border-color:var(--gold-b);box-shadow:0 0 0 1px var(--gold-b),var(--sh-hover)}
#feed .card::before{content:"";position:absolute;inset-block:var(--sp-4);inset-inline-start:0;width:3px;border-radius:3px;background:var(--gold-b);transform:scaleY(0);transform-origin:top;transition:transform var(--dur-3) var(--ease)}
#feed .card.now::before{transform:scaleY(1)}
.ar{font-family:var(--font-ar);line-height:2;color:#8a5a00} /* 5.9:1 on white; the old amber was 5.0 */
#feed .ar{font-size:1.35em}
.lbl{display:inline-flex;align-items:center;gap:var(--sp-2);margin:var(--sp-3) 0 var(--sp-1);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:none;color:var(--text-2)}
.lbl i{margin-inline-end:0}
hr{border:0;border-top:1px solid var(--stone);margin:var(--sp-3) 0}
.verse{border-width:1px;border-color:#2f8a63;background:#eef7f1;color:#0b3a29}
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);background:none;border:0;padding:0 0 var(--sp-2);font:700 var(--fs-sm) var(--font-ui);color:#0b5d3c;cursor:pointer}
.badge:hover{text-decoration:underline}
.rp{border-radius:var(--r-sm)}.rp:hover{background:var(--stone-2);color:var(--ink)}
/* stagger-in: only the newest three lines animate, so a long archive does not replay hundreds of animations */
@keyframes line-in{from{opacity:0;transform:translateY(10px)}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
#feed .card:nth-last-child(-n+3){animation:line-in var(--dur-3) var(--ease) backwards}
#feed .card:nth-last-child(-n+3)>*{animation:rise var(--dur-3) var(--ease) backwards}
#feed .card:nth-last-child(-n+3)>:nth-child(2){animation-delay:.06s}
#feed .card:nth-last-child(-n+3)>:nth-child(3){animation-delay:.12s}
#feed .card:nth-last-child(-n+3)>:nth-child(4){animation-delay:.18s}
#feed .card:nth-last-child(-n+3)>:nth-child(n+5){animation-delay:.24s}
/* the view switch: a short fade and lift, nothing bouncy */
.view.on{animation:view-in var(--dur-3) var(--ease)}
@keyframes view-in{from{opacity:0;transform:translateY(8px)}}
/* ---------- 3. INTERACTION ---------- */
.btn{border-radius:var(--r-sm);border-color:var(--stone);background:#fff;color:var(--ink);box-shadow:var(--sh-1);position:relative;
transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.btn:hover{transform:translateY(-1px);border-color:var(--olive);color:var(--olive-d);box-shadow:0 8px 18px -10px #44580c88}
.btn:active{transform:translateY(0) scale(.985);box-shadow:var(--sh-1);transition-duration:.06s}
.btn.on,.btn.p{background:var(--olive);background-image:none;border-color:var(--olive);color:#fff;box-shadow:0 8px 18px -10px #44580ccc}
.btn.on:hover,.btn.p:hover{background:var(--olive-d);border-color:var(--olive-d);color:#fff;filter:none}
.btn:disabled{transform:none;box-shadow:none}
/* top menu and side menu: tint on hover, a gold marker that grows in on the current item */
.menu .btn,.side .btn{border:0;background:transparent;box-shadow:none;color:var(--text);font-weight:600}
.menu .btn:hover,.side .btn:hover{background:var(--stone-2);color:var(--ink);box-shadow:none;transform:none}
.menu .btn.on,.side .btn.on{background:var(--ink);color:#fff;box-shadow:none}
.menu .btn.on:hover,.side .btn.on:hover{background:var(--ink-2);color:#fff}
.menu .btn::after{content:"";position:absolute;inset-inline:.9em;bottom:.28em;height:2px;border-radius:2px;background:var(--gold-l);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-3) var(--ease)}
[dir=rtl] .menu .btn::after{transform-origin:right}
.menu .btn.on::after{transform:scaleX(1)}
.side .btn::before{content:"";position:absolute;inset-inline-start:0;inset-block:22%;width:3px;border-radius:3px;background:var(--gold-l);transform:scaleY(0);transition:transform var(--dur-2) var(--ease)}
.side .btn:hover::before{transform:scaleY(.55)}.side .btn.on::before{transform:scaleY(1)}
.side{background:#fffffff2;border-inline-end-color:var(--stone)}
.side .subm{border-inline-start:2px solid var(--gold-b);border-left-color:initial;padding-left:0;padding-inline-start:var(--sp-3);margin-inline-start:var(--sp-2)}
.top,.bar{background:#f5f7f0ee;border-color:var(--stone)}
.logo{color:var(--ink);font-family:var(--font-hd)}
/* mosque cards on the home list: the card lifts, the button inside stays the one real control */
#hlist .card{display:flex;flex-direction:column;gap:var(--sp-1);cursor:default}
#hlist .card:hover{transform:translateY(-2px);border-color:var(--gold-b);box-shadow:var(--sh-hover)}
#hlist .card .btn{margin-top:auto}
#hlist .card h3{margin:0;font-size:var(--fs-lg)}
/* details cards (How to use, Privacy, FAQ): chevron turns, content eases open */
details.card>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:44px;border-radius:var(--r-sm)}
details.card>summary::after{content:"";flex:none;width:.6em;height:.6em;border-inline-end:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-2) var(--ease)}
details.card[open]>summary::after{transform:rotate(225deg) translate(-2px,0)}
details.card>summary:hover::after{border-color:var(--olive-d)}
details.card[open]>summary{margin-bottom:var(--sp-3)}
@supports selector(::details-content){
details.card::details-content{block-size:0;overflow:clip;transition:block-size var(--dur-3) var(--ease),content-visibility var(--dur-3) allow-discrete}
details.card[open]::details-content{block-size:auto}
}
/* fields */
input,select,textarea{border-color:#c8d1bb;border-radius:var(--r-sm);background:#fff;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
input:hover,select:hover,textarea:hover{border-color:#9aa88a}
input:focus,select:focus,textarea:focus{border-color:var(--lapis);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:#5f6b61}
table{font-size:var(--fs-sm)}th{background:var(--stone-2);color:var(--text-2);letter-spacing:.04em}tr:hover td{background:var(--stone-2)}
td,th{padding:var(--sp-3) var(--sp-3)}
a{color:var(--olive-d);text-underline-offset:.2em;text-decoration-thickness:.07em;transition:color var(--dur-1) var(--ease),text-decoration-color var(--dur-2) var(--ease)}
.pill{background:var(--stone-2);color:var(--text)}
.stat{color:var(--olive-d);font-family:var(--font-hd);font-variant-numeric:tabular-nums}
.pbn button.on{color:var(--ink);background:var(--stone)}
.appnav .menu .btn.on{background:var(--stone);color:var(--ink)}
.mseason{background:linear-gradient(135deg,#fbf0cf,#fff)}
/* portal view titles are h2 now (one h1 per page) but keep the page-title look */
body.portal .view>h2{font-size:var(--fs-2xl);font-weight:800;line-height:1.12;margin:0 0 var(--sp-4)}
/* ---------- 3b. QUIET LIVE AND READING VIEW ----------
While following a sermon the screen keeps only the key icon buttons. Text labels on buttons are hidden (each button keeps its
aria-label or title, so screen readers still hear it), per-line labels and status text go quiet, and the Report flag
appears only on the current line, on hover, or when a line is tapped. */
body.shell #live .btn .tx,body.shell .top .btn .tx,body.shell #live label.tg .tx{display:none}
body.shell #live .btn,body.shell #live label.tg{min-width:44px;justify-content:center;padding-inline:var(--sp-3)}
body.shell #modebar b.dl,body.shell #dataused,body.shell #aud b.dl,body.shell #democtl.card b.dl{display:none}
body.shell #modebar{gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);box-shadow:none;background:transparent;border-color:transparent}
body.shell #aud{background:var(--card)!important;border-color:var(--stone)!important;padding:var(--sp-2) var(--sp-3)!important;gap:var(--sp-2)!important}
body.shell #aud,body.shell #live #democtl.card{position:static!important}
body.shell #audst{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.shell #feed .lbl,body.shell #feed hr{display:none}
body.shell #feed .rp{opacity:0;transition:opacity var(--dur-2) var(--ease)}
body.shell #feed .card:hover .rp,body.shell #feed .card:focus-within .rp,body.shell #feed .card.now .rp,body.shell #feed .card.sel .rp,body.shell #feed .rp:focus-visible{opacity:.7}
body.shell #feed .rp:hover{opacity:1}
body.shell #jl{width:48px;height:48px;border-radius:50%;padding:0;font-size:1.2rem;justify-content:center}
@media(hover:none){body.shell #feed .card .rp{opacity:.45}}
/* ---------- 4. ACCESSIBILITY ---------- */
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;inset-block-start:var(--sp-2);inset-inline-start:var(--sp-2);z-index:1000;padding:.7em 1.1em;border-radius:var(--r-sm);background:var(--ink);color:#fff;font-weight:700;text-decoration:none;transform:translateY(-200%);transition:transform var(--dur-2) var(--ease)}
.skip:focus{transform:none;outline:3px solid var(--gold-l);outline-offset:2px;color:#fff}
/* one visible focus style everywhere (the old one was an 18%-opaque teal glow: 2.5:1) */
body a:focus-visible,body button:focus-visible,body summary:focus-visible,body [tabindex]:focus-visible,body input:focus-visible,body select:focus-visible,body textarea:focus-visible,body .btn:focus-visible{
outline:3px solid var(--lapis);outline-offset:2px;box-shadow:0 0 0 2px #fff}
body.hc :focus-visible,:root.tv :focus-visible{outline-color:var(--gold-l);box-shadow:none}
main:focus,.view:focus,.view:focus-visible,[tabindex="-1"]:focus{outline:none}
@media(hover:none){.btn:hover,#hlist .card:hover{transform:none}.menu .btn:hover,.side .btn:hover{background:transparent}}
@media(max-width:800px){.view{padding:var(--sp-5) var(--sp-4)}.card{padding:var(--sp-4)}#feed .card{padding:var(--sp-4)}}
@media(prefers-contrast:more){:root{--stone:#8b9a7a;--text-2:#2b352d}}
@media(forced-colors:active){.btn,.card,input,select,textarea{border:1px solid ButtonText}.btn.on,.btn.p{background:Highlight;color:HighlightText}.menu .btn::after,.side .btn::before,#feed .card::before{background:Highlight}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}