/* ========================================================================== Grow Your Soul — Design System Everything visual is controlled by the custom properties in :root below. To restyle the whole site, change values here. Nothing else needs editing. ========================================================================== */ :root { /* ---- Brand colour ---- */ --paper: #FBFAF6; /* page background */ --paper-2: #F4F2EA; /* alternating section band */ --paper-3: #EDEAE0; /* card background */ --ink: #17202B; /* body text */ --ink-soft: #4B5666; /* secondary text */ --ink-faint: #646F7B; /* captions, meta */ --line: #DDDCD3; /* hairline borders */ /* Taken from the Grow Your Soul emblem: navy disc, gold tree and lettering. */ --green: #0B3460; /* primary brand navy */ --green-deep: #04203F; /* header / footer */ --green-soft: #E4EDF7; /* tinted panels */ --gold: #C9A24A; /* accent / links-on-dark */ --gold-soft: #F7EFDC; /* ---- The banner ---------------------------------------------------- One word in _brand.json ("banner") picks a set. Every header colour reads from these, so adding a sixth set is this block plus a rule. */ --bar: rgba(4,32,63,.96); --bar-solid: rgba(4,32,63,.985); --bar-ink: #FFFFFF; --bar-ink-2: rgba(255,255,255,.86); --bar-ink-3: rgba(255,255,255,.62); --bar-hover: rgba(255,255,255,.11); --bar-line: rgba(255,255,255,.10); --bar-mark: #C9A24A; --bar-btn: #0B3460; --bar-btn-ink: #FFFFFF; --bar-drawer: #04203F; --bar-drawer-ink: rgba(255,255,255,.75); /* ---- Section accents (the five growth layers) ---- */ --c-god: #8A5A2B; /* The Root — earth brown */ --c-submission: #6E6033; /* The Soil — clay olive */ --c-practices: #1F6B80; /* The Water — teal */ --c-quran: #8F6718; /* The Sunlight — gold */ --c-media: #3F5E96; /* The Rain — rain blue */ --c-grow: #2E7350; /* The Garden — leaf green */ --accent: var(--green); /* set per-page on */ --accent-soft: var(--green-soft); /* ---- Type ---- */ /* Reading is set in serif throughout; the sans is reserved for chrome and small uppercase labels. Changing these three lines restyles the whole site. */ --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-quran: "Source Serif 4", "Iowan Old Style", Georgia, serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem); --step-0: clamp(1.06rem, 1.01rem + 0.22vw, 1.19rem); --step-1: clamp(1.20rem, 1.12rem + 0.38vw, 1.45rem); --step-2: clamp(1.45rem, 1.30rem + 0.72vw, 1.95rem); --step-3: clamp(1.75rem, 1.48rem + 1.32vw, 2.65rem); --step-4: clamp(2.10rem, 1.62rem + 2.35vw, 3.75rem); /* ---- Space & shape ---- */ --gutter: clamp(1.15rem, 0.8rem + 1.7vw, 2.5rem); --wrap: 1180px; --wrap-read: 760px; --radius: 14px; --radius-sm: 9px; --shadow-1: 0 1px 2px rgba(4,32,63,.05), 0 4px 14px rgba(4,32,63,.06); --shadow-2: 0 2px 6px rgba(4,32,63,.07), 0 16px 40px rgba(4,32,63,.10); --header-h: 68px; } /* Per-section accent, set via */ /* ---- Banner sets. Each checked for AA contrast against its own ground. ---- */ body[data-banner="lavender"] { --bar:#E9E6F7EE; --bar-solid:#E9E6F7; --bar-ink:#1B1836; --bar-ink-2:rgba(27,24,54,.80); --bar-ink-3:rgba(27,24,54,.58); --bar-hover:rgba(27,24,54,.07); --bar-line:rgba(27,24,54,.13); --bar-mark:#5B3FA8; --bar-btn:#4C3A8C; --bar-btn-ink:#FFFFFF; --bar-drawer:#E9E6F7; --bar-drawer-ink:rgba(27,24,54,.74); } body[data-banner="parchment"] { --bar:#F4F2EAEE; --bar-solid:#F4F2EA; --bar-ink:#17202B; --bar-ink-2:rgba(23,32,43,.80); --bar-ink-3:rgba(23,32,43,.56); --bar-hover:rgba(23,32,43,.06); --bar-line:rgba(23,32,43,.12); --bar-mark:#8F6718; --bar-btn:#0B3460; --bar-btn-ink:#FFFFFF; --bar-drawer:#F4F2EA; --bar-drawer-ink:rgba(23,32,43,.74); } body[data-banner="sand"] { --bar:#EFE7D8EE; --bar-solid:#EFE7D8; --bar-ink:#2A2112; --bar-ink-2:rgba(42,33,18,.80); --bar-ink-3:rgba(42,33,18,.56); --bar-hover:rgba(42,33,18,.07); --bar-line:rgba(42,33,18,.13); --bar-mark:#8A5A2B; --bar-btn:#0B3460; --bar-btn-ink:#FFFFFF; --bar-drawer:#EFE7D8; --bar-drawer-ink:rgba(42,33,18,.74); } body[data-banner="ink"] { --bar:rgba(18,20,24,.96); --bar-solid:#121418; --bar-ink:#FFFFFF; --bar-ink-2:rgba(255,255,255,.84); --bar-ink-3:rgba(255,255,255,.58); --bar-hover:rgba(255,255,255,.10); --bar-line:rgba(255,255,255,.12); --bar-mark:#C9A24A; --bar-btn:#C9A24A; --bar-btn-ink:#1A1405; --bar-drawer:#121418; --bar-drawer-ink:rgba(255,255,255,.75); } body[data-section="god"] { --accent: var(--c-god); --accent-soft:#F6EDE3; } body[data-section="submission"] { --accent: var(--c-submission); --accent-soft:#F2F0E1; } body[data-section="practices"] { --accent: var(--c-practices); --accent-soft:#E3F0F2; } body[data-section="quran"] { --accent: var(--c-quran); --accent-soft:#F8F0DC; } body[data-section="media"] { --accent: var(--c-media); --accent-soft:#E8EDF7; } body[data-section="grow"] { --accent: var(--c-grow); --accent-soft:#E4F1E8; } /* ========================================================================== Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.68; -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg, video { max-width: 100%; height: auto; display: block; } h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; color: var(--ink); } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-2); } h3 { font-size: var(--step-1); } h4 { font-size: var(--step-1); } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--green); text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { color: var(--accent); } ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; } li { margin-bottom: .4em; } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--gold-soft); } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap-read { width: 100%; max-width: var(--wrap-read); margin-inline: auto; padding-inline: var(--gutter); } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--green-deep); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--radius-sm) 0; } .skip:focus { left: 0; } .visually-hidden { position:absolute !important; 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; gap: .5em; font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; letter-spacing: .01em; padding: .78em 1.5em; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; min-height: 44px; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-1); } .btn-primary:hover { background: var(--green-deep); color: #fff; box-shadow: var(--shadow-2); } .btn-accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-1); } .btn-accent:hover { color: #fff; filter: brightness(.92); box-shadow: var(--shadow-2); } .btn-ghost { background: transparent; color: var(--green); border-color: var(--line); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .btn-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.32); } .btn-light:hover { background: rgba(255,255,255,.22); color: #fff; } /* ---- Chrome stays in the sans: header, footer, controls, labels ---------- Reading text (prose, cards, questions, verses, the Quran reader) inherits the serif from body. Everything a visitor operates rather than reads is listed here, the way WikiSubmission keeps its sans to navigation and tags. */ .site-header, .crumbs, .btn, .signup, .form-note, .site-footer, .ask-fab, .ask-panel, .ask-page, .qr-controls, .qr-jump, .qr-pager, .qr-num, .qr-eyebrow, .qr-dir, .qr-sub, th { font-family: var(--font-ui); } /* …but the Quran's own English stays in the reading serif. */ .qr-en, .qr-fn { font-family: var(--font-body); } /* ========================================================================== Header & navigation ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bar); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--bar-line); } .header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--bar-ink); flex: 0 0 auto; min-height: 44px; padding: 3px 2px; border-radius: 8px; } .brand:hover { color: var(--bar-ink); } /* The mark is a shaped badge with its own border and a transparent surround - no radius, or the oval's widest points get clipped. */ .brand-mark { width: auto; height: 42px; flex: 0 0 auto; } .brand-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-name { font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; letter-spacing: .005em; } .brand-sub { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bar-ink-3); } .nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; } .nav-item { position: relative; } .nav-link { display: inline-flex; align-items: center; gap: .35em; color: var(--bar-ink-2); text-decoration: none; font-size: .875rem; font-weight: 500; padding: .62rem .72rem; border-radius: 8px; white-space: nowrap; background: none; border: 0; font-family: inherit; cursor: pointer; } .nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--bar-ink); background: var(--bar-hover); } .nav-item.is-current > .nav-link { color: var(--bar-ink); } .nav-item.is-current > .nav-link::after { content: ""; position: absolute; left: .72rem; right: .72rem; bottom: .18rem; height: 2px; background: var(--bar-mark); border-radius: 2px; } .nav-caret { width: 9px; height: 9px; opacity: .6; transition: transform .18s ease; } .nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); } .nav-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 290px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: .55rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .16s ease; } .nav-item.is-open .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-panel-head { padding: .55rem .75rem .7rem; margin-bottom: .35rem; border-bottom: 1px solid var(--line); } .nav-panel-layer { display: block; font-size: .64rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .nav-panel-tag { display: block; font-family: var(--font-display); font-size: .98rem; color: var(--ink-soft); font-style: italic; margin-top: .15rem; } .nav-panel a { display: block; padding: .52rem .75rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: .875rem; } .nav-panel a:hover { background: var(--paper-2); color: var(--accent); } .nav-panel a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav-panel .nav-panel-all { font-weight: 600; color: var(--green); } /* The Ask pill takes the banner's own button colour, so it stays legible whether the bar is dark or light. */ .site-header .btn-light, .site-header .btn-primary { background: var(--bar-btn); color: var(--bar-btn-ink); border-color: transparent; } .site-header .btn-light:hover, .site-header .btn-primary:hover { background: var(--bar-btn); color: var(--bar-btn-ink); filter: brightness(1.12); } .header-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; margin-left: .4rem; } .nav-toggle { display: none; background: none; border: 1.5px solid var(--bar-line); border-radius: 9px; width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; } .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--bar-ink); position: relative; } .nav-toggle span::before, .nav-toggle span::after { content:""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--bar-ink); transition: transform .2s ease, top .2s ease; } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } @media (max-width: 1060px) { /* backdrop-filter makes .site-header the containing block for position:fixed descendants, which collapses the off-canvas nav to header height. */ .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bar-solid); } .nav { top: 100%; left: 0; right: 0; bottom: auto; height: calc(100dvh - var(--header-h)); inset: auto; } .nav-toggle { display: inline-flex; } .nav { position: fixed; top: var(--header-h); left: 0; right: 0; margin: 0; background: var(--bar-drawer); height: calc(100dvh - var(--header-h)); max-height: calc(100vh - var(--header-h)); flex-direction: column; align-items: stretch; gap: 0; padding: 1rem var(--gutter) 3rem; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; visibility: hidden; } .nav.is-open { transform: translateX(0); visibility: visible; } .nav-item { border-bottom: 1px solid var(--bar-line); } .nav-link { width: 100%; justify-content: space-between; padding: 1rem .25rem; font-size: 1.02rem; border-radius: 0; } .nav-item.is-current > .nav-link::after { display: none; } .nav-item.is-current > .nav-link { color: var(--bar-mark); } .nav-panel { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; background: transparent; border: 0; box-shadow: none; padding: 0 0 .8rem .25rem; min-width: 0; display: none; } .nav-item.is-open .nav-panel { display: block; transform: none; } .nav-panel-head { display: none; } .nav-panel a { color: var(--bar-drawer-ink); padding: .58rem .6rem; } .nav-panel a:hover, .nav-panel a[aria-current="page"] { background: var(--bar-hover); color: var(--bar-ink); } .header-actions .btn { padding: .6em 1em; } .header-actions .btn-label-long { display: none; } } @media (max-width: 420px) { .brand-sub { display: none; } .brand-name { font-size: 1.1rem; } } /* ========================================================================== Hero ========================================================================== */ /* ---- hero film ------------------------------------------------------- A tall film on a wide band. It is NOT stretched: the emblem is a round badge with a wordmark on a ribbon, and stretching it makes an ellipse of the badge and cuts the words off. The band takes the film's own cream instead, so the film has no visible edges at all, and a soft wash of its own gold sits behind it to stop a wide screen reading as an empty stripe. */ .herofilm { position: relative; overflow: hidden; background: #F6E5CE; padding-block: clamp(.7rem, .5rem + 1vw, 1.3rem); } .herofilm-wash { position: absolute; inset: -10%; background-size: cover; background-position: center 34%; filter: blur(80px) saturate(126%); opacity: .62; /* The clear middle has to stay WIDER than the film itself at every screen size, or the film's own cream edge shows as a box against the wash. The film is at most about a third of the band's width on a phone, so a clear centre of roughly two thirds covers every case. */ -webkit-mask-image: radial-gradient(76% 100% at 50% 50%, transparent 46%, #000 100%); mask-image: radial-gradient(76% 100% at 50% 50%, transparent 46%, #000 100%); } .herofilm::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* Only a fade into the page below. Nothing is laid over the emblem itself - a veil across the middle is what made it look washed out. */ background: linear-gradient(to bottom, transparent 82%, rgba(251,250,246,.72) 95%, var(--paper) 100%); } .herofilm-stage { position: relative; display: flex; justify-content: center; height: clamp(210px, 25vw, 340px); } .herofilm-v, .herofilm-still { display: block; height: 100%; width: auto; max-width: 100%; } .herofilm-still { display: none; } @media (prefers-reduced-motion: reduce) { .herofilm-v { display: none; } .herofilm-still { display: block; } } @media (max-width: 540px) { .herofilm-stage { height: clamp(180px, 48vw, 250px); } .herofilm-wash { filter: blur(44px) saturate(126%); } } .hero { position: relative; background: var(--green-deep); color: #fff; overflow: hidden; padding-block: clamp(3rem, 2rem + 6vw, 6rem); } .hero::before { content:""; position: absolute; inset: 0; background: radial-gradient(1100px 480px at 12% -10%, rgba(201,162,74,.22), transparent 62%), radial-gradient(900px 440px at 96% 8%, rgba(255,255,255,.08), transparent 60%); pointer-events: none; } .hero > * { position: relative; } .hero h1, .hero h2 { color: #fff; } .hero-eyebrow { display: inline-flex; align-items: center; gap: .5em; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin-bottom: 1rem; } .hero-eyebrow::before { content:""; width: 26px; height: 1.5px; background: var(--gold); } .hero-title { max-width: 17ch; margin-bottom: .55rem; } .hero-lede { font-size: var(--step-1); color: rgba(255,255,255,.82); max-width: 58ch; margin-bottom: 1.8rem; font-weight: 300; } .hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; } .hero-verse { margin-top: 2.4rem; padding: 1.4rem 1.6rem; border-left: 3px solid var(--gold); background: rgba(255,255,255,.055); border-radius: 0 var(--radius) var(--radius) 0; max-width: 62ch; } .hero-verse p { font-family: var(--font-quran); font-size: var(--step-1); font-style: italic; color: rgba(255,255,255,.94); } .hero-verse cite { display: block; margin-top: .5rem; font-style: normal; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } .hero-page { padding-block: clamp(2.4rem, 1.8rem + 3.6vw, 4rem); } .hero-page .hero-title { font-size: var(--step-3); max-width: 22ch; } .block-head h2 { font-size: var(--step-3); } /* Layer ribbon shown under a section hero */ .layer-strip { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.6rem; } .layer-chip { display: inline-flex; align-items: center; gap: .45em; padding: .62em .95em; min-height: 40px; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .03em; background: rgba(255,255,255,.10); color: rgba(255,255,255,.8); text-decoration: none; border: 1px solid rgba(255,255,255,.14); } .layer-chip:hover { background: rgba(255,255,255,.2); color: #fff; } .layer-chip[aria-current="true"] { background: var(--gold); color: #241a05; border-color: var(--gold); } .layer-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; } /* ---- One reading column ------------------------------------------------- A heading, a paragraph, a question row and a verse should start and end on the same two lines down the page. Text-bearing blocks therefore share --wrap-read, and the inner measures that used to cap paragraphs at about half the band are removed. Grids (cards, science, tables) keep the full width, because they read as a different kind of object. */ .is-prose > .wrap, .is-faq > .wrap, .is-verses > .wrap, .is-contents > .wrap, .is-summaries > .wrap, .is-steps > .wrap, .is-callout > .wrap, .is-checklist > .wrap, .is-linklist > .wrap { max-width: var(--wrap-read); } .is-prose .prose, .is-prose .prose > p, .is-faq .faq .faq-body, .band-intro .prose { max-width: none; } /* ========================================================================== Breadcrumbs ========================================================================== */ .crumbs { background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: .8rem; } .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; margin: 0; padding: .72rem 0; } .crumbs li { margin: 0; display: flex; align-items: center; gap: .4rem; } .crumbs a { padding: .35rem 0; } .crumbs li + li::before { content: "›"; color: var(--ink-faint); } .crumbs a { color: var(--ink-soft); text-decoration: none; } .crumbs a:hover { color: var(--accent); text-decoration: underline; } .crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; } /* ========================================================================== Sections & blocks ========================================================================== */ .band { padding-block: clamp(2.6rem, 2rem + 3vw, 4.6rem); } .band-tint { background: var(--paper-2); } .band-accent { background: var(--accent-soft); } .band-dark { background: var(--green-deep); color: rgba(255,255,255,.88); } .band-dark h2, .band-dark h3 { color: #fff; } .band + .band:not(.band-tint):not(.band-accent):not(.band-dark) { padding-top: 0; } .block-head { max-width: 62ch; margin-bottom: 1.9rem; } .block-head h2 { margin-bottom: .4rem; } .block-head .intro { color: var(--ink-soft); font-size: var(--step-1); font-weight: 300; } .band-dark .block-head .intro { color: rgba(255,255,255,.72); } .kicker { display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: .6rem; } .band-dark .kicker { color: var(--gold); } .prose { max-width: 68ch; } .prose > p { font-size: var(--step-0); } .prose .lead { font-size: var(--step-1); color: var(--ink-soft); font-weight: 300; } .prose pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.6; background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; overflow-x: auto; color: var(--ink-soft); white-space: pre; } /* ---- Card grid ---- */ .grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } @media (max-width: 560px) { .grid, .grid-2, .grid-4 { grid-template-columns: 1fr; } } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; position: relative; } .card h3 { font-size: var(--step-1); margin-bottom: .45rem; } .card p { color: var(--ink-soft); font-size: .95rem; } .card-ref { margin-top: auto; padding-top: .9rem; font-family: var(--font-quran); font-style: italic; color: var(--accent); font-size: .95rem; } a.card, .card-link { text-decoration: none; color: inherit; } a.card:hover, .card:has(.card-cta:hover) { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent); } a.card:hover h3 { color: var(--accent); } .card-cta { margin-top: auto; padding-top: 1rem; font-weight: 600; font-size: .85rem; color: var(--accent); display: inline-flex; align-items: center; gap: .4em; } a.card:hover .card-cta { gap: .7em; } .card-num { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: .9rem; margin-bottom: .9rem; flex: 0 0 auto; } .card-icon { font-size: 1.6rem; line-height: 1; margin-bottom: .7rem; } /* Section / layer cards on the homepage */ .layer-card { border-top: 4px solid var(--lc, var(--green)); } .layer-card .layer-name { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--lc); margin-bottom: .4rem; } .layer-card .card-cta { color: var(--lc); } .layer-card:hover { border-color: var(--line); border-top-color: var(--lc); } a.layer-card:hover h3 { color: var(--lc); } /* ---- Verses ---- */ .verse-list { display: grid; gap: 1rem; } .verse { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.35rem 1.5rem; } .verse blockquote { margin: 0; font-family: var(--font-quran); font-size: var(--step-1); line-height: 1.55; color: var(--ink); } .verse cite { display: block; margin-top: .6rem; font-style: normal; font-weight: 700; font-size: .78rem; letter-spacing: .1em; color: var(--accent); } .verse .verse-note { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--line); font-size: .9rem; color: var(--ink-soft); } .verse-feature { background: var(--accent-soft); border-left-width: 4px; } /* ---- Soul Seed of the day ---- */ .seed { background: linear-gradient(135deg, var(--green-deep), #0D3A6B); color: #fff; border-radius: var(--radius); padding: clamp(1.6rem, 1.2rem + 2vw, 2.8rem); box-shadow: var(--shadow-2); position: relative; overflow: hidden; } .seed::after { content:""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(201,162,74,.24), transparent 68%); pointer-events: none; } .seed .kicker { color: var(--gold); } .seed blockquote { margin: 0; font-family: var(--font-quran); font-size: var(--step-2); line-height: 1.45; font-style: italic; } .seed cite { display: block; margin-top: .8rem; font-style: normal; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } .seed-reflection { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.82); font-size: .95rem; } /* ---- Callouts: Reflect / Act / Note ---- */ .callout { border-radius: var(--radius); padding: 1.5rem 1.6rem; border: 1px solid var(--line); background: #fff; display: flex; gap: 1.1rem; align-items: flex-start; } .callout-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: var(--accent-soft); } .callout h3 { font-size: var(--step-1); margin-bottom: .35rem; } .callout p { color: var(--ink-soft); font-size: .95rem; } .callout-reflect { background: var(--gold-soft); border-color: #EBDCB4; } .callout-reflect .callout-icon { background: #EFDFB8; } .callout-act { background: var(--green-soft); border-color: #C9DAEE; } .callout-act .callout-icon { background: #D5E4F4; } /* ---- Growth prompt (ends every page) ---- */ .growth { background: var(--gold-soft); border: 1px solid #EBDCB4; border-radius: var(--radius); padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem); } .growth .kicker { color: #8A6516; } .growth h2 { font-size: var(--step-2); } .growth-question { margin-top: 1.2rem; padding: 1.1rem 1.3rem; background: #fff; border-radius: var(--radius-sm); border-left: 3px solid var(--gold); font-family: var(--font-quran); font-size: var(--step-1); font-style: italic; color: var(--ink); } .growth-actions { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .7rem; } /* ---- FAQ / accordion ---- */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; padding: 1.2rem 2.6rem 1.2rem 0; position: relative; min-height: 44px; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); font-family: var(--font-ui); font-size: 1.5rem; font-weight: 300; color: var(--accent); line-height: 1; } .faq details[open] summary::after { content: "−"; } .faq summary:hover { color: var(--accent); } .faq .faq-body { padding: 0 0 1.35rem; color: var(--ink-soft); max-width: 70ch; } /* ---- Steps ---- */ .steps { counter-reset: step; display: grid; gap: 1rem; } .step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.5rem 1.35rem 4.2rem; position: relative; counter-increment: step; } .step::before { content: counter(step); position: absolute; left: 1.3rem; top: 1.3rem; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .88rem; } .step h3 { font-size: var(--step-1); margin-bottom: .3rem; } .step p { color: var(--ink-soft); font-size: .95rem; } /* ---- Science & Scripture ---- */ .science-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; margin-bottom: 1.1rem; } .science-item h3 { font-size: var(--step-1); display: flex; gap: .6rem; align-items: baseline; } .science-item h3 .sci-num { font-size: .74rem; letter-spacing: .12em; color: var(--accent); font-family: var(--font-ui); font-weight: 700; flex: 0 0 auto; } .science-verse { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; margin: 1rem 0; font-family: var(--font-quran); font-size: var(--step-1); font-style: italic; } .science-verse cite { display: block; margin-top: .5rem; font-style: normal; font-family: var(--font-ui); font-size: .76rem; font-weight: 700; letter-spacing: .1em; color: var(--accent); } .science-body { color: var(--ink-soft); } .science-cite { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line); font-size: .8rem; color: var(--ink-faint); } .img-slot { margin-top: 1rem; border: 1.5px dashed var(--line); border-radius: var(--radius-sm); background: var(--paper-2); padding: 1.5rem; text-align: center; color: var(--ink-faint); font-size: .82rem; } /* ---- Table ---- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; } table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 480px; } th, td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } th { background: var(--paper-2); font-family: var(--font-ui); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } tbody tr:last-child td { border-bottom: 0; } /* ---- Checklist ---- */ .checklist { list-style: none; padding: 0; display: grid; gap: .6rem; } .checklist li { display: flex; gap: .75rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .85rem 1.1rem; margin: 0; } .checklist li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: 0 0 auto; } /* ---- Content-slot marker (pages awaiting the owner's writing) ---- */ .slot { border: 1.5px dashed var(--gold); background: var(--gold-soft); border-radius: var(--radius); padding: 1.3rem 1.5rem; color: #6E5211; } .slot-tag { display: inline-flex; align-items: center; gap: .4em; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8A6516; margin-bottom: .5rem; } .slot p { font-size: .92rem; color: #6E5211; } .slot ul { margin-bottom: 0; font-size: .92rem; } body.hide-slots .slot { display: none; } /* ---- Framework strip (Learn → Understand → Reflect → Act → Connect) ---- */ .framework { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; } .framework-step { display: inline-flex; align-items: center; gap: .5em; padding: .5em 1em; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--ink-soft); } .framework-arrow { color: var(--ink-faint); } @media (max-width: 560px) { .framework-arrow { display: none; } } /* ---- Related / Root & Branch ---- */ .related-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .related-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .related-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: var(--accent); } .related-card .rc-section { display: block; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); } .related-card .rc-title { display: block; font-family: var(--font-display); font-size: var(--step-1); margin: .25rem 0 .3rem; } .related-card:hover .rc-title { color: var(--accent); } .related-card .rc-note { display: block; font-size: .87rem; color: var(--ink-soft); } /* ---- Prev / Next ---- */ .pager { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; margin-top: 2.5rem; } @media (max-width: 620px) { .pager { grid-template-columns: 1fr; } } .pager a { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: #fff; transition: border-color .18s ease, transform .18s ease; } .pager a:hover { border-color: var(--accent); transform: translateY(-2px); } .pager .pg-dir { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; } .pager .pg-title { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); } .pager a:hover .pg-title { color: var(--accent); } .pager .pg-next { text-align: right; } .pager .pg-empty { border-style: dashed; opacity: .45; pointer-events: none; } /* ========================================================================== Newsletter ========================================================================== */ .signup { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 480px; margin-top: 1.2rem; } .signup input[type="email"] { flex: 1 1 220px; min-width: 0; padding: .82rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--line); font: inherit; font-size: .92rem; background: #fff; color: var(--ink); min-height: 44px; } .signup input::placeholder { color: var(--ink-faint); } .signup input:focus-visible { border-color: var(--accent); } .band-dark .signup input[type="email"] { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; } .band-dark .signup input::placeholder { color: rgba(255,255,255,.5); } .form-note { font-size: .78rem; color: var(--ink-faint); margin-top: .7rem; } .band-dark .form-note { color: rgba(255,255,255,.55); } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--green-deep); color: rgba(255,255,255,.72); padding-block: 3.2rem 2rem; margin-top: 0; } .footer-top { display: grid; gap: 2.2rem; grid-template-columns: minmax(230px, 1.3fr) repeat(auto-fit, minmax(150px, 1fr)); } @media (max-width: 900px) { .footer-top { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } } /* .brand takes its colour from --bar-ink, which is the dark navy the header bar wants. In the footer that lands dark-on-purple at about 1.9:1 and the site's name is close to unreadable. */ .footer-brand .brand, .footer-brand .brand:hover { color: #fff; margin-bottom: .9rem; } .footer-brand .brand-sub { color: rgba(255,255,255,.62); } .footer-tagline { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: rgba(255,255,255,.78); max-width: 34ch; } .footer-col h4 { color: #fff; font-family: var(--font-ui); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .9rem; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: .1rem; } .footer-col a { display: inline-block; padding: .35rem 0; } .footer-col a { color: rgba(255,255,255,.68); text-decoration: none; font-size: .875rem; } .footer-col a:hover { color: var(--gold); text-decoration: underline; } .footer-bottom { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: .8rem; color: rgba(255,255,255,.5); } .footer-bottom a { color: rgba(255,255,255,.6); } .footer-shahada { font-family: var(--font-quran); font-style: italic; font-size: .95rem; color: var(--gold); } /* ========================================================================== Ask — the knowledge base assistant ========================================================================== */ .ask-fab { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: inline-flex; align-items: center; gap: .55em; padding: .85em 1.25em; background: var(--green); color: #fff; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600; box-shadow: var(--shadow-2); transition: transform .18s ease, background .18s ease; min-height: 48px; } .ask-fab:hover { transform: translateY(-2px); background: var(--green-deep); color: #fff; } @media (max-width: 560px) { .ask-fab .ask-fab-label { display: none; } .ask-fab { padding: .9em; border-radius: 50%; } } .ask-panel { position: fixed; right: 0; bottom: 0; top: 0; width: min(460px, 100%); z-index: 120; background: var(--paper); border-left: 1px solid var(--line); box-shadow: -12px 0 44px rgba(4,32,63,.16); display: flex; flex-direction: column; transform: translateX(102%); transition: transform .26s ease; visibility: hidden; } .ask-panel.is-open { transform: translateX(0); visibility: visible; } .ask-backdrop { position: fixed; inset: 0; background: rgba(4,32,63,.46); z-index: 110; opacity: 0; visibility: hidden; transition: opacity .26s ease; } .ask-backdrop.is-open { opacity: 1; visibility: visible; } .ask-head { background: var(--green-deep); color: #fff; padding: 1.05rem 1.2rem; display: flex; align-items: center; gap: .8rem; } .ask-head h2 { color: #fff; font-size: 1.1rem; margin: 0; } .ask-head p { margin: 0; font-size: .74rem; color: rgba(255,255,255,.6); } .ask-close { margin-left: auto; background: rgba(255,255,255,.12); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 10px; cursor: pointer; font-size: 1.15rem; line-height: 1; } .ask-close:hover { background: rgba(255,255,255,.22); } .ask-log { flex: 1; overflow-y: auto; padding: 1.2rem; display: flex; flex-direction: column; gap: 1rem; } .ask-form { padding: .9rem 1rem 1.1rem; border-top: 1px solid var(--line); background: #fff; } .ask-inputrow { display: flex; gap: .55rem; align-items: flex-end; } .ask-input { flex: 1; min-width: 0; resize: none; font: inherit; font-size: .93rem; line-height: 1.5; padding: .7rem .95rem; border: 1.5px solid var(--line); border-radius: 18px; background: var(--paper); color: var(--ink); max-height: 120px; min-height: 44px; } .ask-input:focus-visible { border-color: var(--accent); } .ask-send { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--green); color: #fff; cursor: pointer; display: grid; place-items: center; } .ask-send:hover:not(:disabled) { background: var(--green-deep); } .ask-send:disabled { opacity: .4; cursor: not-allowed; } .ask-msg { max-width: 100%; } .ask-msg-user { align-self: flex-end; background: var(--green); color: #fff; padding: .7rem 1.05rem; border-radius: 16px 16px 4px 16px; max-width: 85%; font-size: .93rem; } .ask-msg-bot { background: #fff; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 1rem 1.15rem; font-size: .93rem; } .ask-msg-bot > p:first-child { margin-top: 0; } .ask-answer-lead { font-size: .8rem; color: var(--ink-faint); margin-bottom: .85rem; } .ask-passage { border-left: 2.5px solid var(--accent); padding: .2rem 0 .2rem .85rem; margin-bottom: .95rem; } .ask-passage p { margin: 0 0 .45rem; color: var(--ink-soft); } .ask-passage:last-child { margin-bottom: 0; } .ask-source { font-size: .78rem; } .ask-source a { color: var(--accent); font-weight: 600; } .ask-source .ask-cat { color: var(--ink-faint); font-weight: 400; } .ask-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; } .ask-chip { font: inherit; font-size: .8rem; padding: .7em 1.05em; min-height: 44px; border-radius: 999px; cursor: pointer; background: #fff; border: 1px solid var(--line); color: var(--ink-soft); text-align: left; display: inline-flex; align-items: center; } .ask-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .ask-status { font-size: .82rem; color: var(--ink-faint); display: flex; align-items: center; gap: .5rem; } .ask-dots { display: inline-flex; gap: 3px; } .ask-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); animation: askdot 1.1s infinite ease-in-out; } .ask-dots i:nth-child(2) { animation-delay: .18s; } .ask-dots i:nth-child(3) { animation-delay: .36s; } @keyframes askdot { 0%,80%,100% { opacity:.25; transform: translateY(0);} 40% { opacity:1; transform: translateY(-3px);} } .ask-disclaimer { font-size: .7rem; color: var(--ink-faint); margin-top: .6rem; text-align: center; } /* Full-page Ask */ .ask-page-log { min-height: 320px; } .ask-page-shell { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); } .ask-page-shell .ask-log { padding: 1.6rem; background: var(--paper); } .ask-page-shell .ask-form { background: #fff; } @media print { .site-header, .site-footer, .ask-fab, .ask-panel, .ask-backdrop, .pager, .crumbs { display: none !important; } body { background: #fff; } .hero { background: #fff; color: #000; } .hero h1 { color: #000; } } /* ========================================================================== Touch devices — every interactive target reaches the 44px comfort size. Scoped to coarse pointers so desktop density is unaffected. ========================================================================== */ @media (pointer: coarse) { .crumbs ol { padding-block: .35rem; } .crumbs a, .crumbs [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; } .footer-col a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; } .footer-col li { margin-bottom: 0; } .ask-source a { min-height: 0; } .layer-chip { min-height: 44px; } } /* ========================================================================== Hero layout — emblem alongside the words on wide screens. Swap the image in assets/img/ to change the artwork; nothing else moves. ========================================================================== */ .hero-grid { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; } @media (min-width: 940px) { .hero-home .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 3.5rem; } .hero-page .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: 3rem; } } .hero-art { justify-self: center; position: relative; width: min(100%, 400px); } .hero-page .hero-art { width: min(100%, 250px); } .hero-art img { width: 100%; } .hero-art::before { content: ""; position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,74,.30), transparent 66%); pointer-events: none; } @media (max-width: 939px) { .hero-art { display: none; } .hero-page .hero-art { display: none; } } .hero-home .hero-lede { font-size: var(--step-2); line-height: 1.4; } .hero-home .hero-title { font-size: var(--step-4); } /* First prose block on a landing page reads as a lead-in, not body text */ .band-intro { padding-block: clamp(2.2rem, 1.8rem + 2vw, 3.4rem); } /* .band-intro .prose measure now comes from the shared reading column. */ .band-intro .prose > p:first-child { font-size: var(--step-1); color: var(--ink); font-weight: 300; line-height: 1.6; } /* ========================================================================== Review fixes — reading measure, empty states, affordances ========================================================================== */ /* Long-form measure: .prose was set well, the other renderers ran 91-164ch. */ .verse blockquote, .verse .verse-note, .growth-question, .seed blockquote, .step p, .science-body, .science-cite, .slot p, .slot ul, .callout p, .faq .faq-body, .card p, .science-verse { max-width: 68ch; } .seed blockquote { max-width: 34ch; } /* Table cells the owner has not filled in yet — never a silent blank void. */ .td-slot { color: var(--gold); background: var(--gold-soft); text-align: center; font-size: .9rem; } .td-slot::after { content: "to be written"; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #8A6516; display: block; margin-top: .15rem; } /* Embed reservations read as deliberate, like the writing slots. */ .img-slot { border-color: var(--gold); background: var(--gold-soft); color: #6E5211; text-align: left; } .img-slot strong { color: #6E5211; } .img-slot .slot-tag { color: #8A6516; } body.hide-slots .slot, body.hide-slots .img-slot, body.hide-slots .td-slot::after { display: none; } /* Megamenu: bridge the gap so the panel does not close as you reach for it. */ .nav-item { } @media (min-width: 1061px) { .nav-item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } } /* Scroll affordance on wide tables. */ .table-wrap { background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 42px 100% no-repeat local, linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right / 42px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(4,32,63,.14), transparent) left / 16px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(4,32,63,.14), transparent) right / 16px 100% no-repeat scroll, #fff; } /* Ask: keep the floating button a full 48px even when it is a circle. */ @media (max-width: 560px) { .ask-fab { min-width: 48px; min-height: 48px; justify-content: center; } } .ask-send:disabled { opacity: .45; cursor: default; } .ask-retry { margin-top: .7rem; } .ask-sourcedomain { color: var(--ink-faint); } /* Ask page: the question box must be visible without scrolling. */ body[data-section="ask"] .hero { padding-block: clamp(1.5rem, 1rem + 2vw, 2.3rem); } body[data-section="ask"] .hero-lede { font-size: var(--step-0); max-width: 68ch; } body[data-section="ask"] .band:first-of-type { padding-top: clamp(1.4rem, 1rem + 1.4vw, 2rem); } /* Structured science copy. */ .sci-label { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin: 1.1rem 0 .4rem; } .science-body ul { max-width: 68ch; } /* Pager with only one neighbour should not show a phantom button. */ .pager.pager-one { grid-template-columns: 1fr; } /* External links in the footer get a quiet cue. */ .footer-col a[rel~="noopener"]::after { content: " ↗"; opacity: .6; } /* Ask page: the question box must be reachable without scrolling, on a laptop and on a phone. Keep the greeting short and the hero tight. */ body[data-section="ask"] .hero { padding-block: clamp(1.1rem, .8rem + 1.4vw, 1.9rem); } body[data-section="ask"] .hero-title { font-size: var(--step-2); } body[data-section="ask"] .hero-lede { font-size: var(--step-0); max-width: 62ch; margin-bottom: 0; } body[data-section="ask"] .band:first-of-type { padding-block: clamp(1rem, .8rem + 1vw, 1.5rem); } .ask-page-log { min-height: 150px; max-height: min(58vh, 620px); } @media (max-width: 560px) { .ask-page-log { min-height: 120px; max-height: 52vh; } } /* --------------------------------------------------------------------------- Ask — Quran Study sessions A second kind of result. Deliberately quieter than an article passage: the sessions are a pointer to where a subject was worked through, not a quotable source, so they sit below the passages in a tinted block rather than competing with them. ------------------------------------------------------------------------- */ .ask-study { margin-top: 1.4rem; padding: .95rem 1rem .85rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; } .ask-study-lead { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .7rem; } .ask-studyitem { margin-bottom: .85rem; } .ask-studyitem:last-of-type { margin-bottom: .2rem; } .ask-studyitem p { margin: 0 0 .25rem; } .ask-studytitle { font-weight: 600; color: var(--ink); font-size: .92rem; } .ask-studymeta, .ask-studyverses { font-size: .78rem; color: var(--ink-faint); } .ask-studylisten { font-size: .78rem; } .ask-studylisten a { color: var(--accent); font-weight: 600; text-decoration: none; } .ask-studylisten a:hover, .ask-studylisten a:focus-visible { text-decoration: underline; } .ask-verse { display: inline-block; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .74rem; color: var(--accent); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: .04rem .3rem; margin: .1rem .08rem 0 0; } .ask-verse-more { font-size: .74rem; color: var(--ink-faint); } .ask-studynote { margin: .75rem 0 0; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .76rem; color: var(--ink-faint); } .ask-studynote a { color: var(--accent); font-weight: 600; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ask-study { background: rgba(255,255,255,.03); } :root:not([data-theme="light"]) .ask-verse { background: transparent; } } /* --------------------------------------------------------------------------- The Quran reader Scripture is the one place on this site where the text should be left alone: generous measure, generous leading, nothing competing with it. The Arabic sits under each English verse at a larger size, because the script needs it to stay legible. ------------------------------------------------------------------------- */ .qr-wrap { max-width: 46rem; } .qr-head { text-align: center; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); } .qr-eyebrow { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; } .qr-title { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); line-height: 1.1; } .qr-sub { font-size: .85rem; color: var(--ink-faint); margin-top: .5rem; } .qr-title-ar { font-size: 1.9rem; margin-top: .7rem; color: var(--ink-soft); line-height: 1.7; } .qr-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.4rem 0 .4rem; } .qr-toggle { font: inherit; font-size: .8rem; cursor: pointer; background: transparent; color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: .45rem .95rem; min-height: 44px; } .qr-toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); } .qr-jump { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--ink-faint); } .qr-jump input { font: inherit; font-size: .85rem; padding: .4rem .55rem; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); } .qr-verses { margin-top: 1.2rem; } .qr-subtitle { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.25; color: var(--accent); margin: 2.6rem 0 1.1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); } .qr-subtitle:first-child { margin-top: .6rem; } .qr-verse { display: grid; grid-template-columns: 4.2rem 1fr; gap: .2rem 0; padding: 1rem 0; } .qr-verse + .qr-verse { border-top: 1px solid var(--line); } .qr-verse:target { background: var(--accent-soft); border-radius: 8px; } .qr-verse:target .qr-num { padding-left: .5rem; } .qr-num { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .78rem; color: var(--ink-faint); text-decoration: none; padding-top: .35rem; white-space: nowrap; } .qr-num:hover { color: var(--accent); } .qr-en { font-size: 1.06rem; line-height: 1.75; color: var(--ink); } .qr-ar { font-size: 1.5rem; line-height: 2.1; margin-top: .6rem; color: var(--ink-soft); font-family: "Noto Naskh Arabic", "Amiri", "Scheherazade New", serif; } .qr-tr { font-size: .88rem; font-style: italic; color: var(--ink-faint); margin-top: .5rem; line-height: 1.7; } .qr-fn { margin-top: .8rem; padding: .7rem .9rem; background: var(--paper-2); border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0; font-size: .86rem; line-height: 1.65; color: var(--ink-soft); } .qr-fn-mark { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .25rem; } .qr-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); } .qr-pager a { text-decoration: none; display: block; min-height: 44px; } .qr-dir { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .qr-name { display: block; font-weight: 600; color: var(--accent); font-size: .92rem; } .qr-next { text-align: right; } .qr-all { font-size: .82rem; color: var(--ink-faint); align-self: center; } .qr-source { margin-top: 1.8rem; font-size: .78rem; color: var(--ink-faint); line-height: 1.6; } .qr-grid { display: grid; gap: .6rem; margin-top: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); } .qr-card { display: grid; grid-template-columns: 2.4rem 1fr; grid-template-rows: auto auto; gap: 0 .6rem; align-items: baseline; text-decoration: none; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface, var(--paper)); min-height: 44px; } .qr-card:hover { border-color: var(--accent); background: var(--accent-soft); } .qr-card-n { grid-row: 1 / 3; font-family: var(--font-mono, ui-monospace, monospace); font-size: 1.05rem; color: var(--ink-faint); align-self: center; } .qr-card-t { font-weight: 600; color: var(--ink); font-size: .93rem; } .qr-card-ar { display: none; } .qr-card-v { font-size: .74rem; color: var(--ink-faint); } @media (max-width: 520px) { .qr-verse { grid-template-columns: 1fr; } .qr-num { padding-top: 0; padding-bottom: .3rem; } .qr-ar { font-size: 1.35rem; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qr-card { background: rgba(255,255,255,.03); } :root:not([data-theme="light"]) .qr-fn { background: rgba(255,255,255,.04); } } /* file size on a download card — informative, not a headline */ .rc-size { display: block; margin-top: .45rem; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .72rem; letter-spacing: .04em; color: var(--ink-faint); } /* --------------------------------------------------------------------------- Ask — a written answer When the site has already answered a question, that answer leads, and the scripture it rests on sits directly underneath in full. A reader should be able to check the reasoning against the verses without leaving the page: that check is the thing that catches a wrong answer. ------------------------------------------------------------------------- */ .ask-answer { border-left: 3px solid var(--accent); padding: .1rem 0 .1rem 1rem; margin-bottom: 1.3rem; } .ask-answer > p { margin: 0 0 .7rem; color: var(--ink-soft); } .ask-answer-q { font-weight: 600; color: var(--ink) !important; font-size: 1rem; line-height: 1.45; } .ask-scripture { margin: 1rem 0 .9rem; padding: .85rem 1rem; background: var(--paper-2); border-radius: 10px; } .ask-scripture-lead { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .6rem !important; } .ask-verseline { margin: 0 0 .55rem !important; font-size: .9rem; line-height: 1.65; color: var(--ink); } .ask-verseline:last-child { margin-bottom: 0 !important; } .ask-verseref { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .76rem; color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; } .ask-verseref:hover { text-decoration: underline; } .ask-verse-go { color: var(--ink-faint); font-style: italic; } .ask-answer-from { font-size: .8rem; color: var(--ink-faint); line-height: 1.6; } .ask-near { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--line); } .ask-near-lead { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .6rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ask-scripture { background: rgba(255,255,255,.04); } } /* one line on how a verse bears on the question, under the verse itself */ .ask-verseblock { margin-bottom: .8rem; } .ask-verseblock:last-child { margin-bottom: 0; } .ask-versenote { margin: .3rem 0 0 !important; padding-left: .85rem; border-left: 2px solid var(--line); font-size: .82rem; line-height: 1.6; color: var(--ink-faint); } /* ---- Appendix summaries: an faq accordion carrying four labelled parts ---- */ .summaries .sum-body { padding: .2rem 0 1.6rem; max-width: 72ch; } .summaries .sum-part { margin-bottom: 1.15rem; } .summaries .sum-part h4 { font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .4rem; } .summaries .sum-part p { color: var(--ink-soft); margin-bottom: .7rem; } .summaries .sum-verses { font-family: var(--font-mono, var(--font-ui)); font-size: .92rem; color: var(--ink-soft); } .summaries .sum-pages a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); } .summaries .sum-pages a:hover { border-color: var(--accent); } .summaries .sum-qs { margin: 0 0 .5rem 1.1rem; color: var(--ink-soft); } .summaries .sum-qs li { margin-bottom: .45rem; padding-left: .25rem; } .summaries .sum-open { margin-top: 1.1rem; } .summaries .sum-open a { color: var(--accent); font-weight: 600; text-decoration: none; } .summaries .sum-open a:hover { text-decoration: underline; } /* ---- Contents: the jump list at the top of a long page ---- */ .toc { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } @media (min-width: 720px) { .toc { grid-template-columns: 1fr 1fr; } } .toc-item { background: #fff; padding: .85rem 1.1rem; text-decoration: none; display: block; transition: background .15s ease; } .toc-item:hover { background: var(--gold-soft); } .toc-label { display: block; font-weight: 600; color: var(--ink); font-size: .97rem; } .toc-note { display: block; color: var(--ink-soft); font-size: .84rem; margin-top: .12rem; } html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ========================================================================== The refined treatment — body[data-visual="refined"] Opt in per page with "visual": "refined" in the content file. Everything here is colour and spacing; no page's markup changes. Removing the flag removes the treatment, and moving it into _brand.json would take it site-wide. Navy is out at Mohammad's instruction (19 Sep) and violet takes its place; the gold from the emblem stays and does the small work — rules, eyebrows, verse citations. Appended last so it wins over the per-section accent rules near the top of this file. ========================================================================== */ body[data-visual="refined"] { --green: #4C3A8C; /* primary action, where navy used to sit */ --green-deep: #372A66; --green-soft: #EFEBFA; --gold: #8A6A14; /* darkened, so it reads on a light ground */ --gold-soft: #F7F0DC; --paper: #FDFCFD; --paper-2: #F6F3FB; --paper-3: #F1ECFA; --ink: #191526; --ink-soft: #565070; --ink-faint: #7B7594; --line: #E7E2F0; --accent: #4C3A8C; --accent-soft: #EFEBFA; --shadow-1: 0 1px 2px rgba(30,20,70,.04), 0 4px 14px rgba(30,20,70,.05); --shadow-2: 0 2px 6px rgba(30,20,70,.06), 0 16px 40px rgba(30,20,70,.08); } /* ---- The hero comes up into the light ---------------------------------- */ body[data-visual="refined"] .hero { background: linear-gradient(172deg, #F2EEFB 0%, #FAF8FD 52%, var(--paper) 100%); color: var(--ink); } body[data-visual="refined"] .hero::before { background: radial-gradient(900px 420px at 6% -25%, rgba(138,106,20,.09), transparent 62%); } body[data-visual="refined"] .hero h1, body[data-visual="refined"] .hero h2 { color: var(--ink); } body[data-visual="refined"] .hero-lede { color: var(--ink-soft); } body[data-visual="refined"] .hero-verse { background: #fff; border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow-1); } body[data-visual="refined"] .hero-verse p { color: var(--ink); } body[data-visual="refined"] .layer-chip { background: #fff; color: var(--ink-soft); border-color: var(--line); } body[data-visual="refined"] .layer-chip:hover { background: var(--accent-soft); color: var(--accent); } body[data-visual="refined"] .layer-chip[aria-current="true"] { background: var(--accent); color: #fff; border-color: var(--accent); } /* ---- One ground, and a hairline where a tint used to be ----------------- */ body[data-visual="refined"] .band-tint { background: transparent; } body[data-visual="refined"] .band { padding-block: clamp(3.2rem, 2.4rem + 3.4vw, 5.4rem); } body[data-visual="refined"] .band + .band { padding-top: clamp(3.2rem, 2.4rem + 3.4vw, 5.4rem); } body[data-visual="refined"] .band + .band::before { content: ""; display: block; height: 1px; background: var(--line); max-width: var(--wrap-read); margin: 0 auto clamp(2.4rem, 1.8rem + 2.4vw, 3.8rem); } body[data-visual="refined"] .band-accent::before, body[data-visual="refined"] .band-dark::before { display: none; } /* ---- One tinted panel, behind the closing verses ----------------------- */ body[data-visual="refined"] .is-verses > .wrap { background: var(--paper-3); border-radius: 18px; padding-block: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); } body[data-visual="refined"] .is-verses + .band::before { display: none; } /* ---- Cards become an editorial list, not a row of boxes ---------------- */ body[data-visual="refined"] .card { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1.35rem 0 1.1rem; } body[data-visual="refined"] a.card:hover, body[data-visual="refined"] .card:has(.card-cta:hover) { transform: none; box-shadow: none; border-color: var(--accent); } body[data-visual="refined"] .card-num { background: var(--accent-soft); color: var(--accent); } /* ---- The small gold marks --------------------------------------------- */ body[data-visual="refined"] .kicker, body[data-visual="refined"] .hero-eyebrow { color: var(--gold); } body[data-visual="refined"] .hero-eyebrow::before { background: var(--gold); } body[data-visual="refined"] .card-ref, body[data-visual="refined"] .verse cite, body[data-visual="refined"] .science-verse cite, body[data-visual="refined"] .hero-verse cite { color: var(--gold); } /* Unboxed cards need a wider measure than a four-up grid gives them. */ body[data-visual="refined"] .cards .grid, body[data-visual="refined"] .grid-4, body[data-visual="refined"] .grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.6rem 2.4rem; } /* ---- Two things the site-wide switch broke, and their fixes ------------ 1. .btn-light was drawn for a dark band: white text on a translucent white fill. With the tinted bands and the hero now light, it turned invisible. Outside a genuinely dark band it becomes the solid button. 2. --gold was darkened so it reads on a light ground, which leaves it too dim on the footer and on any band that is still dark. Those two subtrees get the lighter gold back. */ body[data-visual="refined"] main .btn-light { background: transparent; color: var(--accent); border-color: var(--line); } body[data-visual="refined"] main .btn-light:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } body[data-visual="refined"] .band-dark .btn-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.32); } body[data-visual="refined"] .band-dark .btn-light:hover { background: rgba(255,255,255,.22); color: #fff; } body[data-visual="refined"] .site-footer, body[data-visual="refined"] .band-dark { --gold: #D9B45E; } /* The GOD landing page introduces exactly four submenu pages. The shared card grid fits three across at 1180px, which leaves the fourth stranded on a row of its own. Two-up is the only honest layout for four equal things. */ @media (min-width: 900px) { #the-four-pages .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== The growing tree — the animated hero art on the GOD landing page -------------------------------------------------------------------------- Mohammad, 19 September 2026: "a moving image, not a picture... high quality... very eye-catching and very calm." It is a cross-section, and the six bands ARE the site's six sections: sunlight and rain in the sky, the crown and its fruit, the soil, the roots, and the water table the roots reach down into. So the picture is also a map of the site, and every band is a link. Everything is inline SVG and CSS. No script, no library, no image file, so it costs one paint and cannot fail to load. The drawing lives in assets/img/growth.svg, which build.py inlines; the geometry comes from gys-art/gen.py and its stroke lengths are measured in a real browser at build time, so every line draws at one speed rather than a guessed one. The shape of the motion: it grows once over about six seconds, then hands over to a slow idle that never stops and never asks for attention. Every looping keyframe rests at 0% AND 100%, which is what lets the reduced-motion block at the bottom collapse the whole thing to a still picture by changing nothing but durations. ========================================================================== */ .grow-art { --ga-cloud: #DCD6EF; --ga-cloud-2: #EFEBFA; --ga-rain: #94AEDA; --ga-g0: #3F6B53; /* the back of the crown */ --ga-g1: #5A8A67; --ga-g2: #7FAC80; /* the lit front */ --ga-fruit: #C28F2F; --ga-branch: #6E563C; --ga-root: #9A8265; --ga-seed: #7E5F36; --ga-grain: #A38E72; --ga-grass: #6E9A6C; --ga-water: #6F97C6; --ga-ray: #E4BC6A; --ga-grow: 6.4s; /* growth is done; the idle takes over */ display: block; justify-self: center; width: min(100%, 430px); } .ga-stage { position: relative; } .ga-svg { display: block; width: 100%; height: auto; } /* ---- the growth -------------------------------------------------------- */ @keyframes gaDraw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } } @keyframes gaPop { from { transform: scale(0); opacity: 0; } 68% { transform: scale(calc(var(--s, 1) * 1.07)); opacity: 1; } to { transform: scale(var(--s, 1)); opacity: 1; } } @keyframes gaBloom{ from { transform: scale(.18); opacity: 0; } 64% { transform: scale(1.05); opacity: 1; } to { transform: scale(1); opacity: 1; } } @keyframes gaFade { from { opacity: 0; } to { opacity: 1; } } @keyframes gaRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .ga-branch, .ga-rootline, .ga-ground-line, .ga-grass, .ga-bark-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: gaDraw .95s cubic-bezier(.33,.72,.3,1) var(--d, 0s) both; } .ga-branch { stroke: var(--ga-branch); } .ga-rootline { stroke: var(--ga-root); } .ga-grass { stroke: var(--ga-grass); stroke-width: 2; --len: 22; animation-duration: .45s; } .ga-ground-line { stroke: #A78F6E; stroke-width: 1.8; opacity: .45; animation-duration: 1.2s; animation-delay: .95s; } .ga-bark-line { stroke: #5A4530; stroke-width: 1.2; opacity: .16; --len: 100; animation-delay: 2.1s; } /* The trunk is one tapered silhouette. A clip rectangle scales up out of the ground to reveal it, which reads as growing far better than a drawn line and leaves no notch where a stroke width would have changed. */ .ga-clip-up { transform-box: fill-box; transform-origin: 50% 100%; animation: gaGrowUp 1.5s cubic-bezier(.3,.7,.3,1) 1.35s both; } @keyframes gaGrowUp { from { transform: scaleY(0); } to { transform: scaleY(1); } } .ga-lobe { transform-box: fill-box; transform-origin: 50% 90%; animation: gaBloom .85s cubic-bezier(.26,.9,.36,1) var(--d, 0s) both; } .ga-leaf { transform-box: fill-box; transform-origin: 0 50%; animation: gaPop .55s cubic-bezier(.3,1.5,.5,1) var(--d, 0s) both; } .ga-g0 { fill: var(--ga-g0); } .ga-g1 { fill: var(--ga-g1); } .ga-g2 { fill: var(--ga-g2); } .ga-lobe.ga-g0 { opacity: .96; } .ga-lobe.ga-g1 { opacity: .97; } .ga-fruit { fill: var(--ga-fruit); transform-box: fill-box; transform-origin: 50% 50%; animation: gaPop .5s cubic-bezier(.3,1.7,.5,1) var(--d, 0s) both; } .ga-seed { fill: var(--ga-seed); transform-box: fill-box; transform-origin: 50% 50%; animation: gaPop .5s cubic-bezier(.3,1.6,.5,1) .05s both; } .ga-ground{ animation: gaRise 1s ease-out .8s both; } .ga-grain { fill: var(--ga-grain); opacity: 0; animation: gaFade .5s ease-out calc(1.3s + var(--i) * .03s) both; } .ga-subsoil { fill: url(#ga-sub); animation: gaRise 1.2s ease-out .7s both; } .ga-pool { animation: gaRise 1.1s ease-out .45s both; } /* ---- sky --------------------------------------------------------------- */ .ga-halo { animation: gaFade 1.6s ease-out .1s both, gaBreathe 11s ease-in-out var(--ga-grow) infinite; } .ga-sun { transform-box: fill-box; transform-origin: 50% 50%; animation: gaPop .9s cubic-bezier(.3,1.35,.5,1) .3s both; } .ga-ray { stroke: var(--ga-ray); stroke-width: 1.9; stroke-linecap: round; opacity: 0; animation: gaRay .6s ease-out calc(.9s + var(--i) * .05s) both; } @keyframes gaRay { from { opacity: 0; } to { opacity: .75; } } .ga-rays { transform-box: view-box; transform-origin: 84px 92px; animation: gaSpin 150s linear var(--ga-grow) infinite; } .ga-shaft{ stroke: var(--ga-ray); stroke-width: 8; stroke-linecap: round; opacity: 0; animation: gaShaft 9s ease-in-out calc(var(--ga-grow) + var(--d)) infinite; } @keyframes gaBreathe { 0%, 100% { opacity: 1; } 50% { opacity: .74; } } @keyframes gaSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes gaShaft { 0%, 100% { opacity: 0; } 42%, 58% { opacity: .26; } } .ga-cloud{ animation: gaDrift 1.5s cubic-bezier(.2,.8,.3,1) 1.1s both, gaFloat 17s ease-in-out var(--ga-grow) infinite; } .ga-puff { fill: var(--ga-cloud); } .ga-puff-lit { fill: var(--ga-cloud-2); } .ga-drop { fill: var(--ga-rain); opacity: 0; animation: gaFall 5s cubic-bezier(.55,0,.8,.5) calc(3.6s + var(--i) * .7s) infinite; } @keyframes gaDrift { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } } @keyframes gaFloat { 0%, 100% { transform: none; } 50% { transform: translateX(-10px); } } @keyframes gaFall { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: .8; } 70% { opacity: .42; transform: translateY(244px); } 76%, 100% { opacity: 0; transform: translateY(262px); } } /* ---- the idle ---------------------------------------------------------- */ .ga-sway { transform-box: view-box; transform-origin: 230px 356px; animation: gaSway 15s ease-in-out var(--ga-grow) infinite; } @keyframes gaSway { 0%, 100% { transform: rotate(0deg); } 32% { transform: rotate(.55deg); } 72% { transform: rotate(-.5deg); } } .ga-ripple { fill: none; stroke: #FFFFFF; stroke-opacity: .26; stroke-width: 1.4; animation: gaRipple 13s ease-in-out calc(1.6s + var(--i) * 1.6s) infinite; } @keyframes gaRipple { 0%, 100% { transform: translateX(0); stroke-opacity: .14; } 50% { transform: translateX(15px); stroke-opacity: .38; } } .ga-soak { fill: var(--ga-water); opacity: 0; animation: gaSoak 7.5s ease-in calc(var(--ga-grow) + var(--i) * 2s) infinite; } @keyframes gaSoak { 0% { opacity: 0; transform: translateY(0); } 16% { opacity: .7; } 62%, 100% { opacity: 0; transform: translateY(66px); } } /* ---- the six doorways -------------------------------------------------- Each band of the picture links to the section it stands for. The hotspots are HTML over the SVG rather than inside it, so they take a normal focus ring and the labels are ordinary text at ordinary sizes. */ .ga-hot { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); border-radius: 16px; text-decoration: none; opacity: 0; animation: gaFade .6s ease-out var(--ga-grow) both; } .ga-hot:hover, .ga-hot:focus-visible { opacity: 1; } .ga-hot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .ga-tag { position: absolute; left: var(--tx, 50%); top: var(--ty, 50%); transform: translate(-50%, -50%) scale(.94); display: inline-flex; align-items: baseline; gap: .45em; white-space: nowrap; padding: .34em .78em; border-radius: 999px; background: rgba(255,255,255,.95); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(36,24,72,.15); font-family: var(--font-ui); font-size: .76rem; line-height: 1.3; opacity: 0; transition: opacity .28s ease, transform .28s ease; } .ga-tag b { font-weight: 650; color: var(--ink); } .ga-hot[aria-current="page"] .ga-tag { background: var(--accent); border-color: var(--accent); } .ga-hot[aria-current="page"] .ga-tag b { color: #fff; } .ga-hot[aria-current="page"] .ga-tag i { color: rgba(255,255,255,.78); } .ga-tag i { font-style: normal; color: var(--ink-3); font-size: .92em; } .ga-hot:hover .ga-tag, .ga-hot:focus-visible .ga-tag { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* One quiet pass once the tree has finished, naming each band in turn, so the framework is taught once rather than leaving six labels on the picture. */ @keyframes gaTeach { 0%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.94); } 18%, 64% { opacity: 1; transform: translate(-50%,-50%) scale(1); } } .ga-hot .ga-tag { animation: gaTeach 1.5s ease-in-out calc(var(--ga-grow) + .5s + var(--i) * 1.15s) 1 both; } .ga-hot:hover .ga-tag, .ga-hot:focus-visible .ga-tag { animation: none; } /* Pointing at one band quiets the others. */ .ga-stage:has(.ga-hot:hover) .ga-layer, .ga-stage:has(.ga-hot:focus-visible) .ga-layer { opacity: .22; transition: opacity .3s ease; } .ga-stage:has(.ga-hot[data-layer="sunlight"]:hover) .ga-sunlight, .ga-stage:has(.ga-hot[data-layer="sunlight"]:focus-visible) .ga-sunlight, .ga-stage:has(.ga-hot[data-layer="rain"]:hover) .ga-rain, .ga-stage:has(.ga-hot[data-layer="rain"]:focus-visible) .ga-rain, .ga-stage:has(.ga-hot[data-layer="garden"]:hover) .ga-garden, .ga-stage:has(.ga-hot[data-layer="garden"]:focus-visible) .ga-garden, .ga-stage:has(.ga-hot[data-layer="soil"]:hover) .ga-soil, .ga-stage:has(.ga-hot[data-layer="soil"]:focus-visible) .ga-soil, .ga-stage:has(.ga-hot[data-layer="root"]:hover) .ga-root, .ga-stage:has(.ga-hot[data-layer="root"]:focus-visible) .ga-root, .ga-stage:has(.ga-hot[data-layer="water"]:hover) .ga-water, .ga-stage:has(.ga-hot[data-layer="water"]:focus-visible) .ga-water { opacity: 1; } /* The landing hero gives the picture a wider column than the emblem needed. */ /* The picture gets a wider column than the emblem needed — but not so wide that the layer strip beside it wraps onto a second row. */ @media (min-width: 940px) { .hero-page:has(.grow-art) .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 2.6rem; } } /* The emblem hides on narrow screens. This does not — it is the point of the page, so on a phone it leads, and the heading follows underneath it. The heading is still first in the markup, which is what a screen reader and a search engine read. */ @media (max-width: 939px) { .grow-art { display: block; width: min(86%, 300px); margin-inline: auto; order: -1; } .hero-page:has(.grow-art) .hero-grid { gap: 1.6rem; } } @media (prefers-reduced-motion: reduce) { .grow-art, .grow-art * { animation-duration: .001s !important; animation-delay: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } .ga-hot { opacity: 1; } } /* ---- How-to visuals (video, animation, diagram) ---- */ .visual { margin: 0 0 1.1rem; } .visual-media { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; } .visual figcaption { margin-top: .6rem; font-size: .85rem; color: var(--ink-faint); } .visual-stage { aspect-ratio: 16 / 9; max-height: 360px; width: 100%; border-radius: var(--radius); border: 1.5px dashed var(--line); background: var(--accent-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; gap: .35rem; } .visual-icon { width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--accent); display: grid; place-items: center; font-size: 1.3rem; border: 1px solid var(--line); } .visual-label { margin: .4rem 0 0; font-family: var(--font-ui); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .visual-note { margin: 0; max-width: 52ch; font-size: .9rem; color: var(--ink-soft); } .vframes { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); counter-reset: none; } .vframe { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin: 0; } .vframe-thumb { aspect-ratio: 4 / 3; background: var(--paper-2); border-bottom: 1px dashed var(--line); display: grid; place-items: center; } .vframe-thumb span { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; } .vframe-text { padding: .8rem .95rem 1rem; } .vframe-text h3 { font-size: 1rem; margin: 0 0 .25rem; } .vframe-text p { margin: 0; font-size: .88rem; color: var(--ink-soft); } @media (max-width: 560px) { .vframes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .vframe-thumb { aspect-ratio: 16 / 10; } .vframe-text { padding: .65rem .75rem .8rem; } .visual-stage { aspect-ratio: auto; min-height: 200px; } } /* ------------------------------------------------------------------ Quran search The search page's own furniture. The engine is assets/js/qsearch.js. */ .qs{max-width:860px} .qs-form{margin:0 0 1.2rem} .qs-label{display:block;font:600 .82rem/1.3 var(--font-ui);letter-spacing:.08em; text-transform:uppercase;color:var(--ink-faint);margin:0 0 .5rem} .qs-row{display:flex;gap:.6rem;align-items:stretch} .qs-input{flex:1 1 auto;min-width:0;font:400 1.05rem/1.4 var(--font-body); padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm); background:#fff;color:var(--ink)} .qs-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)} .qs-go{flex:0 0 auto;white-space:nowrap} .qs-help{margin:.7rem 0 0;font:400 .92rem/1.6 var(--font-ui);color:var(--ink-faint)} .qs-help strong{color:var(--ink);font-weight:600} .qs-tries{display:flex;flex-wrap:wrap;gap:.45rem;margin:.8rem 0 0} .qs-try{font:500 .86rem/1 var(--font-ui);padding:.42rem .7rem;border:1px solid var(--line); border-radius:999px;background:transparent;color:var(--ink);cursor:pointer} .qs-try:hover{border-color:var(--accent);color:var(--accent)} .qs-opts{display:grid;gap:.45rem;margin:.9rem 0 0;max-width:46rem} .qs-opts label{display:grid;grid-template-columns:auto 1fr;align-items:start; column-gap:.55rem;font:400 .92rem/1.55 var(--font-ui);color:var(--ink)} .qs-opts input{margin-top:.3rem} .qs-optnote{color:var(--ink-faint)} .qs-opts label>span{display:inline} .qs-status{margin:1.1rem 0 .4rem;font:400 .95rem/1.6 var(--font-ui);color:var(--ink-faint)} .qs-status strong{color:var(--ink)} .qs-warn{color:var(--accent);font-weight:500} .qs-rel{display:block;margin-top:.2rem;font-size:.92em} .qs-results{display:flex;flex-direction:column;gap:1rem;margin-top:.8rem} .qs-hit{border:1px solid var(--line);border-radius:var(--radius); padding:1.05rem 1.15rem;background:var(--paper-3)} .qs-hit-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem;margin-bottom:.45rem} .qs-ref{font:600 .95rem/1 var(--font-ui);color:var(--accent);text-decoration:none} .qs-ref:hover{text-decoration:underline} .qs-sura{font:400 .86rem/1 var(--font-ui);color:var(--ink-faint)} .qs-tag{font:500 .72rem/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase; color:var(--ink-faint);border:1px solid var(--line);border-radius:999px;padding:.24rem .55rem} .qs-sub{margin:0 0 .4rem;font:600 .88rem/1.4 var(--font-ui);letter-spacing:.02em;color:var(--ink-faint)} .qs-text{margin:0;font:400 1.06rem/1.75 var(--font-quran);color:var(--ink)} .qs-text mark,.qs-fn mark{background:var(--gold-soft);color:inherit; padding:0 .12em;border-radius:3px;box-shadow:0 1px 0 rgba(201,162,74,.5)} .qs-fn{margin:.75rem 0 0} .qs-fn summary{cursor:pointer;font:500 .84rem/1 var(--font-ui);color:var(--ink-faint)} .qs-fn p{margin:.5rem 0 0;font:400 .95rem/1.7 var(--font-ui);color:var(--ink-soft)} .qs-more{margin:.7rem 0 0;font:400 .9rem/1.5 var(--font-ui)} .qs-more a{color:var(--ink-faint)} .qs-more a:hover{color:var(--accent)} .qs-showmore{display:block;margin:1.2rem auto 0} .qs-showmore[hidden]{display:none} @media (max-width:560px){ .qs-row{flex-direction:column} .qs-go{width:100%} } .card-topic{display:flex;flex-direction:column} .card-links{margin:auto 0 0;padding-top:.8rem;display:flex;flex-wrap:wrap;gap:.5rem 1.1rem; font:500 .88rem/1.4 var(--font-ui)} .card-run{color:var(--accent);text-decoration:none} .card-run:hover{text-decoration:underline} .card-page{color:var(--ink-faint);text-decoration:none} .card-page:hover{color:var(--accent)} /* --------------------------------------------- Ask: when there is no answer The honest states. A near miss shown as an answer is worse than no answer, so these are styled to read as a plain statement and not as a result. */ .ask-noanswer{border-left:3px solid var(--line);padding:.1rem 0 .1rem .9rem;margin:.2rem 0 .9rem} .ask-noanswer-lead{margin:0 0 .35rem;font:600 1rem/1.5 var(--font-ui);color:var(--ink)} .ask-noanswer p{margin:.25rem 0;font:400 .95rem/1.65 var(--font-ui);color:var(--ink-soft)} .ask-noanswer em{font-style:normal;font-weight:600;color:var(--ink)} .ask-elsewhere{margin:1.1rem 0 .5rem;font:400 .92rem/1.6 var(--font-ui);color:var(--ink-faint)} .ask-tosearch{margin:1.1rem 0 .2rem;display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline} .ask-searchlink{font:600 .95rem/1.5 var(--font-ui);color:var(--accent);text-decoration:none} .ask-searchlink:hover{text-decoration:underline} .ask-tosearch-note{font:400 .86rem/1.5 var(--font-ui);color:var(--ink-faint)} .ask-send-q{margin:1.2rem 0 .2rem;padding-top:.9rem;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline} .ask-sendlink{font:600 .95rem/1.5 var(--font-ui);color:var(--accent);text-decoration:none} .ask-sendlink:hover{text-decoration:underline} .ask-send-note{font:400 .86rem/1.5 var(--font-ui);color:var(--ink-faint);flex:1 1 16rem} /* ---- Appendices: the index, and one page per appendix ---- */ .apx-index { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 1.4rem; } .apx-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n t" "n b"; gap: .15rem .9rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-3); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; } .apx-card:hover { border-color: var(--gold-soft); transform: translateY(-1px); } .apx-card-n { grid-area: n; font-family: var(--font-ui); font-size: 1.5rem; font-weight: 700; color: var(--gold); line-height: 1; min-width: 2.1ch; text-align: right; } .apx-card-t { grid-area: t; font-family: var(--font-ui); font-weight: 600; color: var(--ink); } .apx-card-b { grid-area: b; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); margin-top: .3rem; } .apx-wrap { max-width: 46rem; } .apx-head { border-bottom: 1px solid var(--line); padding-bottom: 1.2rem; margin-bottom: 1.5rem; } .apx-kicker { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 .4rem; } .apx-title { margin: 0 0 .7rem; line-height: 1.2; } .apx-source { font-size: .84rem; color: var(--ink-faint); margin: 0; } .apx-opener { background: var(--paper-3); border-left: 3px solid var(--gold-soft); border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin-bottom: 1.4rem; } .apx-opener-lead { font-family: var(--font-ui); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem; } .apx-opener p { margin: 0 0 .5rem; font-size: .95rem; color: var(--ink-soft); } .apx-opener p:last-child { margin-bottom: 0; } .apx-notscripture { font-size: .84rem; color: var(--ink-faint); font-style: italic; margin: 0 0 1.8rem; } .apx-body p { line-height: 1.75; } .apx-h { font-family: var(--font-ui); margin: 2.2rem 0 .8rem; line-height: 1.3; } h3.apx-h { font-size: 1.05rem; color: var(--ink-soft); } .apx-box { margin: 1.4rem 0; padding: 1rem 1.3rem; border-left: 3px solid var(--gold-soft); background: var(--paper-3); border-radius: var(--radius-sm); } .apx-box p { font-family: var(--font-quran); font-size: 1.02rem; line-height: 1.65; margin: 0 0 .7rem; } .apx-box p:last-child { margin-bottom: 0; } .apx-list { line-height: 1.7; } .apx-ref { color: var(--gold); text-decoration: none; border-bottom: 1px dotted var(--gold-soft); white-space: nowrap; } .apx-ref:hover { border-bottom-style: solid; } .apx-fig { margin: 1.4rem 0; text-align: center; } .apx-fig img { max-width: 100%; height: auto; border-radius: var(--radius-sm); } .apx-tablewrap { margin: 1.4rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-sm); } .apx-table { border-collapse: collapse; width: 100%; font-size: .86rem; font-variant-numeric: tabular-nums; } .apx-table th, .apx-table td { padding: .5rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .apx-table th { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); background: var(--paper-3); position: sticky; top: 0; } .apx-table tr:last-child td { border-bottom: 0; } .apx-table tbody tr:hover { background: var(--paper-3); } .apx-nav { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: center; margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: .9rem; } .apx-nav a { color: var(--ink-soft); text-decoration: none; } .apx-nav a:hover { color: var(--gold); } .apx-nav-all { color: var(--gold) !important; } @media (max-width: 640px) { .apx-index { grid-template-columns: 1fr; } .apx-table { font-size: .8rem; } .apx-table th, .apx-table td { padding: .4rem .5rem; } } /* ---- Quran Study (Audio): the two collections as cards ---- */ .aud-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 1.4rem 0 2rem; } .aud-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-3); transition: border-color .15s, transform .15s; } .aud-card:hover { border-color: var(--gold-soft); transform: translateY(-2px); } .aud-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #0b1f33; } .aud-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .aud-dur { position: absolute; right: .45rem; bottom: .45rem; background: rgba(0,0,0,.82); color: #fff; font-family: var(--font-ui); font-size: .72rem; padding: .1rem .35rem; border-radius: 3px; letter-spacing: .02em; } .aud-kicker { font-family: var(--font-ui); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); padding: .8rem .9rem 0; } .aud-title { font-family: var(--font-ui); font-weight: 600; color: var(--ink); padding: .25rem .9rem 0; } .aud-meta { font-size: .78rem; color: var(--ink-faint); padding: .3rem .9rem 0; } /* The same tape appears in both collections; the card says which is which. */ .aud-xref { font-size: .74rem; line-height: 1.4; color: var(--ink-faint); padding: .35rem .9rem 0; font-style: italic; } .aud-body { font-size: .84rem; line-height: 1.5; color: var(--ink-soft); padding: .5rem .9rem .2rem; } .aud-keys { display: flex; flex-wrap: wrap; gap: .3rem; padding: .55rem .9rem 1rem; margin-top: auto; } .aud-key { font-family: var(--font-ui); font-size: .68rem; line-height: 1; color: var(--ink-faint); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .5rem; white-space: nowrap; } .aud-card > *:last-child { padding-bottom: 1rem; } /* The description is the point of the card, so it stays on a phone: one card a row, full width, picture on top. A side-by-side layout was tried first and crops these thumbnails to ribbons, so it went. The keywords come off. */ @media (max-width: 640px) { .aud-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; } .aud-title { font-size: .95rem; } .aud-keys { display: none; } } }