/* Theme Name: Al-Murtaza Society Theme URI: https://almurtazasocietyofficial.com Author: Al-Murtaza Society Description: A custom theme for Al-Murtaza Society — Iznik-tile-inspired colors (turquoise, cobalt, coral, gold, sage) on a light paper ground, with a crest logo, scroll reveals, hover states, editable Customizer colors/prayer-times/daily-recitation, and Courses/Events as manageable post types. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: almurtaza */ :root{ --paper-0:#FFFDF8; --paper-50:#FBF3E4; --paper-100:#F4E9D2; --ink-900:#2B2118; --ink-700:#5B4C3B; --ink-500:#8B7A64; --turquoise-700:#0B6B6F; --turquoise-600:#0E8A8F; --turquoise-100:#DBF1F0; --cobalt-700:#1E3A6B; --cobalt-600:#2A4B8D; --cobalt-100:#E1E8F7; --coral-700:#B33A22; --coral-600:#D8492E; --coral-100:#FBE3DC; --gold-700:#A87A1E; --gold-600:#D2A02A; --gold-100:#FBF0D2; --sage-700:#38684A; --sage-600:#4C8562; --sage-100:#E3F1E7; --line-ink-soft:rgba(43,33,24,.16); --line-ink-faint:rgba(43,33,24,.09); --radius-card:8px; --maxw:1180px; } /* Note: --turquoise-600, --cobalt-600, --coral-600, --gold-600, --sage-600, --paper-0 and --ink-900 are re-declared dynamically in from Appearance → Customize → Al-Murtaza: Brand Colors (see functions.php, am_dynamic_css()) — the values above are just the defaults. */ *{box-sizing:border-box;} html{font-size:16px;-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden;} body{ margin:0; max-width:100%; overflow-x:hidden; background:var(--paper-0); color:var(--ink-900); font-family:'Catamaran',-apple-system,'Segoe UI',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;} ul{list-style:none;margin:0;padding:0;} h1,h2,h3{ font-family:'Amiri',Georgia,'Times New Roman',serif; font-weight:700; line-height:1.14; text-wrap:balance; margin:0; color:var(--ink-900); } .eyebrow{ display:flex; align-items:center; gap:.6rem; font-family:'Catamaran',sans-serif; font-weight:700; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-700); } .eyebrow .star8{flex:none;} .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:clamp(20px,5vw,48px); } section{padding-block:clamp(52px,8vw,96px);} section p{color:var(--ink-700);} .star8{width:1em;height:1em;display:inline-block;} .star8 svg{width:100%;height:100%;display:block;} .tile-ribbon{ height:9px; background:repeating-linear-gradient(135deg, var(--turquoise-600) 0 16px, var(--coral-600) 16px 32px, var(--gold-600) 32px 48px, var(--sage-600) 48px 64px, var(--cobalt-600) 64px 80px); } .lattice{ position:absolute; inset:0; background-image: repeating-linear-gradient(45deg, var(--lattice-line,rgba(42,75,141,.05)) 0 1px, transparent 1px 44px), repeating-linear-gradient(-45deg, var(--lattice-line,rgba(42,75,141,.05)) 0 1px, transparent 1px 44px); pointer-events:none; } /* -------- scroll reveal (progressive enhancement: safe when JS is off) -------- */ .reveal{opacity:1; transform:none;} .js-revealing .reveal{ opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease; } .js-revealing .reveal.is-visible{opacity:1; transform:none;} /* directional variants — pair with class="reveal reveal-left" / "reveal reveal-right" for elements that should slide in sideways instead of rising up (e.g. the two halves of a text/list split). Falls back to the normal fade-up if JS is off. */ .reveal-left, .reveal-right{opacity:1; transform:none;} .js-revealing .reveal.reveal-left{transform:translateX(-28px);} .js-revealing .reveal.reveal-right{transform:translateX(28px);} .js-revealing .reveal.reveal-left.is-visible, .js-revealing .reveal.reveal-right.is-visible{transform:none;} .stagger > *:nth-child(1){transition-delay:0s;} .stagger > *:nth-child(2){transition-delay:.07s;} .stagger > *:nth-child(3){transition-delay:.14s;} .stagger > *:nth-child(4){transition-delay:.21s;} .stagger > *:nth-child(5){transition-delay:.28s;} .stagger > *:nth-child(6){transition-delay:.35s;} @media (prefers-reduced-motion:reduce){ .js-revealing .reveal{opacity:1 !important; transform:none !important; transition:none !important;} } /* ============================== topbar ============================== */ .topbar{ background:var(--cobalt-700); color:#F1F5FC; font-size:.82rem; } .topbar .wrap{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:.5rem; flex-wrap:wrap; } .topbar-left{display:flex; gap:1.4rem; flex-wrap:wrap; opacity:.92; min-width:0;} .topbar-left span{white-space:normal;} .social-row{display:flex; gap:.7rem;} .social-row a{ width:25px;height:25px;border-radius:50%; border:1px solid rgba(255,255,255,.35); display:flex;align-items:center;justify-content:center; color:#F1F5FC; transition:background .15s,color .15s,transform .15s,border-color .15s; } .social-row a:hover{background:var(--gold-600); color:var(--cobalt-700); border-color:var(--gold-600); transform:translateY(-2px);} .social-row svg{width:12px;height:12px;} .teacher-login-link{ width:auto !important; height:auto !important; border-radius:999px !important; padding:.32rem .8rem; gap:.4rem; font-size:.78rem; font-weight:600; text-decoration:none; white-space:nowrap; } .teacher-login-link svg{width:12px;height:12px;} /* ============================== header ============================== */ /* .header-wrap = the whole sticky header: a fixed logo panel on the left (like the real site's Tabligh header) plus the topbar+nav stacked on the right. On mobile the panel collapses away and a small inline brand (badge+name) takes its place inside the nav row instead — see the .brand-mobile rules and the 980px breakpoint below. */ .header-wrap{ display:flex; align-items:stretch; position:sticky; top:0; z-index:40; background:var(--paper-0); border-bottom:1px solid var(--line-ink-faint); transition:box-shadow .25s ease; } .header-wrap.is-scrolled{box-shadow:0 12px 26px -20px rgba(43,33,24,.4);} .header-right{flex:1; min-width:0; display:flex; flex-direction:column;} .logo-panel{ flex:none; width:clamp(150px,15vw,220px); display:flex; align-items:center; justify-content:center; background:var(--turquoise-600); position:relative; text-decoration:none; } .logo-panel::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--gold-600), var(--coral-600), var(--sage-600)); } .logo-panel .badge{ display:flex; align-items:center; justify-content:center; width:clamp(76px,8vw,116px); height:clamp(76px,8vw,116px); transition:transform .3s ease; filter:drop-shadow(0 8px 18px rgba(20,20,20,.22)); } .logo-panel:hover .badge{transform:rotate(6deg) scale(1.05);} .logo-panel .badge-real-logo img{width:100%; height:100%; object-fit:contain; border-radius:50%; background:var(--paper-0);} /* The raw crest (placeholder logo, before a real logo is uploaded in Customizer > Site Identity) has no width/height of its own beyond its viewBox, so — in EVERY context this badge markup is used (header panel, mobile inline brand, footer) — it must be told to fill its .badge wrapper exactly, or it renders at browser-default size instead of the small badge it's meant to be. */ .badge svg{width:100%; height:100%; display:block;} .nav-row .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:.7rem; gap:1.5rem; flex-wrap:wrap; } /* Generic brand mark (badge + name). Used as-is in the footer; inside the header's nav row it also carries .brand-mobile, which keeps it hidden until the side logo panel is hidden on small screens — see the 980px breakpoint below. */ .brand{display:flex; align-items:center; gap:.7rem; text-decoration:none;} .brand .badge{width:44px; height:44px; flex:none; transition:transform .3s ease; display:flex; align-items:center; justify-content:center;} .brand:hover .badge{transform:rotate(8deg) scale(1.04);} .badge-real-logo img{width:100%; height:100%; object-fit:contain; border-radius:50%;} .brand-text{display:flex; flex-direction:column; line-height:1.15;} .header-right .brand-mobile{display:none;} .brand-text strong{ font-family:'Amiri',serif; font-size:1.3rem; color:var(--ink-900); letter-spacing:.01em; } .brand-text span{ font-size:.64rem; letter-spacing:.17em; text-transform:uppercase; color:var(--turquoise-700); font-weight:700; } nav.primary-nav{display:flex; align-items:center; gap:clamp(1rem,2vw,2.1rem); flex-wrap:wrap;} nav.primary-nav li{list-style:none;} nav.primary-nav a{ font-size:.92rem; font-weight:600; text-decoration:none; color:var(--ink-700); position:relative; padding-block:.3rem; display:inline-block; } nav.primary-nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--coral-600); transition:right .2s ease; } nav.primary-nav a:hover{color:var(--ink-900);} nav.primary-nav a:hover::after{right:0;} nav.primary-nav a.is-active{color:var(--cobalt-700);} nav.primary-nav a.is-active::after{right:0; background:var(--cobalt-600);} .header-actions{display:flex; align-items:center; gap:1rem;} .btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:'Catamaran',sans-serif; font-weight:700; font-size:.88rem; padding:.72rem 1.35rem; border-radius:6px; text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } .btn:hover{transform:translateY(-2px);} .btn-coral{background:var(--coral-600); color:#fff; box-shadow:0 10px 22px -12px rgba(216,73,46,.55);} .btn-coral:hover{background:var(--coral-700); box-shadow:0 16px 28px -14px rgba(216,73,46,.6);} .btn-outline{border-color:var(--line-ink-soft); color:var(--ink-900);} .btn-outline:hover{border-color:var(--cobalt-600); background:var(--cobalt-100);} .btn-ink{background:var(--ink-900); color:#FFFDF8;} .btn-ink:hover{background:var(--cobalt-700);} .nav-toggle{ display:none; background:none; border:1px solid var(--line-ink-soft); border-radius:6px; width:40px; height:38px; color:var(--ink-900); align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s,color .15s; } .nav-toggle:hover{border-color:var(--cobalt-600); color:var(--cobalt-600);} /* ============================== hero ============================== */ .hero{ position:relative; overflow:hidden; background: radial-gradient(ellipse 60% 55% at 12% 0%, var(--turquoise-100), transparent 65%), radial-gradient(ellipse 55% 60% at 100% 15%, var(--gold-100), transparent 60%), radial-gradient(ellipse 50% 45% at 75% 100%, var(--coral-100), transparent 60%), var(--paper-0); padding-bottom:0; } .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:start; padding-block:clamp(52px,8vw,96px) clamp(28px,5vw,48px); } .hero-copy .eyebrow{color:var(--coral-600);} .hero-copy h1{ margin-top:1.1rem; font-size:clamp(2.35rem,4.6vw,3.9rem); } .hero-copy h1 em{color:var(--cobalt-600); font-style:italic;} .hero-copy p.lede{ margin-top:1.3rem; max-width:46ch; font-size:1.1rem; color:var(--ink-700); } .hero-ctas{display:flex; gap:1rem; margin-top:2.1rem; flex-wrap:wrap;} .hero-anim > *{animation:riseIn .7s cubic-bezier(.2,.7,.3,1) both;} .hero-anim > *:nth-child(2){animation-delay:.08s;} @keyframes riseIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}} @media (prefers-reduced-motion:reduce){ .hero-anim > *{animation:none !important; opacity:1 !important; transform:none !important;} } .prayer-panel{ background:var(--paper-0); border:1px solid var(--line-ink-soft); border-radius:var(--radius-card); padding:0 1.6rem 1.3rem; position:relative; overflow:hidden; box-shadow:0 22px 44px -30px rgba(43,33,24,.35); margin-top:clamp(0px,3vw,2.6rem); } .prayer-panel .ribbon-top{ height:6px; margin:0 -1.6rem 1.3rem; background:linear-gradient(90deg, var(--turquoise-600), var(--cobalt-600), var(--coral-600), var(--gold-600)); } .prayer-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1rem;} .prayer-head .eyebrow{color:var(--cobalt-600);} .prayer-list{display:flex; flex-direction:column;} .prayer-row{ display:grid; grid-template-columns:1fr auto auto; gap:.75rem; align-items:center; padding:.62rem .4rem; margin-inline:-.4rem; border-radius:5px; border-bottom:1px solid var(--line-ink-faint); font-size:.92rem; transition:background .15s ease; } .prayer-row:not(.is-current):hover{background:var(--paper-50);} .prayer-row:last-of-type{border-bottom:none;} .prayer-row .name{font-weight:700; letter-spacing:.03em; color:var(--ink-900);} .prayer-row .adhan{font-variant-numeric:tabular-nums; color:var(--ink-700);} .prayer-row .iqamah{ font-variant-numeric:tabular-nums; font-size:.78rem; color:var(--turquoise-700); text-align:right; } .prayer-row.is-current{ background:var(--gold-100); } .prayer-row.is-current .name{color:var(--coral-600);} .prayer-row.is-current .name::before{content:'٭ '; color:var(--gold-700);} .prayer-note{ margin-top:1rem; font-size:.72rem; letter-spacing:.03em; color:var(--ink-500); border-top:1px dashed var(--line-ink-faint); padding-top:.8rem; } .hero-skyline{ width:100%; height:clamp(96px,15vw,168px); position:relative; z-index:1; } .hero-skyline svg{width:100%; height:100%; display:block;} /* ============================== daily recitation ============================== */ .recitation-bar{ background:var(--gold-100); padding-block:clamp(2.2rem,4vw,3rem); position:relative; overflow:hidden; } .recitation-card{ max-width:720px; margin-inline:auto; position:relative; z-index:1; background:var(--paper-0); border:1px solid var(--line-ink-soft); border-radius:var(--radius-card); box-shadow:0 22px 44px -30px rgba(43,33,24,.35); padding:0 clamp(1.2rem,4vw,2rem) clamp(1.4rem,3vw,1.9rem); overflow:hidden; } .recitation-card .ribbon-top{ height:6px; margin:0 -2rem 1.3rem; background:linear-gradient(90deg, var(--gold-600), var(--coral-600), var(--turquoise-600), var(--cobalt-600)); } .recitation-label{ color:var(--gold-700); display:flex; align-items:center; justify-content:center; gap:.5rem; text-align:center; } .recitation-label .star8{color:var(--coral-600);} .recitation-empty{ margin-top:.9rem; text-align:center; font-size:.88rem; color:var(--ink-700); font-style:italic; } .recitation-info{ text-align:center; margin-top:.6rem; } .recitation-info strong{ display:block; font-family:'Amiri',serif; font-size:clamp(1.35rem,3vw,1.8rem); color:var(--ink-900); } .recitation-info .reciter{ display:block; margin-top:.25rem; font-size:.88rem; color:var(--ink-700); } .player{ display:flex; align-items:center; gap:.9rem; margin-top:1.5rem; } .player-play{ flex:none; width:50px; height:50px; border-radius:50%; border:none; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, var(--turquoise-600), var(--cobalt-600)); box-shadow:0 10px 22px -10px rgba(14,138,143,.55); transition:transform .18s ease, box-shadow .18s ease; } .player-play:hover{ transform:scale(1.06); } .player-play svg{width:18px; height:18px; display:block;} .player-play .i-pause-icon{display:none;} .player-play.is-playing .i-play-icon{display:none;} .player-play.is-playing .i-pause-icon{display:block;} .player-track{flex:1; min-width:0;} .player-progress{ height:6px; border-radius:99px; background:var(--paper-100); cursor:pointer; position:relative; overflow:hidden; } .player-progress-fill{ position:absolute; inset:0 auto 0 0; width:0%; border-radius:99px; background:linear-gradient(90deg, var(--gold-600), var(--coral-600)); } .player-time{ display:flex; justify-content:space-between; margin-top:.4rem; font-size:.72rem; font-variant-numeric:tabular-nums; color:var(--ink-500); } .player-volume{ flex:none; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; background:transparent; color:var(--ink-700); transition:background .15s ease, color .15s ease; } .player-volume:hover{background:var(--paper-50); color:var(--turquoise-700);} .player-volume svg{width:17px; height:17px; display:block;} .player-volume .i-mute-icon{display:none;} .player-volume.is-muted .i-vol-icon{display:none;} .player-volume.is-muted .i-mute-icon{display:block;} .player-volume-slider{ flex:none; width:72px; accent-color:var(--turquoise-600); cursor:pointer; } @media (max-width:480px){ .player-volume-slider{width:44px;} } /* ============================== section shared ============================== */ .section-head{max-width:56ch; margin-bottom:clamp(2rem,4vw,3.2rem);} .section-head h2{font-size:clamp(1.7rem,3vw,2.5rem); margin-top:.7rem; color:var(--ink-900);} .section-head p{margin-top:.9rem; font-size:1.03rem; color:var(--ink-700);} .section-head p em{color:var(--ink-500); font-style:normal; font-size:.85rem;} /* ============================== about ============================== */ .about{background:var(--paper-0);} .about .eyebrow{color:var(--sage-600);} .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.2rem,5vw,4rem); align-items:start;} .about-grid p{color:var(--ink-700); font-size:1.02rem; max-width:52ch;} .about-grid p + p{margin-top:1rem;} .objectives{display:flex; flex-direction:column;} .objectives li{ display:flex; gap:.9rem; padding-block:.85rem; border-bottom:1px solid var(--line-ink-faint); transition:padding-left .18s ease; border-radius:4px; } .objectives li:hover{padding-left:.4rem; background:var(--paper-50);} .objectives li:first-child{padding-top:0;} .objectives li:last-child{border-bottom:none;} .objectives .star8{width:18px; height:18px; flex:none; margin-top:.2rem; transition:transform .2s ease;} .objectives li:hover .star8{transform:rotate(20deg) scale(1.15);} .objectives li:nth-child(1) .star8{color:var(--coral-600);} .objectives li:nth-child(2) .star8{color:var(--turquoise-600);} .objectives li:nth-child(3) .star8{color:var(--gold-600);} .objectives li:nth-child(4) .star8{color:var(--sage-600);} .objectives li:nth-child(5) .star8{color:var(--cobalt-600);} .objectives strong{display:block; font-size:1rem; color:var(--ink-900);} .objectives span{font-size:.92rem; color:var(--ink-700);} /* ============================== courses ============================== */ .courses{background:var(--paper-50); position:relative;} .courses .eyebrow{color:var(--cobalt-600);} .course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; position:relative; z-index:1; } .course-card{ --accent:var(--cobalt-600); --tint:var(--cobalt-100); background:var(--paper-0); border:1px solid var(--line-ink-faint); border-top:4px solid var(--accent); border-radius:var(--radius-card); padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.85rem; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .course-card:hover{transform:translateY(-5px); box-shadow:0 22px 34px -22px rgba(43,33,24,.32);} .course-card:hover .course-icon{transform:scale(1.1) rotate(-4deg);} .course-card:nth-child(2){--accent:var(--turquoise-600); --tint:var(--turquoise-100);} .course-card:nth-child(3){--accent:var(--coral-600); --tint:var(--coral-100);} .course-card:nth-child(4){--accent:var(--gold-600); --tint:var(--gold-100);} .course-card:nth-child(5){--accent:var(--sage-600); --tint:var(--sage-100);} .course-card:nth-child(6){--accent:var(--cobalt-600); --tint:var(--cobalt-100);} .course-card.flagship{ grid-column:span 2; background:linear-gradient(155deg,var(--paper-0),var(--gold-100) 180%); border-top:none; border-image:linear-gradient(90deg,var(--cobalt-600),var(--gold-600)) 1; padding:2rem 2.1rem; flex-direction:row; gap:1.8rem; align-items:flex-start; } .course-icon{ width:40px; height:40px; flex:none; color:var(--accent); background:var(--tint); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .2s ease; } .course-icon svg{width:19px; height:19px;} .flagship .course-icon{width:52px; height:52px; color:var(--cobalt-600); background:var(--cobalt-100);} .flagship .course-icon svg{width:24px; height:24px;} .course-card h3{font-size:1.14rem; color:var(--ink-900); font-family:'Amiri',serif;} .flagship h3{font-size:1.5rem;} .course-card .tag{ align-self:flex-start; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:#fff; background:var(--cobalt-600); padding:.22rem .55rem; border-radius:3px; } .course-card p{font-size:.92rem; color:var(--ink-700); margin:0;} /* .learn is also reused outside course cards (homepage "More about us" / "Read more" links) — the base rule here covers every use; the .course-card rule right after it just retints the color/hover to match each card's accent color. */ .learn{ margin-top:.3rem; font-size:.84rem; font-weight:700; color:var(--cobalt-600); text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; transition:gap .15s ease; } .learn:hover{gap:.6rem;} .learn svg{width:13px; height:13px; flex:none;} .course-card .learn{color:var(--accent);} .course-card .learn:hover{gap:.6rem;} .flagship .learn{color:var(--cobalt-700);} /* ============================== audience ============================== */ .audience{background:var(--paper-0); border-top:1px solid var(--line-ink-faint); border-bottom:1px solid var(--line-ink-faint);} .audience .wrap{ display:flex; align-items:center; justify-content:space-between; gap:2.4rem; flex-wrap:wrap; padding-block:clamp(2rem,4vw,2.8rem) !important; } .audience-lede{max-width:26ch; flex:none; padding-right:2.4rem; border-right:1px solid var(--line-ink-soft);} .audience-lede .eyebrow{color:var(--gold-700);} .audience-lede h2{font-size:1.5rem; margin-top:.5rem; color:var(--ink-900);} .audience-chips{display:flex; gap:.7rem; flex-wrap:wrap; flex:1; justify-content:flex-end;} .chip{ border-radius:999px; padding:.55rem 1.15rem; font-size:.88rem; font-weight:700; border:1px solid transparent; transition:transform .18s ease, box-shadow .18s ease; } .chip:hover{transform:translateY(-3px) rotate(-1deg); box-shadow:0 12px 20px -12px rgba(43,33,24,.3);} .chip:nth-child(5n+1){background:var(--coral-100); color:var(--coral-700);} .chip:nth-child(5n+2){background:var(--turquoise-100); color:var(--turquoise-700);} .chip:nth-child(5n+3){background:var(--gold-100); color:var(--gold-700);} .chip:nth-child(5n+4){background:var(--sage-100); color:var(--sage-700);} .chip:nth-child(5n+5){background:var(--cobalt-100); color:var(--cobalt-700);} /* ============================== welfare ============================== */ .welfare{background:var(--turquoise-100); position:relative; overflow:hidden;} .welfare .lattice{--lattice-line:rgba(11,107,111,.09);} .welfare-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.3fr .7fr; gap:2.5rem; align-items:center; } .welfare .eyebrow{color:var(--turquoise-700);} .welfare h2{font-size:clamp(1.7rem,3vw,2.35rem); margin-top:.6rem;} .welfare p{font-size:1.03rem; margin-top:1rem; max-width:54ch; color:var(--ink-700);} .welfare-cta{ display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; border-left:1px solid var(--turquoise-700); padding-left:2rem; } .welfare-cta .big{font-family:'Amiri',serif; font-size:1.2rem; color:var(--ink-900);} /* ============================== events ============================== */ .events{background:var(--paper-0);} .events .eyebrow{color:var(--coral-600);} .event-list{border-top:1px solid var(--line-ink-soft);} .event-row{ display:grid; grid-template-columns:150px 1fr auto; gap:1.6rem; align-items:center; padding:1.5rem .6rem; margin-inline:-.6rem; border-radius:8px; border-bottom:1px solid var(--line-ink-soft); transition:background .18s ease, transform .18s ease; } .event-row:hover{background:var(--paper-50); transform:translateX(4px);} .event-when{ font-family:'Catamaran',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .6rem; border-radius:5px; width:fit-content; background:var(--coral-100); color:var(--coral-700); } .event-row:nth-child(2) .event-when{background:var(--turquoise-100); color:var(--turquoise-700);} .event-row:nth-child(3) .event-when{background:var(--gold-100); color:var(--gold-700);} .event-body h3{font-family:'Amiri',serif; font-size:1.2rem; color:var(--ink-900); font-weight:700; display:flex; align-items:center; gap:.5rem;} .event-body p{margin:.35rem 0 0; font-size:.94rem; color:var(--ink-700); max-width:56ch;} .event-row .star8{width:15px;height:15px; color:var(--gold-600);} /* ============================== visit ============================== */ .visit{background:var(--paper-50); position:relative; overflow:hidden;} .visit .lattice{--lattice-line:rgba(42,75,141,.06);} .visit .eyebrow{color:var(--cobalt-600);} .visit-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem);} .visit h2{font-size:clamp(1.7rem,3vw,2.4rem);} .visit p.lede{margin-top:1rem; color:var(--ink-700); max-width:44ch;} .contact-form{ display:flex; flex-direction:column; gap:.85rem; margin-top:1.8rem; max-width:32rem; padding:1.5rem; border-radius:14px; background:var(--paper-0); border:1px solid var(--line-ink-soft); } .contact-form input, .contact-form textarea{ font-family:'Catamaran',sans-serif; font-size:.94rem; color:var(--ink-900); background:var(--paper-50); border:1px solid var(--line-ink-soft); border-radius:8px; padding:.75rem .9rem; resize:vertical; transition:border-color .15s ease, box-shadow .15s ease; } .contact-form input::placeholder, .contact-form textarea::placeholder{color:var(--ink-500);} .contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--turquoise-600); box-shadow:0 0 0 3px var(--turquoise-100); } .contact-form button{align-self:flex-start; margin-top:.3rem;} .contact-cards{display:flex; flex-direction:column; gap:1rem;} .contact-card{ display:flex; gap:1rem; align-items:flex-start; border:1px solid var(--line-ink-faint); border-radius:var(--radius-card); padding:1.25rem 1.4rem; background:var(--paper-0); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .contact-card:hover{transform:translateY(-3px); box-shadow:0 16px 28px -20px rgba(43,33,24,.3); border-color:var(--line-ink-soft);} .contact-card .ci{ width:34px; height:34px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .18s ease; background:var(--cobalt-100); color:var(--cobalt-600); } .contact-card:hover .ci{transform:scale(1.1);} .contact-card:nth-child(1) .ci{background:var(--coral-100); color:var(--coral-600);} .contact-card:nth-child(2) .ci{background:var(--turquoise-100); color:var(--turquoise-600);} .contact-card:nth-child(3) .ci{background:var(--gold-100); color:var(--gold-700);} .contact-card .ci svg{width:16px; height:16px;} .contact-card strong{display:block; font-size:.98rem; color:var(--ink-900);} .contact-card span{font-size:.88rem; color:var(--ink-700);} /* ============================== photo banner (parallax) ============================== A reusable full-width photo section — the picture genuinely stays put in the window while the section scrolls over it (a real CSS "fixed" background), which is the actual "stays still" look, with none of the direction-reversing wobble a JS approximation can introduce. Applied on every screen size, including mobile. Drop in with a page-specific background photo; until that photo file exists on the server, a themed gradient + pattern shows in its place instead of a broken image, so the section still looks finished either way. */ .photo-banner{position:relative; overflow:hidden; min-height:clamp(300px,42vw,440px); display:flex; align-items:center; justify-content:center;} .photo-banner-bg{ position:absolute; inset:0; z-index:0; background-image:var(--banner-img, none), linear-gradient(135deg, var(--turquoise-700), var(--cobalt-700)); background-size:cover, cover; background-position:center, center; background-repeat:no-repeat, no-repeat; background-attachment:fixed, fixed; } /* Phones/tablets briefly resize the visible page area as the address bar hides and shows while you scroll. "cover" sizing reacts to that live height, which is what reads as a tiny zoom mid-scroll. "lvh" is a screen- height unit phones keep steady (it's fixed to the address bar's hidden state) instead of the live, ever-changing one, so pinning the photo's size to it stops the resizing without changing how it looks. The gradient placeholder layer is unaffected either way and stays on "cover". Browsers too old to understand "lvh" just ignore this whole line and keep the normal "cover" sizing from above. */ @media (max-width:768px){ .photo-banner-bg{ background-size:auto 105lvh, cover; } } .photo-banner-pattern{ position:absolute; inset:0; z-index:0; opacity:.15; pointer-events:none; background-image:radial-gradient(var(--paper-0) 1.5px, transparent 1.5px); background-size:22px 22px; } .photo-banner-overlay{position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(20,14,8,.48), rgba(20,14,8,.62));} .photo-banner-content{position:relative; z-index:1; text-align:center; max-width:58ch; margin-inline:auto; padding:clamp(2.4rem,6vw,3.6rem) 1.6rem;} .photo-banner-content .eyebrow{justify-content:center; color:var(--gold-100);} .photo-banner-content h2{color:#FFFDF8; margin-top:.6rem; font-size:clamp(1.6rem,3.4vw,2.3rem);} .photo-banner-content p{color:rgba(255,253,248,.92); margin-top:.9rem; font-size:1.02rem;} .photo-banner-content .btn{margin-top:1.3rem;} /* ============================== gallery ============================== */ .gallery-section{background:var(--paper-0);} .gallery-section .eyebrow{color:var(--coral-600);} .empty-note{color:var(--ink-500); font-style:italic; font-size:.95rem;} .gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.2rem; } .gallery-item{ position:relative; border-radius:var(--radius-card); overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line-ink-faint); background:var(--paper-50); box-shadow:0 16px 30px -24px rgba(43,33,24,.4); display:block; text-decoration:none; } /* .parallax-img (the inner wrapper) gets the scroll-driven transform from main.js, sized taller than its frame so the drift never shows an edge; the inside keeps its own separate hover-zoom transform, so the two effects never fight over the same style property. */ .gallery-item .parallax-img{position:absolute; inset:-15% 0; height:130%; will-change:transform;} .gallery-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;} .gallery-item:hover img{transform:scale(1.07);} .gallery-item .cap{ position:absolute; left:0; right:0; bottom:0; padding:.7rem .9rem .6rem; background:linear-gradient(0deg,rgba(20,14,8,.78),rgba(20,14,8,0)); color:#FFFDF8; font-size:.86rem; font-weight:600; opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease; } .gallery-item:hover .cap{opacity:1; transform:translateY(0);} /* ============================== azkaar ============================== */ .azkaar-section{background:var(--paper-50);} .azkaar-section .eyebrow{color:var(--sage-600);} /* Morning / Evening / whatever categories have actually been entered in the admin panel — built from the real data, not a fixed list, so it always matches what's there (see azkaar.php). Hidden entirely when there's only one category (or none) to switch between; no "All" option, one is always selected. */ .azkaar-tabs{ display:flex; flex-wrap:wrap; gap:.4rem; background:var(--paper-0); padding:.4rem; border-radius:999px; border:1px solid var(--line-ink-faint); box-shadow:0 16px 30px -26px rgba(43,33,24,.35); margin-bottom:1.4rem; } .azkaar-tabs a{ flex:1 1 auto; text-align:center; padding:.62rem .9rem; border-radius:999px; text-decoration:none; font-weight:700; font-size:.86rem; color:var(--ink-700); } .azkaar-tabs a.active{background:var(--turquoise-700); color:var(--paper-0);} .azkaar-list{display:flex; flex-direction:column; gap:1.2rem;} .azkaar-card{ background:var(--paper-0); border:1px solid var(--line-ink-faint); border-left:4px solid var(--sage-600); border-radius:var(--radius-card); padding:1.4rem 1.6rem; box-shadow:0 16px 30px -26px rgba(43,33,24,.35); } .azkaar-card-head{display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem;} .azkaar-num{ width:26px; height:26px; border-radius:50%; flex-shrink:0; background:var(--turquoise-700); color:var(--paper-0); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; font-family:'Catamaran',sans-serif; } .azkaar-card .cat{ display:inline-block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--sage-700,var(--sage-600)); background:var(--sage-100); padding:.2rem .55rem; border-radius:3px; } .azkaar-card .ar{ direction:rtl; font-family:'Amiri',serif; font-size:1.55rem; line-height:2; color:var(--ink-900); margin:.2rem 0 .9rem; text-align:right; background:var(--paper-50); border-right:4px solid var(--gold-600); border-radius:10px; padding:1rem 1.1rem; } .azkaar-card .translit{font-style:italic; color:var(--ink-500); font-size:.92rem; margin:.3rem 0 .7rem;} .azkaar-card .translation{ color:var(--ink-700); font-size:.96rem; margin-top:.3rem; background:var(--paper-100); border-radius:10px; padding:.85rem 1rem; } /* The hadith/dua reference — its own clearly-visible badge instead of a line buried inside the translation paragraph. */ .azkaar-card .azkaar-ref{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.8rem; padding:.4rem .8rem; background:var(--gold-100); color:var(--gold-700); border-radius:999px; font-size:.78rem; font-weight:700; font-family:'Catamaran',sans-serif; } .azkaar-card .azkaar-ref svg{flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;} @media (max-width:480px){ .azkaar-card .ar{font-size:1.3rem; padding:.85rem .9rem;} .azkaar-tabs a{font-size:.78rem; padding:.55rem .5rem;} } /* Scroll-to-top — small floating button, shown once you've scrolled a bit. Purely a convenience; if its JS ever fails to run the button just never appears, nothing else on the page depends on it. */ .scroll-top{ position:fixed; right:20px; bottom:24px; width:46px; height:46px; background:var(--gold-600); color:#fff; border-radius:50%; display:none; align-items:center; justify-content:center; box-shadow:0 16px 30px -18px rgba(43,33,24,.45); cursor:pointer; z-index:40; border:none; } .scroll-top.show{display:flex;} @media print{ .scroll-top{display:none !important;} } /* ============================== highlights (news feed) ============================== */ .highlights-section{background:var(--paper-0);} .highlights-section .eyebrow{color:var(--gold-700);} .highlight-list{display:flex; flex-direction:column; gap:1.4rem;} .highlight-post{ background:var(--paper-0); border:1px solid var(--line-ink-faint); border-radius:var(--radius-card); padding:1.6rem 1.7rem; box-shadow:0 16px 30px -26px rgba(43,33,24,.35); } .highlight-post time{ display:block; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--gold-700); margin-bottom:.5rem; } .highlight-post h3{font-family:'Amiri',serif; font-size:1.35rem; color:var(--ink-900);} .highlight-post .body{margin-top:.7rem; color:var(--ink-700); font-size:.98rem; white-space:pre-line;} /* ============================== generic page content (page.php / index.php) ============================== */ .am-page-content h1,.am-page-content h2,.am-page-content h3,.am-page-content h4{margin-top:1.6rem; margin-bottom:.6rem;} .am-page-content h1:first-child,.am-page-content h2:first-child{margin-top:0;} .am-page-content p{margin:.9rem 0; color:var(--ink-700); font-size:1.02rem;} .am-page-content ul,.am-page-content ol{margin:.9rem 0; padding-left:1.4rem; color:var(--ink-700);} .am-page-content li{margin-top:.4rem;} .am-page-content a{color:var(--cobalt-600); text-decoration-color:var(--cobalt-100);} .am-page-content img{border-radius:var(--radius-card); margin:1.2rem 0;} .am-page-content blockquote{ border-left:3px solid var(--gold-600); margin:1.4rem 0; padding:.4rem 0 .4rem 1.2rem; font-family:'Amiri',serif; font-style:italic; color:var(--ink-900); } /* ============================== footer ============================== */ footer{background:var(--paper-50); border-top:1px solid var(--line-ink-soft);} .footer-top{ display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:2.5rem; padding-block:clamp(2.6rem,5vw,3.6rem); } .footer-brand .brand{margin-bottom:.9rem;} .footer-brand .brand .badge{width:44px; height:44px;} .footer-brand .brand-text strong{color:var(--ink-900);} .footer-brand p{font-size:.9rem; color:var(--ink-700); max-width:32ch;} .footer-col h4{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-700); margin:0 0 1rem; } .footer-col ul{display:flex; flex-direction:column; gap:.65rem;} .footer-col a{font-size:.9rem; text-decoration:none; color:var(--ink-700); transition:color .15s ease, padding-left .15s ease;} .footer-col a:hover{color:var(--cobalt-600); padding-left:.3rem;} .footer-bottom{ border-top:1px solid var(--line-ink-faint); padding-block:1.3rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.8rem; color:var(--ink-500); } /* ============================== responsive ============================== */ @media (max-width:980px){ .logo-panel{display:none;} .header-right .brand-mobile{display:flex;} nav.primary-nav{ position:fixed; inset:64px 0 auto 0; background:var(--paper-0); flex-direction:column; align-items:flex-start; gap:0; padding:.5rem clamp(20px,5vw,48px) 1rem; border-bottom:1px solid var(--line-ink-soft); transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility .18s; } nav.primary-nav.open{opacity:1; transform:none; visibility:visible;} nav.primary-nav li{width:100%;} nav.primary-nav a{padding-block:.7rem; width:100%; border-bottom:1px solid var(--line-ink-faint);} .nav-toggle{display:flex;} .header-actions .btn-coral{display:none;} .hero-grid{grid-template-columns:1fr;} .prayer-panel{margin-top:0;} .about-grid{grid-template-columns:1fr;} .course-grid{grid-template-columns:repeat(2,1fr);} .course-card.flagship{grid-column:span 2; flex-direction:column;} .welfare-inner{grid-template-columns:1fr;} .welfare-cta{border-left:none; padding-left:0; border-top:1px solid var(--turquoise-700); padding-top:1.5rem;} .visit-grid{grid-template-columns:1fr;} .footer-top{grid-template-columns:1fr 1fr; gap:2rem;} .audience-lede{border-right:none; padding-right:0;} } @media (max-width:640px){ .topbar{font-size:.74rem;} .topbar .wrap{flex-direction:column; align-items:flex-start; gap:.4rem;} .topbar-left{gap:.3rem 1rem;} .course-grid{grid-template-columns:1fr;} .course-card.flagship{grid-column:span 1;} .audience .wrap{flex-direction:column; align-items:flex-start;} .audience-chips{max-width:100%; justify-content:flex-start;} .event-row{grid-template-columns:1fr; gap:.5rem;} .footer-top{grid-template-columns:1fr;} .prayer-row{grid-template-columns:1fr auto;} .prayer-row .iqamah{grid-column:2;} }