/* ========================================================= AL ARQAM ISLAMIC CENTRE — DESIGN SYSTEM STYLESHEET Shared by every page. Edit tokens in :root to re-theme. ========================================================= */ /* Google Fonts are now loaded via a in each page's (next to the preconnect hints), not via @import here — @import forces the browser to fully fetch and parse this stylesheet before it can even discover the font request, creating a sequential waterfall instead of a parallel fetch. */ :root{ /* Tell browsers this page is designed for light mode only. Some Android/Chrome builds apply an automatic "forced dark" re-colouring to pages that don't declare a colour-scheme, which can invert or mismatch already-correct light-on-dark button and icon colours (e.g. white text over green-900). Declaring light here prevents that unwanted auto-inversion. */ color-scheme: light; /* --- Brand colours (sampled from logo) --- */ --green-900:#09403a; /* primary deep green */ --green-800:#0e4d45; /* hover / depth */ --green-700:#145a50; /* links on light bg */ --green-100:#e8f0ee; /* pale green tint */ --green-50:#f4f8f7; /* faint green section bg */ --cream:#faf7f1; /* soft neutral background */ --white:#ffffff; --charcoal:#262626; /* primary text */ --grey-600:#5b5f5e; /* secondary text */ --grey-300:#d8d8d3; /* borders */ --grey-100:#f1f1ee; /* card backgrounds on white */ --gold:#b08d4f; /* muted accent — use sparingly (backgrounds/borders/icons only) */ --gold-tint:#f6efe2; --gold-text:#7b6337; /* darker gold for small text on light backgrounds — meets WCAG AA (4.5:1) */ --success:#2e7d4f; --error:#b3261e; /* spacing scale */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; /* radii */ --radius-s:8px; --radius-m:14px; --radius-l:20px; --radius-arch:20px 20px 0 0; /* shadow — used sparingly, never heavy */ --shadow-card:0 1px 3px rgba(9,64,58,0.08), 0 1px 2px rgba(9,64,58,0.06); --shadow-hover:0 6px 16px rgba(9,64,58,0.12); --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-serif:'Source Serif 4','Georgia',serif; --container:1160px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:var(--font-sans); color:var(--charcoal); background:var(--white); line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:var(--green-700);} h1,h2,h3,h4{line-height:1.25;margin:0 0 var(--space-3);color:var(--green-900);} h1{font-size:clamp(28px,5vw,42px);} h2{font-size:clamp(22px,3.6vw,30px);} h3{font-size:20px;} p{margin:0 0 var(--space-4);color:var(--grey-600);} .serif{font-family:var(--font-serif);font-weight:500;font-optical-sizing:auto;font-style:normal;} .container{max-width:var(--container);margin:0 auto;padding:0 var(--space-5);} section{padding:var(--space-8) 0;} @media (max-width:640px){ section{padding:var(--space-6) 0;} .container{padding:0 var(--space-4);} } .eyebrow{ text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:700; color:var(--gold-text);margin-bottom:var(--space-2);display:block; } .section-head{max-width:640px;margin-bottom:var(--space-6);} .section-head.center{margin-left:auto;margin-right:auto;text-align:center;} .bg-cream{background:var(--cream);} .bg-green-50{background:var(--green-50);} .bg-green-900{background:var(--green-900);color:var(--white);} .bg-green-900 h2, .bg-green-900 h3, .bg-green-900 p{color:var(--white);} .bg-green-900 p{opacity:.85;} /* focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; } /* skip link */ .skip-link{position:absolute;left:-999px;top:0;background:var(--green-900);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0;} .skip-link:focus{left:0;} /* honeypot spam-trap field — hidden from all users (sighted and assistive tech alike); left blank by real visitors, often auto-filled by spam bots so the submission can be silently ignored */ .hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;} /* visually hidden but available to screen readers — used to keep heading levels in a valid order without adding a visible heading where the design doesn't call for one */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* =============== BUTTONS =============== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-sans);font-weight:600;font-size:15px; padding:13px 22px;border-radius:var(--radius-s);border:2px solid transparent; cursor:pointer;text-decoration:none;transition:background .15s ease, color .15s ease, border-color .15s ease; min-height:48px; } .btn-primary{background:var(--green-900);color:var(--white);} .btn-primary:hover{background:var(--green-800);} .btn-primary:active{background:#083832;} .btn-secondary{background:var(--white);color:var(--green-900);border-color:var(--green-900);} .btn-secondary:hover{background:var(--green-50);} .btn-secondary:active{background:var(--green-100);} .btn-gold{background:var(--gold);color:var(--charcoal);} .btn-gold:hover{background:#b89861;} .btn-gold:active{background:#a68a55;} .btn-ghost{background:transparent;color:var(--green-900);border-color:var(--grey-300);} .btn-ghost:hover{border-color:var(--green-900);} .btn-ghost:active{background:var(--green-50);} .btn-on-green{background:var(--white);color:var(--green-900);} .btn-on-green:hover{background:var(--gold-tint);} .btn-on-green:active{background:#ecdfc2;} .btn-block{width:100%;} .btn-sm{padding:9px 16px;font-size:14px;min-height:40px;} /* =============== HEADER =============== */ .announcement-bar{ background:var(--gold-tint);color:var(--green-900);font-size:14px;font-weight:600; text-align:center;padding:8px var(--space-4); display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 8px; } .announcement-bar a{color:var(--green-900);text-decoration:underline;white-space:nowrap;padding:2px 0;} @media (max-width:480px){ .announcement-bar{padding:6px var(--space-4);font-size:13px;line-height:1.4;} } header.site-header{ position:sticky;top:0;z-index:100;background:var(--white); border-bottom:1px solid var(--grey-300); } .header-inner{ display:flex;align-items:center;justify-content:space-between;gap:var(--space-4); padding:10px var(--space-5);max-width:1320px;margin:0 auto; } .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;} .brand img{height:48px;width:48px;border-radius:10px;object-fit:cover;flex-shrink:0;} .brand-text{font-family:var(--font-serif);font-weight:600;color:var(--green-900);font-size:18px;line-height:1.1;white-space:nowrap;} .brand-text span{display:block;font-family:var(--font-sans);font-weight:600;font-size:11px;letter-spacing:.05em;color:var(--grey-600);text-transform:uppercase;white-space:nowrap;} /* Compact header on small phones: the logo, Donate button and hamburger were crowding each other at narrow widths (320-430px). Trim padding/gaps and hide the decorative subtitle line so all three controls sit comfortably without wrapping or overflowing. */ @media (max-width:480px){ .header-inner{padding:8px var(--space-3);gap:var(--space-2);} .brand{gap:8px;} .brand img{height:38px;width:38px;border-radius:8px;} .brand-text{font-size:15px;} .brand-text span{display:none;} .header-actions{gap:6px;} .header-actions .btn-sm{padding:8px 12px;font-size:13px;min-height:36px;} .menu-toggle{padding:8px;min-height:40px;min-width:40px;} } nav.main-nav{display:none;min-width:0;flex:1 1 auto;} nav.main-nav ul{display:flex;gap:var(--space-4);list-style:none;margin:0;padding:0;justify-content:center;} nav.main-nav a{color:var(--charcoal);text-decoration:none;font-weight:600;font-size:14px;padding:8px 2px;border-bottom:2px solid transparent;white-space:nowrap;} nav.main-nav a:hover, nav.main-nav a.active{color:var(--green-900);border-bottom-color:var(--gold);} .header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;} .menu-toggle{display:inline-flex;background:none;border:2px solid var(--grey-300);border-radius:var(--radius-s);padding:9px;min-height:44px;min-width:44px;align-items:center;justify-content:center;} @media (min-width:900px){ nav.main-nav{display:block;} .menu-toggle{display:none;} } /* mobile drawer */ .mobile-nav{ position:fixed;inset:0 0 0 auto;width:min(88vw,360px);background:var(--white); transform:translateX(100%);transition:transform .25s ease;z-index:200; box-shadow:-8px 0 24px rgba(0,0,0,.15);overflow-y:auto;-webkit-overflow-scrolling:touch; display:flex;flex-direction:column; /* Explicit viewport-based cap (not just top:0/bottom:0 inset) so the drawer never exceeds the visible screen on mobile browsers that show/hide a toolbar. dvh tracks the *actual* visible viewport; vh is the fallback for browsers that don't support dvh yet. Combined with overflow-y:auto above, the menu list scrolls internally instead of overflowing. */ max-height:100vh; max-height:100dvh; } .mobile-nav.open{transform:translateX(0);} .mobile-nav-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--grey-300);flex-shrink:0;} .mobile-nav ul{list-style:none;margin:0;padding:var(--space-2) 0;} .mobile-nav a{display:block;padding:10px var(--space-5);color:var(--charcoal);text-decoration:none;font-weight:600;font-size:15px;border-bottom:1px solid var(--grey-100);} .mobile-nav .actions{padding:var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;flex-shrink:0;} /* Belt-and-braces: force the Donate button inside the mobile drawer to white text explicitly, scoped tightly so it cannot be affected by any other rule's specificity, regardless of load order. */ .mobile-nav .actions .btn-primary{color:#ffffff;} .scrim{position:fixed;inset:0;background:rgba(9,64,58,.35);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:199;} .scrim.open{opacity:1;pointer-events:auto;} @media (min-width:900px){.mobile-nav,.scrim{display:none;}} /* sticky mobile action bar */ .mobile-action-bar{ position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--white); border-top:1px solid var(--grey-300);display:flex;box-shadow:0 -4px 14px rgba(0,0,0,.08); padding-bottom:env(safe-area-inset-bottom,0px); } .mobile-action-bar a{ flex:1;text-align:center;padding:8px 4px 7px;text-decoration:none;color:var(--green-900); font-size:11px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:3px; min-height:44px;position:relative; } .mobile-action-bar a.primary{background:var(--green-900);color:#fff;} .mobile-action-bar a.current::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:22px;height:3px;background:var(--gold);border-radius:0 0 4px 4px; } .mobile-action-bar a.current span{font-weight:800;} @media (min-width:900px){.mobile-action-bar{display:none;}} body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px));} @media (min-width:900px){body{padding-bottom:0;}} /* =============== HERO =============== */ .hero{position:relative;background:var(--green-900);color:var(--white);} .hero-grid{display:grid;gap:var(--space-6);align-items:center;padding:var(--space-7) 0;} .hero-media{ border-radius:var(--radius-m);overflow:hidden;aspect-ratio:4/3; background:linear-gradient(135deg,var(--green-800),var(--green-900)); display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6); font-size:14px;text-align:center;border:1px solid rgba(255,255,255,.15); } .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:inherit;} .hero h1{color:var(--white);font-family:var(--font-serif);font-weight:500;font-optical-sizing:auto;font-style:normal;} .hero p.lead{color:rgba(255,255,255,.85);font-size:18px;max-width:46ch;} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--space-5);} .hero-actions .btn{flex:0 1 auto;} .hero-support-link{margin-top:var(--space-4);} @media (min-width:900px){ .hero-grid{grid-template-columns:1.1fr 1fr;} } /* Hero refinements for mobile: slightly smaller heading with more breathing room, tighter vertical rhythm between the lead paragraph/buttons/support link, a shorter image so it doesn't dominate the screen, and the two hero buttons stack full-width only on the smallest phones where their labels would otherwise feel cramped side by side. */ @media (max-width:480px){ .hero h1{font-size:26px;line-height:1.32;} .hero p.lead{font-size:16px;line-height:1.55;} .hero-grid{gap:var(--space-4);} .hero-actions{margin-top:var(--space-4);gap:10px;} .hero-support-link{margin-top:var(--space-3);} .hero-media{aspect-ratio:16/10;max-height:260px;} } @media (max-width:400px){ .hero-actions{flex-direction:column;align-items:stretch;} .hero-actions .btn{width:100%;} } /* =============== IMAGE PLACEHOLDER =============== */ .img-placeholder{ background:repeating-linear-gradient(135deg,var(--grey-100),var(--grey-100) 10px,var(--grey-300) 10px,var(--grey-300) 11px); border:1px dashed var(--grey-300);border-radius:var(--radius-m); display:flex;align-items:center;justify-content:center;color:var(--grey-600); font-size:13px;text-align:center;padding:var(--space-4);min-height:160px; } /* =============== PRAYER TIMES =============== */ .prayer-panel{background:var(--green-900);border-radius:var(--radius-l);color:var(--white);padding:var(--space-6);} .prayer-panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:var(--space-5);} .prayer-panel-head h2{color:var(--white);margin:0;} .next-prayer-pill{background:rgba(255,255,255,.12);border-radius:999px;padding:8px 18px;font-weight:700;font-size:14px;} .next-prayer-pill b{color:var(--gold-tint);} .prayer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} @media (min-width:700px){.prayer-grid{grid-template-columns:repeat(6,1fr);}} .prayer-card{background:rgba(255,255,255,.08);border-radius:var(--radius-s);padding:14px 8px;text-align:center;border:1px solid rgba(255,255,255,.12);} .prayer-card.active{background:var(--gold);border-color:var(--gold);color:var(--charcoal);} .prayer-card.active .iqamah{opacity:1;} .prayer-card .name{font-size:13px;font-weight:700;letter-spacing:.02em;} .prayer-card .adhan{font-size:19px;font-weight:700;margin:6px 0 2px;} .prayer-card .iqamah{font-size:12px;opacity:.8;} .prayer-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,.15);font-size:14px;} /* =============== TABS (Community Hub) =============== */ .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--space-5);border-bottom:1px solid var(--grey-300);} .tab-btn{background:none;border:none;padding:10px 4px;margin-right:var(--space-5);font-weight:600;color:var(--grey-600);cursor:pointer;border-bottom:3px solid transparent;font-size:15px;min-height:44px;} .tab-btn[aria-selected="true"]{color:var(--green-900);border-bottom-color:var(--gold);} .tab-panel{display:none;} .tab-panel.active{display:block;} /* =============== CARDS =============== */ .card-grid{display:grid;gap:var(--space-5);grid-template-columns:1fr;} @media (min-width:640px){.card-grid.cols-2{grid-template-columns:repeat(2,1fr);}} @media (min-width:900px){ .card-grid.cols-3{grid-template-columns:repeat(3,1fr);} .card-grid.cols-4{grid-template-columns:repeat(4,1fr);} .card-grid.cols-2{grid-template-columns:repeat(2,1fr);} } .card{ background:var(--white);border:1px solid var(--grey-300);border-radius:var(--radius-m); overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s ease, transform .15s ease; } .card:hover{box-shadow:var(--shadow-hover);} .card-media{aspect-ratio:16/10;} .card-body{padding:var(--space-5);display:flex;flex-direction:column;gap:8px;flex:1;} .card-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--green-700);background:var(--green-100);display:inline-block;padding:4px 10px;border-radius:999px;width:fit-content;} .card-title{font-size:18px;font-weight:700;color:var(--green-900);margin:0;} .card-meta{font-size:13px;color:var(--grey-600);display:flex;flex-wrap:wrap;gap:4px 14px;} .card-actions{display:flex;gap:10px;margin-top:auto;padding-top:8px;flex-wrap:wrap;} .card-status{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;} .card-status.open{background:#e6f4ea;color:var(--success);} .card-status.closing{background:var(--gold-tint);color:var(--gold-text);} .card-status.closed{background:#f1e7e6;color:var(--error);} /* announcement / news list */ .news-item{display:flex;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--grey-300);} .news-date{flex-shrink:0;width:64px;text-align:center;} .news-date .d{font-size:22px;font-weight:800;color:var(--green-900);line-height:1;} .news-date .m{font-size:12px;text-transform:uppercase;color:var(--grey-600);font-weight:700;} .news-tag{font-size:11px;font-weight:700;color:var(--gold-text);text-transform:uppercase;letter-spacing:.05em;} /* donation panel */ .donate-panel{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--radius-l);padding:var(--space-6);} .donate-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:var(--space-4) 0;} @media (min-width:640px){.donate-options{grid-template-columns:repeat(4,1fr);}} .donate-option{border:2px solid var(--grey-300);border-radius:var(--radius-s);padding:12px;text-align:center;background:none;font-weight:700;cursor:pointer;min-height:48px;} .donate-option.selected, .donate-option:hover{border-color:var(--green-900);color:var(--green-900);background:var(--green-50);} /* progress bar */ .progress{background:var(--grey-100);border-radius:999px;height:14px;overflow:hidden;} .progress-bar{background:var(--gold);height:100%;border-radius:999px 0 0 999px;} .progress-labels{display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:var(--green-900);margin-top:8px;} /* FAQ accordion */ .faq-item{border-bottom:1px solid var(--grey-300);} .faq-item summary{padding:16px 4px;font-weight:700;cursor:pointer;color:var(--green-900);list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:44px;} .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{content:"+";font-size:22px;font-weight:400;color:var(--gold);} .faq-item[open] summary::after{content:"–";} .faq-item p{padding-bottom:16px;} /* quote / testimonial */ .quote-card{background:var(--green-50);border-left:4px solid var(--gold);border-radius:var(--radius-s);padding:var(--space-5);} .quote-card p{color:var(--charcoal);font-style:italic;font-size:17px;} .quote-card .who{font-weight:700;color:var(--green-900);font-style:normal;font-size:14px;margin:0;} /* gallery */ .gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;} @media (min-width:640px){.gallery-grid{grid-template-columns:repeat(4,1fr);}} .gallery-grid .img-placeholder{aspect-ratio:1/1;min-height:0;border-radius:var(--radius-s);} /* download card */ .download-card{display:flex;align-items:center;gap:14px;border:1px solid var(--grey-300);border-radius:var(--radius-s);padding:var(--space-4);background:var(--white);} .download-card .icon{width:40px;height:40px;border-radius:var(--radius-s);background:var(--green-100);color:var(--green-900);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;} .download-card .grow{flex:1;} .download-card .grow strong{display:block;color:var(--green-900);} .download-card .grow span{font-size:13px;color:var(--grey-600);} /* contact block */ .contact-block{display:flex;gap:12px;align-items:flex-start;margin-bottom:var(--space-4);} .contact-block .icon{width:36px;height:36px;border-radius:50%;background:var(--green-100);color:var(--green-900);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:800;font-size:14px;} .contact-block strong{display:block;color:var(--green-900);} /* =============== FORMS =============== */ .form-section{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--radius-l);padding:var(--space-6);} fieldset{border:none;padding:0;margin:0 0 var(--space-5);} legend{font-weight:700;color:var(--green-900);font-size:16px;padding:0 0 8px;border-bottom:2px solid var(--green-100);width:100%;margin-bottom:var(--space-4);} .form-row{display:grid;gap:var(--space-4);margin-bottom:var(--space-4);grid-template-columns:1fr;} @media (min-width:640px){.form-row.cols-2{grid-template-columns:1fr 1fr;}} label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;color:var(--charcoal);} .hint{font-size:13px;color:var(--grey-600);margin-top:4px;} input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{ width:100%;padding:13px 14px;border:1px solid var(--grey-300);border-radius:var(--radius-s); font-family:var(--font-sans);font-size:16px;background:var(--white);color:var(--charcoal);min-height:48px; } textarea{min-height:110px;} .radio-row, .check-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:14px;} .radio-row input, .check-row input{margin-top:3px;width:20px;height:20px;flex-shrink:0;} .required::after{content:" *";color:var(--error);} .form-confirm{background:#e6f4ea;border:1px solid #bfe3cb;border-radius:var(--radius-s);padding:var(--space-4);color:var(--success);font-weight:600;} /* =============== FOOTER =============== */ footer.site-footer{background:var(--green-900);color:rgba(255,255,255,.85);padding-top:var(--space-8);} .footer-grid{display:grid;gap:var(--space-6);grid-template-columns:1fr;} @media (min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}} .footer-grid h4{color:var(--white);font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-4);} .footer-grid ul{list-style:none;padding:0;margin:0;} .footer-grid li{margin-bottom:10px;} .footer-grid a{color:rgba(255,255,255,.8);text-decoration:none;font-size:15px;} .footer-grid a:hover{color:var(--white);text-decoration:underline;} .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-4);} .footer-brand img{height:44px;width:44px;border-radius:9px;} .footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:var(--space-7);padding:var(--space-5) 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:rgba(255,255,255,.6);} .footer-bottom a{color:rgba(255,255,255,.6);} .social-row{display:flex;gap:12px;margin-top:var(--space-3);flex-wrap:wrap;} .social-row a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:14px;transition:background .15s ease;flex-shrink:0;} .social-row a svg{display:block;flex-shrink:0;} .social-row a:hover,.social-row a:focus-visible{background:rgba(255,255,255,.22);} .social-row.on-light a{background:var(--green-50);color:var(--green-900);} .social-row.on-light a:hover,.social-row.on-light a:focus-visible{background:var(--green-100);} /* Header social icons — desktop only; mobile users get the same links in the mobile-nav drawer */ .header-social{display:none;margin:0;} @media (min-width:1200px){.header-social{display:flex;}} /* Larger labelled variant for "Follow Us" sections (Contact / Community Hub) */ .social-follow{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--space-3);} .social-follow a{display:inline-flex;align-items:center;gap:10px;background:var(--green-50);color:var(--green-900);border:1px solid var(--green-100);border-radius:var(--radius-s);padding:10px 16px;text-decoration:none;font-weight:600;font-size:14px;min-height:44px;transition:background .15s ease;} .social-follow a:hover,.social-follow a:focus-visible{background:var(--green-100);} .social-follow svg{flex-shrink:0;} /* page header (internal pages) */ .page-header{background:var(--green-50);padding:var(--space-7) 0 var(--space-6);border-bottom:1px solid var(--grey-300);} .breadcrumb{font-size:13px;color:var(--grey-600);margin-bottom:var(--space-3);} .breadcrumb a{color:var(--grey-600);} /* util */ .flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;} .gap-2{gap:8px;} .gap-3{gap:12px;} .gap-4{gap:16px;} .wrap{flex-wrap:wrap;} .mt-0{margin-top:0;} .mb-0{margin-bottom:0;} .text-center{text-align:center;} .small{font-size:13px;color:var(--grey-600);} .pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;} .pill-green{background:var(--green-100);color:var(--green-700);} .pill-gold{background:var(--gold-tint);color:var(--gold-text);} .divider{height:1px;background:var(--grey-300);border:none;margin:var(--space-6) 0;} .two-col{display:grid;gap:var(--space-6);grid-template-columns:1fr;} @media (min-width:900px){.two-col{grid-template-columns:1fr 1fr;} .two-col.reverse{direction:rtl;} .two-col.reverse > *{direction:ltr;}} /* =============== MOBILE RELEASE FIX — v5 =============== */ @media (max-width:899px){ html,body{max-width:100%;overflow-x:hidden;} .announcement-bar{display:block;padding:7px 12px;line-height:1.35;} .announcement-bar>a{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:3px 6px;max-width:100%;text-decoration:none;} .announcement-bar>a strong{text-decoration:underline;white-space:nowrap;} .header-inner{min-height:58px;padding:7px 12px;gap:8px;} .brand{min-width:0;gap:8px;overflow:hidden;} .brand img{width:40px;height:40px;border-radius:8px;} .brand-text{font-size:15px;overflow:hidden;text-overflow:ellipsis;} .brand-text span{display:none;} .header-actions{gap:6px;} .header-actions>.btn{padding:8px 11px;min-height:38px;font-size:13px;} .menu-toggle{width:40px;height:40px;min-width:40px;min-height:40px;padding:7px;} .mobile-nav{ width:min(90vw,340px); height:100vh;height:100dvh;max-height:none; overflow:hidden; } .mobile-nav-header{padding:10px 16px;min-height:54px;} .mobile-nav-header .mobile-nav-close{width:38px;height:38px;min-width:38px;min-height:38px;padding:0;font-size:18px;} .mobile-nav>ul{ flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:4px 0;margin:0; } .mobile-nav>ul a{padding:9px 18px;font-size:14px;line-height:1.25;min-height:40px;display:flex;align-items:center;} .mobile-nav .actions{ flex:0 0 auto;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));gap:8px; border-top:1px solid var(--grey-300);background:#fff; } .mobile-nav .actions .social-row{margin:0 0 2px;justify-content:center;gap:10px;} .mobile-nav .actions .social-row a{width:38px;height:38px;border:1px solid var(--green-100);background:var(--green-50);color:var(--green-900);} .mobile-nav .actions .social-row a svg{width:19px;height:19px;display:block;opacity:1;visibility:visible;} .mobile-nav .actions .social-row a[aria-label*="Facebook"] svg, .mobile-nav .actions .social-row a[aria-label*="YouTube"] svg{fill:var(--green-900);color:var(--green-900);} .mobile-nav .actions .btn{min-height:42px;padding:9px 14px;font-size:14px;} .mobile-nav .actions .btn-primary,.mobile-nav .actions .btn-primary:visited{color:#fff!important;background:var(--green-900)!important;} .hero-grid{padding:28px 0 24px;gap:20px;} .hero h1{font-size:clamp(27px,8vw,36px);line-height:1.16;margin-bottom:12px;} .hero p.lead{font-size:16px;line-height:1.5;margin-bottom:0;} .hero-actions{margin-top:16px;gap:10px;} .hero-support-link{margin-top:12px;} .hero-media{aspect-ratio:16/9;max-height:230px;} .hero-media img{object-position:center 46%;} .mobile-action-bar a{padding:6px 3px 5px;min-height:50px;font-size:10px;gap:2px;} body{padding-bottom:calc(54px + env(safe-area-inset-bottom,0px));} } @media (max-width:370px){ .brand-text{font-size:14px;max-width:112px;} .header-actions>.btn{padding:7px 9px;font-size:12px;} .hero-actions{flex-direction:column;align-items:stretch;} .hero-actions .btn{width:100%;} .announcement-bar{font-size:12px;} } /* =============== MOBILE POLISH RELEASE — v6 =============== */ /* Keep sticky positioning reliable on mobile. overflow:hidden on the root creates a scrolling container in some browsers and prevents sticky headers. */ @media (max-width:899px){ html,body{max-width:100%;overflow-x:clip;} header.site-header{ position:-webkit-sticky; position:sticky; top:0; z-index:500; transition:box-shadow .2s ease, background-color .2s ease; } header.site-header.is-scrolled{ box-shadow:0 6px 18px rgba(9,64,58,.12); background:rgba(255,255,255,.98); } /* Drawer: compact navigation with a clearly grouped footer. */ .mobile-nav>ul a{padding:8px 18px;min-height:38px;} .mobile-nav .actions{padding-top:8px;gap:7px;} .mobile-nav .actions .social-row{margin:0 0 1px;} .mobile-nav .actions .btn{min-height:40px;} /* Prayer times: scan-friendly grid with no sideways movement. */ .prayer-panel{padding:20px 14px;border-radius:16px;overflow:hidden;} .prayer-panel-head{display:grid;grid-template-columns:1fr;align-items:start;gap:10px;margin-bottom:16px;} .prayer-panel-head h2{font-size:21px;line-height:1.3;} .prayer-panel-head h2 span{display:block!important;margin-top:4px;font-size:13px!important;} .next-prayer-pill{justify-self:start;padding:7px 13px;font-size:13px;} .prayer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;} .prayer-card{min-width:0;padding:13px 6px;} .prayer-card .name{font-size:13px;} .prayer-card .adhan{font-size:18px;white-space:nowrap;} .prayer-card .iqamah{font-size:11px;white-space:normal;} .prayer-foot{display:grid;grid-template-columns:1fr;align-items:start;margin-top:16px;padding-top:14px;font-size:13px;line-height:1.55;} .prayer-foot .btn{width:100%;justify-content:center;} /* Bottom actions: neutral by default; only the current page is emphasised. */ .mobile-action-bar{z-index:450;} .mobile-action-bar a.primary{background:transparent;color:var(--green-900);} .mobile-action-bar a.current{background:var(--green-900);color:#fff;} .mobile-action-bar a.current::before{background:var(--gold);} .mobile-action-bar a{font-size:10px;line-height:1.1;} /* Replace developer-looking placeholders with intentional branded media cards. */ .img-placeholder{ position:relative; overflow:hidden; border:1px solid var(--green-100); background: radial-gradient(circle at 82% 18%,rgba(196,164,105,.26),transparent 28%), linear-gradient(145deg,var(--green-50),#fff 62%,var(--gold-tint)); color:var(--green-800); font-weight:700; letter-spacing:.01em; padding:24px 18px; } .img-placeholder::before{ content:"Al Arqam Islamic Centre"; display:block; position:absolute; left:14px;top:12px; color:var(--green-700); opacity:.55; font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } .card-media.img-placeholder{min-height:150px;} /* More consistent mobile rhythm on internal pages. */ section{padding-top:48px;padding-bottom:48px;} .page-header{padding:38px 0 30px;} .page-header h1{font-size:clamp(30px,9vw,40px);} footer.site-footer{padding-top:48px;} .footer-grid{gap:28px;} .footer-bottom{margin-top:32px;padding:20px 0;line-height:1.6;} } @media (max-width:370px){ .prayer-grid{grid-template-columns:1fr;} .prayer-card{display:grid;grid-template-columns:80px 1fr;grid-template-areas:"name adhan" "name iqamah";align-items:center;text-align:left;padding:11px 14px;} .prayer-card .name{grid-area:name;} .prayer-card .adhan{grid-area:adhan;margin:0;font-size:18px;} .prayer-card .iqamah{grid-area:iqamah;} } /* =============== V7.1 DESKTOP MOTION SYSTEM =============== */ html{scroll-behavior:smooth;} /* Motion remains deliberately restrained: no layout shifts and no animation on the primary navigation, forms or time-sensitive prayer information. */ @media (min-width:900px) and (prefers-reduced-motion:no-preference){ .reveal-enabled .reveal-item[data-reveal="left"]{transform:translate3d(-28px,0,0);} .reveal-enabled .reveal-item[data-reveal="right"]{transform:translate3d(28px,0,0);} .reveal-enabled .reveal-item[data-reveal="scale"]{transform:translate3d(0,18px,0) scale(.975);} .reveal-enabled .reveal-item[data-reveal="fade"]{transform:none;} .reveal-enabled .reveal-item.is-revealed{transform:none;} .hero-media{ overflow:hidden; isolation:isolate; } .hero-media img{ transform:translate3d(0,var(--hero-parallax,0px),0) scale(1.035); transition:transform .16s linear; will-change:transform; } .card,.program-card,.event-card,.news-card,.feature-card,.info-card, .gallery-item,.prayer-panel{ transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1), border-color .28s ease; } .card:hover,.program-card:hover,.event-card:hover,.news-card:hover, .feature-card:hover,.info-card:hover,.gallery-item:hover,.prayer-panel:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(9,64,58,.13); } .card-media img,.gallery-item img,.event-card img,.news-card img{ transition:transform .55s cubic-bezier(.22,1,.36,1); } .card:hover .card-media img,.gallery-item:hover img, .event-card:hover img,.news-card:hover img{transform:scale(1.035);} nav.main-nav a{position:relative;border-bottom-color:transparent!important;} nav.main-nav a::after{ content:""; position:absolute; left:0;right:0;bottom:-7px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:right center; transition:transform .28s cubic-bezier(.22,1,.36,1); } nav.main-nav a:hover::after,nav.main-nav a.active::after{ transform:scaleX(1); transform-origin:left center; } .btn{transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,background-color .22s ease,border-color .22s ease,color .22s ease;} .btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(9,64,58,.12);} .btn:active{transform:translateY(0);} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .hero-media img{transform:none!important;transition:none!important;} } /* =============== V7 FINAL MOBILE UI + REVEAL MOTION =============== */ /* Progressive reveal: content is visible by default and only transitions after JavaScript confirms IntersectionObserver support. */ .reveal-enabled .reveal-item{ opacity:0; transform:translateY(22px); transition: opacity .62s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms), transform .62s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms); will-change:opacity,transform; } .reveal-enabled .reveal-item.is-revealed{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ .reveal-item{opacity:1!important;transform:none!important;transition:none!important;} .mobile-nav,.scrim,header.site-header{transition:none!important;} } @media (max-width:899px){ /* True app-style drawer: independent of document scroll and always above the sticky site header and bottom action bar. */ .mobile-nav{ position:fixed!important; top:0!important;right:0!important;bottom:0!important;left:auto!important; width:min(92vw,420px)!important; height:100vh!important;height:100dvh!important; max-height:100dvh!important; z-index:1300!important; overflow:hidden!important; display:flex!important; flex-direction:column!important; background:#fff!important; transform:translate3d(100%,0,0)!important; transition:transform .3s cubic-bezier(.22,1,.36,1)!important; box-shadow:-18px 0 44px rgba(9,64,58,.22)!important; overscroll-behavior:contain; } .mobile-nav.open{transform:translate3d(0,0,0)!important;} .scrim{z-index:1290!important;background:rgba(4,34,31,.54)!important;backdrop-filter:blur(2px);} body.menu-open{position:fixed;width:100%;overflow:hidden!important;touch-action:none;} .mobile-nav-header{ flex:0 0 auto!important; min-height:72px!important; padding:calc(12px + env(safe-area-inset-top,0px)) 18px 12px!important; border-bottom:1px solid var(--grey-300)!important; background:#fff!important; position:relative!important; z-index:2!important; } .mobile-nav-header strong{ font-family:var(--font-serif);font-size:24px;color:var(--green-900); } .mobile-nav-header .mobile-nav-close{ position:static!important; width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important; padding:0!important;border:2px solid var(--grey-300)!important;border-radius:12px!important; display:grid!important;place-items:center!important;font-size:24px!important;line-height:1!important; color:var(--green-900)!important;background:#fff!important; } .mobile-nav>ul{ flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; padding:6px 0!important; margin:0!important; } .mobile-nav>ul a{ min-height:54px!important; padding:14px 22px!important; font-size:17px!important; line-height:1.25!important; border-bottom:1px solid var(--grey-100)!important; } .mobile-nav>ul a:hover,.mobile-nav>ul a:focus-visible,.mobile-nav>ul a.active{ background:var(--green-50);color:var(--green-900); } .mobile-nav .actions{ flex:0 0 auto!important; padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px))!important; gap:10px!important; border-top:1px solid var(--grey-300)!important; background:#fff!important; box-shadow:0 -10px 24px rgba(9,64,58,.06)!important; position:relative!important; z-index:2!important; } .mobile-nav .actions .social-row{margin:0 0 2px!important;gap:14px!important;} .mobile-nav .actions .social-row a{ width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important; } .mobile-nav .actions .social-row a svg{width:22px!important;height:22px!important;} .mobile-nav .actions .btn{ display:flex!important;min-height:50px!important;padding:12px 16px!important; font-size:16px!important;line-height:1.2!important;align-items:center!important;justify-content:center!important; flex-shrink:0!important; } /* Restore the stronger, more comfortable V5-style bottom navigation. */ .mobile-action-bar{ min-height:76px!important; padding:7px 4px calc(7px + env(safe-area-inset-bottom,0px))!important; align-items:stretch!important; z-index:700!important; } .mobile-action-bar a{ min-height:62px!important; padding:6px 3px 5px!important; gap:4px!important; font-size:12px!important; line-height:1.1!important; justify-content:center!important; border-radius:10px!important; } .mobile-action-bar a span:first-child, .mobile-action-bar a svg{font-size:21px!important;width:22px;height:22px;} .mobile-action-bar a.current{background:var(--green-50)!important;color:var(--green-900)!important;} body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;} } @media (max-width:600px){ .mobile-nav{width:100vw!important;max-width:none!important;} .scrim{display:none!important;} } @media (max-height:690px) and (max-width:899px){ .mobile-nav-header{min-height:62px!important;padding-top:calc(8px + env(safe-area-inset-top,0px))!important;padding-bottom:8px!important;} .mobile-nav>ul a{min-height:46px!important;padding:11px 20px!important;font-size:16px!important;} .mobile-nav .actions{padding-top:9px!important;padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))!important;gap:7px!important;} .mobile-nav .actions .social-row a{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;} .mobile-nav .actions .btn{min-height:44px!important;padding:9px 14px!important;font-size:15px!important;} } /* =============== V7.2 MOBILE ACTION BAR HOTFIX =============== Explicit icon/label wrappers prevent the label from being mistaken for the icon by :first-child selectors. Five equal columns keep every action inside the viewport at all supported phone widths. */ @media (max-width:899px){ .mobile-action-bar{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; width:100%!important; max-width:100vw!important; min-height:76px!important; padding:7px 2px calc(7px + env(safe-area-inset-bottom,0px))!important; overflow:hidden!important; box-sizing:border-box!important; } .mobile-action-bar a{ width:auto!important; min-width:0!important; max-width:none!important; min-height:62px!important; padding:5px 1px 4px!important; margin:0!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:3px!important; overflow:hidden!important; box-sizing:border-box!important; font-size:inherit!important; line-height:1!important; white-space:normal!important; } .mobile-action-bar .mobile-action-icon{ display:block!important; width:auto!important; height:24px!important; min-width:0!important; font-size:20px!important; line-height:24px!important; font-weight:400!important; flex:0 0 24px!important; overflow:visible!important; } .mobile-action-bar .mobile-action-label, .mobile-action-bar a span:first-child.mobile-action-label{ display:block!important; width:100%!important; min-width:0!important; height:auto!important; font-size:11px!important; line-height:1.15!important; font-weight:700!important; letter-spacing:0!important; text-align:center!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:clip!important; } body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;} } @media (max-width:360px){ .mobile-action-bar .mobile-action-label, .mobile-action-bar a span:first-child.mobile-action-label{font-size:10px!important;} .mobile-action-bar .mobile-action-icon{font-size:19px!important;} } /* =============== V7.4 PREMIUM MOBILE ACTION BAR =============== Refined inline SVG icon system: consistent stroke weight, balanced optical sizing and a restrained featured Donate treatment. No emoji rendering. */ @media (max-width:899px){ .mobile-action-bar{ background:rgba(255,255,255,.97)!important; border-top:1px solid rgba(9,64,58,.13)!important; box-shadow:0 -8px 28px rgba(9,64,58,.10)!important; backdrop-filter:blur(14px)!important; -webkit-backdrop-filter:blur(14px)!important; min-height:78px!important; padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))!important; } .mobile-action-bar a{ color:rgba(9,64,58,.72)!important; min-height:64px!important; gap:5px!important; border-radius:12px!important; transition:color .2s ease,background-color .2s ease,transform .2s ease!important; } .mobile-action-bar a:active{transform:scale(.96)!important;} .mobile-action-bar .mobile-action-icon{ width:25px!important; height:25px!important; flex:0 0 25px!important; display:grid!important; place-items:center!important; line-height:1!important; overflow:visible!important; } .mobile-action-bar .mobile-action-icon svg{ width:24px!important; height:24px!important; display:block!important; overflow:visible!important; } .mobile-action-bar .mobile-action-label{ font-size:10.5px!important; line-height:1.1!important; font-weight:650!important; letter-spacing:.01em!important; } .mobile-action-bar a.primary{ background:transparent!important; color:var(--green-900)!important; } .mobile-action-bar .mobile-action-icon--featured{ width:38px!important; height:38px!important; flex-basis:38px!important; margin-top:-13px!important; margin-bottom:-2px!important; border-radius:50%!important; color:#fff!important; background:var(--green-900)!important; border:3px solid #fff!important; box-shadow:0 5px 15px rgba(9,64,58,.25),0 0 0 1px rgba(201,162,39,.35)!important; } .mobile-action-bar .mobile-action-icon--featured svg{ width:20px!important; height:20px!important; } .mobile-action-bar a.current{ color:var(--green-900)!important; background:rgba(9,64,58,.055)!important; } .mobile-action-bar a.current::before{ width:28px!important; height:3px!important; top:0!important; background:var(--gold)!important; border-radius:0 0 999px 999px!important; } .mobile-action-bar a.primary.current{ background:transparent!important; } .mobile-action-bar a.primary.current .mobile-action-icon--featured{ background:var(--gold)!important; color:var(--green-900)!important; box-shadow:0 5px 16px rgba(201,162,39,.32),0 0 0 1px rgba(9,64,58,.15)!important; } body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;} } @media (max-width:360px){ .mobile-action-bar .mobile-action-label{font-size:10px!important;} .mobile-action-bar .mobile-action-icon svg{width:22px!important;height:22px!important;} } @media (prefers-reduced-motion:reduce){ .mobile-action-bar a{transition:none!important;} } /* =============== V7.4 CONSISTENT MOBILE H1 =============== A single mobile heading scale across every page, including hero and internal page headers, to prevent page-to-page size jumps. */ @media (max-width:899px){ main h1{ font-size:32px!important; line-height:1.14!important; letter-spacing:-.015em!important; text-wrap:balance; } } @media (max-width:360px){ main h1{font-size:30px!important;} } /* V7.5 — site-wide mobile navigation and heading consistency */ @media (max-width: 899px){ .mobile-action-bar{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; } .mobile-action-bar>a{ min-width:0!important; width:auto!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; } .mobile-action-bar .mobile-action-icon{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important; } .mobile-action-bar .mobile-action-icon svg{width:22px!important;height:22px!important;display:block!important;} .mobile-action-bar .mobile-action-label{ display:block!important; width:100%!important; min-width:0!important; font-size:10px!important; line-height:1.15!important; text-align:center!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:clip!important; } .page-header h1, .hero h1, main h1{font-size:32px!important;line-height:1.18!important;} } @media (max-width:360px){ .page-header h1, .hero h1, main h1{font-size:30px!important;} } /* ===== V8 FEATURED FUNDRAISING EVENT ===== */ .announcement-bar--event a{gap:14px;justify-content:center;flex-wrap:wrap;text-align:center} .hero-featured-event{margin-top:var(--space-5);padding:18px 20px;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-lg);background:rgba(255,255,255,.09);backdrop-filter:blur(8px);max-width:620px} .hero-featured-event h2{font-size:clamp(20px,2vw,27px);color:#fff;margin:8px 0 10px;line-height:1.2} .hero-event-badge{display:inline-flex;padding:5px 10px;border-radius:999px;background:#f0dcae;color:#09403a;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase} .hero-event-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:rgba(255,255,255,.9);font-size:14px;margin-bottom:14px} .hero-event-meta span{position:relative} .hero-event-meta span+span:before{content:'•';margin-right:16px;color:#f0dcae} .featured-event-card{border-color:rgba(9,64,58,.28);box-shadow:0 14px 34px rgba(9,64,58,.11)} .featured-event-media{min-height:190px;background:linear-gradient(135deg,#09403a,#176158);display:flex;align-items:center;justify-content:center} .featured-event-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:92px;height:92px;border-radius:50%;background:#fff;color:#09403a;text-transform:uppercase;font-size:14px;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.18)} .featured-event-date strong{font-size:38px;line-height:1} .fundraiser-details-card,.fundraiser-hero-card{padding:var(--space-6);border-radius:var(--radius-xl);background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);color:#fff;box-shadow:0 18px 42px rgba(0,0,0,.16)} .fundraiser-details-card p,.fundraiser-hero-card p{color:rgba(255,255,255,.9)} .fundraiser-hero-date{display:flex;flex-direction:column;margin:20px 0 12px} .fundraiser-hero-date strong{font-size:34px;color:#fff} .fundraiser-hero-date span{color:#f0dcae;font-weight:700} .fundraiser-facts .card-title{font-size:18px;margin-top:8px} .fundraiser-notice{border-left:4px solid var(--green-700)} @media(max-width:767px){ .announcement-bar--event a{padding-inline:12px;gap:3px} .announcement-bar--event span,.announcement-bar--event strong{width:100%} .hero-featured-event{padding:16px;margin-top:18px} .hero-event-meta{display:grid;gap:5px} .hero-event-meta span+span:before{display:none} .fundraiser-details-card,.fundraiser-hero-card{padding:20px} .featured-event-media{min-height:150px} }