/* ==========================================================================
QuranCentral - Master Stylesheet (v2 - Premium emerald theme)
Colors sampled from the new QuranCentral logo (deep emerald + antique gold)
Typography: Playfair Display (display), Inter (body), Amiri (Arabic)
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700;800&family=Amiri:ital,wght@0,400;0,700;1,400&family=Amiri+Quran&display=swap');
:root {
/* ---- Brand palette from new logo (deep emerald) ---- */
--qc-primary: #0E4F2C; /* deep emerald — dome & wordmark */
--qc-primary-dark: #073A1F;
--qc-primary-darker: #042815;
--qc-primary-light: #1B7A47; /* sunburst rays */
--qc-accent: #5B9F6E; /* sage accent */
--qc-accent-soft: #E8F1EA;
--qc-accent-softer: #F1F6F2;
/* ---- Refined antique gold (replaces bright yellow gold) ---- */
--qc-gold: #B89B5E;
--qc-gold-dark: #8E7440;
--qc-gold-light: #D9C896;
--qc-gold-soft: #F5EFE0;
/* ---- Surfaces ---- */
--qc-bg: #FAFAF7;
--qc-bg-elev: #FFFFFF;
--qc-bg-alt: #F4F5F0;
--qc-border: #E5E7DE;
--qc-border-strong: #CDD3C5;
/* ---- Text ---- */
--qc-text: #1A1F1B;
--qc-text-soft: #4A5750;
--qc-text-muted: #7A8479;
--qc-text-on-dark: #F1F4ED;
/* ---- Shadows (cooler, more layered) ---- */
--qc-shadow-xs: 0 1px 2px rgba(14, 79, 44, 0.04);
--qc-shadow-sm: 0 2px 4px rgba(14, 79, 44, 0.06), 0 1px 2px rgba(14, 79, 44, 0.04);
--qc-shadow-md: 0 8px 24px -8px rgba(14, 79, 44, 0.12), 0 4px 8px -4px rgba(14, 79, 44, 0.06);
--qc-shadow-lg: 0 24px 48px -12px rgba(14, 79, 44, 0.18), 0 8px 16px -8px rgba(14, 79, 44, 0.08);
--qc-shadow-xl: 0 32px 64px -16px rgba(14, 79, 44, 0.24);
/* ---- Typography ---- */
--qc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--qc-font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
--qc-font-arabic: 'Amiri Quran', 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
/* ---- Layout ---- */
--qc-radius-sm: 8px;
--qc-radius: 12px;
--qc-radius-lg: 20px;
--qc-radius-xl: 28px;
--qc-container: 1200px;
--qc-nav-h: 92px; /* was 76 — bumped ~20% per user request */
/* ---- Transitions ---- */
--qc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--qc-trans: 180ms var(--qc-ease);
}
[data-theme="dark"] {
--qc-primary: #5B9F6E;
--qc-primary-dark: #1B7A47;
--qc-primary-darker: #0E4F2C;
--qc-primary-light: #7DB890;
--qc-accent: #94C7A5;
--qc-accent-soft: #1A2A20;
--qc-accent-softer: #131C16;
--qc-gold: #D9C896;
--qc-gold-dark: #B89B5E;
--qc-gold-light: #EBDDB1;
--qc-gold-soft: #2A2418;
--qc-bg: #0B1410;
--qc-bg-elev: #141E18;
--qc-bg-alt: #0F1813;
--qc-border: #243027;
--qc-border-strong: #364437;
--qc-text: #E8EDE9;
--qc-text-soft: #B5BDB7;
--qc-text-muted: #7A8479;
--qc-text-on-dark: #F1F4ED;
--qc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--qc-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
--qc-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
--qc-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
--qc-shadow-xl: 0 32px 64px -16px rgba(0, 0, 0, 0.7);
}
/* ==========================================================================
Base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
padding-top: var(--qc-nav-h); /* compensate for fixed nav */
font-family: var(--qc-font-body);
font-size: 16px;
line-height: 1.65;
color: var(--qc-text);
background: var(--qc-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'cv11', 'ss01';
}
img { max-width: 100%; display: block; }
a {
color: var(--qc-primary);
text-decoration: none;
transition: color var(--qc-trans);
}
a:hover { color: var(--qc-primary-light); }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
font-family: var(--qc-font-display);
color: var(--qc-text);
margin-top: 0;
letter-spacing: -0.01em;
line-height: 1.25;
font-weight: 700;
}
h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); }
h3 { font-size: 1.35rem; font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 1em; }
::selection { background: var(--qc-accent-soft); color: var(--qc-primary-darker); }
[data-theme="dark"] ::selection { background: var(--qc-primary-dark); color: var(--qc-text-on-dark); }
/* Custom scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--qc-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--qc-border-strong); border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover { background: var(--qc-accent); }
/* ==========================================================================
Layout
========================================================================== */
.container {
max-width: var(--qc-container);
margin: 0 auto;
padding: 0 24px;
}
.qc-section { padding: 56px 0; }
.qc-section.compact { padding: 28px 0; }
/* "Explore QuranCentral" — gets the same soft green hero-like gradient so
it visually breaks away from the plain-white widgets above. Tighter
top padding so there's less empty space above the section header.
Inner container framed with a gold border to match the tile style. */
.qc-section-explore {
padding-top: 22px;
background:
radial-gradient(ellipse 1200px 500px at 50% -20%, rgba(184, 155, 94, 0.10) 0%, transparent 60%),
radial-gradient(ellipse 800px 300px at 50% 100%, rgba(14, 79, 44, 0.04) 0%, transparent 60%),
linear-gradient(180deg, var(--qc-bg) 0%, var(--qc-accent-softer) 100%);
position: relative;
}
.qc-section-explore .container {
border: 2px solid var(--qc-gold);
border-radius: var(--qc-radius);
padding: 22px 22px 26px;
background: rgba(255, 255, 255, 0.55);
box-shadow: 0 0 0 1px rgba(217, 200, 150, 0.25),
0 8px 24px -8px rgba(184, 155, 94, 0.35);
}
@media (max-width: 600px) {
.qc-section-explore .container { padding: 16px 14px 20px; }
}
[data-theme="dark"] .qc-section-explore {
background:
radial-gradient(ellipse 1200px 500px at 50% -20%, rgba(184, 155, 94, 0.08) 0%, transparent 60%),
radial-gradient(ellipse 800px 300px at 50% 100%, rgba(91, 159, 110, 0.06) 0%, transparent 60%),
linear-gradient(180deg, var(--qc-bg) 0%, var(--qc-bg-elev) 100%);
}
.qc-section h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); margin-bottom: 8px; text-align: center; }
.qc-section .qc-section-sub {
text-align: center;
color: var(--qc-text-soft);
margin-bottom: 40px;
font-size: 1.05rem;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* Decorative section divider — a subtle Islamic-inspired ornament */
.qc-ornament {
display: flex; align-items: center; justify-content: center; gap: 14px;
margin: 24px auto 36px;
color: var(--qc-gold);
}
.qc-ornament::before, .qc-ornament::after {
content: "";
height: 1px;
width: 80px;
background: linear-gradient(90deg, transparent, var(--qc-gold), transparent);
}
.qc-ornament .star { font-size: 0.9rem; opacity: 0.7; }
/* Slightly more prominent variant used right under the hero carousel */
.qc-ornament-top { margin: 18px auto 8px; gap: 22px; }
.qc-ornament-top::before, .qc-ornament-top::after { width: 140px; }
.qc-ornament-top .star { font-size: 1.1rem; opacity: 0.85; }
/* ==========================================================================
Navigation (fixed top bar in brand green)
========================================================================== */
.qc-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
/* Edge-fading gradient: softer green at horizontal edges, full brand-green in the
middle. Gives a modern "vignette" feel instead of a hard solid bar. */
background:
linear-gradient(90deg,
rgba(10, 51, 32, 0.96) 0%,
var(--qc-primary-darker) 18%,
var(--qc-primary-darker) 82%,
rgba(10, 51, 32, 0.96) 100%);
border-bottom: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.qc-nav::after {
/* subtle gold accent line — same family as the footer top stripe */
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--qc-gold), transparent);
opacity: 0.55;
}
.qc-nav-inner {
max-width: var(--qc-container);
margin: 0 auto;
padding: 0 24px;
height: var(--qc-nav-h);
display: flex;
align-items: center;
gap: 28px;
}
.qc-nav-logo {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 132px;
height: 132px;
background: white;
padding: 9px;
border-radius: 24px;
/* Layered halo: gold inner ring + soft white outer glow + gold bloom + shadow */
box-shadow:
0 0 0 3px rgba(184, 155, 94, 0.55),
0 0 0 8px rgba(255, 255, 255, 0.10),
0 0 28px 6px rgba(184, 155, 94, 0.18),
0 14px 32px -10px rgba(0, 0, 0, 0.45);
/* Overhang: makes layout height = nav height, but actual image overflows
beyond the bottom of the bar for the "badge sitting on the bar" effect */
margin-top: 0;
margin-bottom: -50px;
position: relative;
z-index: 2;
transition: transform var(--qc-trans), box-shadow var(--qc-trans);
}
.qc-nav-logo:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 3px rgba(184, 155, 94, 0.75),
0 0 0 9px rgba(255, 255, 255, 0.14),
0 0 36px 8px rgba(184, 155, 94, 0.24),
0 18px 40px -10px rgba(0, 0, 0, 0.50);
}
.qc-nav-logo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
@media (max-width: 600px) {
.qc-nav-logo {
width: 100px; height: 100px;
padding: 7px;
border-radius: 20px;
margin-bottom: -32px;
}
}
.qc-nav-links {
display: flex;
gap: 4px;
/* No margin-left auto — items sit right after the logo (left in LTR, right in RTL) */
flex-wrap: wrap;
align-items: center;
}
/* Theme + language toggles get pushed to the far edge (right in LTR, left in RTL) */
.qc-nav-toggles {
display: flex;
gap: 6px;
margin-left: auto;
align-items: center;
}
html[dir="rtl"] .qc-nav-toggles { margin-left: 0; margin-right: auto; }
.qc-nav-links a {
padding: 7px 13px;
border-radius: var(--qc-radius-sm);
color: rgba(241, 244, 237, 0.85);
font-weight: 500;
font-size: 1.02rem;
letter-spacing: -0.01em;
transition: all var(--qc-trans);
position: relative;
/* Light but clearly visible border */
border: 1px solid rgba(255, 255, 255, 0.28);
}
.qc-nav-links a:hover {
color: white;
background: rgba(255,255,255,0.10);
border-color: rgba(255, 255, 255, 0.45);
}
.qc-nav-links a.active {
color: white;
/* Lighter background inside the border for the selected page */
background: rgba(255, 255, 255, 0.16);
border-color: rgba(217, 200, 150, 0.45);
}
.qc-nav-links a.active::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: -2px;
/* Bold gold underline for the active page */
height: 3px;
background: var(--qc-gold-light);
border-radius: 2px;
}
/* ---- Dropdown ("More" group) ---- */
.qc-nav-dropdown { position: relative; }
.qc-nav-trigger {
padding: 7px 13px;
border-radius: var(--qc-radius-sm);
color: rgba(241, 244, 237, 0.85);
font-weight: 500;
font-size: 1.02rem;
font-family: inherit;
letter-spacing: -0.01em;
background: transparent;
/* Match the visible border on the regular nav links */
border: 1px solid rgba(255, 255, 255, 0.28);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all var(--qc-trans);
position: relative;
}
.qc-nav-trigger:hover,
.qc-nav-dropdown.open .qc-nav-trigger,
.qc-nav-trigger.active {
color: white;
background: rgba(255,255,255,0.10);
}
.qc-nav-trigger.active::after {
content: "";
position: absolute;
left: 14px; right: 14px; bottom: 2px;
height: 2px;
background: var(--qc-gold-light);
border-radius: 2px;
}
.qc-nav-trigger .chev {
display: inline-block;
font-size: 0.65em;
transition: transform var(--qc-trans);
margin-top: 2px;
}
.qc-nav-dropdown.open .qc-nav-trigger .chev { transform: rotate(180deg); }
/* Dropdown menu now uses the same dark green as the top nav bar.
Section headers have been removed from the menu (just a flat link list). */
.qc-nav-menu {
position: absolute;
top: calc(100% + 14px);
right: 0;
background: var(--qc-primary-darker);
border: 1px solid rgba(217, 200, 150, 0.30);
border-radius: var(--qc-radius);
box-shadow: 0 18px 40px rgba(0,0,0,0.40), 0 4px 8px rgba(0,0,0,0.20);
padding: 8px;
min-width: 220px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
z-index: 110;
}
.qc-nav-menu::before {
/* little triangle pointer up to the trigger */
content: "";
position: absolute;
top: -7px;
right: 28px;
width: 12px; height: 12px;
background: var(--qc-primary-darker);
border-left: 1px solid rgba(217, 200, 150, 0.30);
border-top: 1px solid rgba(217, 200, 150, 0.30);
transform: rotate(45deg);
}
.qc-nav-dropdown.open .qc-nav-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.qc-nav-menu a {
display: block;
padding: 9px 14px;
border-radius: var(--qc-radius-sm);
color: rgba(241, 244, 237, 0.92);
font-size: 0.94rem;
font-weight: 500;
text-decoration: none;
letter-spacing: -0.01em;
}
.qc-nav-menu a:hover,
.qc-nav-menu a.active {
background: rgba(255, 255, 255, 0.10);
color: var(--qc-gold-light, #FFF8E1);
}
/* Section dividers — no longer rendered, but the rule stays in case any are
still emitted by older cached HTML. */
.qc-nav-menu-section { display: none; }
/* ============================================================
MEGA DROPDOWN — 3-column "Study / Practice / Tools" layout
for the "More" menu. Light surface, sectioned, icons + subs.
============================================================ */
.qc-nav-menu-mega {
/* Override the dark legacy dropdown look for the mega variant */
background: #FFFFFF;
border: 1px solid rgba(184, 155, 94, 0.28);
box-shadow:
0 1px 0 rgba(27,94,32,0.04),
0 18px 44px -22px rgba(15,61,20,0.26),
0 6px 16px -14px rgba(15,61,20,0.18);
padding: 12px 12px 10px;
min-width: 680px; /* fits 3 columns comfortably, compact */
max-width: calc(100vw - 56px);
right: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 10px;
position: absolute;
border-radius: var(--qc-radius);
overflow: hidden;
}
.qc-nav-menu-mega::before {
/* Override caret colour to match white surface */
background: #FFFFFF;
border-left: 1px solid rgba(184, 155, 94, 0.28);
border-top: 1px solid rgba(184, 155, 94, 0.28);
top: -7px;
right: 28px;
}
.qc-nav-menu-mega::after {
/* Thin gold accent strip at the top of the panel */
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--qc-gold), transparent);
pointer-events: none;
z-index: 1;
}
.qc-mega-col {
display: flex;
flex-direction: column;
min-width: 0;
}
.qc-mega-section {
margin: 2px 8px 4px;
font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--qc-gold-dark);
}
.qc-mega-list {
display: flex;
flex-direction: column;
gap: 1px;
}
/* Each row is a horizontal flex: ICON on the left (circular badge),
then TEXT BLOCK (title + subtitle stacked) on the right.
align-items: center keeps the icon vertically centered against
the two-line text block.
NOTE: selectors are scoped under `.qc-nav-menu-mega` so they beat
the legacy `.qc-nav-menu a { display: block }` rule on specificity. */
.qc-nav-menu-mega .qc-mega-link {
display: flex !important;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 6px 8px;
border-radius: 10px;
text-decoration: none;
color: var(--qc-text);
font-weight: 500;
transition: background .14s ease, color .14s ease;
letter-spacing: -0.01em;
font-size: inherit;
}
.qc-nav-menu-mega .qc-mega-link .qc-mega-ico {
width: 32px;
height: 32px;
border-radius: 50%; /* perfect circle, like the reference */
background: var(--qc-accent-soft, rgba(27, 94, 32, 0.10));
color: var(--qc-primary);
display: grid;
place-items: center;
flex: none;
align-self: center; /* never let it float above the text */
transition: background .14s ease, color .14s ease, transform .14s ease;
}
.qc-nav-menu-mega .qc-mega-link .qc-mega-ico svg {
width: 15px;
height: 15px;
display: block;
}
.qc-nav-menu-mega .qc-mega-link .qc-mega-meta {
display: flex;
flex-direction: column;
line-height: 1.2;
min-width: 0;
flex: 1 1 auto;
}
.qc-nav-menu-mega .qc-mega-link .qc-mega-title {
font-weight: 600;
font-size: 0.84rem;
color: var(--qc-text, #1A2520);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.qc-nav-menu-mega .qc-mega-link .qc-mega-sub {
display: block;
margin-top: 2px;
font-size: 0.7rem;
color: var(--qc-text-muted);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.qc-nav-menu-mega .qc-mega-link:hover,
.qc-nav-menu-mega .qc-mega-link:focus-visible {
background: rgba(184, 155, 94, 0.12);
color: var(--qc-primary-darker);
outline: none;
}
.qc-nav-menu-mega .qc-mega-link:hover .qc-mega-ico,
.qc-nav-menu-mega .qc-mega-link:focus-visible .qc-mega-ico {
background: var(--qc-primary);
color: var(--qc-gold-light, #D9C896);
transform: scale(1.04);
}
.qc-nav-menu-mega .qc-mega-link.active {
background: rgba(184, 155, 94, 0.10);
}
.qc-nav-menu-mega .qc-mega-link.active .qc-mega-title {
color: var(--qc-primary-darker);
}
.qc-nav-menu-mega .qc-mega-link.active .qc-mega-ico {
background: var(--qc-primary);
color: var(--qc-gold-light, #D9C896);
}
/* Dark theme adjustments for the mega panel */
html[data-theme="dark"] .qc-nav-menu-mega {
background: var(--qc-primary-darker);
border-color: rgba(217, 200, 150, 0.30);
}
html[data-theme="dark"] .qc-nav-menu-mega::before {
background: var(--qc-primary-darker);
border-left-color: rgba(217, 200, 150, 0.30);
border-top-color: rgba(217, 200, 150, 0.30);
}
html[data-theme="dark"] .qc-nav-menu-mega .qc-mega-section { color: var(--qc-gold-light); }
html[data-theme="dark"] .qc-nav-menu-mega .qc-mega-link { color: rgba(241, 244, 237, 0.92); }
html[data-theme="dark"] .qc-nav-menu-mega .qc-mega-link .qc-mega-ico {
background: rgba(255, 255, 255, 0.06);
color: var(--qc-gold-light);
}
html[data-theme="dark"] .qc-nav-menu-mega .qc-mega-link .qc-mega-title { color: rgba(241, 244, 237, 0.95); }
html[data-theme="dark"] .qc-nav-menu-mega .qc-mega-link .qc-mega-sub { color: rgba(241, 244, 237, 0.55); }
html[data-theme="dark"] .qc-nav-menu-mega .qc-mega-link:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--qc-gold-light);
}
html[data-theme="dark"] .qc-nav-menu-mega .qc-mega-link:hover .qc-mega-ico {
background: var(--qc-gold);
color: var(--qc-primary-darker);
}
/* RTL flip: caret moves to opposite side, panel anchors to the left edge */
html[dir="rtl"] .qc-nav-menu-mega { right: auto; left: 0; }
html[dir="rtl"] .qc-nav-menu-mega::before { right: auto; left: 28px; }
/* Responsive — narrower viewports drop columns gracefully */
@media (max-width: 1080px) {
.qc-nav-menu-mega {
min-width: 440px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
/* Mobile flattens to a single column — handled by the existing
mobile nav rules below. The mega grid resets to 1 column so the
items stack naturally inside the mobile sheet. */
.qc-nav-menu-mega {
min-width: 0;
grid-template-columns: 1fr;
padding: 6px;
box-shadow: none;
border: 0;
background: transparent;
}
.qc-nav-menu-mega::before,
.qc-nav-menu-mega::after { display: none; }
.qc-nav-menu-mega .qc-mega-section {
color: var(--qc-gold-light);
margin: 12px 10px 6px;
}
.qc-nav-menu-mega .qc-mega-link {
color: rgba(241, 244, 237, 0.92);
}
.qc-nav-menu-mega .qc-mega-link .qc-mega-ico {
background: rgba(255, 255, 255, 0.06);
color: var(--qc-gold-light);
}
.qc-nav-menu-mega .qc-mega-link .qc-mega-title { color: rgba(241, 244, 237, 0.95); }
.qc-nav-menu-mega .qc-mega-link .qc-mega-sub { color: rgba(241, 244, 237, 0.55); }
.qc-nav-menu-mega .qc-mega-link:hover {
background: rgba(255, 255, 255, 0.08);
}
}
.qc-theme-toggle {
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
border-radius: var(--qc-radius-sm);
padding: 7px 11px;
font-size: 1rem;
color: white;
transition: all var(--qc-trans);
margin-left: 6px;
}
.qc-theme-toggle:hover { background: rgba(255,255,255,0.10); border-color: var(--qc-gold-light); }
.qc-lang-toggle {
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
border-radius: var(--qc-radius-sm);
padding: 7px 12px;
font-size: 0.88rem;
font-weight: 600;
font-family: var(--qc-font-body);
color: white;
transition: all var(--qc-trans);
margin-left: 6px;
letter-spacing: -0.01em;
}
.qc-lang-toggle:hover { background: var(--qc-gold); border-color: var(--qc-gold); color: white; }
[lang="ar"] .qc-lang-toggle { font-family: 'Amiri', var(--qc-font-body); font-size: 1rem; }
.qc-nav-burger {
display: none;
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
border-radius: var(--qc-radius-sm);
padding: 7px 12px;
font-size: 1.3rem;
color: white;
margin-left: auto;
}
@media (max-width: 980px) {
.qc-nav-burger { display: inline-block; }
.qc-nav-links {
display: none;
position: absolute;
top: var(--qc-nav-h);
left: 0;
right: 0;
background: var(--qc-primary-darker);
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(0,0,0,0.2);
flex-direction: column;
padding: 16px 24px 20px;
gap: 4px;
box-shadow: 0 12px 28px rgba(0,0,0,0.25);
align-items: stretch;
}
.qc-nav-links.open { display: flex; }
.qc-nav-links a { padding: 12px 16px; }
.qc-nav-links a.active::after { left: 16px; right: auto; width: 4px; top: 12px; bottom: 12px; height: auto; }
.qc-theme-toggle { margin: 8px 0 0; }
/* In the burger menu, flatten the "More" dropdown so its items appear inline */
.qc-nav-dropdown { display: contents; }
.qc-nav-trigger { display: none; }
.qc-nav-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
min-width: 0;
}
.qc-nav-menu::before { display: none; }
.qc-nav-menu a {
color: rgba(241, 244, 237, 0.82);
padding: 12px 16px;
}
.qc-nav-menu a:hover,
.qc-nav-menu a.active {
color: white;
background: rgba(255,255,255,0.10);
}
.qc-nav-menu-section {
color: var(--qc-gold-light);
padding: 14px 16px 4px;
border-top: 1px solid rgba(255,255,255,0.08);
margin-top: 4px;
}
.qc-nav-menu-section:first-child { border-top: none; margin-top: 0; padding-top: 4px; }
}
/* ==========================================================================
Hero carousel — 3 slides, auto-advancing, with dots + arrows.
========================================================================== */
.qc-hero-carousel {
position: relative;
overflow: hidden;
}
.qc-hero-track {
display: flex;
width: 100%;
transition: transform 600ms cubic-bezier(0.5, 0, 0.2, 1);
will-change: transform;
}
.qc-hero-slide {
flex: 0 0 100%;
min-width: 0;
}
.qc-hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px; height: 42px;
border-radius: 50%;
border: 1px solid var(--qc-border-strong);
background: rgba(255,255,255,0.85);
color: var(--qc-primary);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
z-index: 5;
backdrop-filter: blur(6px);
transition: all var(--qc-trans);
}
.qc-hero-arrow:hover {
background: var(--qc-primary);
color: white;
border-color: var(--qc-primary);
}
.qc-hero-arrow.prev { left: 14px; }
.qc-hero-arrow.next { right: 14px; }
/* RTL: swap arrow positions so prev sits on the visual right and next on
the visual left, and flip the chevron glyph horizontally so it points
the correct way for an Arabic-reading audience. */
html[dir="rtl"] .qc-hero-arrow.prev { left: auto; right: 14px; }
html[dir="rtl"] .qc-hero-arrow.next { right: auto; left: 14px; }
html[dir="rtl"] .qc-hero-arrow { transform: translateY(-50%) scaleX(-1); }
.qc-hero-dots {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 5;
}
.qc-hero-dot {
width: 9px; height: 9px;
border-radius: 50%;
border: 1px solid var(--qc-primary);
background: rgba(255,255,255,0.5);
cursor: pointer;
padding: 0;
transition: all var(--qc-trans);
}
.qc-hero-dot.active {
background: var(--qc-primary);
transform: scale(1.25);
}
.qc-hero-dot:hover { background: var(--qc-primary-light); }
@media (max-width: 600px) {
.qc-hero-arrow { width: 34px; height: 34px; font-size: 1.2rem; }
.qc-hero-arrow.prev { left: 6px; }
.qc-hero-arrow.next { right: 6px; }
html[dir="rtl"] .qc-hero-arrow.prev { left: auto; right: 6px; }
html[dir="rtl"] .qc-hero-arrow.next { right: auto; left: 6px; }
}
/* ==========================================================================
Hero (compact — content above the fold)
========================================================================== */
.qc-hero {
position: relative;
background:
radial-gradient(ellipse 1200px 500px at 50% -20%, rgba(184, 155, 94, 0.10) 0%, transparent 60%),
radial-gradient(ellipse 800px 300px at 50% 100%, rgba(14, 79, 44, 0.04) 0%, transparent 60%),
linear-gradient(180deg, var(--qc-bg) 0%, var(--qc-accent-softer) 100%);
padding: 40px 24px 44px;
text-align: center;
overflow: hidden;
}
[data-theme="dark"] .qc-hero {
background:
radial-gradient(ellipse 1200px 500px at 50% -20%, rgba(184, 155, 94, 0.08) 0%, transparent 60%),
radial-gradient(ellipse 800px 300px at 50% 100%, rgba(91, 159, 110, 0.06) 0%, transparent 60%),
linear-gradient(180deg, var(--qc-bg) 0%, var(--qc-bg-elev) 100%);
}
.qc-hero::before {
/* Subtle geometric pattern */
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, var(--qc-accent) 1px, transparent 1px),
radial-gradient(circle at 80% 70%, var(--qc-gold) 1px, transparent 1px);
background-size: 80px 80px, 110px 110px;
opacity: 0.05;
pointer-events: none;
}
.qc-hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.qc-hero-eyebrow {
display: inline-block;
font-family: var(--qc-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--qc-gold-dark);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 14px;
padding: 5px 12px;
border: 1px solid var(--qc-gold);
border-radius: 30px;
background: var(--qc-gold-soft);
}
.qc-hero h1 {
color: var(--qc-primary-darker);
margin: 0 0 12px;
font-weight: 700;
letter-spacing: -0.02em;
font-size: clamp(1.9rem, 3.6vw, 2.8rem);
}
[data-theme="dark"] .qc-hero h1 { color: var(--qc-text); }
.qc-hero h1 .accent { color: var(--qc-gold-dark); font-style: italic; font-weight: 600; }
[data-theme="dark"] .qc-hero h1 .accent { color: var(--qc-gold); }
.qc-hero p.lead {
font-size: 1.02rem;
color: var(--qc-text-soft);
max-width: 540px;
margin: 0 auto 22px;
line-height: 1.55;
}
.qc-hero-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* ==========================================================================
Buttons
========================================================================== */
.qc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border-radius: var(--qc-radius-sm);
border: 1px solid transparent;
font-weight: 600;
font-size: 0.95rem;
font-family: var(--qc-font-body);
letter-spacing: -0.01em;
cursor: pointer;
text-decoration: none;
transition: all var(--qc-trans);
line-height: 1.2;
white-space: nowrap;
}
.qc-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--qc-accent-soft), 0 0 0 5px var(--qc-primary);
}
.qc-btn-primary {
background: var(--qc-primary);
color: white;
box-shadow: var(--qc-shadow-sm);
}
.qc-btn-primary:hover {
background: var(--qc-primary-dark);
color: white;
box-shadow: var(--qc-shadow-md);
transform: translateY(-1px);
}
.qc-btn-ghost {
background: transparent;
color: var(--qc-text);
border-color: var(--qc-border-strong);
}
.qc-btn-ghost:hover {
background: var(--qc-accent-soft);
color: var(--qc-primary);
border-color: var(--qc-primary);
}
.qc-btn-outline {
background: transparent;
color: var(--qc-primary);
border: 1.5px solid var(--qc-primary);
}
.qc-btn-outline:hover {
background: var(--qc-primary);
color: white;
}
.qc-btn-gold {
background: linear-gradient(135deg, var(--qc-gold) 0%, var(--qc-gold-dark) 100%);
color: white;
box-shadow: 0 4px 12px -2px rgba(184, 155, 94, 0.35);
}
.qc-btn-gold:hover {
background: linear-gradient(135deg, var(--qc-gold-dark) 0%, var(--qc-gold-dark) 100%);
color: white;
transform: translateY(-1px);
box-shadow: 0 8px 20px -4px rgba(184, 155, 94, 0.4);
}
.qc-btn-sm { padding: 8px 16px; font-size: 0.875rem; }
.qc-btn-lg { padding: 14px 28px; font-size: 1.05rem; }
/* Matched hero CTAs: bold green outline, identical layout for both buttons */
.qc-btn-hero-outline {
background: transparent;
color: var(--qc-primary);
border: 3px solid var(--qc-primary);
font-weight: 700;
}
.qc-btn-hero-outline:hover {
background: var(--qc-primary);
color: white;
transform: translateY(-1px);
box-shadow: var(--qc-shadow-md);
}
/* ==========================================================================
Cards
========================================================================== */
.qc-card {
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius);
padding: 28px;
transition: all var(--qc-trans);
}
.qc-card:hover {
border-color: var(--qc-border-strong);
box-shadow: var(--qc-shadow-md);
}
.qc-grid {
display: grid;
gap: 24px;
}
.qc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qc-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1200px) { .qc-grid-6 { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 980px) { .qc-grid-3, .qc-grid-4 { grid-template-columns: repeat(2, 1fr); } .qc-grid-6 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) { .qc-grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .qc-grid-2, .qc-grid-3, .qc-grid-4 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .qc-grid-6 { grid-template-columns: repeat(2, 1fr); } }
/* "Explore QuranCentral" tile — icon on the LEFT, content middle, green CTA
button on the right. Gold border per request, ~70% of previous height. */
.qc-feature-card {
background: var(--qc-bg-elev);
border: 2px solid var(--qc-gold);
border-radius: var(--qc-radius);
padding: 10px 12px;
text-align: left;
transition: all 220ms var(--qc-ease);
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 44px 1fr auto;
grid-template-rows: auto auto;
align-items: center;
column-gap: 14px;
row-gap: 2px;
text-decoration: none;
}
.qc-feature-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--qc-primary), var(--qc-gold));
opacity: 0;
transition: opacity var(--qc-trans);
}
.qc-feature-card:hover {
border-color: var(--qc-gold-dark, var(--qc-gold));
transform: translateY(-2px);
box-shadow: var(--qc-shadow-md);
}
.qc-feature-card:hover::before { opacity: 1; }
.qc-feature-card .icon-wrap {
grid-column: 1;
grid-row: 1 / 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--qc-radius-sm);
background: var(--qc-accent-soft);
font-size: 1.35rem;
}
.qc-feature-card h3 {
grid-column: 2;
grid-row: 1;
font-size: 1.02rem;
margin: 0;
color: var(--qc-text);
line-height: 1.2;
}
.qc-feature-card p {
grid-column: 2;
grid-row: 2;
color: var(--qc-text-soft);
margin: 0;
font-size: 0.8rem;
line-height: 1.3;
/* Clamp to 1 line so each tile stays the same compact height */
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* CTA on the right: turned into a small green button, matching the rest of the page */
.qc-feature-card .arrow {
grid-column: 3;
grid-row: 1 / 3;
align-self: center;
display: inline-flex;
align-items: center;
background: var(--qc-primary);
color: white;
padding: 6px 12px;
border-radius: var(--qc-radius-sm);
font-weight: 600;
font-size: 0.78rem;
white-space: nowrap;
transition: background var(--qc-trans), transform var(--qc-trans);
}
.qc-feature-card:hover .arrow {
background: var(--qc-primary-dark);
transform: translateX(2px);
}
@media (max-width: 480px) {
.qc-feature-card {
grid-template-columns: 36px 1fr;
grid-template-rows: auto auto auto;
padding: 8px 10px;
}
.qc-feature-card .icon-wrap { width: 36px; height: 36px; font-size: 1.1rem; grid-row: 1 / 3; }
.qc-feature-card .arrow {
grid-column: 2;
grid-row: 3;
justify-self: end;
margin-top: 4px;
}
}
/* Primary tiles (Listen / Read / Prayer Times) — half the previous size */
.qc-feature-primary { margin-bottom: 14px; }
.qc-feature-big {
grid-template-columns: 1fr !important;
grid-template-rows: auto auto auto auto !important;
padding: 12px 14px 12px !important;
row-gap: 4px !important;
text-align: left;
}
.qc-feature-big .icon-wrap {
width: 36px !important; height: 36px !important;
font-size: 1.15rem !important;
grid-column: 1 !important; grid-row: 1 !important;
margin-bottom: 2px;
}
.qc-feature-big h3 {
grid-column: 1 !important; grid-row: 2 !important;
font-size: 1rem !important;
line-height: 1.2 !important;
}
.qc-feature-big p {
grid-column: 1 !important; grid-row: 3 !important;
font-size: 0.78rem !important;
line-height: 1.35 !important;
-webkit-line-clamp: 2 !important;
}
.qc-feature-big .arrow {
grid-column: 1 !important; grid-row: 4 !important;
justify-self: start !important;
align-self: start !important;
margin-top: 4px;
padding: 5px 12px !important;
font-size: 0.75rem !important;
}
/* Compact secondary tiles — icon + title + small arrow on a single row.
Gold border explicitly re-affirmed (inherited from .qc-feature-card). */
.qc-feature-secondary { margin-top: 6px; }
.qc-feature-mini {
grid-template-columns: 36px 1fr auto !important;
grid-template-rows: auto !important;
padding: 8px 10px !important;
column-gap: 10px !important;
border: 2px solid var(--qc-gold) !important;
}
.qc-feature-mini .icon-wrap {
width: 36px !important; height: 36px !important;
font-size: 1.05rem !important;
grid-row: 1 !important;
}
.qc-feature-mini h3 {
grid-row: 1 !important;
font-size: 0.88rem !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.qc-feature-mini p { display: none; } /* no description on mini tiles */
.qc-feature-mini .arrow {
grid-row: 1 !important;
padding: 4px 8px !important;
font-size: 0.7rem !important;
}
@media (max-width: 700px) {
.qc-grid-4.qc-feature-secondary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
.qc-grid-4.qc-feature-secondary { grid-template-columns: 1fr; }
}
/* ==========================================================================
Forms / inputs
========================================================================== */
.qc-input, .qc-select, textarea.qc-input {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--qc-border-strong);
border-radius: var(--qc-radius-sm);
background: var(--qc-bg-elev);
color: var(--qc-text);
font-size: 0.95rem;
font-family: inherit;
transition: all var(--qc-trans);
}
.qc-input:focus, .qc-select:focus, textarea.qc-input:focus {
outline: none;
border-color: var(--qc-primary);
box-shadow: 0 0 0 3px var(--qc-accent-soft);
}
.qc-input::placeholder { color: var(--qc-text-muted); }
.qc-label {
display: block;
font-weight: 600;
margin-bottom: 8px;
font-size: 0.85rem;
color: var(--qc-text-soft);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.qc-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
/* ==========================================================================
Arabic / Quran text
========================================================================== */
.qc-arabic {
font-family: var(--qc-font-arabic);
direction: rtl;
text-align: right;
font-size: 2rem;
line-height: 2.2;
color: var(--qc-text);
font-weight: 400;
}
.qc-translation {
font-style: italic;
color: var(--qc-text-soft);
font-size: 1.05rem;
line-height: 1.75;
margin-top: 10px;
font-family: var(--qc-font-display);
font-weight: 500;
}
.qc-verse-num {
display: inline-block;
min-width: 32px;
height: 32px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, var(--qc-gold-light), var(--qc-gold)) padding-box,
linear-gradient(135deg, var(--qc-gold), var(--qc-gold-dark)) border-box;
border: 1px solid transparent;
color: white;
font-family: var(--qc-font-body);
font-size: 0.85rem;
font-weight: 700;
text-align: center;
line-height: 32px;
margin: 0 8px;
vertical-align: middle;
box-shadow: 0 2px 4px rgba(184, 155, 94, 0.3);
}
/* ==========================================================================
Footer
========================================================================== */
.qc-footer {
background: var(--qc-primary-darker);
color: rgba(241, 244, 237, 0.85);
/* Shrunk to 80% of previous — was 44/18/20 */
padding: 35px 18px 16px;
margin-top: 45px;
font-size: 0.9rem;
position: relative;
overflow: hidden;
}
.qc-footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--qc-gold) 0%, var(--qc-primary-light) 50%, var(--qc-gold) 100%);
}
.qc-footer a { color: rgba(241, 244, 237, 0.78); transition: color var(--qc-trans); }
.qc-footer a:hover { color: var(--qc-gold-light); }
.qc-footer-grid {
max-width: var(--qc-container);
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 34px; /* was 48 */
}
@media (max-width: 800px) { .qc-footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; } }
@media (max-width: 500px) { .qc-footer-grid { grid-template-columns: 1fr; } }
.qc-footer h4 {
color: white;
font-size: 0.78rem; /* was 0.85 */
margin: 0 0 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
font-family: var(--qc-font-body);
font-weight: 600;
}
.qc-footer ul { list-style: none; padding: 0; margin: 0; }
.qc-footer li { margin-bottom: 7px; font-size: 0.86rem; } /* was 0.93 */
/* Prominent Contact CTA row — sits between the link grid and the copyright bar */
.qc-footer-contact-row {
max-width: var(--qc-container);
margin: 24px auto 0;
padding: 16px 24px 0;
text-align: center;
border-top: 1px solid rgba(217, 200, 150, 0.18);
}
.qc-footer-contact-link {
display: inline-block;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--qc-gold-light) !important;
text-decoration: none;
padding: 6px 18px;
border: 1px solid rgba(217, 200, 150, 0.40);
border-radius: 999px;
transition: background var(--qc-trans), color var(--qc-trans), border-color var(--qc-trans);
}
.qc-footer-contact-link::after { content: " →"; margin-left: 4px; }
html[dir="rtl"] .qc-footer-contact-link::after { content: " ←"; margin-left: 0; margin-right: 4px; }
.qc-footer-contact-link:hover {
background: var(--qc-gold);
color: var(--qc-primary-darker) !important;
border-color: var(--qc-gold);
}
/* Email line inside the copyright bar */
.qc-footer-email { margin-top: 4px; font-size: 0.86rem; }
.qc-footer-email a {
color: var(--qc-gold-light) !important;
text-decoration: none;
letter-spacing: 0.02em;
}
.qc-footer-email a:hover { text-decoration: underline; }
.qc-footer-bottom {
max-width: var(--qc-container);
margin: 22px auto 0; /* was 34 → 80% */
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
font-size: 0.78rem;
opacity: 0.7;
}
/* Footer brand cell: prominent gold-bordered logo on the left, tagline right. */
.qc-footer-brand {
display: flex;
align-items: center;
gap: 20px;
}
.qc-footer-logo {
display: block;
width: 160px; /* bigger again — fills most of the brand cell */
max-width: 160px;
height: auto;
flex-shrink: 0;
opacity: 1;
background: rgba(255,255,255,0.10);
border-radius: 16px;
padding: 10px;
border: 3px solid var(--qc-gold);
box-shadow: 0 0 0 1px rgba(217, 200, 150, 0.25), 0 8px 24px -10px rgba(0,0,0,0.45);
}
.qc-footer-brand-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.qc-footer-brand-name {
font-family: var(--qc-font-display);
font-size: 1.1rem;
font-weight: 700;
color: var(--qc-gold-light, #FFF8E1);
letter-spacing: 0.01em;
line-height: 1.25;
}
.qc-footer-tagline {
margin: 0;
opacity: 0.85;
font-size: 0.86rem;
line-height: 1.5;
}
/* On narrow screens, stack the logo above the tagline so it stays readable */
@media (max-width: 500px) {
.qc-footer-brand { flex-direction: column; align-items: flex-start; gap: 12px; }
.qc-footer-logo { width: 120px; max-width: 120px; }
}
/* ==========================================================================
States: loaders, errors, empty
========================================================================== */
.qc-spinner {
display: inline-block;
width: 36px;
height: 36px;
border: 3px solid var(--qc-accent-soft);
border-top-color: var(--qc-primary);
border-radius: 50%;
animation: qcspin 0.9s linear infinite;
}
@keyframes qcspin { to { transform: rotate(360deg); } }
.qc-center { display: flex; justify-content: center; align-items: center; padding: 40px; }
.qc-empty { text-align: center; color: var(--qc-text-muted); padding: 32px; font-style: italic; }
.qc-error {
background: #FDF1EA;
border: 1px solid #E8A082;
color: #6E2A12;
padding: 14px 18px;
border-radius: var(--qc-radius-sm);
font-size: 0.95rem;
}
[data-theme="dark"] .qc-error { background: #3F2117; border-color: #8B4A2F; color: #FFD7C2; }
/* ==========================================================================
Quran page layout
========================================================================== */
.qc-quran-wrap {
display: grid;
/* Slimmer sidebar so the reading area gets more horizontal real estate.
Zero gap so the sidebar visually attaches to the reading panel — they
read as one unit. */
grid-template-columns: 240px 1fr;
gap: 0;
max-width: var(--qc-container);
margin: 0 auto;
padding: 32px 24px;
}
/* When attached, the sidebar's right border merges with the content's left
border. Round only the OUTER corners. */
.qc-quran-wrap .qc-surah-list { border-radius: var(--qc-radius) 0 0 var(--qc-radius); border-right: none; }
.qc-quran-wrap .qc-surah-content { border-radius: 0 var(--qc-radius) var(--qc-radius) 0; border: 1px solid var(--qc-border); }
html[dir="rtl"] .qc-quran-wrap .qc-surah-list { border-radius: 0 var(--qc-radius) var(--qc-radius) 0; border-right: 1px solid var(--qc-border); border-left: none; }
html[dir="rtl"] .qc-quran-wrap .qc-surah-content { border-radius: var(--qc-radius) 0 0 var(--qc-radius); }
@media (max-width: 980px) { .qc-quran-wrap { grid-template-columns: 1fr; } }
.qc-surah-list {
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius);
height: calc(100vh - var(--qc-nav-h) - 64px);
position: sticky;
top: calc(var(--qc-nav-h) + 24px);
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--qc-shadow-xs);
}
@media (max-width: 980px) { .qc-surah-list { height: auto; position: static; max-height: 60vh; } }
.qc-surah-search {
padding: 14px;
border-bottom: 1px solid var(--qc-border);
background: var(--qc-bg-alt);
}
.qc-surah-items { overflow-y: auto; flex: 1; }
/* Sidebar rows — compact (~40% shorter than before) so users can scan more surahs at once */
.qc-surah-item {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 12px; /* was 12px 16px → ~40% shorter row */
border-bottom: 1px solid var(--qc-border);
cursor: pointer;
transition: all var(--qc-trans);
position: relative;
}
.qc-surah-item:hover { background: var(--qc-accent-softer); }
.qc-surah-item.active {
background: var(--qc-accent-soft);
}
.qc-surah-item.active::before {
content: "";
position: absolute;
left: 0; top: 4px; bottom: 4px;
width: 3px;
background: var(--qc-gold);
border-radius: 0 3px 3px 0;
}
.qc-surah-num {
flex-shrink: 0;
width: 26px; /* was 36 */
height: 26px;
border-radius: 6px;
background: linear-gradient(135deg, var(--qc-primary), var(--qc-primary-light));
color: white;
font-size: 0.74rem; /* was 0.85 */
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--qc-shadow-xs);
}
.qc-surah-item.active .qc-surah-num {
background: linear-gradient(135deg, var(--qc-gold), var(--qc-gold-dark));
}
.qc-surah-meta { flex: 1; min-width: 0; }
.qc-surah-title {
font-weight: 600;
font-size: 0.86rem; /* tighter */
color: var(--qc-text);
letter-spacing: -0.01em;
line-height: 1.15;
}
.qc-surah-sub { font-size: 0.72rem; color: var(--qc-text-muted); margin-top: 1px; line-height: 1.1; }
.qc-surah-arabic {
font-family: var(--qc-font-arabic);
font-size: 1.35rem;
font-weight: 700; /* bolder Arabic name per user request */
color: var(--qc-primary);
flex-shrink: 0;
line-height: 1;
}
.qc-surah-content {
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius);
padding: 36px;
box-shadow: var(--qc-shadow-xs);
}
@media (max-width: 600px) { .qc-surah-content { padding: 24px 18px; } }
.qc-surah-header {
text-align: center;
padding-bottom: 28px;
border-bottom: 1px solid var(--qc-border);
margin-bottom: 32px;
position: relative;
}
.qc-surah-header::after {
content: "✦";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--qc-bg-elev);
color: var(--qc-gold);
padding: 0 12px;
font-size: 0.9rem;
}
.qc-surah-header .arabic-name {
font-family: var(--qc-font-arabic);
font-size: 3rem;
color: var(--qc-primary);
margin-bottom: 12px;
line-height: 1.3;
}
.qc-surah-header .en-name {
font-family: var(--qc-font-display);
font-size: 1.7rem;
font-weight: 700;
color: var(--qc-text);
letter-spacing: -0.02em;
}
.qc-surah-header .meta {
color: var(--qc-text-muted);
font-size: 0.95rem;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.qc-verse {
padding: 22px 0;
border-bottom: 1px solid var(--qc-border);
transition: background var(--qc-trans);
}
.qc-verse:last-child { border-bottom: none; }
.qc-verse:hover { background: var(--qc-accent-softer); }
.qc-verse-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.qc-verse-actions button {
background: transparent;
border: 1px solid var(--qc-border);
color: var(--qc-text-soft);
padding: 6px 12px;
border-radius: 6px;
font-size: 0.85rem;
font-family: inherit;
font-weight: 500;
cursor: pointer;
transition: all var(--qc-trans);
}
.qc-verse-actions button:hover {
background: var(--qc-accent-soft);
color: var(--qc-primary);
border-color: var(--qc-primary);
}
.qc-verse.bookmarked {
background: linear-gradient(90deg, var(--qc-gold-soft) 0%, transparent 80%);
border-left: 3px solid var(--qc-gold);
padding-left: 16px;
margin-left: -16px;
padding-right: 16px;
margin-right: -16px;
}
/* Karaoke-style inline Quran reader (Play-from-start + click-any-verse to play) */
.qc-quran-playbar {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
padding: 12px 14px;
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius-sm);
margin-bottom: 18px;
position: sticky;
top: var(--qc-nav-h);
z-index: 5;
}
.qc-karaoke {
direction: rtl;
text-align: right;
line-height: 2.4;
margin: 8px 0 28px;
padding: 14px 16px;
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius);
}
.qc-v-inline {
display: inline;
cursor: pointer;
padding: 2px 4px;
border-radius: 8px;
transition: background var(--qc-trans);
}
.qc-v-inline:hover { background: var(--qc-accent-soft); }
.qc-v-inline.playing {
background: var(--qc-gold-soft);
outline: 2px solid var(--qc-gold);
outline-offset: 1px;
}
/* Translation list (lower section) shows one row per verse with actions */
.qc-translation-list { margin-top: 8px; }
.qc-translation-list .qc-tr-num {
display: inline-block;
background: var(--qc-primary);
color: white;
font-family: var(--qc-font-body);
font-size: 0.72rem;
padding: 2px 8px;
border-radius: 10px;
margin-right: 8px;
vertical-align: middle;
}
.qc-translation-list .qc-translation { line-height: 1.7; }
.qc-reading-controls {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 24px;
padding: 16px 18px;
background: var(--qc-bg-alt);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius);
}
.qc-reading-controls label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--qc-text-soft);
font-weight: 500;
}
.qc-reading-controls .qc-select { padding: 6px 28px 6px 12px; font-size: 0.9rem; width: auto; }
.qc-reading-controls input[type="range"] { width: 110px; }
/* Compact variant — half the previous vertical space */
.qc-reading-controls-compact {
gap: 10px;
padding: 6px 12px;
margin-bottom: 12px;
}
.qc-reading-controls-compact label { font-size: 0.82rem; gap: 6px; }
.qc-reading-controls-compact .qc-select { padding: 4px 22px 4px 10px; font-size: 0.85rem; }
.qc-reading-controls-compact .qc-btn-sm { padding: 5px 10px; font-size: 0.8rem; }
/* Inline control bar above the Arabic text:
Left half = [Play from start] [Pause]
Right half = Font size slider
Whole group is centered. */
.qc-font-strip {
display: flex;
align-items: center;
gap: 20px;
justify-content: center; /* centred per request */
padding: 6px 0;
margin-bottom: 8px;
font-size: 0.82rem;
color: var(--qc-text-soft);
flex-wrap: wrap;
}
.qc-font-strip input[type="range"] {
width: 140px;
accent-color: var(--qc-primary); /* site-theme dark green */
}
.qc-quran-ctrl-left { display: flex; align-items: center; gap: 8px; }
.qc-quran-ctrl-right { display: flex; align-items: center; gap: 8px; }
/* Arabic / English tab bar on the Read Quran page — real folder-tab look.
Active tab sits flush against the content panel below (.qc-quran-tabpanel)
so the visual relationship is clear. */
/* Classic browser-tab pattern. The tabs CONTAINER carries the green
border-bottom — that line IS the panel's top edge. Each tab has top/left/
right borders + transparent bottom; the active tab's `border-bottom:
2px solid var(--qc-bg-elev)` paints over the green line behind it so the
active tab and the panel look like one folder. */
.qc-quran-folder {
margin: 4px 0 14px;
position: relative;
}
.qc-quran-tabs {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 4px;
padding: 0 8px;
flex-wrap: wrap;
border-bottom: 2px solid var(--qc-primary);
margin: 0;
}
.qc-quran-tabs .qc-tab {
/* Inactive tabs: clean white background to recede */
background: var(--qc-bg-elev);
border: 2px solid var(--qc-primary);
border-bottom: 2px solid transparent;
padding: 9px 24px;
border-radius: 10px 10px 0 0;
font: inherit;
font-weight: 600;
font-size: 0.92rem;
color: var(--qc-primary);
cursor: pointer;
/* Pulls the tab DOWN by 2px so it overlaps the container's border-bottom */
margin-bottom: -2px;
position: relative;
transition: background var(--qc-trans), color var(--qc-trans);
}
.qc-quran-tabs .qc-tab:hover { background: var(--qc-accent-softer); }
.qc-quran-tabs .qc-tab.active {
/* Active tab + content panel share the faint-green surface so they
visually merge into one folder shape. */
background: var(--qc-accent-soft);
border-bottom-color: var(--qc-accent-soft);
color: var(--qc-primary-darker);
font-weight: 800;
z-index: 2;
}
/* Continuous English flow on the Read Quran page — matches the Arabic
karaoke block: one paragraph of body text with inline verse number pills. */
.qc-en-flow {
font-family: 'Charter', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
font-size: 1.05rem;
line-height: 1.9;
color: var(--qc-primary-darker);
text-align: justify;
hyphens: auto;
word-spacing: 0.02em;
}
.qc-en-flow .qc-en-v {
/* Inline span per verse; anchor target for jumpToAyah */
}
.qc-en-flow .qc-en-num {
display: inline-block;
margin: 0 0.35em;
padding: 0 0.5em;
min-width: 1.6em;
text-align: center;
font-family: var(--qc-font-body);
font-size: 0.62em;
font-weight: 700;
line-height: 1.7em;
height: 1.7em;
color: var(--qc-primary);
background: rgba(217, 200, 150, 0.18);
border: 1.5px solid rgba(14, 79, 44, 0.55);
border-radius: 50%;
vertical-align: middle;
}
/* The Quran content panel sits directly below the tabs and shares the green
border, completing the folder look. */
.qc-quran-tabpanel {
background: var(--qc-accent-soft);
/* Top border supplied by .qc-quran-tabs' border-bottom — they share the line */
border: 2px solid var(--qc-primary);
border-top: none;
border-radius: 0 0 10px 10px;
padding: 16px 18px 24px;
margin: 0;
position: relative;
overflow: visible;
}
/* Defensive: make sure nothing inside the main reading column accidentally
creates its own scrollbar (which would show as a stray vertical bar).
- min-width:0 lets the grid item shrink correctly instead of forcing the
row wider than the viewport (horizontal scroll) and pushing a thin
vertical scrollbar inward near the right edge.
- overflow:visible everywhere keeps content flowing naturally. */
.qc-quran-wrap > * { min-width: 0; }
.qc-surah-content { overflow: visible; min-width: 0; }
#qc-surah-body { overflow: visible; }
.qc-quran-folder { overflow: visible; }
.qc-quran-tabpanel { overflow: visible; }
/* The thin scrollbar showing on the right of the Read Quran page is the
browser's own page scrollbar — visible because the page is taller than the
viewport. Hide it visually on this page only (keeps wheel/keyboard/touch
scrolling working) so it can't get in the way of the tabs+panel visuals. */
body:has(.qc-quran-wrap) { scrollbar-width: none; }
body:has(.qc-quran-wrap)::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* ==========================================================================
Mini player (sticky)
========================================================================== */
.qc-miniplayer {
position: fixed;
bottom: 20px;
left: 20px;
right: 20px;
max-width: 600px;
margin: 0 auto;
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border-strong);
border-radius: var(--qc-radius);
box-shadow: var(--qc-shadow-xl);
padding: 14px 18px;
display: none;
align-items: center;
gap: 14px;
z-index: 90;
}
.qc-miniplayer.show { display: flex; }
.qc-miniplayer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--qc-primary), var(--qc-gold), var(--qc-primary));
border-radius: var(--qc-radius) var(--qc-radius) 0 0;
}
.qc-miniplayer .info { flex: 1; min-width: 0; }
.qc-miniplayer .title { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--qc-text); }
.qc-miniplayer .sub { font-size: 0.8rem; color: var(--qc-text-muted); margin-top: 2px; }
.qc-miniplayer audio { width: 240px; height: 36px; }
.qc-miniplayer .close {
background: transparent;
border: none;
font-size: 1.4rem;
color: var(--qc-text-muted);
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: all var(--qc-trans);
}
.qc-miniplayer .close:hover { background: var(--qc-accent-soft); color: var(--qc-primary); }
/* ==========================================================================
Prayer times
========================================================================== */
.qc-prayer-card {
background:
radial-gradient(ellipse 600px 300px at 80% 20%, rgba(217, 200, 150, 0.18) 0%, transparent 50%),
linear-gradient(135deg, var(--qc-primary-darker) 0%, var(--qc-primary) 60%, var(--qc-primary-light) 100%);
color: white;
border-radius: var(--qc-radius-lg);
padding: 36px;
margin-bottom: 28px;
box-shadow: var(--qc-shadow-lg);
position: relative;
overflow: hidden;
}
.qc-prayer-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--qc-gold-light), transparent);
}
.qc-prayer-card h3 {
color: white;
margin: 0 0 6px;
font-size: 1.4rem;
font-family: var(--qc-font-display);
font-weight: 600;
}
.qc-prayer-card .location-line {
opacity: 0.9;
margin-bottom: 22px;
font-size: 0.95rem;
}
.qc-prayer-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
@media (max-width: 760px) { .qc-prayer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .qc-prayer-grid { grid-template-columns: repeat(2, 1fr); } }
.qc-prayer-slot {
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
border-radius: var(--qc-radius-sm);
padding: 16px 10px;
text-align: center;
transition: all var(--qc-trans);
}
.qc-prayer-slot.next {
background: rgba(255,255,255,0.22);
border: 1px solid var(--qc-gold-light);
box-shadow: 0 8px 24px -8px rgba(217, 200, 150, 0.4);
transform: scale(1.04);
}
.qc-prayer-slot .name {
font-size: 0.78rem;
opacity: 0.85;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 500;
}
.qc-prayer-slot .time {
font-size: 1.4rem;
font-weight: 700;
margin-top: 6px;
font-feature-settings: 'tnum';
font-family: var(--qc-font-display);
}
.qc-countdown {
text-align: center;
padding: 20px;
background: rgba(0,0,0,0.18);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--qc-radius-sm);
margin-top: 20px;
}
.qc-countdown .next-prayer {
font-size: 0.85rem;
opacity: 0.85;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 500;
}
.qc-countdown .time-left {
font-size: 2rem;
font-weight: 700;
margin-top: 6px;
font-variant-numeric: tabular-nums;
font-family: var(--qc-font-display);
color: var(--qc-gold-light);
}
.qc-quick-cities { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
/* Compact prayer-times search bar (was a big card) */
.qc-prayer-search {
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius-sm);
padding: 10px 12px;
margin-bottom: 18px;
}
.qc-prayer-search .row {
display: flex;
gap: 8px;
align-items: center;
justify-content: center; /* center all selection items per request */
flex-wrap: wrap;
}
.qc-prayer-search .qc-country-city-row { justify-content: center; }
.qc-prayer-search .qc-quick-cities-inline { justify-content: center; }
.qc-prayer-search .row input[type="search"] {
flex: 1;
min-width: 200px;
}
/* Half-width search variant. The Find/geo/gear buttons sit beside it; the
quick-cities row flows inline after them, taking the remaining width. */
.qc-prayer-search-tight .row { row-gap: 10px; }
/* A-Z letter chips: compact filter bar above the city list */
.qc-az-bar {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 12px;
justify-content: center;
}
.qc-az-btn {
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border-strong);
color: var(--qc-text-soft);
border-radius: 6px;
padding: 4px 9px;
font: inherit;
font-size: 0.82rem;
font-weight: 700;
min-width: 28px;
cursor: pointer;
transition: all var(--qc-trans);
}
.qc-az-btn:hover {
border-color: var(--qc-primary);
color: var(--qc-primary);
}
.qc-az-btn.active {
background: var(--qc-primary);
color: white;
border-color: var(--qc-primary);
}
/* City list — filtered inline by the active A-Z letter */
.qc-cities-list {
margin-top: 8px;
padding: 10px 14px;
background: var(--qc-bg-alt);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius-sm);
font-size: 0.88rem;
line-height: 1.9;
word-spacing: 0.02em;
text-align: center;
}
.qc-city-link {
color: var(--qc-primary);
text-decoration: none;
font-weight: 500;
white-space: nowrap;
transition: color var(--qc-trans);
}
.qc-city-link:hover {
color: var(--qc-primary-dark);
text-decoration: underline;
}
.qc-city-link.active {
color: var(--qc-gold-dark);
font-weight: 700;
text-decoration: underline;
}
.qc-city-sep {
color: var(--qc-text-muted);
margin: 0 2px;
}
/* Cascading country → city dropdowns above the search row — side by side,
each ~20% of the available width per request. Stays inline (no wrap)
until the viewport gets very narrow. */
.qc-country-city-row {
display: flex;
gap: 10px;
flex-wrap: nowrap;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--qc-border);
}
.qc-cc-label {
display: flex;
flex-direction: column;
gap: 4px;
flex: 0 0 20%;
min-width: 140px;
max-width: 220px;
font-size: 0.82rem;
color: var(--qc-text-soft);
font-weight: 500;
}
.qc-cc-label .qc-select {
width: 100%;
}
.qc-cc-label .qc-select:disabled {
background: var(--qc-bg-alt);
color: var(--qc-text-muted);
cursor: not-allowed;
}
@media (max-width: 600px) {
.qc-country-city-row { flex-wrap: wrap; }
.qc-cc-label { flex: 1 1 100%; max-width: none; }
}
.qc-prayer-city { flex: 0 1 50% !important; max-width: 50%; }
/* Half-width variant — search box only takes a quarter of the row now */
.qc-prayer-city-half { flex: 0 1 25% !important; max-width: 25%; }
.qc-quick-cities-inline {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 0;
flex: 1 1 100%; /* wraps to its own row when the search line gets full */
}
@media (min-width: 900px) {
/* On wide screens, let the chips share the line with the search */
.qc-quick-cities-inline { flex: 1 1 auto; margin-left: 4px; }
}
@media (max-width: 600px) {
.qc-prayer-city { flex: 1 1 100% !important; max-width: none; }
}
/* Slimmed prayer-card hero — 70% of the regular card's visual height */
.qc-prayer-card-slim {
padding: 24px 28px !important;
margin-bottom: 18px !important;
}
.qc-prayer-card-slim h3 { font-size: 1.15rem !important; margin: 0 0 4px !important; }
.qc-prayer-card-slim .location-line { margin-bottom: 0 !important; font-size: 0.88rem !important; }
.qc-prayer-card-slim .qc-prayer-grid { gap: 8px; margin-top: 16px; }
.qc-prayer-card-slim .qc-prayer-slot { padding: 10px 8px; }
.qc-prayer-card-slim .qc-countdown { padding: 10px; margin-top: 10px; }
/* Hero header inside the slim card: city + date on the left, plain text
countdown on the right — no border, no background, single line. */
.qc-day-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.qc-day-hero-text { flex: 1; min-width: 0; }
.qc-countdown-hero {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
/* Force the label + value on a single line, bold both halves */
display: flex;
align-items: baseline;
flex-wrap: nowrap;
gap: 6px;
white-space: nowrap;
flex-shrink: 0;
font-size: 1rem;
font-weight: 700;
color: #FFF8E1;
}
.qc-countdown-hero .next-prayer {
font-size: 1rem;
font-weight: 700;
opacity: 1;
margin: 0;
white-space: nowrap;
}
.qc-countdown-hero .time-left {
font-size: 1.1rem !important;
font-weight: 700;
color: var(--qc-gold-light, #FFF8E1);
font-feature-settings: 'tnum';
line-height: 1.1;
margin: 0;
white-space: nowrap;
}
/* Monthly schedule: centered title + nav row */
.qc-month-title {
text-align: center;
margin: 0 0 10px;
font-size: 1.15rem;
font-weight: 700;
}
.qc-month-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 14px;
}
.qc-month-label {
min-width: 160px;
text-align: center;
font-weight: 700;
font-size: 1.05rem;
color: var(--qc-primary);
}
/* Prayer-table header: bigger and bolder per request */
.qc-table-prayer th {
font-size: 0.92rem !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: var(--qc-text) !important;
padding: 14px 14px !important;
}
/* Date cell with the new "01-Apr-2026" + weekday-short layout */
.qc-date-cell {
white-space: nowrap;
font-weight: 600;
}
.qc-date-cell .qc-date-full { display: inline-block; }
.qc-date-cell .qc-date-wk {
display: inline-block;
margin-left: 8px;
color: var(--qc-text-muted);
font-weight: 500;
font-size: 0.85em;
}
.qc-prayer-search .opts {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--qc-border);
}
.qc-prayer-search .opts .opt {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.82rem;
color: var(--qc-text-soft);
flex: 1;
min-width: 180px;
}
.qc-chip {
padding: 8px 16px;
border-radius: 999px;
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border-strong);
color: var(--qc-text);
font-size: 0.88rem;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: all var(--qc-trans);
}
.qc-chip:hover { background: var(--qc-accent-soft); border-color: var(--qc-primary); color: var(--qc-primary); }
.qc-chip.active {
background: var(--qc-primary);
color: white;
border-color: var(--qc-primary);
box-shadow: var(--qc-shadow-sm);
}
/* ==========================================================================
Qibla compass
========================================================================== */
.qc-compass {
width: 280px;
height: 280px;
margin: 32px auto;
position: relative;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, var(--qc-bg-elev) 0%, var(--qc-accent-soft) 100%);
border: 3px solid var(--qc-primary);
box-shadow:
inset 0 4px 12px rgba(14, 79, 44, 0.08),
var(--qc-shadow-lg);
}
.qc-compass::before {
content: "";
position: absolute;
inset: 16px;
border-radius: 50%;
border: 1px dashed var(--qc-border-strong);
}
.qc-compass .cardinal {
position: absolute;
font-weight: 700;
font-family: var(--qc-font-display);
font-size: 1.05rem;
color: var(--qc-primary);
}
.qc-compass .n { top: 12px; left: 50%; transform: translateX(-50%); color: var(--qc-gold-dark); }
.qc-compass .s { bottom: 12px; left: 50%; transform: translateX(-50%); }
.qc-compass .e { right: 16px; top: 50%; transform: translateY(-50%); }
.qc-compass .w { left: 16px; top: 50%; transform: translateY(-50%); }
.qc-compass .needle {
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 120px;
background:
linear-gradient(to bottom,
var(--qc-gold) 0%,
var(--qc-gold-dark) 45%,
var(--qc-border-strong) 50%,
var(--qc-primary) 55%,
var(--qc-primary-darker) 100%);
transform-origin: 50% 100%;
transform: translate(-50%, -100%) rotate(0deg);
transition: transform 700ms var(--qc-ease);
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.qc-compass::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 18px; height: 18px;
transform: translate(-50%, -50%);
background: linear-gradient(135deg, var(--qc-gold-light), var(--qc-gold-dark));
border-radius: 50%;
box-shadow: 0 0 0 3px var(--qc-bg-elev), 0 4px 8px rgba(0,0,0,0.15);
z-index: 2;
}
.qc-compass .kaaba {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
font-size: 1.6rem;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
/* ==========================================================================
Asma ul Husna grid (6 per row)
========================================================================== */
.qc-name-card {
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius);
padding: 18px 14px 16px;
text-align: center;
transition: all var(--qc-trans);
cursor: pointer;
position: relative;
overflow: hidden;
}
.qc-name-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--qc-gold), transparent);
opacity: 0;
transition: opacity var(--qc-trans);
}
.qc-name-card:hover {
transform: translateY(-3px);
box-shadow: var(--qc-shadow-md);
border-color: var(--qc-gold);
}
.qc-name-card:hover::before { opacity: 1; }
.qc-name-card .num {
display: inline-block;
width: 26px; height: 26px; line-height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--qc-gold), var(--qc-gold-dark));
color: white;
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 8px;
box-shadow: var(--qc-shadow-xs);
}
.qc-name-card .ar {
font-family: var(--qc-font-arabic);
font-size: 2rem;
color: var(--qc-primary);
margin-bottom: 4px;
line-height: 1.2;
}
.qc-name-card .tr {
font-family: var(--qc-font-display);
font-weight: 700;
font-size: 0.95rem;
color: var(--qc-text);
letter-spacing: -0.01em;
}
.qc-name-card .meaning {
font-size: 0.8rem;
color: var(--qc-text-soft);
margin-top: 3px;
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* ==========================================================================
Pills, tabs, misc
========================================================================== */
.qc-pill {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
background: var(--qc-accent-soft);
color: var(--qc-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
border: 1px solid transparent;
}
.qc-pill-gold {
background: var(--qc-gold-soft);
color: var(--qc-gold-dark);
border-color: var(--qc-gold);
}
.qc-verse-display {
text-align: center;
padding: 28px 20px;
background:
linear-gradient(180deg, var(--qc-accent-softer) 0%, transparent 100%);
border-radius: var(--qc-radius);
border: 1px solid var(--qc-border);
}
.qc-reciter-card {
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius);
padding: 22px 18px;
text-align: center;
cursor: pointer;
transition: all var(--qc-trans);
position: relative;
overflow: hidden;
}
.qc-reciter-card:hover {
border-color: var(--qc-primary);
transform: translateY(-2px);
box-shadow: var(--qc-shadow-md);
}
.qc-reciter-card.active {
border-color: var(--qc-gold);
background: linear-gradient(180deg, var(--qc-gold-soft) 0%, var(--qc-bg-elev) 100%);
box-shadow: 0 0 0 1px var(--qc-gold), var(--qc-shadow-sm);
}
.qc-reciter-card .avatar {
position: relative;
width: 96px; height: 96px;
border-radius: 50%;
background: linear-gradient(135deg, var(--qc-primary), var(--qc-primary-light));
color: white;
display: flex; align-items: center; justify-content: center;
font-size: 1.7rem;
font-weight: 700;
font-family: var(--qc-font-display);
margin: 0 auto 14px;
box-shadow: var(--qc-shadow-md), 0 0 0 3px var(--qc-bg-elev), 0 0 0 4px var(--qc-border);
letter-spacing: -0.02em;
overflow: hidden;
}
.qc-reciter-card .avatar img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.qc-reciter-card.active .avatar {
background: linear-gradient(135deg, var(--qc-gold), var(--qc-gold-dark));
box-shadow: var(--qc-shadow-md), 0 0 0 3px var(--qc-bg-elev), 0 0 0 4px var(--qc-gold);
}
.qc-reciter-card .name {
font-weight: 600;
font-size: 0.95rem;
font-family: var(--qc-font-display);
color: var(--qc-text);
}
.qc-reciter-card .name-ar {
font-family: var(--qc-font-arabic);
color: var(--qc-text-soft);
font-size: 1.05rem;
margin-top: 2px;
}
.qc-tab-bar {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--qc-border);
margin-bottom: 24px;
overflow-x: auto;
}
.qc-tab {
padding: 12px 20px;
background: transparent;
border: none;
font-weight: 600;
font-size: 0.95rem;
font-family: inherit;
color: var(--qc-text-soft);
cursor: pointer;
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: all var(--qc-trans);
}
.qc-tab.active {
color: var(--qc-primary);
border-bottom-color: var(--qc-gold);
}
.qc-tab:hover { color: var(--qc-primary); }
.qc-dua-card {
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius);
padding: 26px 28px;
margin-bottom: 18px;
transition: all var(--qc-trans);
position: relative;
}
.qc-dua-card::before {
content: "";
position: absolute;
left: 0; top: 24px; bottom: 24px;
width: 3px;
background: linear-gradient(180deg, var(--qc-gold), transparent);
border-radius: 0 3px 3px 0;
}
.qc-dua-card:hover { box-shadow: var(--qc-shadow-sm); border-color: var(--qc-border-strong); }
.qc-dua-card h4 {
color: var(--qc-primary);
margin: 0 0 12px;
font-family: var(--qc-font-display);
font-size: 1.15rem;
font-weight: 600;
}
.qc-dua-card .ar {
font-family: var(--qc-font-arabic);
font-size: 1.7rem;
line-height: 2.2;
direction: rtl;
text-align: right;
margin: 12px 0;
color: var(--qc-text);
}
.qc-dua-card .tr {
color: var(--qc-text-soft);
font-style: italic;
font-family: var(--qc-font-display);
font-size: 1rem;
}
.qc-dua-card .mn {
margin-top: 12px;
font-size: 0.95rem;
color: var(--qc-text-soft);
line-height: 1.7;
}
.qc-event-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--qc-border);
transition: all var(--qc-trans);
}
.qc-event-row:last-child { border-bottom: none; }
.qc-event-row:hover { padding-left: 8px; }
.qc-event-row .name { font-weight: 600; color: var(--qc-text); font-family: var(--qc-font-display); }
.qc-event-row .date {
color: var(--qc-primary);
font-weight: 600;
font-feature-settings: 'tnum';
font-size: 0.95rem;
}
/* ==========================================================================
Tables (monthly prayer schedule)
========================================================================== */
.qc-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.92rem;
min-width: 680px;
}
.qc-table thead tr {
background: var(--qc-bg-alt);
}
.qc-table th {
padding: 12px 14px;
text-align: left;
font-weight: 600;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--qc-text-soft);
border-bottom: 1px solid var(--qc-border);
}
.qc-table td {
padding: 11px 14px;
border-bottom: 1px solid var(--qc-border);
font-feature-settings: 'tnum';
}
.qc-table tr:last-child td { border-bottom: none; }
.qc-table tr.today { background: var(--qc-accent-softer); font-weight: 600; }
.qc-table tr.today td:first-child {
border-left: 3px solid var(--qc-gold);
}
/* ==========================================================================
Live broadcasts
========================================================================== */
.qc-video-wrap {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
background: #000;
}
.qc-video-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.qc-info-note {
margin-top: 16px;
padding: 14px 18px;
background: var(--qc-bg-alt);
border: 1px solid var(--qc-border);
border-left: 3px solid var(--qc-gold);
border-radius: var(--qc-radius-sm);
font-size: 0.93rem;
color: var(--qc-text-soft);
line-height: 1.55;
}
/* ==========================================================================
Quran tools (word-by-word, tajweed, mushaf)
========================================================================== */
.qc-wbw-grid {
display: flex;
flex-wrap: wrap-reverse;
direction: rtl;
gap: 14px;
padding: 24px 16px;
background: var(--qc-bg-alt);
border-radius: var(--qc-radius);
border: 1px solid var(--qc-border);
}
.qc-wbw-word {
flex: 0 0 auto;
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius-sm);
padding: 10px 14px 12px;
text-align: center;
min-width: 90px;
transition: all var(--qc-trans);
cursor: default;
}
.qc-wbw-word:hover {
border-color: var(--qc-gold);
box-shadow: var(--qc-shadow-md);
transform: translateY(-2px);
}
.qc-wbw-word .ar {
font-family: var(--qc-font-arabic);
font-size: 1.9rem;
color: var(--qc-primary);
line-height: 1.4;
direction: rtl;
}
.qc-wbw-word .translit {
font-style: italic;
font-size: 0.78rem;
color: var(--qc-text-muted);
margin-top: 4px;
direction: ltr;
text-align: center;
}
.qc-wbw-word .meaning {
font-size: 0.85rem;
color: var(--qc-text);
font-weight: 600;
margin-top: 3px;
direction: ltr;
text-align: center;
}
/* Tajweed color rules (from AlQuran cloud tajweed edition) */
.qc-tajweed-text { font-family: var(--qc-font-arabic); font-size: 2.1rem; line-height: 2.4; direction: rtl; text-align: right; padding: 24px; background: var(--qc-bg-elev); border: 1px solid var(--qc-border); border-radius: var(--qc-radius); }
.qc-tajweed-text tajweed { /* default */ }
.qc-tajweed-text tajweed.ham_wasl { color: #AAAAAA; }
.qc-tajweed-text tajweed.slnt { color: #AAAAAA; }
.qc-tajweed-text tajweed.madda_normal { color: #537FBF; }
.qc-tajweed-text tajweed.madda_permissible { color: #4050FF; }
.qc-tajweed-text tajweed.madda_necessary { color: #000EBC; font-weight: 700; }
.qc-tajweed-text tajweed.madda_obligatory { color: #2144C1; font-weight: 700; }
.qc-tajweed-text tajweed.qlq { color: #DD0008; }
.qc-tajweed-text tajweed.ikhf_shfw { color: #D500B7; }
.qc-tajweed-text tajweed.ikhf { color: #9400A8; }
.qc-tajweed-text tajweed.idghm_shfw { color: #58B800; }
.qc-tajweed-text tajweed.iqlb { color: #26BFFD; }
.qc-tajweed-text tajweed.idgh_ghn { color: #169200; }
.qc-tajweed-text tajweed.idgh_wghn { color: #169200; }
.qc-tajweed-text tajweed.idgh_mus { color: #A1A1A1; }
.qc-tajweed-text tajweed.ghn { color: #FF7E1E; }
.qc-tajweed-legend {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
margin-top: 16px;
}
.qc-tajweed-legend .item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius-sm);
font-size: 0.88rem;
}
.qc-tajweed-legend .swatch {
width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
}
/* Mushaf page */
.qc-mushaf-viewer {
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius);
padding: 18px;
text-align: center;
}
.qc-mushaf-viewer img {
max-width: 100%;
height: auto;
margin: 0 auto;
display: block;
background: white;
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius-sm);
}
.qc-mushaf-nav {
display: flex; align-items: center; justify-content: center; gap: 12px;
margin-top: 16px;
}
.qc-mushaf-nav input { width: 80px; text-align: center; }
/* ==========================================================================
Hadith
========================================================================== */
.qc-hadith-card {
background: linear-gradient(135deg, var(--qc-bg-elev) 0%, var(--qc-accent-softer) 100%);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius);
padding: 32px;
box-shadow: var(--qc-shadow-sm);
position: relative;
}
.qc-hadith-card .quote-mark {
position: absolute;
top: 18px;
left: 22px;
font-family: var(--qc-font-display);
font-size: 5rem;
color: var(--qc-gold);
opacity: 0.18;
line-height: 1;
}
.qc-hadith-card .ar {
font-family: var(--qc-font-arabic);
font-size: 1.7rem;
line-height: 2.2;
text-align: right;
direction: rtl;
color: var(--qc-text);
margin-bottom: 18px;
position: relative;
z-index: 1;
}
.qc-hadith-card .en {
font-size: 1.05rem;
line-height: 1.7;
color: var(--qc-text);
font-family: var(--qc-font-display);
margin-bottom: 14px;
position: relative;
z-index: 1;
}
.qc-hadith-card .narrator {
color: var(--qc-text-soft);
font-style: italic;
font-size: 0.9rem;
}
.qc-hadith-card .reference {
margin-top: 10px;
font-size: 0.85rem;
color: var(--qc-primary);
font-weight: 600;
}
/* ==========================================================================
Mosques map
========================================================================== */
.qc-mosque-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 20px;
align-items: start;
}
@media (max-width: 900px) { .qc-mosque-layout { grid-template-columns: 1fr; } }
#qc-mosque-map {
width: 100%;
height: 520px;
border-radius: var(--qc-radius);
border: 1px solid var(--qc-border);
background: var(--qc-bg-alt);
}
.qc-mosque-list {
max-height: 520px;
overflow-y: auto;
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius);
}
.qc-mosque-item {
padding: 14px 16px;
border-bottom: 1px solid var(--qc-border);
cursor: pointer;
transition: all var(--qc-trans);
}
.qc-mosque-item:last-child { border-bottom: none; }
.qc-mosque-item:hover { background: var(--qc-accent-softer); }
.qc-mosque-item .name { font-weight: 600; color: var(--qc-text); }
.qc-mosque-item .meta { color: var(--qc-text-muted); font-size: 0.85rem; margin-top: 3px; }
.qc-mosque-item .dist { color: var(--qc-primary); font-size: 0.85rem; font-weight: 600; margin-top: 3px; }
/* ==========================================================================
Reciter library (dense list with letter index)
========================================================================== */
.qc-letter-index {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 18px;
padding: 12px;
background: var(--qc-bg-alt);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius-sm);
}
.qc-letter-index button {
width: 32px;
height: 32px;
border-radius: 6px;
background: transparent;
border: 1px solid transparent;
color: var(--qc-text-soft);
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
font-family: inherit;
transition: all var(--qc-trans);
}
.qc-letter-index button:hover,
.qc-letter-index button.active {
background: var(--qc-primary);
color: white;
border-color: var(--qc-primary);
}
.qc-letter-index button.disabled { opacity: 0.3; cursor: not-allowed; }
/* ==========================================================================
SEO content blocks — long-form text added below interactive widgets.
Styled to be readable & inviting, not overpowering the main content above.
========================================================================== */
.qc-seo-section {
background: var(--qc-bg-alt);
border-top: 1px solid var(--qc-border);
padding: 56px 0;
margin-top: 48px;
}
.qc-seo-content {
max-width: 820px;
margin: 0 auto;
padding: 0 24px;
}
.qc-seo-content h2 {
font-size: 1.6rem;
margin: 36px 0 14px;
color: var(--qc-primary-dark);
position: relative;
padding-bottom: 8px;
}
[data-theme="dark"] .qc-seo-content h2 { color: var(--qc-primary-light); }
.qc-seo-content h2::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 48px;
height: 3px;
background: linear-gradient(90deg, var(--qc-gold), transparent);
border-radius: 3px;
}
.qc-seo-content h2:first-child { margin-top: 0; }
.qc-seo-content h3 {
font-size: 1.2rem;
margin: 24px 0 10px;
color: var(--qc-text);
font-family: var(--qc-font-display);
}
.qc-seo-content p {
font-size: 1.02rem;
line-height: 1.75;
color: var(--qc-text-soft);
margin: 0 0 14px;
}
.qc-seo-content ul, .qc-seo-content ol {
font-size: 1.02rem;
line-height: 1.75;
color: var(--qc-text-soft);
padding-left: 22px;
margin: 0 0 18px;
}
.qc-seo-content ul li { margin-bottom: 6px; }
.qc-seo-content strong { color: var(--qc-text); }
.qc-seo-content a { color: var(--qc-primary); font-weight: 500; }
.qc-seo-content a:hover { color: var(--qc-gold-dark); text-decoration: underline; }
.qc-seo-content blockquote {
border-left: 3px solid var(--qc-gold);
padding: 12px 18px;
margin: 18px 0;
font-style: italic;
color: var(--qc-text);
background: var(--qc-bg-elev);
border-radius: 0 var(--qc-radius-sm) var(--qc-radius-sm) 0;
}
/* Page H1 class — semantically H1 (best for SEO) styled like H2 to fit layout.
Left padding clears the overhanging nav logo (which sits ~132px wide and
overflows the nav by 50px), so the title doesn't visually collide with it. */
.qc-page-h1 {
font-size: clamp(1.75rem, 3vw, 2.4rem);
font-family: var(--qc-font-display);
font-weight: 700;
letter-spacing: -0.01em;
/* -30% closer to the top per request (was margin-top: 36px) */
margin: 12px 0 8px;
padding-left: 0;
color: var(--qc-text);
/* Centered title across every page per request */
text-align: center;
}
/* Title that pairs an SVG icon image with text — keeps both centered */
.qc-page-h1-with-icon {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.qc-page-icon {
width: 52px;
height: 52px;
display: inline-block;
vertical-align: middle;
}
/* Intro paragraph directly below a page title is also centered; uses
!important because several pages set text-align:left inline. */
.qc-page-h1 + p { text-align: center !important; }
@media (max-width: 720px) {
.qc-page-h1 { margin-top: 8px; }
}
/* Shrink the inline padding-top:36px (the most common pattern across pages)
by ~30% so the title sits closer to the nav bar. !important overrides the
inline style without us having to edit every HTML file individually. */
.qc-section[style*="padding-top:36px"],
.qc-section[style*="padding-top: 36px"] { padding-top: 24px !important; }
/* The Read Quran page uses padding:24px 0 0 — keep the small intro margin */
.qc-section[style*="padding:24px 0 0"] { padding-top: 16px !important; }
/* Related links cards — gold-bordered, with a bigger green arrow on the right */
.qc-related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-top: 14px;
}
.qc-related-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 18px;
background: var(--qc-bg-elev);
border: 2px solid var(--qc-gold);
border-radius: var(--qc-radius);
text-decoration: none;
color: inherit !important;
font-weight: 600;
font-size: 0.95rem;
transition: all var(--qc-trans);
box-shadow: 0 0 0 1px rgba(217, 200, 150, 0.20),
0 2px 6px -3px rgba(184, 155, 94, 0.30);
}
.qc-related-link:hover {
border-color: var(--qc-gold-dark, var(--qc-gold));
background: var(--qc-accent-soft);
transform: translateY(-2px);
box-shadow: 0 0 0 1px rgba(217, 200, 150, 0.40),
0 8px 18px -6px rgba(184, 155, 94, 0.45);
text-decoration: none !important;
}
/* Larger green arrow inside each related link */
.qc-related-link .arrow {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--qc-primary);
color: white !important;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
flex-shrink: 0;
transition: transform var(--qc-trans), background var(--qc-trans);
}
.qc-related-link:hover .arrow {
background: var(--qc-primary-dark);
transform: translateX(3px);
}
/* In RTL the arrow should point the other way; the parent's reversed flow
already shifts it but flip the glyph too. */
html[dir="rtl"] .qc-related-link .arrow { transform: scaleX(-1); }
html[dir="rtl"] .qc-related-link:hover .arrow { transform: scaleX(-1) translateX(3px); }
/* ==========================================================================
Reciters page — green hero banner + sidebar reciter list +
surah list rows + inline embedded audio players.
========================================================================== */
/* Sidebar + (hero + surah list) layout */
.qc-rv3-wrap {
display: grid;
grid-template-columns: 280px 1fr;
gap: 20px;
align-items: start; /* sidebar sticks to top, doesn't stretch to match the very tall right column */
}
@media (max-width: 800px) {
.qc-rv3-wrap { grid-template-columns: 1fr; }
}
.qc-rv3-side {
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius);
padding: 14px;
/* No max-height / no overflow — all 21 reciters lay out flat so the user can see them without inner scrolling. */
}
.qc-rv3-main { min-width: 0; /* lets the grid shrink the right column on small screens */ }
.qc-rv3-side .item {
display: flex; align-items: center; gap: 10px;
padding: 10px;
border-radius: var(--qc-radius-sm);
cursor: pointer;
margin-bottom: 4px;
transition: all var(--qc-trans);
}
.qc-rv3-side .item:hover { background: var(--qc-accent-soft); }
.qc-rv3-side .item.active { background: var(--qc-primary); color: white; }
.qc-rv3-side .item.active .sub { color: rgba(255,255,255,0.8); }
.qc-rv3-side .item .av {
width: 52px; height: 52px; border-radius: 50%;
background: var(--qc-primary-soft); color: var(--qc-primary);
display: flex; align-items: center; justify-content: center; font-weight: 700;
flex-shrink: 0; position: relative; overflow: hidden;
border: 2px solid var(--qc-border);
box-shadow: var(--qc-shadow-xs);
}
.qc-rv3-side .item.active .av { background: white; color: var(--qc-primary); }
.qc-rv3-side .item .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qc-rv3-side .item .nm { font-weight: 600; font-size: 0.92rem; line-height: 1.2; }
.qc-rv3-side .item .sub { font-size: 0.78rem; color: var(--qc-text-muted); }
.qc-rv3-list { background: var(--qc-bg-elev); border-radius: var(--qc-radius); padding: 8px; }
/* SINGLE-LINE row layout with FIXED column widths so every row aligns
identically — the audio scrubber starts at the same X across all 114 rows.
[num: 32] [English name + sub: 220] [▶: 36] [audio: 1fr] [Arabic: 90, right-aligned] */
.qc-rv3-row {
display: grid;
grid-template-columns: 32px 220px 36px 1fr 90px;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-bottom: 1px solid var(--qc-border);
transition: background var(--qc-trans);
cursor: pointer; /* whole row is a click-to-play surface */
}
.qc-rv3-row:last-child { border-bottom: none; }
.qc-rv3-row:hover { background: var(--qc-accent-soft); }
.qc-rv3-row.playing { background: var(--qc-accent-soft); }
/* Surah number — rounded-square, NOT a circle */
.qc-rv3-row .num {
width: 32px; height: 32px; border-radius: 8px;
background: var(--qc-primary); color: white;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 0.82rem;
}
.qc-rv3-row .meta { min-width: 0; } /* lets long names truncate */
.qc-rv3-row .nm { font-weight: 600; font-size: 0.95rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-rv3-row .meta-sub { color: var(--qc-text-muted); font-size: 0.78rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-rv3-row .ar {
font-family: 'Amiri', serif;
color: var(--qc-primary);
font-size: 1.3rem;
white-space: nowrap;
text-align: right;
}
/* Custom play disc: dark-green circle, white triangle SVG inside */
.qc-mini-play {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: var(--qc-primary);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
flex-shrink: 0;
box-shadow: 0 2px 6px -2px rgba(14, 79, 44, 0.45);
transition: transform 120ms ease, background 120ms ease;
}
.qc-mini-play:hover {
background: var(--qc-primary-dark);
transform: scale(1.06);
}
.qc-mini-play svg { display: block; }
/* Slight optical correction so the triangle looks centered in the disc */
.qc-mini-play svg polygon { transform: translateX(0.5px); }
/* Native audio — scrubber + time only. We hide the play button because the
custom disc to its left is the primary action. */
.qc-rv3-row .qc-mini-audio {
width: 100%;
height: 32px;
border-radius: 22px;
}
.qc-rv3-row .qc-mini-audio::-webkit-media-controls-panel { background: transparent; }
.qc-rv3-row .qc-mini-audio::-webkit-media-controls-play-button {
display: none !important;
}
/* Slightly narrower viewports: shrink the English-name column so the audio
still has room. Keeps every row aligned identically. */
@media (max-width: 1000px) {
.qc-rv3-row { grid-template-columns: 30px 170px 34px 1fr 80px; gap: 10px; }
}
@media (max-width: 760px) {
.qc-rv3-row {
grid-template-columns: 28px 1fr 32px;
grid-template-areas:
"num meta play"
"ar audio audio";
gap: 8px;
}
.qc-rv3-row .num { grid-area: num; }
.qc-rv3-row .meta { grid-area: meta; }
.qc-rv3-row .qc-mini-play { grid-area: play; width: 32px; height: 32px; }
.qc-rv3-row .qc-mini-audio { grid-area: audio; }
.qc-rv3-row .ar { grid-area: ar; font-size: 1.1rem; }
}
/* Homepage compact widgets */
.qc-today-pill {
position: fixed;
top: calc(var(--qc-nav-h) + 8px);
right: 14px;
z-index: 40;
background: var(--qc-bg-elev);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius-sm);
padding: 6px 10px;
font-size: 0.78rem;
line-height: 1.25;
box-shadow: var(--qc-shadow-sm);
text-align: right;
max-width: 200px;
pointer-events: none; /* purely informational */
opacity: 1;
transition: opacity 1.2s ease;
}
/* JS adds .fade-out 5s after load → pill drifts away */
.qc-today-pill.fade-out { opacity: 0; }
.qc-today-pill .hijri { color: var(--qc-primary); font-weight: 600; }
.qc-today-pill .greg { color: var(--qc-text-muted); font-size: 0.72rem; }
html[dir="rtl"] .qc-today-pill { right: auto; left: 14px; text-align: left; }
@media (max-width: 720px) {
.qc-today-pill { font-size: 0.7rem; padding: 4px 8px; max-width: 150px; }
.qc-today-pill .greg { font-size: 0.66rem; }
}
/* Compact prayer card variant used on homepage.
~70% the previous compact height — paddings/gaps trimmed further. */
.qc-prayer-card-compact {
padding: 10px 14px !important;
font-size: 0.88rem;
}
.qc-prayer-card-compact h3 {
font-size: 0.92rem !important;
margin: 0 0 4px !important;
}
.qc-prayer-card-compact .location-line {
margin: 0 0 6px !important;
font-size: 0.78rem !important;
}
.qc-prayer-card-compact .qc-prayer-grid {
gap: 4px;
margin-top: 4px;
}
.qc-prayer-card-compact .qc-prayer-grid .qc-prayer-slot {
padding: 4px 6px;
font-size: 0.74rem;
}
.qc-prayer-card-compact .qc-countdown {
margin-top: 6px;
padding: 6px;
}
.qc-prayer-card-compact .qc-countdown .time-left {
font-size: 0.96rem;
}
/* The Quran Player card also uses this compact variant, so trim its inner
audio + dropdowns + buttons for matching height. */
.qc-prayer-card-compact audio {
height: 30px;
}
.qc-prayer-card-compact .qc-btn-sm {
padding: 5px 10px;
font-size: 0.78rem;
}
/* Ultra-compact homepage widgets — 20% taller than the previous ultra size.
Bottom-padding leaves room for the absolute-positioned corner links. */
.qc-prayer-card-ultra {
padding: 14px 14px 34px !important;
}
.qc-prayer-card-ultra .qc-widget-title {
/* Larger, bolder widget titles per request */
font-size: 1.4rem !important;
font-weight: 700 !important;
margin: 0 0 4px !important;
color: white !important;
letter-spacing: 0.01em;
}
/* Short tagline under the widget title */
.qc-widget-sub {
text-align: center;
font-size: 0.78rem;
color: rgba(255,255,255,0.82);
margin: 0 0 6px;
font-weight: 500;
}
.qc-prayer-card-ultra .location-line {
margin: 0 !important;
font-size: 0.78rem !important;
color: rgba(255, 255, 255, 0.85) !important;
line-height: 1.25;
flex: 1;
text-align: left;
}
/* Off-white prayer tiles for the homepage widget. Five tiles span the full
width of the card; ~20% taller than the previous tight grid. */
.qc-prayer-grid-tight {
grid-template-columns: repeat(5, 1fr) !important;
gap: 6px !important;
width: 100%;
}
.qc-prayer-grid-tight .qc-prayer-slot {
background: #f1f3f4;
border: 1px solid rgba(217, 200, 150, 0.35);
backdrop-filter: none;
padding: 8px 6px;
font-size: 0.82rem;
min-width: 0;
}
.qc-prayer-grid-tight .qc-prayer-slot .name {
color: var(--qc-text-soft) !important;
opacity: 1;
font-size: 0.68rem !important;
line-height: 1.15;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.qc-prayer-grid-tight .qc-prayer-slot .time {
color: var(--qc-primary-darker) !important;
font-size: 1.05rem !important;
margin-top: 2px !important;
line-height: 1.1;
font-weight: 700;
white-space: nowrap;
font-feature-settings: 'tnum';
}
.qc-prayer-grid-tight .qc-prayer-slot.next {
background: linear-gradient(135deg, #fff 0%, #fffaeb 100%);
border-color: var(--qc-gold);
box-shadow: 0 4px 12px -4px rgba(217, 200, 150, 0.5);
}
/* Below ~520px shrink the tile text so the 5 tiles still fit in one row */
@media (max-width: 520px) {
.qc-prayer-grid-tight .qc-prayer-slot { padding: 5px 3px; }
.qc-prayer-grid-tight .qc-prayer-slot .name { font-size: 0.6rem !important; }
.qc-prayer-grid-tight .qc-prayer-slot .time { font-size: 0.88rem !important; }
}
/* Inline location + next-prayer strip — both styled like the gold "Full schedule →" link */
.qc-prayer-loc-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0 6px;
font-size: 0.84rem;
font-weight: 600;
color: var(--qc-gold-light, #D9C896);
}
.qc-prayer-loc-meta .loc { color: rgba(255, 255, 255, 0.85); font-weight: 500; }
.qc-prayer-loc-meta .sep { opacity: 0.6; }
.qc-prayer-loc-meta .next { color: var(--qc-gold-light, #D9C896); }
.qc-prayer-card-ultra audio { height: 26px; }
/* ==========================================================================
Homepage "Read Quran" widget — simplified surah-view edition
Surah dropdown + font-size slider + light scrollable container that shows
the WHOLE selected surah verse-by-verse.
========================================================================== */
.qc-home-quran .qc-hq-h3-icon { width: 36px; height: 36px; }
.qc-hq-controls {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
/* Centered dropdown row — sits alone, dropdown auto-centered */
.qc-hq-controls-center { justify-content: center; }
.qc-hq-surah-dd {
flex: 0 0 auto;
width: 30%; /* half the previous 60% */
min-width: 160px;
max-width: 220px;
}
@media (max-width: 700px) {
.qc-hq-surah-dd { width: 60%; max-width: 280px; }
}
@media (max-width: 480px) {
.qc-hq-surah-dd { width: 100%; max-width: none; }
}
.qc-hq-fontsize {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--qc-gold-light, #D9C896);
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
}
.qc-hq-fontsize input[type="range"] {
width: 110px;
accent-color: var(--qc-primary); /* dark green to match site */
}
/* Font slider lives INSIDE the cream-bg view at top-right */
.qc-hq-fontsize-inside {
position: absolute;
top: 10px;
right: 14px;
z-index: 3;
background: rgba(248, 244, 234, 0.92);
padding: 4px 10px;
border-radius: 14px;
border: 1px solid rgba(217, 200, 150, 0.45);
color: var(--qc-primary-darker);
backdrop-filter: blur(4px);
}
.qc-hq-fontsize-inside input[type="range"] { width: 90px; }
html[dir="rtl"] .qc-hq-fontsize-inside { right: auto; left: 14px; }
/* Player lives INSIDE the cream view at top-LEFT (opposite the font slider) */
.qc-hq-player-inside-tl {
position: absolute;
top: 10px;
left: 14px;
z-index: 3;
width: 240px;
max-width: 50%;
background: #FFFFFF;
border: 1px solid rgba(217, 200, 150, 0.45);
padding: 3px 5px;
}
.qc-hq-player-inside-tl .qc-mini-play { width: 28px; height: 28px; flex-shrink: 0; }
.qc-hq-player-inside-tl .qc-mini-audio { height: 28px; }
html[dir="rtl"] .qc-hq-player-inside-tl { left: auto; right: 14px; }
@media (max-width: 640px) {
/* On narrow screens shrink the player so it doesn't overlap the size badge */
.qc-hq-player-inside-tl { width: 180px; }
.qc-hq-view-body { padding-top: 80px; } /* size + player may wrap vertically */
}
/* The light-green scrollable surah container — same hero-style gradient as
the top of the homepage. The custom .qc-hq-resize-handle below makes the
container draggable vertically (the native resize grip is unreliable when
nested inside an overflow-hidden card, so we manage size ourselves in JS). */
.qc-hq-surah-view {
--qc-hq-ar-size: 1.9rem;
position: relative;
background:
radial-gradient(ellipse 800px 300px at 50% -10%, rgba(184, 155, 94, 0.08) 0%, transparent 60%),
linear-gradient(180deg, #FFFFFF 0%, var(--qc-accent-softer, #E8F0E5) 100%);
border: 1px solid rgba(217, 200, 150, 0.45);
border-radius: var(--qc-radius);
padding: 14px 16px;
height: 320px;
min-height: 200px;
overflow: auto;
scroll-behavior: smooth;
color: var(--qc-primary-darker);
margin-bottom: 0;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
/* Corner resize grips — small gold triangle indicators at the bottom corners
of the text area. Both bottom corners are draggable so the user can stretch
the container in either direction. */
.qc-hq-corner {
position: absolute;
bottom: 0;
width: 18px;
height: 18px;
cursor: ns-resize;
z-index: 5;
background:
linear-gradient(135deg,
transparent 0%,
transparent 45%,
var(--qc-gold-dark, #98823E) 45%,
var(--qc-gold-dark, #98823E) 55%,
transparent 55%,
transparent 65%,
var(--qc-gold-dark, #98823E) 65%,
var(--qc-gold-dark, #98823E) 75%,
transparent 75%,
transparent 85%,
var(--qc-gold-dark, #98823E) 85%,
var(--qc-gold-dark, #98823E) 95%,
transparent 95%);
opacity: 0.65;
touch-action: none;
user-select: none;
transition: opacity var(--qc-trans);
}
.qc-hq-corner:hover, .qc-hq-corner.dragging { opacity: 1; }
.qc-hq-corner-br { right: 0; border-bottom-right-radius: var(--qc-radius); }
.qc-hq-corner-bl { left: 0; transform: scaleX(-1); border-bottom-left-radius: var(--qc-radius); }
/* Bottom-center double-bar handle — two short gold lines stacked vertically
in the middle of the bottom edge. Most familiar "drag here" pattern. */
.qc-hq-corner-bc {
left: 50%;
bottom: 2px;
transform: translateX(-50%);
width: 44px;
height: 12px;
/* Two horizontal stripes via dual linear-gradients */
background:
linear-gradient(var(--qc-gold-dark, #98823E), var(--qc-gold-dark, #98823E)) no-repeat,
linear-gradient(var(--qc-gold-dark, #98823E), var(--qc-gold-dark, #98823E)) no-repeat;
background-size: 100% 2px, 100% 2px;
background-position: center 3px, center 8px;
border-radius: 4px;
cursor: ns-resize;
opacity: 0.7;
}
.qc-hq-corner-bc:hover,
.qc-hq-corner-bc.dragging { opacity: 1; }
/* Inner body — pulled tighter to the top so the surah title doesn't float
in empty space. Player + size badge are absolute-positioned and sit
alongside the centered title (different horizontal lanes). */
.qc-hq-view-body { padding-top: 8px; }
.qc-hq-pane-en .qc-hq-view-body { padding-top: 4px; }
/* Custom scrollbar styling so the "sidebar" feels intentional */
.qc-hq-surah-view::-webkit-scrollbar { width: 10px; }
.qc-hq-surah-view::-webkit-scrollbar-track {
background: rgba(217, 200, 150, 0.18);
border-radius: 10px;
}
.qc-hq-surah-view::-webkit-scrollbar-thumb {
background: var(--qc-primary);
border-radius: 10px;
border: 2px solid #F8F4EA;
}
.qc-hq-surah-view::-webkit-scrollbar-thumb:hover { background: var(--qc-primary-dark); }
/* Per-language surah header. Title on one line, localized meta on the next.
Arabic header is RTL-aligned + uses Amiri; English header uses the display
font. */
.qc-hq-surah-head {
text-align: center;
padding-bottom: 8px;
margin-bottom: 12px;
border-bottom: 1px dashed var(--qc-border);
}
.qc-hq-title-ar {
font-family: 'Amiri', serif;
font-size: 1.9rem;
font-weight: 800;
/* Match the English title color (deep emerald, not darker) per request */
color: var(--qc-primary);
line-height: 1.2;
}
.qc-hq-title-en {
font-family: var(--qc-font-display);
font-size: 1.55rem;
font-weight: 800;
color: var(--qc-primary);
letter-spacing: -0.01em;
line-height: 1.2;
}
.qc-hq-sub-ar {
font-family: 'Amiri', serif;
font-size: 0.95rem;
color: var(--qc-text-soft);
margin-top: 2px;
}
.qc-hq-sub-en {
font-size: 0.85rem;
color: var(--qc-text-soft);
letter-spacing: 0.02em;
font-weight: 600;
margin-top: 2px;
}
.qc-hq-bism {
text-align: center;
font-family: 'Amiri', serif;
font-size: calc(var(--qc-hq-ar-size) * 0.95);
color: var(--qc-primary);
margin: 8px 0 16px;
direction: rtl;
}
/* ---- Top tab bar that swaps between two fully separated sub-widgets ---- */
.qc-hq-toptabs {
display: flex;
gap: 6px;
justify-content: center;
margin: 6px 0 10px;
flex-wrap: wrap;
}
.qc-hq-toptab {
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(217, 200, 150, 0.35);
padding: 6px 22px;
border-radius: 999px;
font: inherit;
font-weight: 700;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.82);
cursor: pointer;
transition: all var(--qc-trans);
}
.qc-hq-toptab:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(217, 200, 150, 0.55);
}
.qc-hq-toptab.active {
background: var(--qc-gold-light, #D9C896);
color: var(--qc-primary-darker);
border-color: var(--qc-gold);
box-shadow: 0 2px 8px -2px rgba(217, 200, 150, 0.50);
}
/* Each pane is the full widget body — only one is visible at a time */
.qc-hq-tabpane[hidden] { display: none; }
/* Continuous Arabic flow — every verse is a span with an inline gold pill marker. */
.qc-hq-flow {
font-family: 'Amiri', serif;
font-size: var(--qc-hq-ar-size);
line-height: 2.2;
color: var(--qc-primary-darker);
text-align: justify;
text-justify: inter-word;
word-spacing: 0.05em;
}
/* English flow — refined book-style typography: serif body for a Quran/scripture
feel, comfortable line-height, justified with auto hyphens. */
.qc-hq-flow-en {
--qc-hq-en-size: 1.05rem;
font-family: 'Charter', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif;
font-size: var(--qc-hq-en-size);
line-height: 1.85;
letter-spacing: 0.005em;
color: var(--qc-primary-darker);
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
word-spacing: 0.02em;
padding-top: 6px;
}
/* Drop cap on the very first verse — gives the page a clear "begin reading
here" anchor and feels closer to a printed Mushaf-style English edition. */
.qc-hq-flow-en > .qc-hq-v-inline:first-child::first-letter {
font-family: var(--qc-font-display);
font-size: 2.6em;
font-weight: 700;
float: left;
line-height: 0.9;
padding: 4px 8px 0 0;
color: var(--qc-primary);
}
html[dir="rtl"] .qc-hq-flow-en > .qc-hq-v-inline:first-child::first-letter {
float: right; padding: 4px 0 0 8px;
}
.qc-hq-flow-en .qc-hq-v-num-inline {
/* Slightly smaller pill in English so it doesn't dominate the latin text */
font-size: 0.62em;
margin: 0 0.3em;
background: rgba(217, 200, 150, 0.18);
border-color: rgba(14, 79, 44, 0.55);
}
.qc-hq-v-inline {
/* Spans naturally inline so the surah flows like one paragraph */
}
.qc-hq-v-num-inline {
display: inline-block;
margin: 0 0.4em;
padding: 0 0.45em;
min-width: 1.6em;
text-align: center;
font-family: var(--qc-font-body);
font-size: 0.6em;
font-weight: 700;
line-height: 1.7em;
height: 1.7em;
color: var(--qc-primary);
background: var(--qc-accent-soft);
border: 1.5px solid var(--qc-primary);
border-radius: 50%;
vertical-align: middle;
}
/* Action toolbar */
.qc-hq-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
margin: 8px 0 6px;
}
@media (max-width: 600px) {
.qc-hq-actions { gap: 4px; }
.qc-hq-actions .qc-btn-sm { padding: 4px 8px; font-size: 0.72rem; }
.qc-hq-surah-view { max-height: 380px; }
.qc-hq-fontsize input[type="range"] { width: 100px; }
}
/* Homepage Quran Player bar: green disc + native audio (play btn hidden),
same visual style as each row on the Reciters page. */
.qc-hp-player-bar {
display: flex;
align-items: center;
gap: 8px;
background: #f1f3f4;
border-radius: 24px;
padding: 4px 6px;
}
.qc-hp-player-bar .qc-mini-play {
width: 32px;
height: 32px;
flex-shrink: 0;
}
.qc-hp-player-bar .qc-mini-audio {
flex: 1;
height: 32px;
}
/* Hide the native play button inside the homepage player too */
.qc-hp-player-bar .qc-mini-audio::-webkit-media-controls-play-button { display: none !important; }
.qc-hp-player-bar .qc-mini-audio::-webkit-media-controls-panel { background: transparent; }
.qc-prayer-card-ultra .qc-btn-sm { padding: 3px 8px; font-size: 0.74rem; }
.qc-prayer-card-ultra .qc-select-on-dark { height: 30px; padding: 4px 28px 4px 11px; font-size: 0.82rem; }
/* Top row inside Prayer card: title on the left, next-prayer countdown on the right */
.qc-prayer-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.qc-widget-title-with-icon {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 !important;
}
.qc-prayer-icon { font-size: 1.5rem; line-height: 1; }
/* "Next: Asr · 3:45 PM" plain-text indicator.
Lives at the top-right of the Prayer card; only populated after a city is set. */
.qc-next-prayer-text {
color: var(--qc-gold-light, #FFF8E1);
font-size: 0.86rem;
font-weight: 600;
white-space: nowrap;
}
.qc-next-prayer-corner {
position: absolute;
top: 10px;
right: 14px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(217, 200, 150, 0.30);
border-radius: 12px;
padding: 4px 10px;
}
html[dir="rtl"] .qc-next-prayer-corner { right: auto; left: 14px; }
/* Prayer card anchors: city dropdown right-aligned 60%, Find Mosques bottom-left */
.qc-prayer-anchor { position: relative; padding-bottom: 38px !important; }
.qc-prayer-row {
display: flex;
align-items: center;
gap: 8px;
margin: 6px 0;
}
.qc-prayer-city-dd {
flex: 0 0 60% !important;
margin-left: auto;
}
html[dir="rtl"] .qc-prayer-city-dd { margin-left: 0; margin-right: auto; }
/* Searchable city in the home prayer widget — visually identical to
.qc-select-on-dark but without the chevron (it's a search box, not a select). */
input.qc-select-on-dark {
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: left 10px center !important;
padding-left: 32px !important;
}
html[dir="rtl"] input.qc-select-on-dark {
background-position: right 10px center !important;
padding-left: 11px !important;
padding-right: 32px !important;
}
/* Bottom-left "Find Mosques Near You" — absolute, mirrors the bottom-right Full Schedule link */
.qc-prayer-bottom-action {
position: absolute;
bottom: 6px;
left: 12px;
font-size: 0.76rem;
font-weight: 600;
color: var(--qc-gold-light, #D9C896);
text-decoration: none;
transition: color var(--qc-trans);
}
.qc-prayer-bottom-action:hover { color: #FFF8E1; text-decoration: underline; }
html[dir="rtl"] .qc-prayer-bottom-action { left: auto; right: 12px; }
html[dir="rtl"] .qc-widget-corner-link { left: 12px; right: auto; }
/* Row 2: [city + Use my location] on the left, [Find Mosques] on the right */
.qc-prayer-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 0 0 6px;
}
.qc-prayer-loc-group {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
.qc-prayer-loc-group .location-line {
text-align: left;
margin: 0 !important;
flex: 0 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.qc-prayer-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-left: auto;
}
/* Anchored bottom-right corner link inside .qc-widget-anchor (player + prayer cards) */
.qc-widget-anchor { position: relative; }
.qc-widget-corner-link {
position: absolute;
bottom: 6px;
right: 12px;
font-size: 0.76rem;
font-weight: 600;
color: var(--qc-gold-light, #D9C896);
text-decoration: none;
transition: color var(--qc-trans);
}
.qc-widget-corner-link:hover { color: #FFF8E1; text-decoration: underline; }
html[dir="rtl"] .qc-widget-corner-link { right: auto; left: 12px; }
html[dir="rtl"] .qc-prayer-card-ultra .location-line { text-align: right; }
html[dir="rtl"] .qc-prayer-actions { margin-left: 0; margin-right: auto; }
/* Light gold border accent — used on the prayer action buttons */
.qc-btn-gold-border {
border: 1.5px solid var(--qc-gold-light, #D9C896) !important;
box-shadow: 0 0 0 1px rgba(217, 200, 150, 0.18);
}
/* Live Quran radio grid (live-radio.html) */
.qc-radio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
/* Search + category slicers above the radio grid */
.qc-radio-toolbar {
display: flex;
flex-direction: column;
gap: 10px;
margin: 6px 0 14px;
}
.qc-radio-search {
max-width: 420px;
}
.qc-radio-cats {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.qc-radio-cats .qc-chip {
background: var(--qc-bg-elev);
color: var(--qc-text);
border: 1px solid var(--qc-border-strong);
border-radius: 999px;
padding: 6px 14px;
font-size: 0.85rem;
cursor: pointer;
transition: all var(--qc-trans);
}
.qc-radio-cats .qc-chip:hover {
border-color: var(--qc-primary);
color: var(--qc-primary);
}
.qc-radio-cats .qc-chip.active {
background: var(--qc-primary);
color: white;
border-color: var(--qc-primary);
}
/* Each station tile gets a gold border to match the rest of the homepage style */
.qc-radio-card {
background: var(--qc-bg-elev);
border: 2px solid var(--qc-gold);
border-radius: var(--qc-radius);
padding: 14px 16px;
box-shadow: 0 0 0 1px rgba(217, 200, 150, 0.20),
0 4px 12px -6px rgba(184, 155, 94, 0.30);
transition: transform var(--qc-trans), box-shadow var(--qc-trans);
}
.qc-radio-card:hover {
transform: translateY(-2px);
box-shadow: 0 0 0 1px rgba(217, 200, 150, 0.35),
0 8px 22px -6px rgba(184, 155, 94, 0.45);
}
.qc-radio-card .nm {
font-weight: 700;
font-size: 1.15rem;
line-height: 1.25;
color: var(--qc-primary-darker); /* dark green per request */
margin-bottom: 4px;
}
.qc-radio-card .sub { color: var(--qc-text-muted); font-size: 0.78rem; margin-bottom: 10px; }
/* Player inside each radio card uses the same green-disc + light pill as
the home Quran Player widget */
.qc-radio-card .qc-hp-player-bar {
background: #f1f3f4;
border-radius: 24px;
padding: 4px 6px;
display: flex;
align-items: center;
gap: 8px;
}
.qc-radio-card .qc-mini-play { width: 32px; height: 32px; flex-shrink: 0; }
.qc-radio-card .qc-mini-audio { flex: 1; height: 32px; width: 100%; }
/* Hide native play button (custom green disc on the left is the trigger),
the timeline (live stream — no scrubbing), the remaining-time counter,
and the three-dot overflow menu (download / picture-in-picture / etc.). */
.qc-radio-card .qc-mini-audio::-webkit-media-controls-play-button { display: none !important; }
.qc-radio-card .qc-mini-audio::-webkit-media-controls-timeline { display: none !important; }
.qc-radio-card .qc-mini-audio::-webkit-media-controls-time-remaining-display { display: none !important; }
.qc-radio-card .qc-mini-audio::-webkit-media-controls-overflow-button { display: none !important; }
.qc-radio-card .qc-mini-audio::-webkit-media-controls-overflow-menu-button { display: none !important; }
.qc-radio-card .qc-mini-audio::-webkit-media-controls-panel { background: transparent; }
/* Green hero banner with featured (selected) reciter */
.qc-rv4-album {
background: linear-gradient(135deg, #0a3320 0%, #0E4F2C 60%, #1B5E20 100%);
border-radius: var(--qc-radius);
padding: 32px;
color: white;
display: grid;
grid-template-columns: 220px 1fr;
gap: 28px;
margin-bottom: 20px;
}
@media (max-width: 700px) {
.qc-rv4-album { grid-template-columns: 1fr; text-align: center; }
}
.qc-rv4-cover {
width: 220px; height: 220px;
border-radius: 12px;
background: white;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
color: var(--qc-primary);
font-size: 4rem;
box-shadow: 0 16px 40px -10px rgba(0,0,0,0.5);
position: relative; overflow: hidden;
}
.qc-rv4-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qc-rv4-meta .label { font-size: 0.85rem; opacity: 0.8; letter-spacing: 0.08em; text-transform: uppercase; }
.qc-rv4-meta .name { font-size: 2.2rem; font-family: var(--qc-font-display); font-weight: 700; margin: 6px 0 4px; }
.qc-rv4-meta .nameAr { font-family: 'Amiri', serif; font-size: 1.4rem; opacity: 0.9; margin-bottom: 12px; }
.qc-rv4-meta .stats { display: flex; gap: 18px; font-size: 0.9rem; opacity: 0.85; }
/* ==========================================================================
Homepage widget styling — fading dark green background
Gives each home card a modern, unified look while staying readable.
Applied to all the main widgets on index.html (verse, dua, player,
prayer times, live radio, converter).
========================================================================== */
.qc-card-fade-green {
background:
radial-gradient(ellipse 600px 320px at 80% 10%, rgba(217, 200, 150, 0.10) 0%, transparent 55%),
linear-gradient(140deg, #042815 0%, #073A1F 35%, #0E4F2C 75%, #1B5E20 100%);
color: #F4F5EE;
border: 1px solid rgba(217, 200, 150, 0.18);
box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.45);
position: relative;
overflow: hidden;
}
.qc-card-fade-green::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--qc-gold-light, #D9C896), transparent);
pointer-events: none;
}
/* Text inside the fade-green cards is white-ish by default */
.qc-card-fade-green,
.qc-card-fade-green h3,
.qc-card-fade-green .qc-translation,
.qc-card-fade-green p,
.qc-card-fade-green label,
.qc-card-fade-green .qc-label,
.qc-card-fade-green .qc-arabic { color: #F4F5EE; }
.qc-card-fade-green .qc-translation,
.qc-card-fade-green p { color: rgba(244, 245, 238, 0.92); }
.qc-card-fade-green a { color: var(--qc-gold-light, #D9C896); }
.qc-card-fade-green .qc-pill {
background: rgba(217, 200, 150, 0.22);
color: #FFF8E1;
border: 1px solid rgba(217, 200, 150, 0.35);
}
.qc-card-fade-green [style*="color:var(--qc-text-muted)"],
.qc-card-fade-green [style*="color:var(--qc-text-soft)"] {
/* Lighten muted text that would be unreadable on the dark gradient */
color: rgba(244, 245, 238, 0.7) !important;
}
/* Select dropdown on the dark green cards.
Matches the native