@charset "UTF-8"; /* ========================================================================== Arabic Church of Saskatoon — Design System الكنيسة العربية في ساسكاتون — نظام التصميم Palette derived from the church crest: navy, gold, cream. RTL-first. Mobile-first. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Brand — taken from the logo */ --navy-900: #081324; --navy-800: #0E2140; --navy-700: #12284C; --navy-600: #1B3A6B; --navy-500: #27508D; --navy-100: #E6ECF5; --gold-600: #A8851C; --gold-500: #C9A227; --gold-400: #D9B84A; --gold-300: #E8CE7C; --gold-100: #F7EFD6; --cream: #FAF7F0; --sand: #F1EADC; --paper: #FFFFFF; --ink: #16233A; --ink-soft: #46556E; --ink-mute: #78859B; --line: #E3DDD0; --danger: #B3261E; --success: #1E7A4B; /* Type */ --font-ar: 'Noto Kufi Arabic', 'Cairo', 'Segoe UI', Tahoma, sans-serif; --font-ar-body: 'Noto Sans Arabic', 'Cairo', 'Segoe UI', Tahoma, sans-serif; --font-quran: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif; --font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Cormorant Garamond', Georgia, serif; /* Scale — fluid */ --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem); --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem); --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem); --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.6rem); --step-4: clamp(2.1rem, 1.7rem + 2vw, 3.5rem); /* Space */ --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem); --section: clamp(3rem, 2rem + 5vw, 6rem); --wrap: 1200px; --wrap-narrow: 820px; /* Effects */ --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --shadow-sm: 0 1px 3px rgba(8, 19, 36, .07), 0 1px 2px rgba(8, 19, 36, .04); --shadow: 0 6px 22px rgba(8, 19, 36, .09); --shadow-lg: 0 18px 48px rgba(8, 19, 36, .16); --ring: 0 0 0 3px rgba(201, 162, 39, .45); --ease: cubic-bezier(.22, .61, .36, 1); } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; /* The off-canvas menu is a fixed box parked outside the viewport. Only overflow on the ROOT propagates to the viewport and clips it — the same rule on does not, and the page ends up twice as wide. */ overflow-x: hidden; } body { font-family: var(--font-ar-body); font-size: var(--step-0); line-height: 1.85; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* The English side of a bilingual page keeps its own font + direction. */ [lang="en"], .en { font-family: var(--font-en); direction: ltr; } [dir="ltr"] { text-align: left; } /* Latin text (addresses, emails, phone numbers) sitting inside an Arabic line. The isolate stops the bidi algorithm reordering it. */ .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; text-align: left; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5 { font-family: var(--font-ar); font-weight: 700; line-height: 1.35; color: var(--navy-800); text-wrap: balance; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p { text-wrap: pretty; } p + p { margin-top: 1em; } a { color: var(--navy-600); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--gold-600); } ul, ol { list-style: none; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; } ::selection { background: var(--gold-300); color: var(--navy-900); } .skip-link { position: fixed; inset-inline-start: 1rem; top: -100px; background: var(--navy-800); color: #fff; padding: .75rem 1.5rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); z-index: 2000; transition: top .2s var(--ease); } .skip-link:focus { top: 0; color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; } .wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); } .section { padding-block: var(--section); } .section--tint { background: var(--paper); } .section--sand { background: var(--sand); } .section--navy { background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-600) 100%); color: #fff; } .section--navy h1, .section--navy h2, .section--navy h3, .prayer-feature h1, .prayer-feature h2, .prayer-feature h3, .prayer-feature h4 { color: #fff; } .grid { display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .stack > * + * { margin-top: 1.25rem; } .center { text-align: center; } /* -------------------------------------------------------------------------- 4. Section heading -------------------------------------------------------------------------- */ .section-head { text-align: center; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); } .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-ar); font-size: var(--step--1); font-weight: 600; letter-spacing: .08em; color: var(--gold-600); text-transform: uppercase; margin-bottom: .85rem; } .eyebrow::before, .eyebrow::after { content: ''; width: 26px; height: 1px; background: var(--gold-400); } .section--navy .eyebrow, .prayer-feature .eyebrow { color: var(--gold-300); } .section--navy .eyebrow::before, .section--navy .eyebrow::after, .prayer-feature .eyebrow::before, .prayer-feature .eyebrow::after { background: var(--gold-400); } .section-head p { max-width: 62ch; margin-inline: auto; margin-top: .75rem; color: var(--ink-soft); font-size: var(--step-0); } .section--navy .section-head p, .prayer-feature .section-head p { color: rgba(255, 255, 255, .82); } /* A short gold rule used under headings */ .rule { width: 72px; height: 3px; border: 0; border-radius: 3px; margin: 1.1rem auto 0; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-ar); font-size: var(--step--1); font-weight: 700; padding: .85rem 1.75rem; border: 1.5px solid transparent; border-radius: 100px; cursor: pointer; text-align: center; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--gold { background: linear-gradient(135deg, var(--gold-500), var(--gold-400)); color: var(--navy-900); box-shadow: 0 4px 14px rgba(201, 162, 39, .35); } .btn--gold:hover { color: var(--navy-900); box-shadow: 0 8px 24px rgba(201, 162, 39, .45); } .btn--navy { background: var(--navy-700); color: #fff; } .btn--navy:hover { background: var(--navy-600); color: #fff; } .btn--ghost { border-color: currentColor; color: var(--navy-700); background: transparent; } .btn--ghost:hover { background: var(--navy-700); color: #fff; } .section--navy .btn--ghost { color: #fff; } .section--navy .btn--ghost:hover { background: #fff; color: var(--navy-800); } .btn--block { width: 100%; } /* -------------------------------------------------------------------------- 6. Header / navigation -------------------------------------------------------------------------- */ .topbar { background: var(--navy-800); color: rgba(255, 255, 255, .92); font-size: var(--step--1); padding-block: .55rem; } .topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.25rem; } .topbar a { color: rgba(255, 255, 255, .92); } .topbar a:hover { color: var(--gold-300); } .topbar__meta { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .topbar__meta span { display: inline-flex; align-items: center; gap: .4rem; } /* On a phone the three topbar items wrap onto three rows and push the page down. The address is repeated in the strip below the hero, so it goes. */ @media (max-width: 640px) { .topbar { font-size: .78rem; padding-block: .45rem; } .topbar .wrap { justify-content: center; gap: .25rem 1rem; } .topbar__meta span.topbar__addr { display: none; } } .site-header { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow .25s var(--ease); } /* backdrop-filter turns an element into the containing block for its fixed-position descendants. The off-canvas menu lives inside the header, so the blur may only exist at widths where that menu is not used — otherwise the panel is trapped inside the header instead of the viewport. */ @media (min-width: 1025px) { .site-header { background: rgba(255, 255, 255, .96); backdrop-filter: saturate(160%) blur(12px); } } .site-header.is-stuck { box-shadow: var(--shadow); } .site-header .wrap { --wrap: 1320px; } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .7rem; } .brand { display: flex; align-items: center; gap: .85rem; flex-shrink: 0; } .brand img { height: 62px; width: 62px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 10px rgba(8, 19, 36, .14); transition: transform .3s var(--ease); } .brand:hover img { transform: scale(1.06) rotate(-3deg); } .brand__text { display: none; line-height: 1.25; } .brand__ar { font-family: var(--font-ar); font-weight: 700; font-size: 1.05rem; color: var(--navy-800); } .brand__en { font-family: var(--font-en); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-600); direction: ltr; } @media (min-width: 560px) { .brand__text { display: block; } } /* Between the drawer breakpoint and a comfortably wide desktop the horizontal menu needs every pixel it can get, so the wordmark steps aside. */ @media (min-width: 1025px) and (max-width: 1279px) { .brand__text { display: none; } } .menu { display: flex; align-items: center; gap: .35rem; } .menu > li { position: relative; } .menu > li > a { display: flex; align-items: center; gap: .35rem; font-family: var(--font-ar); font-weight: 600; font-size: .95rem; color: var(--navy-800); padding: .65rem .85rem; border-radius: var(--radius-sm); white-space: nowrap; } .menu > li > a:hover, .menu > li.is-active > a { background: var(--navy-100); color: var(--navy-700); } .menu .caret { width: 9px; height: 9px; flex-shrink: 0; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); opacity: .6; } .menu li.is-open > a .caret { transform: rotate(-135deg) translateY(-2px); } .menu .nav-cta { margin-inline-start: .5rem; } /* Dropdown */ .dropdown { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 270px; max-width: 340px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .6rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; } .menu li.has-dropdown:hover > .dropdown, .menu li.has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown a { display: block; padding: .6rem .85rem; border-radius: var(--radius-sm); font-size: .92rem; color: var(--ink-soft); } .dropdown a:hover { background: var(--sand); color: var(--navy-700); } /* Mobile toggle */ .nav-toggle { display: grid; place-items: center; gap: 5px; width: 46px; height: 46px; flex-shrink: 0; background: var(--navy-100); border: 0; border-radius: var(--radius-sm); cursor: pointer; } .nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--navy-800); transition: transform .28s var(--ease), opacity .2s var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (min-width: 1025px) { .nav-toggle { display: none; } } /* Tighten the desktop nav on narrower laptops so nothing is pushed off-screen. */ @media (min-width: 1025px) { .menu { gap: .1rem; } .menu > li > a { padding: .6rem .55rem; font-size: .88rem; } .menu .nav-cta { margin-inline-start: .35rem; } .menu .nav-cta .btn { padding: .7rem 1.2rem; } .brand img { height: 54px; width: 54px; } } @media (max-width: 1024px) { .menu { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(88vw, 380px); background: var(--paper); flex-direction: column; align-items: stretch; gap: .15rem; padding: 6rem 1.25rem 2rem; overflow-y: auto; box-shadow: var(--shadow-lg); transform: translateX(105%); visibility: hidden; pointer-events: none; transition: transform .32s var(--ease), visibility .32s; z-index: 1100; } [dir="rtl"] .menu { transform: translateX(-105%); } .menu.is-open { transform: translateX(0) !important; visibility: visible; pointer-events: auto; } .menu > li > a { font-size: 1.05rem; padding: .9rem 1rem; justify-content: space-between; } .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-inline-start: 2px solid var(--gold-300); border-radius: 0; margin-inline-start: 1rem; padding: .2rem .4rem; max-width: none; display: none; } .menu li.is-open > .dropdown { display: block; } .menu .nav-cta { margin: 1rem 0 0; } .menu .nav-cta .btn { width: 100%; } /* .site-header has z-index 1000 and creates a stacking context, so the menu's own z-index is scoped inside it. The scrim therefore has to sit BELOW the header, or it paints over the menu and swallows every tap. */ .nav-scrim { position: fixed; inset: 0; z-index: 990; background: rgba(8, 19, 36, .55); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; } .nav-scrim.is-open { opacity: 1; visibility: visible; } } /* Language switch */ .lang-switch { display: inline-flex; border: 1px solid rgba(255, 255, 255, .3); border-radius: 100px; overflow: hidden; font-size: .75rem; font-weight: 700; } .lang-switch a { padding: .2rem .7rem; color: rgba(255, 255, 255, .8); } .lang-switch a.is-active { background: var(--gold-500); color: var(--navy-900); } /* -------------------------------------------------------------------------- 7. Hero / slideshow -------------------------------------------------------------------------- */ .hero { position: relative; min-height: clamp(460px, 72vh, 760px); display: grid; place-items: center; overflow: hidden; background: var(--navy-800); isolation: isolate; } .hero__slides { position: absolute; inset: 0; z-index: -2; } .hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.08); transition: opacity 1.4s var(--ease), transform 7s linear; } .hero__slide.is-active { opacity: 1; transform: scale(1); } .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 50% 0%, rgba(8, 19, 36, .35) 0%, rgba(8, 19, 36, .78) 70%), linear-gradient(180deg, rgba(8, 19, 36, .35), rgba(8, 19, 36, .82)); } .hero__inner { text-align: center; color: #fff; padding: clamp(3rem, 8vw, 6rem) var(--gutter); max-width: 900px; } .hero__crest { width: clamp(88px, 16vw, 128px); height: auto; margin: 0 auto clamp(1.25rem, 3vw, 2rem); border-radius: 50%; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); animation: crest-in 1s var(--ease) both; } @keyframes crest-in { from { opacity: 0; transform: translateY(18px) scale(.9); } } .hero__verse { font-family: var(--font-quran); font-size: clamp(1.4rem, 1rem + 2.6vw, 2.6rem); font-weight: 700; line-height: 1.9; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .5); } .hero__verse-en { font-family: var(--font-display); direction: ltr; font-size: clamp(1rem, .85rem + 1vw, 1.45rem); font-style: italic; line-height: 1.65; color: rgba(255, 255, 255, .88); margin-top: 1.1rem; } .hero__ref { display: inline-block; margin-top: 1.1rem; font-family: var(--font-ar); font-size: var(--step--1); font-weight: 600; letter-spacing: .06em; color: var(--gold-300); } .hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: clamp(1.75rem, 4vw, 2.75rem); } .hero__dots { position: absolute; bottom: 1.5rem; inset-inline: 0; display: flex; justify-content: center; gap: .5rem; z-index: 2; } .hero__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .4); cursor: pointer; transition: all .3s var(--ease); } .hero__dots button.is-active { background: var(--gold-400); width: 28px; border-radius: 100px; } /* -------------------------------------------------------------------------- 8. Service-times strip -------------------------------------------------------------------------- */ .times { background: linear-gradient(135deg, var(--gold-500), var(--gold-400)); color: var(--navy-900); padding-block: clamp(1.5rem, 3vw, 2.25rem); } .times .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem clamp(1.5rem, 4vw, 3.5rem); text-align: center; } .times__item { display: flex; align-items: center; gap: .7rem; } .times__icon { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; background: rgba(8, 19, 36, .12); border-radius: 50%; } .times__icon svg { width: 21px; height: 21px; stroke: var(--navy-900); } .times__label { font-family: var(--font-ar); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; opacity: .75; } .times__value { font-family: var(--font-ar); font-weight: 700; font-size: 1.05rem; line-height: 1.3; } .times__value a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- 9. Cards -------------------------------------------------------------------------- */ .card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold-300); } .card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); } .card:hover .card__media img { transform: scale(1.07); } .card__tag { position: absolute; top: .85rem; inset-inline-start: .85rem; background: rgba(8, 19, 36, .82); color: #fff; font-family: var(--font-ar); font-size: .72rem; font-weight: 700; padding: .3rem .8rem; border-radius: 100px; backdrop-filter: blur(6px); } .card__body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; gap: .7rem; } .card__title { font-size: var(--step-1); line-height: 1.45; } .card__title a { color: var(--navy-800); } .card__title a:hover { color: var(--gold-600); } .card__excerpt { color: var(--ink-soft); font-size: .93rem; line-height: 1.8; flex: 1; } .card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; font-size: .8rem; color: var(--ink-mute); padding-top: .5rem; border-top: 1px solid var(--line); } .card__meta span { display: inline-flex; align-items: center; gap: .3rem; } .link-more { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-ar); font-weight: 700; font-size: .88rem; color: var(--gold-600); align-self: flex-start; } .link-more::after { content: '←'; transition: transform .25s var(--ease); } [dir="ltr"] .link-more::after { content: '→'; } .link-more:hover { color: var(--navy-700); } .link-more:hover::after { transform: translateX(-4px); } [dir="ltr"] .link-more:hover::after { transform: translateX(4px); } /* -------------------------------------------------------------------------- 10. Prayer of the day — صلاة اليوم -------------------------------------------------------------------------- */ .prayer-feature { position: relative; background: linear-gradient(155deg, var(--navy-800) 0%, var(--navy-600) 55%, var(--navy-700) 100%); color: #fff; overflow: hidden; } .prayer-feature::before { content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%; inset-block-start: -180px; inset-inline-end: -140px; background: radial-gradient(circle, rgba(201, 162, 39, .28), transparent 68%); pointer-events: none; } .prayer-feature::after { content: ''; position: absolute; width: 360px; height: 360px; border-radius: 50%; inset-block-end: -160px; inset-inline-start: -120px; background: radial-gradient(circle, rgba(255, 255, 255, .09), transparent 70%); pointer-events: none; } .prayer-feature .wrap { position: relative; z-index: 1; } .prayer-card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-lg); backdrop-filter: blur(10px); padding: clamp(1.75rem, 1rem + 3.5vw, 3.5rem); text-align: center; } .prayer-card__date { display: inline-flex; align-items: center; gap: .5rem; background: rgba(201, 162, 39, .2); border: 1px solid rgba(201, 162, 39, .4); color: var(--gold-300); font-family: var(--font-ar); font-size: .82rem; font-weight: 700; padding: .35rem 1rem; border-radius: 100px; margin-bottom: 1.5rem; } .prayer-card__title { color: #fff; font-size: var(--step-2); margin-bottom: 1rem; } .prayer-card__body { font-family: var(--font-quran); font-size: clamp(1.1rem, .95rem + 1vw, 1.6rem); line-height: 2.1; color: rgba(255, 255, 255, .95); max-width: 68ch; margin-inline: auto; } .prayer-card__body p + p { margin-top: .85em; } .prayer-card__en { font-family: var(--font-display); direction: ltr; font-style: italic; font-size: clamp(.95rem, .9rem + .4vw, 1.2rem); line-height: 1.75; color: rgba(255, 255, 255, .8); max-width: 62ch; margin: 1.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .15); } .prayer-card__ref { display: block; margin-top: 1.25rem; font-family: var(--font-ar); font-weight: 700; font-size: .9rem; color: var(--gold-300); } .prayer-card__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; } /* Share buttons */ .share { display: inline-flex; gap: .5rem; } .share a, .share button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--navy-700); cursor: pointer; transition: all .25s var(--ease); } .share a:hover, .share button:hover { background: var(--navy-700); color: #fff; border-color: var(--navy-700); transform: translateY(-2px); } .share svg { width: 17px; height: 17px; } .prayer-card .share a, .prayer-card .share button { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; } .prayer-card .share a:hover, .prayer-card .share button:hover { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); } /* Prayer archive list */ .prayer-item { display: grid; gap: 1.25rem; grid-template-columns: auto 1fr; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 1rem + 1vw, 1.75rem); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .prayer-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold-300); } .date-chip { display: grid; place-items: center; gap: 0; width: 74px; padding: .7rem .4rem; background: linear-gradient(160deg, var(--navy-700), var(--navy-500)); color: #fff; border-radius: var(--radius-sm); text-align: center; line-height: 1.15; } .date-chip__day { font-family: var(--font-ar); font-size: 1.7rem; font-weight: 700; } .date-chip__mon { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; } .date-chip__yr { font-size: .66rem; opacity: .6; } .prayer-item__body { min-width: 0; } .prayer-item__body h3 { font-size: var(--step-1); margin-bottom: .45rem; } .prayer-item__body h3 a { color: var(--navy-800); } .prayer-item__body h3 a:hover { color: var(--gold-600); } .prayer-item__excerpt { color: var(--ink-soft); font-size: .95rem; line-height: 1.85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; } .prayer-item__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .85rem; } .badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; font-family: var(--font-ar); padding: .2rem .65rem; border-radius: 100px; background: var(--sand); color: var(--ink-soft); } .badge--fb { background: #E7F0FE; color: #1B5FC1; } .badge--gold { background: var(--gold-100); color: var(--gold-600); } @media (max-width: 520px) { .prayer-item { grid-template-columns: 1fr; } .date-chip { width: auto; display: flex; gap: .5rem; align-items: baseline; justify-content: center; } .date-chip__day { font-size: 1.25rem; } } /* -------------------------------------------------------------------------- 11. Events -------------------------------------------------------------------------- */ .event { display: grid; gap: 1.25rem; grid-template-columns: auto 1fr; align-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius); padding: 1.35rem; transition: background .25s var(--ease), transform .25s var(--ease); } .event:hover { background: rgba(255, 255, 255, .14); transform: translateY(-3px); } .event h4 { color: #fff; font-size: var(--step-1); margin-bottom: .3rem; } .event p { color: rgba(255, 255, 255, .8); font-size: .9rem; } .event .date-chip { background: linear-gradient(160deg, var(--gold-500), var(--gold-400)); color: var(--navy-900); } .event__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .45rem; font-size: .85rem; color: rgba(255,255,255,.75); } .event__meta span { display: inline-flex; align-items: center; gap: .35rem; } .section--sand .event, .section--tint .event { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-sm); } .section--sand .event h4, .section--tint .event h4 { color: var(--navy-800); } .section--sand .event p, .section--tint .event p, .section--sand .event__meta, .section--tint .event__meta { color: var(--ink-soft); } @media (max-width: 520px) { .event { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 12. Page header (interior pages) -------------------------------------------------------------------------- */ .page-hero { position: relative; background: linear-gradient(150deg, var(--navy-800), var(--navy-600)); color: #fff; text-align: center; padding-block: clamp(3rem, 2rem + 6vw, 6rem); overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px; opacity: .6; } .page-hero .wrap { position: relative; z-index: 1; } .page-hero h1 { color: #fff; } .page-hero p { color: rgba(255, 255, 255, .82); max-width: 60ch; margin: .85rem auto 0; } .crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; font-size: .82rem; margin-bottom: 1rem; color: rgba(255, 255, 255, .7); } .crumbs a { color: var(--gold-300); } .crumbs a:hover { color: #fff; } .crumbs li:not(:last-child)::after { content: '/'; margin-inline-start: .5rem; opacity: .5; } .crumbs ol, .crumbs { list-style: none; } /* -------------------------------------------------------------------------- 13. Long-form content (posts / pages) -------------------------------------------------------------------------- */ .prose { font-size: 1.06rem; line-height: 2.05; color: var(--ink); } .prose > * + * { margin-top: 1.2em; } .prose h2 { font-size: var(--step-2); margin-top: 2.2em; padding-bottom: .4rem; border-bottom: 2px solid var(--gold-300); } .prose h3 { font-size: var(--step-1); margin-top: 1.8em; color: var(--navy-700); } .prose img { border-radius: var(--radius); box-shadow: var(--shadow); margin-inline: auto; } .prose a { color: var(--navy-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-400); } .prose a:hover { color: var(--gold-600); } .prose ul, .prose ol { padding-inline-start: 1.5rem; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li + li { margin-top: .5em; } .prose blockquote { border-inline-start: 4px solid var(--gold-400); background: var(--gold-100); padding: 1.25rem 1.5rem; border-radius: var(--radius-sm); font-family: var(--font-quran); font-size: 1.15em; line-height: 2; } .prose table { width: 100%; border-collapse: collapse; font-size: .95rem; } .prose th, .prose td { padding: .7rem .9rem; border: 1px solid var(--line); text-align: start; } .prose th { background: var(--sand); font-family: var(--font-ar); } .prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; } /* Legacy posts store whole HTML documents in `content`. Neutralise the worst of it. */ .prose html, .prose head, .prose meta, .prose title, .prose style, .prose link { display: none !important; } .prose body { all: unset; display: block; } /* Scripture callout */ .verse { font-family: var(--font-quran); font-size: clamp(1.15rem, 1rem + .9vw, 1.7rem); line-height: 2.1; text-align: center; background: var(--paper); border: 1px solid var(--gold-300); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 3vw, 3rem); box-shadow: var(--shadow-sm); position: relative; } .verse::before { content: '❝'; position: absolute; top: -.35em; inset-inline-start: 1.5rem; font-size: 3rem; color: var(--gold-300); line-height: 1; } .verse cite { display: block; margin-top: 1rem; font-family: var(--font-ar); font-size: .88rem; font-style: normal; font-weight: 700; color: var(--gold-600); } /* -------------------------------------------------------------------------- 14. Forms -------------------------------------------------------------------------- */ .field { margin-bottom: 1.15rem; } .field label { display: block; margin-bottom: .45rem; font-family: var(--font-ar); font-weight: 600; font-size: .92rem; color: var(--navy-800); } .field .req { color: var(--danger); } .field input, .field textarea, .field select { width: 100%; padding: .85rem 1rem; font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-sm); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold-400); box-shadow: var(--ring); } .field textarea { min-height: 170px; resize: vertical; line-height: 1.8; } .field .hint { font-size: .8rem; color: var(--ink-mute); margin-top: .35rem; } .alert { padding: 1rem 1.25rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-size: .95rem; border-inline-start: 4px solid; } .alert--ok { background: #E8F5EE; color: #145334; border-color: var(--success); } .alert--err { background: #FDECEA; color: #8C1D18; border-color: var(--danger); } .alert--info { background: var(--navy-100); color: var(--navy-700); border-color: var(--navy-500); } /* Honeypot — hidden from humans, visible to naive bots */ .hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; } /* -------------------------------------------------------------------------- 15. Info tiles (contact / give) -------------------------------------------------------------------------- */ .tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); display: flex; flex-direction: column; gap: .8rem; } .tile:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--gold-300); } .tile__icon { width: 54px; height: 54px; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(140deg, var(--navy-700), var(--navy-500)); color: var(--gold-300); border-radius: 16px; } .tile__icon svg { width: 25px; height: 25px; } .tile h3 { font-size: var(--step-1); } .tile p { color: var(--ink-soft); font-size: .95rem; flex: 1; } .tile .callout { background: var(--sand); border: 1px dashed var(--gold-400); border-radius: var(--radius-sm); padding: .75rem 1rem; font-weight: 700; color: var(--navy-800); word-break: break-word; text-align: center; font-size: .95rem; } .map-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); line-height: 0; } .map-frame iframe { width: 100%; height: clamp(300px, 45vh, 460px); border: 0; } /* -------------------------------------------------------------------------- 16. Pagination -------------------------------------------------------------------------- */ .pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 3rem; } .pager a, .pager span { min-width: 44px; height: 44px; padding: 0 .85rem; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ar); font-weight: 700; font-size: .9rem; background: var(--paper); color: var(--navy-700); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: all .2s var(--ease); } .pager a:hover { background: var(--navy-700); color: #fff; border-color: var(--navy-700); } .pager .is-current { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); } .pager .is-disabled { opacity: .4; pointer-events: none; } /* Filter chips */ .chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.5rem; } .chips a { font-family: var(--font-ar); font-weight: 600; font-size: .88rem; padding: .5rem 1.15rem; border-radius: 100px; background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); transition: all .2s var(--ease); } .chips a:hover { border-color: var(--gold-400); color: var(--navy-700); } .chips a.is-active { background: var(--navy-700); color: #fff; border-color: var(--navy-700); } /* Empty state */ .empty { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-mute); } .empty svg { width: 52px; height: 52px; margin: 0 auto 1rem; stroke: var(--gold-400); opacity: .8; } /* -------------------------------------------------------------------------- 17. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--navy-900); color: rgba(255, 255, 255, .78); padding-block: clamp(3rem, 2rem + 4vw, 4.5rem) 0; font-size: .95rem; } .site-footer h3 { color: #fff; font-size: 1.1rem; margin-bottom: 1.1rem; position: relative; padding-bottom: .6rem; } .site-footer h3::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; width: 36px; height: 2px; background: var(--gold-500); border-radius: 2px; } .site-footer a { color: rgba(255, 255, 255, .78); } .site-footer a:hover { color: var(--gold-300); } .footer-grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); padding-bottom: 2.5rem; } .footer-brand img { width: 76px; height: 76px; border-radius: 50%; margin-bottom: 1rem; box-shadow: 0 4px 18px rgba(0, 0, 0, .4); } .footer-links li + li { margin-top: .6rem; } .footer-links a { display: inline-flex; align-items: center; gap: .45rem; } .footer-links a::before { content: '›'; color: var(--gold-500); font-size: 1.1rem; line-height: 1; } [dir="rtl"] .footer-links a::before { content: '‹'; } .footer-contact li { display: flex; gap: .7rem; margin-bottom: .85rem; align-items: flex-start; } .footer-contact svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: .3rem; stroke: var(--gold-500); } .socials { display: flex; gap: .65rem; margin-top: 1.25rem; } .socials a { width: 42px; height: 42px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border-radius: 50%; transition: all .25s var(--ease); } .socials a:hover { background: var(--gold-500); color: var(--navy-900); transform: translateY(-3px); } .socials svg { width: 19px; height: 19px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; font-size: .85rem; color: rgba(255, 255, 255, .6); } .footer-bottom a { color: rgba(255, 255, 255, .8); font-weight: 600; } /* Back to top */ .to-top { position: fixed; inset-block-end: 1.5rem; inset-inline-end: 1.5rem; width: 46px; height: 46px; z-index: 900; display: grid; place-items: center; background: var(--navy-700); color: #fff; border: 0; border-radius: 50%; cursor: pointer; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(12px); transition: all .3s var(--ease); } .to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .to-top:hover { background: var(--gold-500); color: var(--navy-900); } .to-top svg { width: 19px; height: 19px; } /* -------------------------------------------------------------------------- 18. Reveal-on-scroll -------------------------------------------------------------------------- */ /* Only hide when JS is running — without it the content must stay readable. */ .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } .hero__slide { transform: none; } } /* -------------------------------------------------------------------------- 19. Print -------------------------------------------------------------------------- */ @media print { .site-header, .topbar, .site-footer, .to-top, .hero__dots, .share, .btn { display: none !important; } body { background: #fff; color: #000; font-size: 12pt; } .prayer-feature { background: #fff !important; color: #000 !important; } .prayer-card { border: 1px solid #999; background: #fff; } .prayer-card__body, .prayer-card__title, .prayer-card__en { color: #000 !important; } a[href]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; } }