/* ==== phase1-overrides.css ==== */
/* ═══════════════════════════════════════════════════════════════════
UMMAH COMPASS — Phase 1: Design Token Refinements
═══════════════════════════════════════════════════════════════════
Drop-in override file. Zero changes to styles.css needed.
HOW TO USE:
Add this line at the very END of your , after all existing
tags:
Save this file at: ./styles/phase1-overrides.css
(or any path you prefer — just match the href above)
REVERT: Remove the tag. Done.
═══════════════════════════════════════════════════════════════════
FONT FILES — Cormorant Garamond (self-hosted)
──────────────────────────────────────────────
Place these 5 files in your ./fonts/ directory:
cormorant-garamond-latin-400-normal.woff2 you have this
cormorant-garamond-latin-500-normal.woff2 you have this
cormorant-garamond-latin-700-normal.woff2 you have this
cormorant-garamond-latin-600-italic.woff2 you have this
cormorant-garamond-latin-700-italic.woff2 you have this
No downloads needed. You already have everything.
═══════════════════════════════════════════════════════════════════ */
/* ── 1. Cormorant Garamond — self-hosted display font ─────────────
Replaces Cinzel. Same classic authority, but with an Islamic
heritage warmth — used in illuminated manuscript reproductions
and Arabic-adjacent typesetting. Substantially more spiritual
than Cinzel's Roman inscription aesthetic.
──────────────────────────────────────────────────────────────── */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');
/* No 600-normal in your set — 700 is used as the nearest match */
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url('../fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('../fonts/cormorant-garamond-latin-700-italic.woff2') format('woff2');
}
/* ── 2. Design Tokens — full :root override block ─────────────────
Only the tokens that change are listed here. All others from
styles.css remain active via cascade.
──────────────────────────────────────────────────────────────── */
:root {
/* ── 2a. Display font
OLD: 'Cinzel', 'Trajan Pro', Georgia, serif
NEW: Cormorant Garamond, falls back to Lora then Georgia.
Lora is already loaded in styles.css, so the fallback
is always a loaded font — no invisible-text flash. */
--display: 'Cormorant Garamond', 'Lora', Georgia, serif;
/* ── 2b. Gold palette — deepened toward antique/heritage tone
OLD gold: #c5964a (modern amber, reads as "tech gold")
NEW gold: #b8830a (dark goldenrod — Ottoman manuscript
illumination tone, warmer and richer)
OLD gold-light: #ddb870 (washed-out, low contrast)
NEW gold-light: #d4a43a (stronger, more legible on dark navy)
OLD gold-rgb: 197, 150, 74
NEW gold-rgb: 184, 131, 10 (matches new #b8830a exactly) */
--gold: #b8830a;
--gold-light: #d4a43a;
--gold-rgb: 184, 131, 10;
/* ── 2c. New heritage teal — for alternate accent moments
Deeper, cooler, more mosque-tile feeling than --green-islamic.
Use for: secondary highlights, Qibla compass ring, decorative
borders. Does not replace --primary — that stays green. */
--teal-heritage: #0d5e4a;
--teal-heritage-rgb: 13, 94, 74;
/* ── 2d. Warm the deep navy slightly
OLD: #080e1c (cold blue-black, reads as generic dark app)
NEW: #07100f (fractionally warmer — still very dark, but
shifts the atmosphere toward mosque interior
rather than developer dashboard)
navy-mid and navy-card also warmed proportionally. */
--navy-deep: #07100f;
--navy-mid: #0b1a16;
--navy-card: #101e1b;
--navy-elevated: #162420;
/* ── 2e. Semantic bg picks up the warmer navy automatically */
--bg: var(--navy-deep);
/* ── 2f. Recalibrate glow values to match new gold-rgb
Slightly more intense — heritage gold should glow
with conviction, not the faint shimmer of the original. */
--glow-gold: 0 0 28px rgba(var(--gold-rgb), 0.22);
--glow-green: 0 0 24px rgba(var(--green-rgb), 0.20);
}
/* ── 3. Focus ring — gold instead of arbitrary sky blue ──────────
OLD: outline: 2.5px solid rgba(125, 211, 252, 0.7) ← blue
NEW: gold at 65% opacity — stays on brand, still WCAG AA. */
:focus-visible {
outline: 2.5px solid rgba(var(--gold-rgb), 0.65);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
/* ── 4. Scrollbars — gold tint to match brand ────────────────────
OLD: rgba(125, 211, 252, 0.2) ← blue, unrelated to palette
NEW: gold at low opacity — subtle but cohesive */
::-webkit-scrollbar-thumb {
background: rgba(var(--gold-rgb), 0.22);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(var(--gold-rgb), 0.40);
}
* {
scrollbar-color: rgba(var(--gold-rgb), 0.22) transparent;
}
/* ── 5. Body background atmosphere — remove the off-brand blue ───
The original has three radial gradients on body. The third one
injects a blue ellipse at 50% / 50% that pulls the atmosphere
toward "tech app" rather than "sacred space".
The green and gold gradients stay; blue is removed. */
body {
background-image:
radial-gradient(ellipse 80% 60% at 20% -10%,
rgba(var(--green-rgb), 0.08) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 100%,
rgba(var(--gold-rgb), 0.06) 0%, transparent 55%);
}
/* ── 6. .h3 section labels — from "developer mono uppercase"
to "Lora italic, soft gold" ────────────────────────────
OLD: font-family: var(--mono); text-transform: uppercase;
letter-spacing: 0.1em; color: var(--muted); font-size: var(--fs-micro)
→ reads as API documentation or a dev tool dashboard
NEW: font-family: var(--sans) (= Lora); font-style: italic;
no uppercase; gold-tinted muted color; slightly larger.
→ reads as a manuscript annotation, section heading in a
religious text — exactly the right register. */
.h3 {
margin: 0 0 10px;
font-family: var(--sans);
font-style: italic;
font-size: var(--fs-meta);
color: rgba(var(--gold-rgb), 0.72);
font-weight: 400;
text-transform: none;
letter-spacing: 0.02em;
}
/* ── 7. Card top-edge sheen — wider spread, gold-tinted ──────────
OLD: left: 5%; right: 5%; rgba(255,255,255,0.10) ← narrow white
NEW: left: 8%; right: 8%; gold-tinted, slightly brighter centre.
Small change, noticeable uplift — cards now feel illuminated
from above with warm light rather than cold white. */
.card::before {
left: 8%;
right: 8%;
background: linear-gradient(
90deg,
transparent,
rgba(var(--gold-rgb), 0.14) 40%,
rgba(var(--gold-rgb), 0.18) 50%,
rgba(var(--gold-rgb), 0.14) 60%,
transparent
);
}
/* ── 8. Active tab — richer gold intensity ───────────────────────
The existing gradient is gold/green but quite transparent (0.15).
Bumping to 0.22/0.20 makes the selected tab clearly distinct
without feeling heavy. */
.btn-tab-active {
background: linear-gradient(135deg,
rgba(var(--gold-rgb), 0.22),
rgba(var(--green-rgb), 0.16));
border-color: rgba(var(--gold-rgb), 0.35);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
var(--glow-gold);
}
/* ── 9. btn-primary — remove the off-brand blue contribution ─────
OLD: linear-gradient(135deg, green 0.28, blue 0.16)
NEW: pure green → teal-heritage fade, no blue.
The btn-primary is your main CTA — it should feel Islamic, not
like a generic Bootstrap primary button. */
.btn-primary {
background: linear-gradient(135deg,
rgba(var(--green-rgb), 0.30),
rgba(var(--teal-heritage-rgb), 0.22));
border-color: rgba(var(--green-rgb), 0.32);
}
.btn-primary:hover {
background: linear-gradient(135deg,
rgba(var(--green-rgb), 0.42),
rgba(var(--teal-heritage-rgb), 0.30));
border-color: rgba(var(--green-rgb), 0.48);
box-shadow: var(--shadow-sm), var(--glow-green);
}
/* ── 10. brand-subtitle — off mono, onto Lora italic ─────────────
The brand subtitle uses var(--mono) in styles.css which makes
the header feel like a developer console.
Note: .brand-subtitle is defined in brand-and-nav.css — this
override targets it regardless of which file defined it. */
.brand-subtitle {
font-family: var(--sans);
font-style: italic;
font-size: var(--fs-micro);
letter-spacing: 0.01em;
color: rgba(var(--gold-rgb), 0.58);
}
/* Also covers the .brand-tagline class used in your HTML */
.brand-tagline {
font-family: var(--sans);
font-style: italic;
font-size: var(--fs-micro);
letter-spacing: 0.01em;
color: rgba(var(--gold-rgb), 0.58);
}
/* ── 11. Prayer time card — prayer names off mono uppercase ───────
.time-name uses font-family: var(--mono) + text-transform: uppercase
Same fix as .h3 — mono uppercase reads as code, not worship.
Switch to Lora, keep the tracking modest. */
.time-name {
font-family: var(--sans);
font-style: italic;
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: none;
color: rgba(var(--gold-rgb), 0.65);
}
/* ── 12. Input focus ring — gold shadow is already right ─────────
styles.css already uses gold for input:focus border and shadow,
which is correct. This override ensures full consistency across
the textarea elements too (some components define their own). */
textarea:focus {
border-color: rgba(var(--gold-rgb), 0.45) !important;
box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.10) !important;
outline: none;
}
/* ── 13. Divider — slightly more prominent gold mid-stop ─────────
Original is rgba(gold, 0.12) — almost invisible.
Raise to 0.20 so the section separators actually read. */
.divider {
background: linear-gradient(
90deg,
transparent,
rgba(var(--gold-rgb), 0.20) 30%,
rgba(var(--gold-rgb), 0.24) 50%,
rgba(var(--gold-rgb), 0.20) 70%,
transparent
);
}
/* ═══════════════════════════════════════════════════════════════════
BRAND-AND-NAV.CSS OVERRIDES
═══════════════════════════════════════════════════════════════════
These target elements styled by your separate brand-and-nav.css.
They are safe here because this file loads last.
═══════════════════════════════════════════════════════════════════ */
/* ── 14. Brand privacy pills — gold-tinted instead of generic white
The pills currently use white/rgba(white) backgrounds which makes
them look like generic badges. A soft gold border + muted gold
text makes them feel like a seal of trust rather than fine print. */
.brand-pill {
color: rgba(var(--gold-rgb), 0.72);
border-color: rgba(var(--gold-rgb), 0.18);
background: rgba(var(--gold-rgb), 0.05);
}
.brand-pill-divider {
color: rgba(var(--gold-rgb), 0.25);
}
/* ── 15. Donate button — warm gold border instead of default ───── */
.btn-donate {
border-color: rgba(var(--gold-rgb), 0.35);
color: rgba(var(--gold-rgb), 0.90);
background: rgba(var(--gold-rgb), 0.07);
}
.btn-donate:hover {
background: rgba(var(--gold-rgb), 0.13);
border-color: rgba(var(--gold-rgb), 0.55);
box-shadow: var(--glow-gold);
}
/* ── 16. App header border — slightly more visible gold line ───── */
.app-header {
border-bottom-color: rgba(var(--gold-rgb), 0.12);
}
/* ═══════════════════════════════════════════════════════════════════
END OF PHASE 1 OVERRIDES
═══════════════════════════════════════════════════════════════════
Total changes: 16 override blocks
Files modified: 0 (this file only adds to the cascade)
Risk level: None (all changes are additive, fully reversible)
What changed visually:
✓ All headings (.h1 .h2 brand-title) now use Cormorant Garamond
✓ Section labels (.h3) are elegant italic, not mono uppercase
✓ Gold throughout is richer, deeper, more antique
✓ Navy background is fractionally warmer — less "tech", more "masjid"
✓ Focus rings, scrollbars, tab indicators all use gold
✓ Background atmosphere removes the distracting blue component
✓ Card sheens are gold-tinted, prayer names are italic not uppercase
✓ Privacy pills and donate button use the gold brand palette
✓ Body font and italic/tagline areas use Lora instead of monospace
═══════════════════════════════════════════════════════════════════ */
/* ==== phase2-overrides.css ==== */
/* ═══════════════════════════════════════════════════════════════════
UMMAH COMPASS — Phase 2: Islamic Identity Layer
═══════════════════════════════════════════════════════════════════
Drop-in override. Zero changes to existing files needed.
HOW TO ACTIVATE — add ONE line to index.html , after Phase 1:
(phase1-overrides.css should already be there)
← ADD
SAVE THIS FILE at: ./styles/phase2-overrides.css
HTML CHANGES: See phase2-html-changes.html for the 3 small edits
to index.html (brand mark SVG, nav icons, privacy pill collapse).
The CSS here works standalone — HTML changes add the visual polish.
═══════════════════════════════════════════════════════════════════ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. BODY — Islamic geometric tile background
An 8-pointed star (khatam) repeating at 80×80 px, ~5.5% opacity.
Layered on top of the Phase 1 warm-navy gradients.
Tile maths: outer r=30, inner r=12, 16-point star polygon.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpolygon points='40,10 44.6,28.9 61.2,18.8 51.1,35.4 70,40 51.1,44.6 61.2,61.2 44.6,51.1 40,70 35.4,51.1 18.8,61.2 28.9,44.6 10,40 28.9,35.4 18.8,18.8 35.4,28.9' fill='none' stroke='%23b8830a' stroke-width='0.55' stroke-opacity='0.055'/%3E%3C/svg%3E"),
radial-gradient(ellipse 80% 60% at 20% -10%, rgba(var(--green-rgb), 0.08) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 100%, rgba(var(--gold-rgb), 0.06) 0%, transparent 55%);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
2. BRAND TAGLINE — fix what Phase 1 missed
brand-and-nav.css sets font-weight:700 and text-transform:uppercase
which Phase 1 never countered (it only changed font-family/color).
This makes it elegant and Islamic rather than a brand shout.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.brand-tagline {
font-family: var(--sans);
font-style: italic;
font-weight: 400;
font-size: var(--fs-meta);
text-transform: none;
letter-spacing: 0.015em;
color: rgba(var(--gold-rgb), 0.70);
line-height: 1.4;
margin-top: 1px;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
3. PRIVACY PILL — gold-bordered heritage seal
The HTML change (phase2-html-changes.html) collapses 4 pills → 1.
This CSS styles that single pill as a compact trust badge.
Works immediately even without the HTML change applied yet.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.brand-privacy-pills {
margin-top: 5px;
gap: 0;
}
.brand-pill {
display: inline-block;
font-family: var(--sans);
font-style: italic;
font-weight: 400;
font-size: var(--fs-micro);
color: rgba(var(--gold-rgb), 0.68);
letter-spacing: 0.01em;
border: 1px solid rgba(var(--gold-rgb), 0.20);
background: rgba(var(--gold-rgb), 0.05);
border-radius: var(--radius-pill);
padding: 2px 9px;
white-space: nowrap;
}
/* Hide the secondary pills — the HTML change makes this permanent,
but if HTML hasn't been changed yet this hides the clutter now */
.brand-pill--sep,
.brand-pill-divider {
display: none;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
4. DONATE BUTTON — proper gold theme
donate.css has hardcoded background:#1a7a4a and border:none.
This override is loaded after donate.css so it wins cleanly.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn-donate {
background: linear-gradient(135deg,
rgba(var(--gold-rgb), 0.18),
rgba(var(--green-rgb), 0.12));
color: rgba(var(--gold-rgb), 0.95);
border: 1px solid rgba(var(--gold-rgb), 0.38);
border-radius: var(--radius-sm);
font-family: var(--sans);
font-style: italic;
font-weight: 400;
letter-spacing: 0.015em;
transition: background var(--dur-fast), border-color var(--dur-fast),
box-shadow var(--dur-fast), transform var(--dur-fast);
}
.btn-donate:hover {
background: linear-gradient(135deg,
rgba(var(--gold-rgb), 0.26),
rgba(var(--green-rgb), 0.18));
border-color: rgba(var(--gold-rgb), 0.55);
box-shadow: var(--glow-gold);
transform: none;
}
.btn-donate:active {
transform: scale(0.97);
}
.btn-donate svg {
/* Heart icon: gold fill */
color: rgba(var(--gold-rgb), 0.85);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
5. NAV TAB BUTTONS — icon alignment and font
After the HTML change adds SVG icons, these rules ensure they
size, align, and colour-transition correctly with the button state.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Remove emoji from the i18n span — the SVG icon sits beside the text.
The span now holds only the word label (set in phase2-html-changes). */
.btn-tab {
display: inline-flex;
align-items: center;
gap: 5px;
}
/* SVG icons inside tab buttons */
.btn-tab svg.tab-icon {
flex-shrink: 0;
width: 13px;
height: 13px;
color: inherit;
opacity: 0.82;
transition: opacity var(--dur-fast);
}
.btn-tab:hover svg.tab-icon,
.btn-tab-active svg.tab-icon {
opacity: 1;
}
/* Active tab icon gets a subtle gold glow */
.btn-tab-active svg.tab-icon {
filter: drop-shadow(0 0 3px rgba(var(--gold-rgb), 0.45));
}
/* Tab text label — off mono, onto Lora for warmth */
.btn-tab > span {
font-family: var(--sans);
font-size: var(--fs-meta);
font-weight: 500;
letter-spacing: 0.01em;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
6. DROPDOWN ITEMS — font and gold active state
Previously used default/mono font. Now uses Lora for consistency.
Active item gets gold accent instead of the raw #4ade80 green.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tab-dropdown-item {
font-family: var(--sans);
font-size: var(--fs-meta);
font-weight: 400;
letter-spacing: 0.01em;
color: rgba(234, 240, 255, 0.82);
padding: 10px 18px;
}
.tab-dropdown-item:hover {
background: rgba(var(--gold-rgb), 0.06);
color: rgba(var(--gold-rgb), 0.95);
}
.tab-dropdown-item.active {
color: rgba(var(--gold-rgb), 1);
background: rgba(var(--gold-rgb), 0.08);
font-weight: 500;
}
/* Dropdown panel — gold border top accent replaces the plain border */
.tab-dropdown {
border-color: rgba(var(--gold-rgb), 0.14);
border-top: 2px solid rgba(var(--gold-rgb), 0.30);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
7. ORNAMENTAL SECTION DIVIDERS
Replaces the plain 1px gradient line with a three-part ornament:
gradient line ─────── ◇ ─────── gradient line
The diamond is injected via background-image data URI.
::before and ::after handle the lines; the gap is 14px.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.divider {
position: relative;
display: flex;
align-items: center;
gap: 14px;
margin: 24px 0;
height: 12px;
/* Double-diamond center ornament — outer outline + inner soft fill */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolygon points='6,0.5 11.5,6 6,11.5 0.5,6' fill='none' stroke='%23b8830a' stroke-width='0.9' stroke-opacity='0.52'/%3E%3Cpolygon points='6,3 9,6 6,9 3,6' fill='%23b8830a' fill-opacity='0.16'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center center;
background-size: 11px 11px;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
height: 1px;
min-width: 0;
}
.divider::before {
background: linear-gradient(to right,
transparent 0%,
rgba(var(--gold-rgb), 0.22) 100%);
}
.divider::after {
background: linear-gradient(to left,
transparent 0%,
rgba(var(--gold-rgb), 0.22) 100%);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
8. BRAND MARK — SVG sizing and hover
After the HTML change replaces the 🕌 emoji with an inline SVG,
these rules ensure perfect centering and the spring animation.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.brand-mark {
/* Ensure the mark is always vertically centred regardless of SVG size */
display: grid;
place-items: center;
}
.brand-mark svg {
display: block;
/* Prevent stray layout space below SVG in some browsers */
vertical-align: middle;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
9. APP HEADER — gold accent line intensity boost
Phase 1 set it to 0.12 opacity — bumping to 0.16 for presence.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.app-header {
border-bottom: 1px solid rgba(var(--gold-rgb), 0.16);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
10. PRAYER TAB DROPDOWN TOGGLE — Lora font to match nav
`.prayer-dropdown-toggle` uses var(--display) = Cormorant Garamond.
Give it a slight italic treatment so it matches the new brand voice.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.prayer-dropdown-toggle {
font-style: italic;
letter-spacing: 0.04em;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
11. PRAYER SUB-TABS — gold active state to replace #4ade80 green
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.prayer-sub-tab.active {
background: rgba(var(--gold-rgb), 0.10);
border-color: rgba(var(--gold-rgb), 0.30);
color: rgba(var(--gold-rgb), 0.95);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
12. BRAND-ROTATING TEXT — use CSS variable gold instead of hardcoded
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.brand-rotating-text {
color: rgba(var(--gold-rgb), 0.90);
font-size: var(--fs-meta);
font-weight: 400;
}
/* ═══════════════════════════════════════════════════════════════════
END OF PHASE 2 OVERRIDES
═══════════════════════════════════════════════════════════════════
Total blocks: 12
Files modified: 0 (pure additions to the cascade)
Risk level: None
What changed visually:
✓ Subtle Islamic 8-pointed star geometric tiling on body background
✓ Brand tagline is now italic Lora, gold-tinted — no longer uppercase bold
✓ Privacy pills collapsed to single gold-bordered heritage badge
✓ Donate button is now gold-themed (no longer a plain green button)
✓ Nav tab SVG icons align and glow correctly (after HTML change)
✓ Dropdown items use Lora + gold hover/active — no longer generic
✓ Dividers are now ornamental: gradient line ─── ◇ ─── gradient line
✓ Active prayer sub-tabs use gold accent (no more raw #4ade80 green)
✓ Brand mark SVG renders centered and with spring hover (after HTML change)
✓ App header gold border line intensified
═══════════════════════════════════════════════════════════════════ */
/* ==== phase3-overrides.css ==== */
/* ═══════════════════════════════════════════════════════════════════
UMMAH COMPASS — Phase 3: Component Redesigns
═══════════════════════════════════════════════════════════════════
HOW TO ACTIVATE — add to index.html after phase2:
HTML CHANGES: See phase3-html-changes.html for:
— The mobile bottom nav markup (add once to index.html)
— The SW cache update (sw.js additions)
═══════════════════════════════════════════════════════════════════ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. MOBILE BOTTOM NAVIGATION BAR
Fixed bottom, glassmorphic, 5 primary tabs.
Only visible on ≤768px — desktop keeps the top nav.
Pushes main content up so nothing hides underneath it.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bottom-nav {
display: none; /* hidden on desktop — shown via media query below */
}
@media (max-width: 768px) {
/* Show the bar */
.bottom-nav {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
/* Respect iOS home indicator */
padding-bottom: calc(8px + var(--safe-bottom));
padding-top: 8px;
padding-left: calc(4px + var(--safe-left));
padding-right: calc(4px + var(--safe-right));
background: rgba(7, 16, 15, 0.88);
backdrop-filter: blur(22px) saturate(1.6);
-webkit-backdrop-filter: blur(22px) saturate(1.6);
border-top: 1px solid rgba(var(--gold-rgb), 0.14);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.38),
0 -1px 0 rgba(var(--gold-rgb), 0.08);
z-index: 190; /* below header (200) but above content */
gap: 2px;
}
/* Push main content up so it's not hidden behind the bar */
.container {
padding-bottom: calc(80px + var(--safe-bottom));
}
/* Push the floating ayah pill above the bar */
.ayah-pill {
bottom: calc(76px + var(--safe-bottom)) !important;
}
/* Hide the desktop footer on mobile — bottom nav replaces it */
.app-footer {
display: none;
}
/* Shrink the top nav on mobile — still functional but compact */
.top-nav {
display: none;
}
/* Each tab button */
.bottom-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 4px;
background: none;
border: none;
border-radius: var(--radius-sm);
color: rgba(var(--white-soft), 0.48);
cursor: pointer;
min-height: 44px; /* iOS HIG touch target */
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
position: relative;
}
.bottom-nav-item:hover {
color: rgba(var(--white-soft), 0.72);
background: rgba(255, 255, 255, 0.04);
}
/* Active state — gold accent */
.bottom-nav-item.active {
color: rgba(var(--gold-rgb), 1);
}
/* Gold underline on active */
.bottom-nav-item.active::after {
content: '';
position: absolute;
bottom: -8px; /* sits at top edge of bar padding */
left: 20%;
right: 20%;
height: 2px;
border-radius: var(--radius-pill);
background: linear-gradient(90deg,
transparent,
rgba(var(--gold-rgb), 0.8) 40%,
rgba(var(--gold-rgb), 0.8) 60%,
transparent);
}
/* Active icon: gold drop-shadow */
.bottom-nav-item.active svg {
filter: drop-shadow(0 0 4px rgba(var(--gold-rgb), 0.5));
}
.bottom-nav-item svg {
width: 20px;
height: 20px;
flex-shrink: 0;
transition: filter var(--dur-fast);
}
.bottom-nav-label {
font-family: var(--sans);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1;
}
/* Tools button — "+" overflow indicator */
.bottom-nav-item--tools .bottom-nav-label::after {
content: '…';
opacity: 0.6;
font-size: var(--fs-micro);
}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
2. HOME PRAYER CARD — hero styling
#homePrayerCard is dynamically rendered by home.js every 30s.
All selectors here are CSS-only — no JS changes needed.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Elevate the home prayer card — stronger gold border + warm glow */
#homePrayerCard {
border-color: rgba(var(--gold-rgb), 0.18) !important;
box-shadow:
var(--shadow-lg),
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 40px rgba(var(--gold-rgb), 0.06);
/* Warm top accent line */
background: linear-gradient(160deg,
rgba(18, 32, 28, 0.92) 0%,
rgba(12, 22, 20, 0.96) 50%,
rgba(9, 18, 16, 0.98) 100%);
}
/* Gold top-edge accent line (overrides card::before) */
#homePrayerCard::before {
left: 4%;
right: 4%;
height: 1.5px;
background: linear-gradient(
90deg,
transparent,
rgba(var(--gold-rgb), 0.30) 30%,
rgba(var(--green-rgb), 0.22) 70%,
transparent
);
}
/* Card heading — Cormorant Garamond, larger */
#homePrayerCard .h2 {
font-size: var(--fs-h2);
letter-spacing: 0.03em;
}
/* City meta line — soft gold tint */
#homePrayerCard .meta {
color: rgba(var(--gold-rgb), 0.55);
font-family: var(--sans);
font-style: italic;
font-size: var(--fs-micro);
letter-spacing: 0.01em;
}
/* ── Live clock ── */
.prayer-live-clock-time {
font-family: var(--display);
font-size: var(--fs-h1);
font-weight: 600;
letter-spacing: 0.04em;
background: linear-gradient(135deg,
var(--white-soft) 20%,
rgba(var(--gold-rgb), 0.9) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
}
.prayer-live-clock-date {
font-family: var(--sans);
font-style: italic;
font-size: var(--fs-micro);
color: rgba(var(--gold-rgb), 0.50);
margin-top: 3px;
}
/* ── Next prayer section — the focal hero ── */
#homePrayerCard .next-prayer {
background: rgba(var(--gold-rgb), 0.04);
border: 1px solid rgba(var(--gold-rgb), 0.12);
border-radius: var(--radius);
padding: 14px 18px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 4px;
}
/* "Next Prayer" and "Time Remaining" labels */
#homePrayerCard .next-prayer .label {
font-family: var(--sans);
font-style: italic;
font-size: var(--fs-micro);
color: rgba(var(--gold-rgb), 0.55);
font-weight: 400;
letter-spacing: 0.02em;
text-transform: none;
margin-bottom: 4px;
}
/* Prayer name and countdown values — large Cormorant Garamond */
#homePrayerCard .next-prayer .value {
font-family: var(--display);
font-size: var(--fs-h2);
font-weight: 600;
letter-spacing: 0.03em;
color: var(--white-soft);
font-family: var(--mono);
}
/* Prayer name specifically (first .value) — display font */
#homePrayerCard .next-prayer > div:first-child .value {
font-family: var(--display);
font-size: var(--fs-h2);
font-weight: 600;
background: linear-gradient(135deg,
var(--white-soft) 30%,
rgba(var(--gold-rgb), 0.85) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Countdown value — monospace for digit stability */
#homePrayerCard .next-prayer > div:last-child .value {
font-family: var(--mono);
font-size: var(--fs-h2);
font-weight: 600;
color: rgba(var(--gold-rgb), 0.92);
letter-spacing: 0.06em;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
3. HOME PRAYER TIME MINI-CARDS
.home-time-card is rendered by home.js — styles injected by
injectHomeStyles() win the cascade unless we use !important
or higher specificity.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Override home.js injected styles with higher specificity */
#homePrayerCard .home-time-card {
border: 1px solid rgba(var(--gold-rgb), 0.09) !important;
background: rgba(var(--gold-rgb), 0.03) !important;
border-radius: var(--radius-sm) !important;
padding: 12px 14px !important;
transition: border-color var(--dur-normal), background var(--dur-normal);
position: relative;
overflow: hidden;
}
/* Left accent line on each prayer card */
#homePrayerCard .home-time-card::before {
content: '';
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
width: 2px;
border-radius: 0 2px 2px 0;
background: linear-gradient(180deg,
rgba(var(--green-rgb), 0.6),
rgba(var(--gold-rgb), 0.4));
opacity: 0;
transition: opacity var(--dur-normal);
}
#homePrayerCard .home-time-card:hover {
border-color: rgba(var(--gold-rgb), 0.18) !important;
background: rgba(var(--gold-rgb), 0.06) !important;
}
#homePrayerCard .home-time-card:hover::before {
opacity: 1;
}
/* Prayer name — italic Lora instead of mono uppercase */
#homePrayerCard .home-time-card .time-name {
font-family: var(--sans) !important;
font-style: italic;
font-size: var(--fs-micro) !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: 0.02em !important;
color: rgba(var(--gold-rgb), 0.62) !important;
}
/* Time value — slightly larger, cleaner */
#homePrayerCard .home-time-card .time-value {
font-family: var(--mono) !important;
font-size: var(--fs-label) !important;
font-weight: 600 !important;
color: var(--white-soft) !important;
margin-top: 2px;
}
/* Clock icon — hide the ⏱️ emoji in home cards — it's noisy */
#homePrayerCard .home-time-card [aria-hidden="true"] {
display: none;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
4. HOME QUICK TOOL BUTTONS
.home-tool-btn is injected by home.js injectHomeStyles().
Using #homeScreenContent as ancestor for higher specificity.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#homeScreenContent .home-tool-btn {
border: 1px solid rgba(var(--gold-rgb), 0.12) !important;
background: rgba(var(--gold-rgb), 0.04) !important;
border-radius: var(--radius) !important;
padding: 16px !important;
transition: border-color var(--dur-normal), background var(--dur-normal),
box-shadow var(--dur-normal), transform var(--dur-fast) !important;
}
#homeScreenContent .home-tool-btn:hover {
border-color: rgba(var(--gold-rgb), 0.28) !important;
background: rgba(var(--gold-rgb), 0.08) !important;
box-shadow: var(--glow-gold) !important;
transform: translateY(-1px) !important;
}
#homeScreenContent .home-tool-icon {
font-size: var(--fs-h2) !important;
line-height: 1;
}
#homeScreenContent .home-tool-label {
font-family: var(--sans) !important;
font-weight: 500 !important;
font-size: var(--fs-meta) !important;
color: var(--fg);
}
/* Home link pills (More tools row) */
#homeScreenContent .home-link-pill {
border: 1px solid rgba(var(--gold-rgb), 0.12) !important;
background: rgba(var(--gold-rgb), 0.03) !important;
border-radius: var(--radius-pill) !important;
font-family: var(--sans) !important;
font-size: var(--fs-meta) !important;
transition: border-color var(--dur-fast), background var(--dur-fast) !important;
}
#homeScreenContent .home-link-pill:hover {
border-color: rgba(var(--gold-rgb), 0.25) !important;
background: rgba(var(--gold-rgb), 0.07) !important;
}
/* Section card headings inside home */
#homeScreenContent .home-section-card .h2 {
font-size: var(--fs-h3);
letter-spacing: 0.02em;
}
#homeScreenContent .home-section-card .meta {
font-family: var(--sans);
font-style: italic;
font-size: var(--fs-micro);
color: rgba(var(--gold-rgb), 0.45);
}
/* Change City / Open Prayer buttons */
#homeScreenContent .home-prayer-actions .btn {
font-family: var(--sans);
font-size: var(--fs-meta);
border-color: rgba(var(--gold-rgb), 0.14);
}
#homeScreenContent .home-prayer-actions .btn:hover {
border-color: rgba(var(--gold-rgb), 0.30);
background: rgba(var(--gold-rgb), 0.06);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
5. PRAYER TIME CARDS (Prayer screen — .time-card)
Add a coloured left-edge accent that pulses on the active/next
prayer and mutes past prayers.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Base card — slightly warmer border */
.time-card {
border-color: rgba(var(--gold-rgb), 0.08) !important;
}
/* Active/next prayer card — gold border glow */
.time-card.next {
border-color: rgba(var(--gold-rgb), 0.30) !important;
background: rgba(var(--gold-rgb), 0.06) !important;
box-shadow: var(--shadow-sm), var(--glow-gold) !important;
}
.time-card.next::before {
background: linear-gradient(180deg,
rgba(var(--gold-rgb), 0.8),
rgba(var(--green-rgb), 0.5)) !important;
opacity: 1 !important;
}
/* Prayer names — off mono uppercase, onto Lora italic */
.time-name {
font-family: var(--sans) !important;
font-style: italic !important;
font-size: var(--fs-micro) !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: 0.02em !important;
color: rgba(var(--gold-rgb), 0.65) !important;
}
/* Prayer time value */
.time-value {
font-size: var(--fs-body) !important;
letter-spacing: 0.02em !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
6. DAILY VERSE PILL — upgraded from minimal to prominent
The ☽ icon becomes a proper crescent. The pill widens and glows.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ayah-pill {
/* Widen the pill and increase presence */
padding: 9px 18px 9px 14px !important;
gap: 8px !important;
/* Heritage gold gradient border */
background: linear-gradient(135deg,
rgba(var(--gold-rgb), 0.16),
rgba(var(--green-rgb), 0.10)) !important;
border: 1px solid rgba(var(--gold-rgb), 0.38) !important;
box-shadow: var(--shadow-md), var(--glow-gold) !important;
/* Subtle pulse animation on first render */
animation: ayahPillEntrance 0.6s var(--ease-spring) both,
ayahPillGlow 3.2s ease-in-out 1.2s infinite !important;
}
@keyframes ayahPillEntrance {
from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.92); }
to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes ayahPillGlow {
0%, 100% { box-shadow: var(--shadow-md), 0 0 12px rgba(var(--gold-rgb), 0.14); }
50% { box-shadow: var(--shadow-md), 0 0 22px rgba(var(--gold-rgb), 0.30); }
}
@media (prefers-reduced-motion: reduce) {
.ayah-pill { animation: none !important; }
}
.ayah-pill:hover {
background: linear-gradient(135deg,
rgba(var(--gold-rgb), 0.24),
rgba(var(--green-rgb), 0.16)) !important;
border-color: rgba(var(--gold-rgb), 0.55) !important;
transform: translateX(-50%) translateY(-2px) !important;
box-shadow: var(--shadow-lg), var(--glow-gold) !important;
}
/* Crescent icon — gold, slightly larger */
.ayah-pill-icon {
font-size: var(--fs-body) !important;
color: rgba(var(--gold-rgb), 0.95);
line-height: 1;
}
/* "Daily Verse" label */
.ayah-pill-label {
font-family: var(--sans) !important;
font-style: italic;
font-size: var(--fs-meta) !important;
font-weight: 500 !important;
letter-spacing: 0.02em;
color: rgba(var(--gold-rgb), 0.92) !important;
}
/* Notification dot — gold colour */
.ayah-pill-dot {
background: rgba(var(--gold-rgb), 0.9) !important;
box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.6) !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
7. DAILY VERSE MODAL — ornamental frame
The modal already has .ayah-modal-ornament with ﷽ (bismillah).
This section elevates the modal's Islamic feel.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Modal border — gold top accent */
.ayah-modal {
border-top: 2px solid rgba(var(--gold-rgb), 0.45) !important;
}
/* ﷽ ornament — larger, gold */
.ayah-modal-ornament span {
font-family: var(--arabic) !important;
font-size: var(--fs-arabic-h1) !important;
color: rgba(var(--gold-rgb), 0.70) !important;
display: block;
text-align: center;
line-height: 1.8;
}
/* Modal title */
.ayah-modal-title {
font-family: var(--display) !important;
font-size: var(--fs-body) !important;
letter-spacing: 0.04em;
}
/* Arabic verse text — slightly warmer line height */
.ayah-modal-arabic {
line-height: 2.3 !important;
font-size: var(--fs-arabic-h2) !important;
}
/* Reference line — gold italic */
.ayah-modal-ref {
font-family: var(--sans) !important;
font-style: italic;
color: rgba(var(--gold-rgb), 0.65) !important;
font-size: var(--fs-meta) !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
8. SCREEN TRANSITIONS — consistent fade + rise across all tabs
Applies to every .screen element when it becomes visible.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes screenReveal {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.screen:not(.hidden) {
animation: screenReveal var(--dur-slow) var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
.screen:not(.hidden) { animation: none; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
9. RESPONSIVE — hide top nav on mobile (bottom nav takes over)
Only hides when the bottom nav HTML is present in the DOM.
Graceful fallback: if .bottom-nav isn't in the DOM, top nav stays.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
/* Only hide when bottom nav is present */
body:has(.bottom-nav) .top-nav {
display: none;
}
/* Stack header brand + actions vertically, save vertical space */
.app-header {
padding-bottom: 8px;
}
}
/* ── Settings gear button — reposition on mobile ── */
/* Base style — match the header action aesthetic */
.settings-gear-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
border: 1px solid rgba(var(--gold-rgb), 0.20);
background: rgba(var(--gold-rgb), 0.05);
color: rgba(var(--gold-rgb), 0.70);
cursor: pointer;
transition: background var(--dur-fast), border-color var(--dur-fast),
color var(--dur-fast);
flex-shrink: 0;
}
.settings-gear-btn:hover {
background: rgba(var(--gold-rgb), 0.12);
border-color: rgba(var(--gold-rgb), 0.38);
color: rgba(var(--gold-rgb), 0.95);
}
@media (max-width: 768px) {
/* On mobile the gear sits before .top-nav in the DOM,
which puts it below the header-actions row — looks orphaned.
Order trick: push it into the flex row visually by making
.app-header a proper flex-wrap and giving the gear a high
flex order so it slots beside the donate button. */
.settings-gear-btn {
order: -1; /* Pull it before donate in the header-actions row */
}
/* Make header-actions include the gear naturally */
.app-header {
flex-wrap: wrap;
align-items: center;
}
}
/* ═══════════════════════════════════════════════════════════════════
END OF PHASE 3 OVERRIDES
═══════════════════════════════════════════════════════════════════
Total blocks: 9
Files modified: 0 (pure additions)
Risk level: Low — all !important targets JS-injected styles only
What activates from CSS alone (no HTML needed):
✓ Home prayer card elevated hero styling
✓ Next prayer section with large Cormorant name + gold countdown
✓ Live clock with gradient gold text
✓ Home time cards — italic prayer names, left accent line on hover
✓ Home tool buttons — gold border hover, shadow, lift effect
✓ Prayer screen time cards — gold next-prayer state
✓ Daily verse pill — wider, gold gradient, entrance + glow animation
✓ Verse modal — gold top border, larger bismillah ornament
✓ Screen transitions — fade + rise on tab switch
What requires the HTML change (phase3-html-changes.html):
✓ Mobile bottom navigation bar (the