/* ==========================================================================
Espoo Muslim Center — shared stylesheet
Fonts are loaded via +
in each page's rather than @import here, so the font request
fires in parallel with this stylesheet instead of after it.
========================================================================== */
:root {
--font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
--font-body: 'Work Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
--color-bg: #FAF6EE;
--color-bg-alt: #F1EADC;
--color-surface: #FFFFFF;
--color-primary: #1E4B43;
--color-primary-dark: #143530;
--color-primary-light: #2F6358;
--color-accent: #B8873A;
--color-accent-light: #E0C179;
/* Darker gold used for small text/icons on light backgrounds — #B8873A on
the cream/white surfaces below fails WCAG AA (~3:1); this variant clears
4.5:1 while still reading as "gold". Use --color-accent for buttons,
borders, and large decorative shapes; use --color-accent-text for text
and small icons on light backgrounds. */
--color-accent-text: #8C6425;
--color-text: #212B27;
--color-text-muted: #5B6B63;
--color-border: #E3DACB;
--color-on-primary: #FAF6EE;
--shadow-soft: 0 1px 2px rgba(20, 30, 26, 0.04), 0 6px 20px rgba(20, 30, 26, 0.06);
--radius-md: 10px;
--radius-lg: 18px;
--container-w: 1180px;
color-scheme: light;
}
:root[data-theme="dark"] {
--color-bg: #10201C;
--color-bg-alt: #16302A;
--color-surface: #16302A;
--color-primary: #4C8C7D;
--color-primary-dark: #3A6E62;
--color-primary-light: #6BA495;
--color-accent: #D9B865;
--color-accent-light: #EAD79A;
/* Already light-on-dark, so no separate darkening needed here. */
--color-accent-text: #D9B865;
--color-text: #EDE7D9;
--color-text-muted: #A9BDB4;
--color-border: #24413A;
--color-on-primary: #0E1A17;
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="dark"]) {
--color-bg: #10201C;
--color-bg-alt: #16302A;
--color-surface: #16302A;
--color-primary: #4C8C7D;
--color-primary-dark: #3A6E62;
--color-primary-light: #6BA495;
--color-accent: #D9B865;
--color-accent-light: #EAD79A;
--color-accent-text: #D9B865;
--color-text: #EDE7D9;
--color-text-muted: #A9BDB4;
--color-border: #24413A;
--color-on-primary: #0E1A17;
color-scheme: dark;
}
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Keeps anchor-linked headings (e.g. #youth-development, #visit, #volunteer)
clear of the sticky header instead of landing underneath it. */
[id] { scroll-margin-top: 90px; }
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
transition: background-color .25s ease, color .25s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.18;
margin: 0 0 .5em;
color: var(--color-primary);
}
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4 {
color: var(--color-accent-light);
}
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.skip-link {
position: absolute;
left: 1rem;
top: -4rem;
z-index: 100;
background: var(--color-primary);
color: var(--color-on-primary);
padding: .8em 1.3em;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: top .15s ease;
}
.skip-link:focus {
top: 1rem;
}
.container {
width: 100%;
max-width: var(--container-w);
margin: 0 auto;
padding: 0 1.25rem;
}
.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section-alt { background: var(--color-bg-alt); }
.section-primary { background: var(--color-primary); color: var(--color-on-primary); }
.section-primary h1, .section-primary h2, .section-primary h3 { color: var(--color-on-primary); }
.section-head { max-width: 640px; margin: 0 0 2.5rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
font-size: .78rem;
color: var(--color-accent-text);
margin-bottom: .6em;
}
/* On dark teal backgrounds, the light gold reads correctly (~5.6:1);
the default --color-accent-text is tuned for light backgrounds instead. */
.hero .eyebrow, .page-hero .eyebrow, .section-primary .eyebrow {
color: var(--color-accent-light);
}
.lede { font-size: 1.1rem; color: var(--color-text-muted); }
/* Islamic geometric texture, used sparingly */
.pattern-band {
background-image: url('../assets/pattern-islamic.svg');
background-repeat: repeat;
background-size: 80px 80px;
opacity: .5;
}
.pattern-divider {
height: 26px;
background-image: url('../assets/pattern-islamic.svg');
background-repeat: repeat-x;
background-size: 52px 52px;
background-position: center;
opacity: .55;
}
:root[data-theme="dark"] .pattern-band,
:root[data-theme="dark"] .pattern-divider { opacity: .18; filter: invert(1) brightness(1.4); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: .5em;
font-family: var(--font-body);
font-weight: 600;
font-size: .96rem;
padding: .75em 1.4em;
border-radius: 999px;
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-accent { background: var(--color-accent); color: #241a06; }
.btn-accent:hover { background: var(--color-accent-light); }
.btn-outline { background: transparent; border-color: currentColor; color: var(--color-primary); }
:root[data-theme="dark"] .btn-outline { color: var(--color-accent-light); }
.btn-outline:hover { background: rgba(30,75,67,.08); }
.btn-sm { padding: .55em 1.05em; font-size: .85rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.btn-row.center { justify-content: center; }
/* ---------- Announcement bar ---------- */
.announcement {
background: var(--color-primary-dark);
color: var(--color-on-primary);
font-size: .88rem;
text-align: center;
padding: .55em 2.4em .55em 1em;
position: relative;
}
.announcement a { text-decoration: underline; text-underline-offset: 3px; }
.announcement__close {
position: absolute;
right: .5em; top: 50%; transform: translateY(-50%);
background: none; border: none; color: inherit;
font-size: 1.1rem; line-height: 1; cursor: pointer;
padding: .3em .5em; opacity: .8;
}
.announcement__close:hover { opacity: 1; }
.announcement.is-hidden { display: none; }
/* ---------- Utility bar (home page only) ---------- */
.utility-bar {
background: var(--color-bg-alt);
border-bottom: 1px solid var(--color-border);
font-size: .85rem;
}
.utility-bar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem 1rem;
padding: .6rem 0;
}
.utility-search {
position: relative;
display: flex;
align-items: center;
flex: 1 1 200px;
max-width: 260px;
}
.utility-search input[type="search"] {
width: 100%;
font-family: var(--font-body);
font-size: .85rem;
padding: .5em 2.2em .5em .9em;
border-radius: 999px;
border: 1.5px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
min-height: 38px;
}
.utility-search button {
position: absolute;
right: .3em;
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
padding: .3em;
min-width: 32px;
min-height: 32px;
}
.utility-search__result {
position: absolute;
top: 100%;
left: 0;
margin: .3rem 0 0;
padding: .5em .8em;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: .82rem;
color: var(--color-text-muted);
z-index: 5;
max-width: 320px;
}
.utility-search__result:empty { display: none; }
.utility-social { display: flex; align-items: center; gap: .5rem; }
.utility-social a {
width: 34px; height: 34px;
display: grid; place-items: center;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-primary);
font-size: .68rem;
font-weight: 700;
letter-spacing: .02em;
text-decoration: none;
}
:root[data-theme="dark"] .utility-social a { color: var(--color-accent-light); }
.prayer-info-toggle {
position: relative;
flex: 0 0 auto;
margin-left: auto;
}
.prayer-info-toggle summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: .5rem;
padding: .4em .8em;
border-radius: 999px;
border: 1.5px solid var(--color-border);
background: var(--color-surface);
font-size: .8rem;
color: var(--color-text);
white-space: nowrap;
}
.prayer-info-toggle summary::-webkit-details-marker { display: none; }
.prayer-info-toggle summary::before {
content: "🕌";
font-size: .9rem;
}
.prayer-info-toggle summary::after {
content: "▾";
color: var(--color-text-muted);
transition: transform .15s ease;
}
.prayer-info-toggle[open] summary::after { transform: rotate(180deg); }
.prayer-info-toggle__date { font-weight: 600; }
.prayer-info-toggle__next { color: var(--color-text-muted); }
.prayer-info-panel {
position: absolute;
right: 0;
margin-top: .5rem;
padding: 1rem 1.1rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
z-index: 45;
min-width: 260px;
}
.prayer-info-panel__hijri {
margin: 0 0 .7rem;
font-size: .82rem;
color: var(--color-text-muted);
}
.prayer-info-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.prayer-info-table th, .prayer-info-table td { text-align: left; padding: .3em .4em; }
.prayer-info-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); }
.prayer-info-table td { border-bottom: 1px dashed var(--color-border); }
.prayer-info-table tr:last-child td { border-bottom: none; }
.prayer-info-table tr.is-next td { color: var(--color-accent-text); font-weight: 600; }
:root[data-theme="dark"] .prayer-info-table tr.is-next td { color: var(--color-accent-light); }
@media (max-width: 760px) {
.utility-bar__inner { justify-content: center; }
.utility-search { flex: 1 1 100%; max-width: none; order: 1; }
.utility-social { order: 2; }
.prayer-info-toggle { order: 3; margin-left: 0; }
.prayer-info-panel { right: auto; left: 50%; transform: translateX(-50%); }
}
/* ---------- Header / nav ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 40;
background: color-mix(in srgb, var(--color-bg) 88%, transparent);
backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--color-border);
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .8rem 0;
}
.brand {
display: flex;
align-items: center;
gap: .65rem;
text-decoration: none;
color: var(--color-primary);
}
:root[data-theme="dark"] .brand { color: var(--color-accent-light); }
/* Fixed light plate behind the logo so its baked-in brown wordmark stays
legible even in dark mode, when the header background itself goes dark. */
.brand__logo-wrap {
display: inline-flex;
align-items: center;
background: #FAF6EE;
padding: .35rem .8rem;
border-radius: 10px;
}
.brand__logo { display: block; height: 50px; width: auto; }
.brand__sub {
display: block;
font-family: var(--font-body);
font-weight: 500;
font-size: .68rem;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
background: none;
border: 1.5px solid var(--color-border);
border-radius: 8px;
padding: .45em .6em;
cursor: pointer;
}
.nav-toggle span {
display: block;
width: 22px; height: 2px;
background: var(--color-primary);
margin: 4px 0;
border-radius: 2px;
}
:root[data-theme="dark"] .nav-toggle span { background: var(--color-accent-light); }
.nav-links {
display: flex;
align-items: center;
gap: 1.35rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
text-decoration: none;
font-weight: 500;
font-size: .95rem;
color: var(--color-text);
padding: .3em 0;
border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
color: var(--color-primary);
border-bottom-color: var(--color-accent);
}
:root[data-theme="dark"] .nav-links a:hover,
:root[data-theme="dark"] .nav-links a[aria-current="page"] { color: var(--color-accent-light); }
.nav-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: .6rem;
}
/* ---------- Utility pills (Watch / Read / Donate) ----------
Shared pill shape (matches .btn.btn-sm) with distinct brand colors so the
three sit together as one balanced row of quick actions in the header. */
.utility-pill {
display: inline-flex;
align-items: center;
gap: .35em;
font-family: inherit;
font-weight: 600;
font-size: .85rem;
padding: .55em 1.05em;
border-radius: 999px;
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: transform .15s ease, background-color .15s ease;
}
.utility-pill:hover { transform: translateY(-1px); }
.utility-pill--watch { background: #4caf6d; color: #0e3320; }
.utility-pill--watch:hover,
.nav-dropdown.is-open .utility-pill--watch,
.nav-dropdown:focus-within .utility-pill--watch { background: #6cc38c; }
.utility-pill--read { background: #3e8ed0; color: #fff; }
.utility-pill--read:hover,
.nav-dropdown.is-open .utility-pill--read,
.nav-dropdown:focus-within .utility-pill--read { background: #5fa3da; }
/* ---------- Nav dropdowns (Watch / Read) ----------
The trigger itself is styled via .utility-pill above; this block only
handles the dropdown menu behavior around it. Opens on hover or keyboard
focus (via :focus-within), and can also be toggled by click/tap (via the
.is-open class, set in js/main.js) — the same click toggle is what touch
devices rely on, since hover doesn't apply there. One compact treatment
at every screen width. */
.nav-dropdown { position: relative; }
.nav-dropdown__caret { font-size: .65em; transition: transform .15s ease; }
.nav-dropdown.is-open .nav-dropdown__caret,
.nav-dropdown:focus-within .nav-dropdown__caret { transform: rotate(180deg); }
.nav-dropdown__menu {
list-style: none;
margin: 0;
padding: .4rem;
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 50%;
margin-top: .5rem;
min-width: 180px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-6px);
transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
z-index: 50;
}
.nav-dropdown__menu a {
display: block;
padding: .55em .7em;
border-radius: 6px;
font-size: .92rem;
font-weight: 500;
text-decoration: none;
color: var(--color-text);
white-space: nowrap;
}
.nav-dropdown__menu a:hover, .nav-dropdown__menu a:focus-visible {
background: var(--color-bg-alt);
color: var(--color-primary);
}
:root[data-theme="dark"] .nav-dropdown__menu a:hover,
:root[data-theme="dark"] .nav-dropdown__menu a:focus-visible { color: var(--color-accent-light); }
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
.nav-dropdown__menu { transition: none; }
}
.theme-toggle {
background: var(--color-surface);
border: 1.5px solid var(--color-border);
border-radius: 999px;
width: 44px; height: 44px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 1rem;
flex-shrink: 0;
}
@media (max-width: 960px) {
/* Logo + hamburger share the top row; the pill row (Watch/Read/Donate)
wraps to its own full-width row underneath via flex-basis so it never
has to crowd in next to the logo. */
.navbar { flex-wrap: wrap; }
.nav-toggle { display: block; order: 1; }
.nav-actions { order: 2; flex-basis: 100%; justify-content: center; margin-top: .6rem; }
.nav-links {
position: fixed;
inset: 62px 0 auto 0;
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
flex-direction: column;
align-items: stretch;
gap: 0;
padding: .5rem 1.25rem 1.25rem;
max-height: calc(100vh - 62px);
overflow-y: auto;
transform: translateY(-8px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.nav-links.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}
.nav-links a { display: block; padding: .85em 0; border-bottom: 1px solid var(--color-border); }
.nav-links li:last-child a { border-bottom: none; }
}
/* ---------- Hero ---------- */
.hero {
position: relative;
overflow: hidden;
background: var(--color-primary);
color: var(--color-on-primary);
}
.hero::before {
content: "";
position: absolute; inset: 0;
background-image: url('../assets/pattern-islamic.svg');
background-repeat: repeat;
background-size: 120px 120px;
opacity: .12;
}
/* ---------- Hero announcement slider ----------
Large, full-bleed image carousel filling the upper portion of the hero,
above the existing hero title/content. Same rotation/pause-play mechanics
as the rest of the site's sliders — see initAnnounceSlider() in js/main.js. */
.hero-announce {
position: relative;
/* Height trimmed to cut the empty lower band beneath the caption (where
the dots sit) while staying full-bleed width so the image still reads
as large and impactful — only the excess vertical footprint is gone. */
height: clamp(240px, 32vw, 360px);
z-index: 1;
}
.hero-announce__track {
position: relative;
height: 100%;
}
.hero-announce__slide {
position: absolute;
inset: 0;
/* Explicit height (not just inset:0) so the slide — and the image inside
it — still fills the full slider box once the active slide switches to
position:relative below; inset alone stops stretching a relatively
positioned box, which was leaving a plain empty band under the image. */
height: 100%;
display: flex;
align-items: flex-end;
text-decoration: none;
color: var(--color-on-primary);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .5s ease;
}
.hero-announce__slide.is-active {
position: relative;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* The actual slide image — a real ![]()
(with real alt text) so it's a
straightforward swap-in-a-real-photo target; see ANNOUNCEMENTS in
js/data.js for the "image"/"alt" fields that feed this. */
.hero-announce__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
/* Two-part scrim: a bottom fade (readability against any image) plus a left
fade (a dedicated quiet zone behind the caption). The decorative artwork in
assets/hero-announce-*.svg is deliberately kept out of this bottom-left
zone, so this is a belt-and-braces contrast guarantee, not the only one. */
.hero-announce__slide::after {
content: "";
position: absolute; inset: 0;
z-index: 1;
background:
linear-gradient(to top, rgba(6,14,13,.88) 0%, rgba(6,14,13,.55) 34%, rgba(6,14,13,.12) 62%, transparent 82%),
linear-gradient(to right, rgba(6,14,13,.55) 0%, rgba(6,14,13,.22) 40%, transparent 68%);
}
.hero-announce__caption {
position: relative;
z-index: 2;
padding: 1.1rem clamp(1.25rem, 6vw, 4.5rem) 1rem;
max-width: 560px;
}
.hero-announce__caption .tag {
background: rgba(255,255,255,.2);
color: var(--color-on-primary);
margin-bottom: .6em;
}
.hero-announce__title {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.2rem, 3vw, 1.7rem);
line-height: 1.25;
margin-bottom: .3em;
text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.hero-announce__text {
display: block;
font-size: .92rem;
color: rgba(255,255,255,.88);
text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.hero-announce__slide:hover .hero-announce__title,
.hero-announce__slide:focus-visible .hero-announce__title { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
.hero-announce__slide { transition: none; }
}
/* The lead slide (first in ANNOUNCEMENTS) gets a visibly stronger title so the
very first thing visitors see reads as a confident opener, not just another
rotating item. */
.hero-announce__slide:first-child .hero-announce__title {
font-size: clamp(1.5rem, 3.8vw, 2.3rem);
}
.hero-announce__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 44px; height: 44px;
border-radius: 999px;
border: 1.5px solid rgba(255,255,255,.35);
background: rgba(6,14,13,.45);
color: #fff;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
opacity: .9;
box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.hero-announce__arrow:hover { opacity: 1; background: rgba(6,14,13,.65); }
.hero-announce__arrow--prev { left: 1rem; }
.hero-announce__arrow--next { right: 1rem; }
.hero-announce__toggle {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 3;
width: 38px; height: 38px;
border-radius: 999px;
border: 1.5px solid rgba(255,255,255,.35);
background: rgba(6,14,13,.45);
color: #fff;
font-size: .95rem;
cursor: pointer;
opacity: .9;
box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.hero-announce__toggle:hover { opacity: 1; background: rgba(6,14,13,.65); }
.hero-announce__dots {
position: absolute;
bottom: .8rem;
right: clamp(1.25rem, 6vw, 4.5rem);
z-index: 3;
display: flex;
gap: .5rem;
}
.hero-announce__dots button {
width: 10px; height: 10px;
border-radius: 999px;
border: 1.5px solid rgba(255,255,255,.85);
background: rgba(6,14,13,.3);
cursor: pointer;
padding: 0;
box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.hero-announce__dots button[aria-current="true"] { background: #fff; }
@media (max-width: 620px) {
.hero-announce { height: clamp(200px, 56vw, 260px); }
.hero-announce__caption { padding: .8rem 1.1rem .8rem; max-width: 100%; }
.hero-announce__slide:first-child .hero-announce__title { font-size: clamp(1.3rem, 6vw, 1.7rem); }
.hero-announce__text { display: none; }
/* Shorter mobile slider height means true vertical-center now dips into the
bottom-anchored caption — raise the arrows so they clear the tag/title. */
.hero-announce__arrow { top: 30%; width: 38px; height: 38px; font-size: 1.2rem; }
.hero-announce__dots { right: 1.1rem; bottom: .6rem; }
}
.hero__inner {
position: relative;
/* Top padding kept deliberately small so the hero title feels directly
connected to the announcement slider above it — the slider itself (plus
this small remainder) is the only breathing room between the two. */
padding: clamp(.25rem, .625vw, .4375rem) 0 clamp(3rem, 7vw, 5.5rem);
max-width: 760px;
}
.hero h1 {
color: var(--color-on-primary);
font-size: clamp(2.1rem, 5vw, 3.2rem);
letter-spacing: -.01em;
}
.hero p.lede { color: color-mix(in srgb, var(--color-on-primary) 82%, transparent); }
.hero .btn-row { margin-top: 1.7rem; }
.hero .btn-outline { color: var(--color-on-primary); }
.hero .btn-outline:hover { background: rgba(255,255,255,.1); }
/* Subtle one-time glow on the hero heading itself (no overlay, no layout
motion). The heading is fully visible and legible from the first frame —
only a soft gold text-shadow blooms in and fades back out once. */
.hero-title-glow {
animation: heroTitleGlow 2.4s ease-out 1;
}
@keyframes heroTitleGlow {
0% { text-shadow: 0 0 0 rgba(224, 193, 121, 0); }
45% { text-shadow: 0 0 22px rgba(224, 193, 121, .55); }
100% { text-shadow: 0 0 0 rgba(224, 193, 121, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-title-glow { animation: none; }
}
.page-hero {
background: var(--color-primary);
color: var(--color-on-primary);
position: relative;
overflow: hidden;
}
.page-hero::before {
content: "";
position: absolute; inset: 0;
background-image: url('../assets/pattern-islamic.svg');
background-repeat: repeat;
background-size: 110px 110px;
opacity: .1;
}
.page-hero__inner { position: relative; padding: clamp(2.6rem, 6vw, 4rem) 0; max-width: 720px; }
.page-hero h1 { color: var(--color-on-primary); font-size: clamp(1.9rem, 4.4vw, 2.7rem); }
.page-hero p { color: color-mix(in srgb, var(--color-on-primary) 84%, transparent); margin-bottom: 0; }
/* ---------- Grids & Cards ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.6rem;
display: flex;
flex-direction: column;
gap: .6rem;
}
.card h3 { margin-bottom: .2em; font-size: 1.15rem; }
.card p { color: var(--color-text-muted); margin-bottom: 0; }
.card .btn { margin-top: auto; align-self: flex-start; }
/* Vision & Mission card background illustrations — subtle, full-card
texture behind existing content. Overlay is a translucent wash of the
card's own surface color so the photo stays visible but text contrast
is essentially unchanged from a plain .card. */
.card--vision-1 {
background:
linear-gradient(rgba(255, 255, 255, .58), rgba(255, 255, 255, .58)),
url('../assets/illustrations/vision-long-term-institution.png') center / cover no-repeat;
}
.card--vision-2 {
background:
linear-gradient(rgba(255, 255, 255, .58), rgba(255, 255, 255, .58)),
url('../assets/illustrations/vision-knowledge-identity.png') center / cover no-repeat;
}
.card--vision-3 {
background:
linear-gradient(rgba(255, 255, 255, .58), rgba(255, 255, 255, .58)),
url('../assets/illustrations/vision-stronger-community-ties.png') center / cover no-repeat;
}
:root[data-theme="dark"] .card--vision-1 {
background:
linear-gradient(rgba(22, 48, 42, .85), rgba(22, 48, 42, .85)),
url('../assets/illustrations/vision-long-term-institution.png') center / cover no-repeat;
}
:root[data-theme="dark"] .card--vision-2 {
background:
linear-gradient(rgba(22, 48, 42, .85), rgba(22, 48, 42, .85)),
url('../assets/illustrations/vision-knowledge-identity.png') center / cover no-repeat;
}
:root[data-theme="dark"] .card--vision-3 {
background:
linear-gradient(rgba(22, 48, 42, .85), rgba(22, 48, 42, .85)),
url('../assets/illustrations/vision-stronger-community-ties.png') center / cover no-repeat;
}
/* Programs page card background photos — subtle, full-card texture behind
existing content, same technique as the Vision & Mission cards above.
The actual image is set per-card as an inline "--card-photo" custom
property (see initProgramCards() in js/main.js, driven by the "image"
field on each entry in PROGRAMS in js/data.js) — this one rule handles
every program card, so the card-to-image mapping lives in exactly one
place (js/data.js), not duplicated here. */
.card--photo {
background:
linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)),
var(--card-photo) right center / cover no-repeat;
}
:root[data-theme="dark"] .card--photo {
background:
linear-gradient(rgba(22, 48, 42, .87), rgba(22, 48, 42, .87)),
var(--card-photo) right center / cover no-repeat;
}
.card-icon {
width: 42px; height: 42px;
border-radius: 10px;
background: var(--color-bg-alt);
color: var(--color-primary);
display: grid; place-items: center;
font-size: 1.2rem;
margin-bottom: .3rem;
flex-shrink: 0;
}
:root[data-theme="dark"] .card-icon { color: var(--color-accent-light); }
.tag {
display: inline-block;
font-size: .72rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--color-primary);
background: var(--color-bg-alt);
border-radius: 999px;
padding: .3em .8em;
width: fit-content;
}
:root[data-theme="dark"] .tag { color: var(--color-accent-light); background: rgba(217,184,101,.12); }
/* ---------- Event cards (Past EMC Events) ---------- */
.event-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.event-card:hover, .event-card:focus-visible {
transform: translateY(-3px);
box-shadow: var(--shadow-soft);
}
.event-card__thumb {
position: relative;
aspect-ratio: 4 / 3;
background: var(--color-bg-alt);
display: grid;
place-items: center;
overflow: hidden;
}
.event-card__thumb::before {
content: "";
position: absolute; inset: 0;
background-image: url('../assets/pattern-islamic.svg');
background-repeat: repeat;
background-size: 70px 70px;
opacity: .4;
}
:root[data-theme="dark"] .event-card__thumb::before { opacity: .14; filter: invert(1) brightness(1.4); }
.event-card__thumb img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.event-card__icon {
position: relative;
font-size: 2.1rem;
}
.event-card__body { padding: 1.1rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .3rem; }
.event-card__body h3 { margin-bottom: 0; font-size: 1.05rem; }
.event-card__body p { color: var(--color-text-muted); margin-bottom: .3em; font-size: .92rem; }
.event-card__cta {
font-size: .85rem;
font-weight: 600;
color: var(--color-accent-text);
}
:root[data-theme="dark"] .event-card__cta { color: var(--color-accent-light); }
/* ---------- Photo placeholder grid (past-event gallery pages) ---------- */
.photo-placeholder {
aspect-ratio: 4 / 3;
background: var(--color-bg-alt);
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .4rem;
color: var(--color-text-muted);
font-size: .85rem;
text-align: center;
padding: 1rem;
}
.photo-placeholder__icon { font-size: 1.6rem; }
/* Responsive video embed (Past EMC Events gallery pages) — a plain 16:9 box
so the iframe scales with its container instead of using a fixed pixel
size; nothing else on the site embeds video yet. */
.video-embed {
position: relative;
aspect-ratio: 16 / 9;
background: var(--color-bg-alt);
border-radius: var(--radius-lg);
overflow: hidden;
}
.video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Photo gallery masonry (Past EMC Events category pages) — photos have
mixed aspect ratios, so a plain grid left uneven row gaps; CSS
multi-column layout packs them tightly with no cropping, stretching, or
fixed heights. Scoped to .event-gallery only — the unrelated .grid/
.grid-3 usages elsewhere (Programs, Events, Vision & Mission, etc.) are
untouched. Breakpoints match the site's existing .grid-3 breakpoints. */
.event-gallery {
column-count: 3;
column-gap: 12px;
}
.event-gallery > img {
width: 100%;
height: auto;
display: block;
margin: 0 0 12px;
break-inside: avoid;
}
@media (max-width: 960px) {
.event-gallery { column-count: 2; }
}
@media (max-width: 620px) {
.event-gallery { column-count: 1; }
}
/* ---------- Feature / split rows ---------- */
.split {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split-media {
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
min-height: 260px;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
}
.split-media::before {
content: "";
position: absolute; inset: 0;
background-image: url('../assets/pattern-islamic.svg');
background-repeat: repeat;
background-size: 90px 90px;
opacity: .35;
}
:root[data-theme="dark"] .split-media::before { opacity: .12; filter: invert(1) brightness(1.4); }
.split-media__mark { position: relative; opacity: .9; }
.split-media__mark svg { width: 84px; height: 84px; }
.split-media__photo {
position: relative;
align-self: stretch;
justify-self: stretch;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.list-check { list-style: none; padding: 0; margin: 1rem 0; }
.list-check li {
position: relative;
padding-left: 1.7em;
margin-bottom: .55em;
}
.list-check li::before {
content: "✓";
position: absolute; left: 0; top: 0;
color: var(--color-accent-text);
font-weight: 700;
}
/* ---------- Timeline / accordion (governance, programs) ---------- */
.accordion { border-top: 1px solid var(--color-border); }
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-item h3 { margin: 0; }
.accordion-trigger {
width: 100%;
text-align: left;
background: none;
border: none;
cursor: pointer;
padding: 1.1rem .2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--color-primary);
}
:root[data-theme="dark"] .accordion-trigger { color: var(--color-accent-light); }
.accordion-trigger .plus { transition: transform .2s ease; font-size: 1.3rem; color: var(--color-accent-text); flex-shrink: 0; }
.accordion-item.is-open .accordion-trigger .plus { transform: rotate(45deg); }
.accordion-panel {
max-height: 0;
overflow: hidden;
transition: max-height .25s ease;
}
.accordion-panel__inner { padding: 0 .2rem 1.2rem; color: var(--color-text-muted); }
/* ---------- Board / division cards ---------- */
.role-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1.2rem 1.3rem;
}
.role-card__title { font-weight: 600; color: var(--color-primary); }
:root[data-theme="dark"] .role-card__title { color: var(--color-accent-light); }
.role-card p { margin: .2rem 0 0; font-size: .92rem; }
/* ---------- Donate fund cards ---------- */
.fund-card { position: relative; }
.fund-card .tag { position: absolute; top: 1.2rem; right: 1.2rem; }
.donate-panel {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.8rem;
}
.amount-row { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0; }
.amount-btn {
border: 1.5px solid var(--color-border);
background: var(--color-bg-alt);
border-radius: 999px;
padding: .6em 1.2em;
font-weight: 600;
cursor: pointer;
font-family: var(--font-body);
}
.amount-btn[aria-pressed="true"] {
border-color: var(--color-primary);
background: var(--color-primary);
color: var(--color-on-primary);
}
.placeholder-note {
font-size: .82rem;
color: var(--color-text-muted);
border-left: 3px solid var(--color-accent);
padding: .4rem .9rem;
background: var(--color-bg-alt);
border-radius: 0 8px 8px 0;
}
/* ---------- Donate: direct payment card (bank transfer + MobilePay) ---------- */
.donate-payment-card {
display: grid;
grid-template-columns: 1fr auto;
gap: 2rem;
align-items: start;
max-width: 780px;
margin: 0 auto;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.8rem;
}
.donate-payment-card h3 { margin-top: 0; }
.donate-payment-details { margin: 0 0 1.5rem; }
.donate-payment-details__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem .8rem;
padding: .6rem 0;
border-bottom: 1px solid var(--color-border);
}
.donate-payment-details__row:last-child { border-bottom: none; }
.donate-payment-details__row dt { font-weight: 600; min-width: 9rem; margin: 0; }
.donate-payment-details__row dd { margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.donate-payment-mobilepay { margin: 0 0 1.5rem; }
.donate-qr {
text-align: center;
background: #fff;
border-radius: var(--radius-md);
padding: 1rem;
}
.donate-qr__frame {
width: 170px;
height: 170px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.donate-qr__frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.donate-qr__caption { font-size: .82rem; color: var(--color-text-muted); margin: .6rem 0 0; }
@media (max-width: 720px) {
.donate-payment-card {
grid-template-columns: 1fr;
}
.donate-payment-card__qr {
justify-self: center;
width: min(100%, 280px);
}
.donate-qr__frame {
width: 220px;
height: 220px;
}
}
/* ---------- Forms ---------- */
.form-field { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.form-field label, .form-field-label { font-weight: 600; font-size: .9rem; display: block; }
.required-mark { color: var(--color-accent-text); }
.form-field input, .form-field select, .form-field textarea {
font-family: var(--font-body);
font-size: .96rem;
padding: .7em .85em;
border-radius: 8px;
border: 1.5px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
min-height: 44px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
border-color: var(--color-primary);
}
.form-note { font-size: .82rem; color: var(--color-text-muted); }
.form-success {
display: none;
background: var(--color-bg-alt);
border: 1px solid var(--color-accent);
border-radius: var(--radius-md);
padding: 1rem 1.2rem;
margin-top: 1rem;
font-size: .92rem;
}
.form-success.is-visible { display: block; }
.map-placeholder {
background: var(--color-bg-alt);
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
min-height: 280px;
display: grid;
place-items: center;
text-align: center;
color: var(--color-text-muted);
padding: 2rem;
gap: .4rem;
}
/* ---------- Footer ---------- */
.site-footer {
background: var(--color-primary-dark);
color: color-mix(in srgb, var(--color-on-primary) 92%, transparent);
margin-top: 4rem;
}
:root[data-theme="dark"] .site-footer { background: #0B1714; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 2rem;
padding: 3.2rem 0 2rem;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.footer-brand__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.site-footer h4 {
color: color-mix(in srgb, var(--color-on-primary) 92%, transparent);
font-family: var(--font-body);
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: .9rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .6rem; font-size: .92rem; }
.footer-tagline { font-size: .92rem; opacity: .85; max-width: 30ch; }
.footer-social { display: flex; gap: .6rem; margin-top: 1rem; }
.footer-social a {
width: 44px; height: 44px;
border: 1px solid rgba(255,255,255,.25);
border-radius: 999px;
display: grid; place-items: center;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.14);
padding: 1.2rem 0 1.6rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: .6rem;
font-size: .82rem;
opacity: .8;
}
/* ---------- Utility ---------- */
.mb-0 { margin-bottom: 0; }
.mb-group { margin-bottom: 3rem; }
.mt-lg { margin-top: 2rem; }
.text-center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: .6rem; }
/* Narrow, centered blocks reused across CTA copy, the donate panel, and accordions */
.cta-copy { max-width: 520px; margin: 0 auto 1.5rem; }
.panel-narrow { max-width: 640px; margin: 0 auto; }
.list-narrow { max-width: 760px; margin: 0 auto; }
/* Cards shown on a dark teal (.section-primary) background */
.card-on-primary {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.18);
color: var(--color-on-primary);
}
.card-on-primary h3 { color: var(--color-on-primary); }
.card-on-primary p { color: color-mix(in srgb, var(--color-on-primary) 78%, transparent); }
.back-to-top {
position: fixed;
right: 1.2rem;
bottom: 1.2rem;
width: 44px; height: 44px;
border-radius: 999px;
background: var(--color-primary);
color: var(--color-on-primary);
border: none;
display: none;
place-items: center;
cursor: pointer;
box-shadow: var(--shadow-soft);
z-index: 30;
font-size: 1.1rem;
}
.back-to-top.is-visible { display: grid; }
.noscript-notice {
background: var(--color-bg-alt);
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
text-align: center;
font-size: .88rem;
padding: .7em 1rem;
}