/* ========================================================================== canonical.css — consolidated v4 design-export CSS, adapted to the sg-seminary theme on the COMMERCIAL type stack. Generated by assets/.build-canonical.py from /design-export/ (do not hand-edit; regenerate from source). Transform (a) FONT REMAP: the export's --sg-font-* roles are aliased below to the theme's commercial role tokens (--font-display = Quarto, --font-read = Lyon Text, --font-ui = Sohne; AR = Zarid Display / Riwaya / Bukra; Quran = the certified mushaf face --font-quran). No libre literals (Quarto/Spectral/Source Sans 3/Scheherazade/Readex/Reem Kufi) are emitted. Transform (b) TOKEN ALIAS: the export references --sg-* custom properties; the theme's tokens.css defines un-prefixed ones. Each --sg-* used by the canonical CSS is aliased to the nearest theme token here. Shades/tints the theme does not define keep a literal fallback (the export's own value). ========================================================================== */ :root{ /* --- Color: brand --- */ --sg-astral: var(--astral); --sg-gamboge: var(--gamboge); --sg-soft-sand: var(--rule); /* #E5D3B3 — the sand rule */ --sg-burnt-umber: #8A5A44; /* not a theme token — literal */ --sg-deep-olive: #6B7B52; /* literal */ --sg-slate-gray: #6A757D; /* literal */ /* --- Color: astral shades/tints (export-defined; literal fallbacks) --- */ --sg-astral-shade-30: var(--astral-700); /* #22506A == theme --astral-700 */ --sg-astral-shade-50: #1B4055; --sg-astral-shade-70: #13303F; --sg-astral-shade-90: #0A1E29; --sg-astral-tint-90: #E8EFF2; /* --- Color: gamboge shades --- */ --sg-gamboge-shade-30: #B8810A; --sg-gamboge-shade-50: #84600A; /* --- Color: sand tints --- */ --sg-sand-tint-70: #F5ECDA; /* --- Color: foreground / ink --- */ --sg-fg: var(--ink); --sg-fg-muted: var(--muted); --sg-fg-subtle: var(--subtle); --sg-ink-subtle: #5E646B; /* AA-safe small-label grey (export) */ /* --- Color: surfaces --- */ --sg-bg-alt: var(--paper-alt); /* --- Color: status --- */ --sg-success: #4F7A4A; --sg-danger: #A8452F; /* --- Type roles (commercial stack via theme --font-*) --- */ --sg-font-display: var(--font-display); /* Quarto (EN) / Zarid Display (AR) */ --sg-font-serif: var(--font-display); /* export alias of display */ --sg-font-read: var(--font-read); /* Lyon Text (EN) / Riwaya (AR) */ --sg-font-body: var(--font-ui); /* export legacy alias → UI sans */ --sg-font-ui: var(--font-ui); /* Sohne (EN) / Bukra (AR) */ --sg-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Arabic faces — commercial roles the theme already uses */ --sg-font-arabic-display: "Zarid Display", "Riwaya", serif; --sg-font-arabic-read: "Riwaya", serif; --sg-font-arabic: "Bukra", system-ui, sans-serif; /* AR chrome/UI */ --sg-font-arabic-wordmark:"Zarid Display", "Bukra", sans-serif; /* AR display role */ /* --- Shape / motion (export-defined; literal) --- */ --sg-radius-pill: 999px; --sg-shadow-xs: 0 1px 2px rgba(20, 40, 60, 0.06); --sg-shadow-sm: 0 2px 8px rgba(20, 40, 60, 0.06); --sg-shadow-md: 0 4px 16px rgba(20, 40, 60, 0.08); --sg-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ===== EN base: consolidated from v4.css, v4_about.css, v4_almanac.css, v4_begin.css, v4_books.css, v4_classroom.css, v4_classroom_shell.css, v4_course_detail.css, v4_curriculum.css, v4_dashboard.css, v4_extra.css, v4_federation.css, v4_flows.css, v4_footer.css, v4_give.css, v4_home.css, v4_home_v.css, v4_letter.css, v4_library.css, v4_pages.css, v4_reader.css, v4_records.css, v4_scholar.css, v4_signin.css, v4_today.css ===== */ /* ---- begin v4.css ---- */ /* ========================================================================== SeekersGuidance — Website v4 (Twin Doors home) -------------------------------------------------------------------------- Premise: "Seekers" and "Guidance" are two doors, equal weight. - LEFT door (Seekers): cool Astral teal · the seminary, scheduled, dignified - RIGHT door (Guidance): warm Soft Sand · the answers, the rhythm, conversational - One shared brand, one shared tagline, two distinct atmospheres after the door. No cover. No side rail. No mono stamps. No Roman numerals on section heads. ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body.sg-v4 { font-family: var(--sg-font-body); color: var(--sg-fg); background: #FFFFFF; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.55; } /* Global link reset — anchors carry no underline or browser-blue by default. Block/card anchors (.v4-answer-lead, .v4-fac-row, nav, logo, buttons) inherit ink and stay clean. Genuine inline prose links opt back in via .v4-inline-link. */ .sg-v4 a { color: inherit; text-decoration: none; } .sg-v4 a:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 2px; } .sg-v4 .v4-inline-link { color: var(--sg-astral); text-decoration: none; border-bottom: 1px solid rgba(48,112,142,0.3); transition: border-color 150ms; } .sg-v4 .v4-inline-link:hover { border-bottom-color: var(--sg-astral); } /* ========================================================================== LAYOUT ========================================================================== */ .v4-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; } .v4-bleed { width: 100%; } .v4-band { padding: 88px 0; position: relative; } .v4-band-tight { padding: 56px 0; } .v4-band-tall { padding: 112px 0; } .v4-band-sand { background: #F5ECDA; } /* soft sand */ .v4-band-cream{ background: #FBF6EC; } /* cream */ .v4-band-deep { background: var(--sg-astral-shade-70); color: #F5ECDA; } /* teal */ .v4-band-darkest{ background: var(--sg-astral-shade-90); color: #F5ECDA; } .v4-band-deep h2, .v4-band-deep h3, .v4-band-darkest h2, .v4-band-darkest h3 { color: #F5ECDA; } /* hairline rule under any band */ .v4-band + .v4-band:not(.v4-band-deep):not(.v4-band-darkest) { border-top: 1px solid rgba(15, 27, 34, 0.08); } /* ========================================================================== TOP CHROME — Utility bar + Main nav ========================================================================== */ .v4-util { background: #FFFFFF; border-bottom: 1px solid rgba(15,27,34,0.06); font-size: 13px; } .v4-util-inner { display: flex; justify-content: flex-end; align-items: center; gap: 24px; padding: 10px 40px; color: var(--sg-fg-muted); } .v4-util a { color: inherit; text-decoration: none; cursor: pointer; transition: color 150ms; } .v4-util a:hover { color: var(--sg-fg); } .v4-util .v4-util-zakat { color: var(--sg-burnt-umber); font-weight: 600; } .v4-util .v4-util-lang { display: inline-flex; align-items: center; gap: 8px; } .v4-util .v4-util-lang span { font-size: 11.5px; letter-spacing: 0.06em; opacity: 0.55; } .v4-util .v4-util-lang b { font-weight: 600; color: var(--sg-fg); } .v4-util .v4-util-sep { width: 1px; height: 14px; background: rgba(15,27,34,0.12); } .v4-nav { background: #FFFFFF; border-bottom: 1px solid rgba(15,27,34,0.09); } .v4-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 22px 40px; } .v4-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; cursor: pointer; } .v4-logo .v4-wm { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.005em; color: var(--sg-fg); display: inline-flex; align-items: baseline; } .v4-logo .v4-wm .seek { font-weight: 400; } .v4-logo .v4-wm .guid { font-weight: 700; color: var(--sg-burnt-umber); } .v4-nav-items { display: flex; align-items: center; gap: 36px; font-family: var(--sg-font-body); font-size: 15px; font-weight: 500; color: var(--sg-fg); } .v4-nav-items a { color: inherit; text-decoration: none; cursor: pointer; padding: 6px 0; position: relative; white-space: nowrap; transition: color 150ms; } .v4-nav-items a:hover { color: var(--sg-burnt-umber); } .v4-nav-items a.on { color: var(--sg-astral); } .v4-nav-items a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--sg-gamboge); } /* "Start here" — the front door. Always emphasised: astral + a persistent gold underline, so it reads as the way in from every page. */ .v4-nav-items a.v4-nav-start { color: var(--sg-astral); font-weight: 700; } .v4-nav-items a.v4-nav-start::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--sg-gamboge); } .v4-nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 2px; background: var(--sg-astral); color: #fff; font-weight: 600; font-size: 14px; letter-spacing: 0.01em; cursor: pointer; text-decoration: none; transition: background 150ms; } .v4-nav-cta:hover { background: var(--sg-astral-shade-30); } /* ── Mobile nav drawer (CSS-only toggle) ──────────────────────────────── */ .v4-nav { position: relative; } .v4-nav-check { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .v4-nav-right { display: flex; align-items: center; gap: 14px; } .v4-nav-burger { display: none; } .v4-nav-scrim, .v4-nav-drawer { display: none; } .v4-nav-drawer-close { font-size: 30px; line-height: 1; align-self: flex-end; cursor: pointer; color: rgba(245,236,218,0.7); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin: -6px -6px 2px 0; } .v4-nav-drawer-links { display: flex; flex-direction: column; } .v4-nav-drawer-links a { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(245,236,218,0.1); color: #F5ECDA; text-decoration: none; } .v4-nav-drawer-links a .lbl { font-family: var(--sg-font-display); font-size: 22px; font-weight: 500; } .v4-nav-drawer-links a .sub { font-family: var(--sg-font-ui); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245,236,218,0.5); } .v4-nav-drawer-links a.on .lbl { color: var(--sg-gamboge); } .v4-nav-drawer-links a.v4-nav-start .lbl { color: var(--sg-gamboge); } .v4-nav-drawer-cta { margin-top: 22px; justify-content: center; width: 100%; } .v4-nav-drawer-util { display: flex; flex-direction: column; gap: 15px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(245,236,218,0.12); } .v4-nav-drawer-util a { color: rgba(245,236,218,0.8); text-decoration: none; font-family: var(--sg-font-ui); font-size: 15px; } .v4-nav-drawer-util a:hover { color: #fff; } @media (max-width: 900px) { .v4-nav-items { display: none; } .v4-nav-burger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; cursor: pointer; margin-right: -10px; } .v4-nav-burger span { width: 22px; height: 2px; background: var(--sg-fg); border-radius: 1px; transition: transform 220ms var(--sg-ease), opacity 180ms; } .v4-nav-right .v4-nav-cta { display: none; } .v4-nav-scrim { display: block; position: fixed; inset: 0; background: rgba(10,30,41,0.5); opacity: 0; pointer-events: none; transition: opacity 240ms; z-index: 60; } .v4-nav-drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: min(85vw, 340px); background: var(--sg-astral-shade-90); padding: 24px 26px 32px; transform: translateX(106%); transition: transform 280ms var(--sg-ease); z-index: 61; overflow-y: auto; } .v4-nav-check:checked ~ .v4-nav-scrim { opacity: 1; pointer-events: auto; } .v4-nav-check:checked ~ .v4-nav-drawer { transform: none; } .v4-nav-check:checked ~ .v4-nav-inner .v4-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .v4-nav-check:checked ~ .v4-nav-inner .v4-nav-burger span:nth-child(2) { opacity: 0; } .v4-nav-check:checked ~ .v4-nav-inner .v4-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ========================================================================== BRAND HEADER — single unified promise above the doors ========================================================================== */ .v4-banner { padding: 56px 40px 36px; text-align: center; } .v4-banner-inner { max-width: 880px; margin: 0 auto; } .v4-banner .eyebrow { font-family: var(--sg-font-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-fg-muted); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 10px; } .v4-banner .eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--sg-gamboge); } .v4-banner h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 18px; text-wrap: pretty; } .v4-banner .v4-banner-sub { font-family: var(--sg-font-body); font-weight: 400; font-size: 19px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0 auto; max-width: 640px; text-wrap: pretty; } /* Hero call to action — one dominant gold action + a quiet text alternative */ .v4-banner-cta { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin: 28px 0 0; } .v4-banner-cta .v4-btn-accent { padding: 14px 28px; font-size: 15px; } .v4-banner-cta-or { font-family: var(--sg-font-ui); font-size: 15px; color: var(--sg-fg-muted); } .v4-banner-cta-or a { color: var(--sg-astral); font-weight: 600; border-bottom: 1px solid rgba(48, 112, 142, 0.3); padding-bottom: 2px; transition: border-color 150ms var(--sg-ease); } .v4-banner-cta-or a:hover { border-bottom-color: var(--sg-astral); } .v4-banner-ayah { margin: 28px auto 0; max-width: 720px; padding: 16px 0 0; border-top: 1px solid rgba(15,27,34,0.08); font-family: var(--sg-font-quran); /* Quran — certified mushaf (stand-in: Scheherazade New) */ font-size: 28px; line-height: 1.6; color: var(--sg-fg); direction: rtl; text-align: center; font-weight: 400; } .v4-banner-ayah-en { margin: 6px auto 0; font-family: var(--sg-font-display); font-style: normal; font-weight: 400; font-size: 15px; color: var(--sg-fg-muted); letter-spacing: 0.005em; } /* ========================================================================== TWIN DOORS — the centerpiece. Two equal tiles, divergent atmospheres. ========================================================================== */ .v4-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 600px; border-top: 1px solid rgba(15,27,34,0.08); border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-door { position: relative; display: grid; grid-template-rows: minmax(220px, 1fr) auto; overflow: hidden; transition: transform 280ms var(--sg-ease); } .v4-door:hover { transform: translateY(-2px); } .v4-door .v4-door-photo { position: relative; overflow: hidden; } .v4-door .v4-door-photo image-slot { width: 100%; height: 100%; min-height: 220px; } .v4-door .v4-door-body { padding: 36px 40px 40px; display: flex; flex-direction: column; gap: 14px; } .v4-door .v4-door-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sg-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .v4-door .v4-door-eyebrow .v4-door-eyebrow-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .v4-door h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -0.012em; margin: 0; text-wrap: pretty; } .v4-door .v4-door-lede { font-size: 17px; line-height: 1.55; margin: 0; max-width: 44ch; } .v4-door .v4-door-proof { margin-top: 4px; padding: 16px 18px; border-radius: 2px; } .v4-door .v4-door-foot { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .v4-door-seekers .v4-door-selfcheck { display: inline-flex; align-items: center; margin-top: 16px; font-family: var(--sg-font-ui); font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--sg-gamboge); text-decoration: none; border-bottom: 1px solid rgba(236,166,8,0.32); padding-bottom: 2px; align-self: flex-start; transition: border-color 160ms; } .v4-door-seekers .v4-door-selfcheck:hover { border-color: var(--sg-gamboge); } .v4-door-seekers .v4-door-selfcheck .arrow { transition: transform 160ms; } .v4-door-seekers .v4-door-selfcheck:hover .arrow { transform: translateX(3px); } .v4-door-guidance .v4-ask-note { margin: 12px 2px 0; font-family: var(--sg-font-ui); font-size: 12.5px; line-height: 1.5; color: var(--sg-fg-subtle); letter-spacing: 0.01em; } .v4-door-guidance .v4-ask-assure { margin: 8px 2px 0; display: inline-flex; align-items: baseline; gap: 7px; font-family: var(--sg-font-ui); font-size: 12.5px; line-height: 1.5; letter-spacing: 0.01em; color: var(--sg-fg-muted); } .v4-door-guidance .v4-ask-assure .v4-ask-assure-seal { color: var(--sg-gamboge); flex: none; transform: translateY(1px); } /* --- LEFT door: SEEKERS — cool, the seminary --- */ .v4-door.v4-door-seekers { background: linear-gradient(180deg, #13303F 0%, #0A1E29 100%); color: #F5ECDA; } .v4-door.v4-door-seekers .v4-door-eyebrow { color: var(--sg-gamboge); } .v4-door.v4-door-seekers .v4-door-eyebrow-dot { background: var(--sg-gamboge); } .v4-door.v4-door-seekers h2 { color: #FBF6EC; } .v4-door.v4-door-seekers .v4-door-lede { color: rgba(245,236,218,0.78); } .v4-door.v4-door-seekers .v4-door-proof { background: rgba(255,255,255,0.04); border: 1px solid rgba(236,166,8,0.22); border-top: 2px solid var(--sg-gamboge); } .v4-door.v4-door-seekers .v4-door-proof .label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-gamboge); margin-bottom: 4px; } .v4-door.v4-door-seekers .v4-door-proof .title { font-family: var(--sg-font-display); font-size: 19px; font-weight: 500; color: #FBF6EC; line-height: 1.25; } .v4-door.v4-door-seekers .v4-door-proof .meta { font-size: 13.5px; color: rgba(245,236,218,0.62); margin-top: 4px; } .v4-door-seekers .v4-btn-primary { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); border: 1.5px solid var(--sg-gamboge); } .v4-door-seekers .v4-btn-primary:hover { background: #f6c054; border-color: #f6c054; } .v4-door-seekers .v4-btn-link { color: rgba(245,236,218,0.82); border-color: rgba(245,236,218,0.28); } .v4-door-seekers .v4-btn-link:hover { color: #FBF6EC; border-color: #F5ECDA; } /* hexagonal corner watermark for the left door */ .v4-door-seekers::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 240px; height: 240px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; opacity: 0.08; pointer-events: none; } /* --- RIGHT door: GUIDANCE — warm, the answers --- */ .v4-door.v4-door-guidance { background: linear-gradient(180deg, #F5ECDA 0%, #EFE0C5 100%); color: var(--sg-fg); } .v4-door.v4-door-guidance .v4-door-eyebrow { color: var(--sg-burnt-umber); } .v4-door.v4-door-guidance .v4-door-eyebrow-dot { background: var(--sg-burnt-umber); } .v4-door.v4-door-guidance h2 { color: var(--sg-fg); } .v4-door.v4-door-guidance .v4-door-lede { color: var(--sg-fg-muted); } .v4-door-guidance .v4-ask { background: #FFFFFF; border: 1px solid rgba(138,90,68,0.22); border-radius: 2px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 0 rgba(20,40,60,0.04); } .v4-door-guidance .v4-ask .v4-ask-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--sg-burnt-umber); } .v4-door-guidance .v4-ask input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--sg-font-body); font-size: 16px; color: var(--sg-fg); } .v4-door-guidance .v4-ask input::placeholder { color: var(--sg-fg-muted); font-style: normal; } .v4-door-guidance .v4-ask button { background: var(--sg-burnt-umber); color: #fff; border: none; padding: 8px 16px; border-radius: 3px; font-family: var(--sg-font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: background 150ms; } .v4-door-guidance .v4-ask button:hover { background: #6f4634; } .v4-door-guidance .v4-door-proof { background: rgba(255,255,255,0.5); border-top: 2px solid var(--sg-burnt-umber); } .v4-door-guidance .v4-door-proof .label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); margin-bottom: 4px; } .v4-door-guidance .v4-door-proof .title { font-family: var(--sg-font-display); font-style: normal; font-size: 18px; font-weight: 400; color: var(--sg-fg); line-height: 1.3; } .v4-door-guidance .v4-door-proof .meta { font-size: 13.5px; color: var(--sg-fg-muted); margin-top: 4px; } .v4-door-guidance .v4-btn-link { color: var(--sg-burnt-umber); border-color: rgba(138,90,68,0.4); } .v4-door-guidance .v4-btn-link:hover { color: #5a3a26; border-color: var(--sg-burnt-umber); background: rgba(138,90,68,0.06); } /* the seam between the two doors — gold hairline */ .v4-doors::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent 0%, var(--sg-gamboge) 40%, var(--sg-gamboge) 60%, transparent 100%); opacity: 0.4; pointer-events: none; z-index: 5; } .v4-doors-wrap { position: relative; } /* ========================================================================== BUTTONS — softened. Sentence case. 4px radius. ========================================================================== */ .v4-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; font-family: var(--sg-font-body); font-weight: 600; font-size: 14.5px; letter-spacing: 0.005em; border-radius: 2px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: all 180ms var(--sg-ease); } .v4-btn:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 2px; } .v4-btn-primary { background: var(--sg-astral); color: #fff; border-color: var(--sg-astral); } .v4-btn-primary:hover { background: var(--sg-astral-shade-30); border-color: var(--sg-astral-shade-30); } .v4-btn-accent { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); border-color: var(--sg-gamboge); } .v4-btn-accent:hover { background: var(--sg-gamboge-shade-30); color: #fff; border-color: var(--sg-gamboge-shade-30); } .v4-btn-umber { background: #6B4332; color: #FBF3E6; border-color: #6B4332; } .v4-btn-umber:hover { background: #50311F; border-color: #50311F; } .v4-btn-ghost { background: transparent; color: var(--sg-astral); border-color: var(--sg-astral); } .v4-btn-ghost:hover { background: var(--sg-astral); color: #fff; } .v4-btn-link { background: transparent; padding: 10px 18px; border: 1px solid transparent; } .v4-btn-link .arrow { transition: transform 180ms; } .v4-btn-link:hover .arrow { transform: translateX(3px); } /* ── Touch-target floor (WCAG 2.5.5/2.5.8) ──────────────────────────────── Coarse pointers only (phones/tablets) — desktop mouse UI is untouched. Guarantees a 44px min hit height on anything styled as a button/CTA across the whole v4 set. Pill CTAs are already inline-flex so this just lifts the sub-44px ones (padding 10–11px landed ~40px) to spec. Full-width form submits (.v4-si-submit etc.) aren't matched and are already ≥44px. */ @media (pointer: coarse) { a[class*="btn"], button[class*="btn"], a[class*="Btn"], a[class*="cta"], button[class*="cta"], a[class*="Cta"], .v4-nav-cta, .v4-nav-drawer-util a { min-height: 44px; align-items: center; } /* genuinely-inline utility links need a flex box for min-height to apply */ .v4-util a, .v4-foot-begin { display: inline-flex; align-items: center; min-height: 44px; } } /* ========================================================================== TODAY RAIL — the living layer below the doors ========================================================================== */ .v4-today { background: #FBF6EC; border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-today-inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 32px; padding: 14px 40px; max-width: 1280px; margin: 0 auto; } .v4-today-date { font-family: var(--sg-font-display); font-style: normal; font-weight: 400; font-size: 15px; color: var(--sg-fg); } .v4-today-date .hijri { color: var(--sg-burnt-umber); font-style: normal; font-weight: 600; } .v4-today-prayer { display: flex; align-items: center; gap: 16px; font-size: 13.5px; color: var(--sg-fg-muted); flex-wrap: wrap; font-variant-numeric: tabular-nums; } .v4-today-prayer .city { font-weight: 600; color: var(--sg-astral); display: inline-flex; align-items: center; gap: 6px; } .v4-today-prayer .city::after { content: '·'; opacity: 0.4; margin-left: 6px; } .v4-today-prayer .now { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); padding: 2px 8px; border-radius: 3px; font-weight: 600; } .v4-today-prayer .next { color: var(--sg-fg); font-weight: 500; } .v4-today-dua { font-family: var(--sg-font-display); font-style: normal; font-size: 14.5px; color: var(--sg-fg-muted); text-align: right; } .v4-today-dua a { color: var(--sg-astral); font-style: normal; font-weight: 600; text-decoration: none; margin-left: 8px; } .v4-today-dua a:hover { text-decoration: underline; } /* ========================================================================== SECTION HEADER — quiet. Eyebrow + h2 + lede. No Roman numerals. ========================================================================== */ .v4-sect-head { margin-bottom: 48px; max-width: 720px; } .v4-sect-head.center { margin-left: auto; margin-right: auto; text-align: center; } .v4-sect-head .eyebrow { font-family: var(--sg-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } .v4-sect-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.012em; margin: 0; color: inherit; text-wrap: pretty; } .v4-sect-head .v4-sect-lede { margin: 14px 0 0; font-size: 17.5px; line-height: 1.55; color: var(--sg-fg-muted); font-weight: 400; max-width: 60ch; text-wrap: pretty; } .v4-band-deep .v4-sect-head .v4-sect-lede, .v4-band-darkest .v4-sect-head .v4-sect-lede { color: rgba(245,236,218,0.72); } .v4-band-deep .v4-sect-head .eyebrow, .v4-band-darkest .v4-sect-head .eyebrow { color: var(--sg-gamboge); } .v4-sect-head-row { display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; } .v4-sect-head-row .v4-sect-head { margin-bottom: 0; } /* ========================================================================== RECENT ANSWERS — Guidance proof. Real questions, recently answered. ========================================================================== */ .v4-answers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .v4-answer { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.09); border-radius: 2px; padding: 26px 28px 24px; display: flex; flex-direction: column; transition: border-color 180ms, transform 180ms; cursor: pointer; position: relative; } .v4-answer:hover { border-color: var(--sg-burnt-umber); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,40,60,0.06); } .v4-answer .v4-answer-tag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; } .v4-answer .v4-answer-tag .when { color: var(--sg-fg-subtle); font-weight: 500; } .v4-answer .v4-answer-q { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; line-height: 1.22; letter-spacing: -0.005em; color: var(--sg-fg); margin: 0 0 12px; text-wrap: pretty; } .v4-answer .v4-answer-a { font-size: 14.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 18px; } .v4-answer .v4-answer-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(15,27,34,0.08); display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sg-fg-muted); } .v4-answer .v4-answer-foot .v4-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; } .v4-answer .v4-answer-foot b { color: var(--sg-fg); font-weight: 600; font-family: var(--sg-font-display); } /* ========================================================================== TERM FEATURE — Seekers proof. Quietly structured. ========================================================================== */ .v4-term { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; } .v4-term-meta { padding-top: 8px; } .v4-term-meta .v4-term-when { font-family: var(--sg-font-display); font-size: 34px; font-weight: 500; line-height: 1.05; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 12px; text-wrap: pretty; } .v4-term-meta .v4-term-desc { font-size: 16px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0 0 24px; } .v4-term-meta .v4-term-tally { display: flex; gap: 24px; border-top: 1px solid rgba(15,27,34,0.1); border-bottom: 1px solid rgba(15,27,34,0.1); padding: 16px 0; margin-bottom: 24px; } .v4-term-meta .v4-term-tally .v4-tally-item .n { font-family: var(--sg-font-display); font-size: 26px; font-weight: 500; color: var(--sg-astral); display: block; line-height: 1; } .v4-term-meta .v4-term-tally .v4-tally-item .l { font-size: 12px; letter-spacing: 0.04em; color: var(--sg-fg-muted); margin-top: 6px; display: block; } .v4-term-courses { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .v4-course { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; transition: border-color 180ms, transform 180ms; cursor: pointer; } .v4-course:hover { border-color: var(--sg-astral); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,40,60,0.05); } .v4-course .v4-course-stream { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge-shade-30); } .v4-course .v4-course-title { font-family: var(--sg-font-display); font-weight: 500; font-size: 21px; line-height: 1.18; letter-spacing: -0.005em; color: var(--sg-fg); margin: 0; text-wrap: pretty; } .v4-course .v4-course-meta { font-size: 13px; color: var(--sg-fg-muted); line-height: 1.45; margin: 0; } .v4-course .v4-course-foot { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-top: 4px; flex-wrap: wrap; } .v4-course .v4-course-foot .v4-avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; } .v4-course .v4-course-foot b { color: var(--sg-fg); font-weight: 600; font-family: var(--sg-font-display); white-space: nowrap; } /* ── Course states: Open for enrolment · Opening soon ────────────────── */ .v4-term-courses-col { display: flex; flex-direction: column; } .v4-term-listing-head { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 22px; } .v4-term-note { font-family: var(--sg-font-read); font-size: 14.5px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0; max-width: 40ch; text-wrap: pretty; } .v4-term-toggle { display: inline-flex; flex: none; border: 1px solid rgba(15, 27, 34, 0.16); border-radius: 999px; padding: 3px; background: #fff; } .v4-term-toggle button { font-family: var(--sg-font-ui); font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; border: none; background: transparent; color: var(--sg-fg-muted); padding: 7px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 150ms var(--sg-ease), color 150ms var(--sg-ease); } .v4-term-toggle button .muted { color: var(--sg-fg-subtle); font-weight: 500; } .v4-term-toggle button:hover { color: var(--sg-fg); } .v4-term-toggle button.on { background: var(--sg-astral); color: #fff; } .v4-term-toggle button.on .muted { color: rgba(255, 255, 255, 0.78); } .v4-term-toggle button:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 2px; } /* Open card — interactive, with the gold enrol action */ .v4-course-open { cursor: default; } .v4-course-enrol { margin-top: 16px; align-self: flex-start; padding: 10px 20px; font-size: 14px; } /* Soon card — calm, recessive; never an empty shell */ .v4-course-soon { cursor: default; background: #FBF7EF; border-color: rgba(15, 27, 34, 0.12); } .v4-course-soon:hover { transform: none; border-color: rgba(15, 27, 34, 0.12); box-shadow: none; } .v4-course-soon .v4-course-title { color: var(--sg-fg-muted); } .v4-course-soon .v4-av { opacity: 0.8; filter: grayscale(0.3); } .sg-v4 .v4-course-soon .v4-course-stream { color: var(--sg-fg-muted); } .v4-course-status { align-self: flex-start; margin-bottom: 2px; white-space: nowrap; font-family: var(--sg-font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); background: rgba(138, 90, 68, 0.08); border: 1px solid rgba(138, 90, 68, 0.22); padding: 4px 11px; border-radius: 999px; } .v4-course-notify { margin-top: 14px; align-self: flex-start; font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; color: var(--sg-astral); display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(48, 112, 142, 0.3); padding-bottom: 2px; transition: border-color 150ms var(--sg-ease); } .v4-course-notify:hover { border-bottom-color: var(--sg-astral); } .v4-course-notify .arrow { transition: transform 150ms var(--sg-ease); } .v4-course-notify:hover .arrow { transform: translateX(3px); } .v4-course-notify:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 3px; border-radius: 2px; } .v4-term-empty { font-family: var(--sg-font-read); font-size: 16px; line-height: 1.6; color: var(--sg-fg-muted); margin: 8px 0 0; padding: 24px 26px; background: #FBF7EF; border: 1px solid rgba(15, 27, 34, 0.12); border-radius: 2px; } .v4-term-empty a { color: var(--sg-astral); font-weight: 600; border-bottom: 1px solid rgba(48,112,142,0.3); } /* ── Site-wide WCAG AA text fixes (promoted from the homepage pass so every page — Course Detail, Scholar, etc — inherits them) ─────────────────── */ .sg-v4 .v4-answer-tag .when { color: var(--sg-ink-subtle); } .v4-course .v4-course-stream { color: var(--gold-ink); } .sg-v4 .v4-course-soon .v4-course-stream { color: var(--sg-fg-muted); } /* ========================================================================== FACULTY — 3 featured + see all ========================================================================== */ .v4-faculty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .v4-fac { display: flex; flex-direction: column; gap: 16px; } .v4-fac .v4-fac-photo { width: 100%; aspect-ratio: 4/5; background: #EFE0C5; border-radius: 2px; overflow: hidden; } .v4-fac .v4-fac-photo image-slot { width: 100%; height: 100%; } .v4-fac .v4-fac-name { font-family: var(--sg-font-display); font-weight: 600; font-size: 21px; line-height: 1.15; color: var(--sg-fg); margin: 0; } .v4-fac .v4-fac-line { font-size: 14.5px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0; } .v4-fac .v4-fac-loc { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-astral); } /* ========================================================================== TESTIMONIAL — single seeker, single quote ========================================================================== */ .v4-test { display: grid; grid-template-columns: 1fr 1.8fr; gap: 56px; align-items: center; max-width: 1080px; margin: 0 auto; } .v4-test-photo { aspect-ratio: 1/1; background: #E5D3B3; border-radius: 2px; overflow: hidden; } .v4-test-photo image-slot { width: 100%; height: 100%; } .v4-test blockquote { font-family: var(--sg-font-display); font-weight: 400; font-style: normal; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.32; letter-spacing: -0.005em; color: var(--sg-fg); margin: 0; text-wrap: pretty; position: relative; } .v4-test blockquote::before { content: '\201C'; font-family: var(--sg-font-display); position: absolute; font-size: 96px; line-height: 1; color: var(--sg-gamboge); left: -6px; top: -22px; opacity: 0.55; font-style: normal; } .v4-test .v4-test-attr { margin-top: 28px; font-size: 14px; color: var(--sg-fg-muted); letter-spacing: 0.005em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .v4-test .v4-test-attr b { color: var(--sg-fg); font-weight: 600; font-family: var(--sg-font-display); font-size: 16px; } .v4-test .v4-test-attr .dot { color: rgba(15,27,34,0.3); } /* ========================================================================== VERSE — scriptural anchor, with subtle emblem watermark ========================================================================== */ .v4-verse { text-align: center; position: relative; overflow: hidden; } .v4-verse-emblem { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); opacity: 0.06; pointer-events: none; } .v4-verse-inner { position: relative; max-width: 780px; margin: 0 auto; padding: 0 40px; } .v4-verse .v4-verse-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sg-gamboge); margin-bottom: 36px; display: inline-flex; align-items: center; gap: 16px; } .v4-verse .v4-verse-eyebrow::before, .v4-verse .v4-verse-eyebrow::after { content: ''; width: 36px; height: 1px; background: var(--sg-gamboge); opacity: 0.55; } .v4-verse .v4-verse-ar { font-family: var(--sg-font-quran); /* Quran — certified mushaf (stand-in: Scheherazade New) */ font-size: clamp(36px, 4.4vw, 56px); font-weight: 400; line-height: 1.6; color: #FBF6EC; direction: rtl; margin: 0 0 28px; text-wrap: pretty; } .v4-verse .v4-verse-en { font-family: var(--sg-font-display); font-style: normal; font-size: 20px; line-height: 1.5; color: rgba(245,236,218,0.86); margin: 0 0 16px; text-wrap: pretty; } .v4-verse .v4-verse-src { font-family: var(--sg-font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(236,166,8,0.7); } /* ========================================================================== DONOR — single, human-voice, warm but disciplined ========================================================================== */ .v4-donor { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; } .v4-donor .v4-donor-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 12px; } .v4-donor .v4-donor-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--sg-gamboge); } .v4-donor h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.012em; color: #FBF6EC; margin: 0 0 14px; max-width: 22ch; text-wrap: pretty; } .v4-donor .v4-donor-lede { font-size: 17px; line-height: 1.55; color: rgba(245,236,218,0.78); margin: 0 0 28px; max-width: 48ch; } .v4-donor .v4-donor-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .v4-donor .v4-donor-quiet { font-family: var(--sg-font-display); font-style: normal; font-size: 14px; color: rgba(245,236,218,0.55); margin-top: 22px; } .v4-donor .v4-donor-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .v4-donor .v4-tier { background: rgba(255,255,255,0.04); border: 1px solid rgba(245,236,218,0.2); border-radius: 2px; padding: 22px 18px; text-align: center; cursor: pointer; transition: all 180ms; } .v4-donor .v4-tier:hover { background: rgba(236,166,8,0.1); border-color: var(--sg-gamboge); } .v4-donor .v4-tier .amt { font-family: var(--sg-font-display); font-weight: 500; font-size: 28px; color: var(--sg-gamboge); line-height: 1; } .v4-donor .v4-tier .per { display: block; margin-top: 6px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,236,218,0.6); } .v4-donor .v4-tier.outline { background: transparent; } .v4-donor .v4-tier.outline .amt { color: #FBF6EC; } .v4-donor .v4-donor-zakat { grid-column: 1 / -1; text-align: center; font-size: 13.5px; color: rgba(245,236,218,0.7); cursor: pointer; padding: 8px; } .v4-donor .v4-donor-zakat b { color: var(--sg-gamboge); } .v4-donor .v4-donor-impact { margin: 20px 2px 0; font-family: var(--sg-font-read); font-size: 14.5px; line-height: 1.55; color: rgba(245,236,218,0.8); padding-top: 18px; border-top: 1px solid rgba(245,236,218,0.14); } .v4-donor .v4-donor-impact b { color: var(--sg-gamboge); font-weight: 600; } .v4-donor .v4-donor-assure { margin: 8px 2px 0; font-family: var(--sg-font-ui); font-size: 12px; letter-spacing: 0.01em; line-height: 1.5; color: rgba(245,236,218,0.5); } /* ========================================================================== IMPACT band — proof before the ask ========================================================================== */ .v4-impact .v4-impact-head { max-width: 720px; margin: 0 auto 52px; text-align: center; } .v4-impact .v4-impact-head .eyebrow { justify-content: center; } .v4-impact .v4-impact-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -0.014em; margin: 14px 0 16px; color: var(--sg-fg); text-wrap: balance; } .v4-impact-lede { font-family: var(--sg-font-read); font-size: 18px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0; } .v4-impact-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--sg-soft-sand); border-bottom: 1px solid var(--sg-soft-sand); } .v4-impact-stat { padding: 38px 24px; text-align: center; border-right: 1px solid var(--sg-soft-sand); } .v4-impact-stat:last-child { border-right: none; } .v4-impact-stat .n { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(40px, 5vw, 60px); line-height: 1; color: var(--sg-astral-shade-30); } .v4-impact-stat .l { font-family: var(--sg-font-ui); font-size: 14px; line-height: 1.45; color: var(--sg-fg-muted); margin-top: 12px; } @media (max-width: 720px) { .v4-impact-stats { grid-template-columns: 1fr 1fr; } .v4-impact-stat:nth-child(2) { border-right: none; } .v4-impact-stat:nth-child(1), .v4-impact-stat:nth-child(2) { border-bottom: 1px solid var(--sg-soft-sand); } } /* ========================================================================== SIGN IN + HELP pages ========================================================================== */ .acct { max-width: 1040px; margin: 0 auto; padding: 80px 40px 110px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: center; } .acct .eyebrow { justify-content: flex-start; } .acct h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(34px,4.5vw,52px); letter-spacing: -0.016em; margin: 14px 0 16px; } .acct-lede { font-family: var(--sg-font-read); font-size: 18px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0 0 28px; max-width: 52ch; } .acct-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; } .acct-form label { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-fg-subtle); } .acct-form input { font-family: var(--sg-font-ui); font-size: 16px; padding: 14px 16px; border: 1px solid rgba(15,27,34,0.18); border-radius: 2px; background: #fff; color: var(--sg-fg); } .acct-form input:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 1px; border-color: var(--sg-astral); } .acct-submit { margin-top: 8px; justify-content: center; } .acct-fine { font-family: var(--sg-font-read); font-size: 14.5px; color: var(--sg-fg-muted); margin: 22px 0 0; max-width: 46ch; } .acct-fine a { color: var(--sg-astral); } .acct-aside { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding-left: 48px; border-left: 1px solid var(--sg-soft-sand); } .acct-verse { font-family: var(--sg-font-read); font-size: 15.5px; line-height: 1.6; color: var(--sg-fg-muted); max-width: 34ch; margin: 0; } .acct-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .acct-help-card { border: 1px solid rgba(15,27,34,0.1); border-top: 2px solid var(--sg-gamboge); background: #fff; border-radius: 2px; padding: 24px 26px; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color 180ms, transform 180ms, box-shadow 180ms; } .acct-help-card:hover { transform: translateY(-3px); box-shadow: var(--sg-shadow-md); } .acct-help-card h3 { font-family: var(--sg-font-display); font-weight: 600; font-size: 20px; margin: 0 0 8px; } .acct-help-card p { font-family: var(--sg-font-read); font-size: 15px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 16px; flex: 1; } .acct-help-cta { font-family: var(--sg-font-ui); font-weight: 600; font-size: 14px; color: var(--sg-astral); display: inline-flex; gap: 7px; align-items: center; } .acct-help-cta .arrow { transition: transform 160ms; } .acct-help-card:hover .acct-help-cta .arrow { transform: translateX(3px); } .acct-help-contact { margin-top: 36px; padding: 36px 40px; background: var(--sg-astral-shade-70); color: #F5ECDA; border-radius: 2px; text-align: center; } .acct-help-contact h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 26px; margin: 0 0 8px; color: #F5ECDA; } .acct-help-contact p { font-family: var(--sg-font-read); font-size: 16px; color: rgba(245,236,218,0.82); margin: 0 0 22px; } @media (max-width: 760px) { .acct { grid-template-columns: 1fr; gap: 40px; padding: 56px 24px 90px; } .acct-aside { padding-left: 0; border-left: none; border-top: 1px solid var(--sg-soft-sand); padding-top: 36px; } .acct-help-grid { grid-template-columns: 1fr; } } /* ========================================================================== FOOTER ========================================================================== */ .v4-foot { background: var(--sg-astral-shade-90); color: rgba(245,236,218,0.72); padding: 78px 40px 36px; } /* ── Sign-off — the closing colophon ──────────────────────────────────── */ .v4-foot-sign { max-width: 1280px; margin: 0 auto 40px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; } .v4-foot-mark { display: inline-flex; align-items: center; gap: 13px; margin-bottom: 20px; } .v4-foot-wm { font-family: var(--sg-font-display); font-size: 25px; font-weight: 500; color: #FBF6EC; letter-spacing: -0.01em; } .v4-foot-wm .guid { color: var(--sg-gamboge); font-weight: 700; } .v4-foot-tag { font-family: var(--sg-font-read); font-size: 16.5px; line-height: 1.62; color: rgba(245,236,218,0.76); max-width: 48ch; margin: 0 0 24px; } .v4-foot-begin { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sg-font-ui); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; color: var(--sg-gamboge); text-decoration: none; border-bottom: 1px solid rgba(236,166,8,0.4); padding-bottom: 3px; transition: border-color 180ms, gap 180ms; } .v4-foot-begin:hover { border-color: var(--sg-gamboge); gap: 14px; } .v4-foot-begin .arrow { transition: transform 180ms; } .v4-foot-begin:hover .arrow { transform: translateX(3px); } .v4-foot-verse { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 12px; padding-left: 60px; border-left: 1px solid rgba(245,236,218,0.13); } .v4-foot-verse .ar { font-family: var(--sg-font-quran); font-size: 35px; line-height: 1.4; color: var(--sg-gamboge); direction: rtl; } .v4-foot-verse .en { font-family: var(--sg-font-display); font-style: normal; font-weight: 500; font-size: 18px; color: #F1E7D2; } .v4-foot-verse .ref { font-family: var(--sg-font-ui); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,236,218,0.5); } /* ── Navigation index ─────────────────────────────────────────────────── */ .v4-foot-inner { max-width: 1280px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .v4-foot h4 { font-family: var(--sg-font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 16px; } .v4-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .v4-foot ul li { font-size: 14.5px; } .v4-foot ul li a { color: rgba(245,236,218,0.72); text-decoration: none; transition: color 150ms; } .v4-foot ul li a:hover { color: #FBF6EC; } .v4-foot-legal { max-width: 1280px; margin: 30px auto 0; padding-top: 22px; border-top: 1px solid rgba(245,236,218,0.10); display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(245,236,218,0.5); flex-wrap: wrap; gap: 12px; } .v4-foot-cities { font-family: var(--sg-font-display); letter-spacing: 0.02em; color: rgba(245,236,218,0.62); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1080px) { .v4-doors { grid-template-columns: 1fr; min-height: 0; } .v4-doors::after { display: none; } /* On stacked viewports (tablet/mobile), Guidance leads by default — it matches the most common arrival intent. */ .v4-door-seekers { order: 2; } .v4-door-guidance { order: 1; } /* The tweak can flip it back to Seekers-first */ .v4-doors-guidance-first .v4-door-seekers { order: 2; } .v4-doors-guidance-first .v4-door-guidance { order: 1; } .v4-term { grid-template-columns: 1fr; gap: 36px; } .v4-term-courses { grid-template-columns: 1fr 1fr; } .v4-test { grid-template-columns: 1fr; gap: 32px; } .v4-donor { grid-template-columns: 1fr; gap: 36px; } .v4-donor-tiers-wrap { max-width: 480px; } .v4-faculty { grid-template-columns: 1fr 1fr; } .v4-answers-grid { grid-template-columns: 1fr 1fr; } .v4-foot-inner { grid-template-columns: 1fr 1fr 1fr; } .v4-foot-sign { grid-template-columns: 1fr; gap: 36px; } .v4-foot-verse { align-items: flex-start; text-align: left; padding-left: 0; border-left: none; padding-top: 32px; border-top: 1px solid rgba(245,236,218,0.13); width: 100%; } .v4-today-inner { grid-template-columns: 1fr 1fr; gap: 14px 24px; } .v4-today-dua { grid-column: 1 / -1; text-align: left; } } @media (max-width: 720px) { .v4-wrap, .v4-nav-inner, .v4-util-inner, .v4-foot, .v4-today-inner, .v4-banner { padding-left: 24px; padding-right: 24px; } .v4-band { padding: 56px 0; } .v4-faculty, .v4-answers-grid, .v4-term-courses { grid-template-columns: 1fr; } .v4-foot-inner { grid-template-columns: 1fr 1fr; } .v4-foot-verse .ar { font-size: 30px; } .v4-nav-items { display: none; } .v4-util-inner { gap: 14px; } .v4-door .v4-door-body { padding: 28px 24px 32px; } } /* Photography slot — simulated placeholder when no image is dropped */ .v4-photo-sim { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .v4-photo-sim::after { content: attr(data-label); position: absolute; bottom: 14px; left: 14px; font-family: var(--sg-font-body); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); background: rgba(15,27,34,0.5); padding: 4px 10px; border-radius: 3px; backdrop-filter: blur(4px); } /* ========================================================================== DE-AI PASS — honest placeholders, broken templates, varied rhythm, committed colour, and de-mechanised micro-detail. ========================================================================== */ /* ---- Honest photography slots (warm tonal field + fine hatch + mono label) ---- */ .v4-photoslot { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; } /* monogram stand-in for a scholar portrait — dignified, identifies each name */ .v4-portrait-mono { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; font-family: var(--sg-font-display); font-weight: 600; font-size: 64px; letter-spacing: 0.01em; line-height: 1; opacity: 0.92; user-select: none; } .v4-fac-row-photo .v4-portrait-mono { font-size: 30px; } .v4-lst-show-art .v4-portrait-mono, .v4-pwy-fac-photo .v4-portrait-mono { font-size: 40px; } .v4-fac-feat .v4-portrait-mono, .v4-fac-featured-photo .v4-portrait-mono, .v4-sch-hero-photo .v4-portrait-mono, .v4-lst-player-art .v4-portrait-mono, .v4-lsn-video-bg .v4-portrait-mono { font-size: 104px; } .v4-photoslot::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: repeating-linear-gradient(132deg, var(--hatch) 0 1px, transparent 1px 12px); } /* centred emblem seal — makes every empty slot read as an intentional, branded "drop a photo here" placeholder rather than a stray colour block, and holds identity even on tiny thumbnails where the caption clips away. */ .v4-photoslot::after { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 30% 22%, rgba(255,255,255,0.08), transparent 60%); } /* centred emblem seal — a real element (not a pseudo) so it survives the web-component slot. Makes every empty slot read as an intentional, branded "drop a photo here" placeholder, and holds identity on tiny thumbnails. */ .v4-photoslot-seal { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url('assets/favicon.svg'); background-repeat: no-repeat; background-position: center; background-size: 33% auto; opacity: 0.2; } .v4-photoslot-label { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; font-family: var(--sg-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.35; opacity: 0.82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Avatar — warm duotone disc, not a flat circle ---- */ .v4-av { position: relative; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 -3px 8px rgba(0,0,0,0.18); } .v4-av-glow { position: absolute; inset: 0; background: radial-gradient(circle at 34% 26%, rgba(245,236,218,0.5), transparent 62%); } .v4-av-init { position: relative; font-family: var(--sg-font-display); font-weight: 600; color: #F5ECDA; letter-spacing: 0.01em; line-height: 1; } /* ========================================================================== #2 — VERTICAL RHYTHM. Bands no longer all 88px. Deliberate tight/tall beats. ========================================================================== */ .v4-band-tall { padding: 120px 0; } .v4-band-cream { padding: 88px 0 96px; } /* Recent answers */ .v4-band-sand { padding: 78px 0; } /* Faculty — quieter */ .v4-band-darkest{ padding: 100px 0 64px; } /* Donor — asymmetric */ /* ========================================================================== #1 — RECENT ANSWERS as a lead + reading list, not three equal cards. ========================================================================== */ .v4-answers-split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 52px; align-items: start; } .v4-answer-lead { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-top: 2px solid var(--sg-burnt-umber); border-radius: 0; padding: 36px 38px 30px; display: flex; flex-direction: column; transition: box-shadow 260ms var(--sg-ease); cursor: pointer; } .v4-answer-lead:hover { box-shadow: 0 18px 44px rgba(20,40,60,0.10); } .v4-answer-lead .v4-answer-tag, .v4-answer-row .v4-answer-tag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; } .v4-answer-tag .when { color: var(--sg-fg-subtle); font-weight: 500; } .v4-answer-lead .v4-answer-q { font-family: var(--sg-font-display); font-weight: 500; font-size: 29px; line-height: 1.2; letter-spacing: -0.006em; color: var(--sg-fg); margin: 0 0 16px; text-wrap: pretty; } .v4-answer-lead .v4-answer-a { font-size: 15.5px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0 0 22px; } .v4-answer-lead .v4-answer-foot, .v4-answer-row .v4-answer-foot { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--sg-fg-muted); } .v4-answer-lead .v4-answer-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(15,27,34,0.08); } .v4-answer-foot b { color: var(--sg-fg); font-weight: 600; font-family: var(--sg-font-display); } .v4-answer-readmore { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--sg-astral); font-weight: 600; white-space: nowrap; } .v4-answer-readmore .arrow { transition: transform 160ms; } .v4-answer-lead:hover .v4-answer-readmore .arrow { transform: translateX(3px); } @media (max-width: 720px) { .v4-answer-readmore { display: none; } } .v4-answer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .v4-answer-row { padding: 24px 0; border-bottom: 1px solid rgba(15,27,34,0.1); cursor: pointer; transition: opacity 140ms ease; } .v4-answer-row:first-child { padding-top: 4px; } .v4-answer-row:last-child { border-bottom: none; padding-bottom: 0; } .v4-answer-row:hover { opacity: 0.62; } .v4-answer-row .v4-answer-q { font-family: var(--sg-font-display); font-weight: 500; font-size: 20px; line-height: 1.24; color: var(--sg-fg); margin: 0 0 12px; text-wrap: pretty; } /* ========================================================================== #1 — FACULTY as one feature + a stacked list, not three equal cards. ========================================================================== */ .v4-faculty { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; } .v4-fac-feat { display: flex; flex-direction: column; gap: 20px; text-decoration: none; color: inherit; } .v4-fac-feat .v4-fac-photo { aspect-ratio: 5/4; border-radius: 0; } .v4-fac .v4-fac-photo { border-radius: 0; } .v4-fac-feat .v4-fac-name { font-size: 25px; } .v4-fac-rows { display: flex; flex-direction: column; } .v4-fac-row { display: grid; grid-template-columns: 116px 1fr; gap: 24px; align-items: center; text-decoration: none; color: inherit; padding: 26px 0; border-bottom: 1px solid rgba(15,27,34,0.14); transition: transform 200ms var(--sg-ease); } .v4-fac-row:first-child { padding-top: 0; } .v4-fac-row:last-child { border-bottom: none; padding-bottom: 0; } .v4-fac-row:hover { transform: translateX(4px); } .v4-fac-row-photo { aspect-ratio: 1/1; border-radius: 0; overflow: hidden; background: #EFE0C5; } .v4-fac-row-photo image-slot { display: block; width: 100%; height: 100%; } .v4-fac-row .v4-fac-name { font-size: 19px; margin-top: 2px; } .v4-fac-row .v4-fac-line { font-size: 13.5px; } /* ========================================================================== #5 — COMMITTED COLOUR. A deep-olive block breaks the teal/sand/gold safety. ========================================================================== */ .v4-band-olive { background: #3E4A2F; color: #F2ECDC; padding: 80px 0; } .v4-band-olive .v4-test-photo { border-radius: 0; } .v4-band-olive .v4-test blockquote { color: #FBF6EC; } .v4-band-olive .v4-test blockquote::before { color: var(--sg-gamboge); opacity: 0.75; } .v4-band-olive .v4-test-attr { color: rgba(242,236,220,0.72); } .v4-band-olive .v4-test-attr b { color: #FBF6EC; } .v4-band-olive .v4-test-attr .dot { color: rgba(242,236,220,0.4); } /* ========================================================================== #6 — DE-MECHANISE. Sharper editorial corners + per-element hover timing. ========================================================================== */ .v4-course { border-radius: 2px; transition: border-color 220ms var(--sg-ease), transform 220ms var(--sg-ease); } .v4-course:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(20,40,60,0.06); } .v4-test-photo { border-radius: 0; } /* Responsive collapse for the new split layouts */ @media (max-width: 1080px) { .v4-answers-split { grid-template-columns: 1fr; gap: 36px; } .v4-faculty { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 720px) { .v4-fac-row { grid-template-columns: 88px 1fr; gap: 18px; } .v4-answer-lead { padding: 28px 24px 26px; } .v4-answer-lead .v4-answer-q { font-size: 25px; } } /* ========================================================================== EDITORIAL MASTHEAD — left-aligned conviction, with a geometric brand plate filling the right. Headline carries one idea; the ayah sits as a left-ruled companion. The plate echoes the verse watermark and the logo emblem. ========================================================================== */ .v4-banner-split { text-align: left; padding: 0; display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: stretch; gap: 0; max-width: none; } .v4-banner-split .v4-banner-inner { margin: 0; max-width: 720px; padding: 66px 48px 58px; align-self: center; justify-self: end; } .v4-banner-split .eyebrow { justify-content: flex-start; } .v4-banner-split h1 { font-size: clamp(40px, 4.6vw, 62px); max-width: 15ch; margin-bottom: 20px; } .v4-banner-split .v4-banner-sub { margin: 0; max-width: 52ch; } .v4-banner-ayah-row { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin: 32px 0 0; padding-left: 18px; border-left: 2px solid var(--sg-gamboge); } .v4-banner-split .v4-banner-ayah { margin: 0; padding: 0; border-top: none; direction: rtl; font-family: var(--font-quran); font-size: 27px; line-height: 1.5; color: var(--sg-fg); font-weight: 400; } .v4-banner-split .v4-banner-ayah-en { margin: 0; font-family: var(--sg-font-display); font-style: normal; font-size: 14.5px; color: var(--sg-fg-muted); letter-spacing: 0.005em; } /* --- the brand plate --- */ .v4-banner-plate { position: relative; background: linear-gradient(155deg, #13303F 0%, #0A1E29 100%); overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 420px; border-left: 1px solid rgba(236,166,8,0.25); } .v4-banner-plate-field { position: absolute; inset: -10%; background-image: url('data:image/svg+xml;utf8,'); background-size: 150px 150px; background-position: center; opacity: 0.06; } .v4-banner-plate::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 42%, transparent 30%, rgba(10,30,41,0.65) 100%); pointer-events: none; } .v4-banner-plate-mark { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; } .v4-banner-plate-cap { font-family: var(--sg-font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(236,166,8,0.85); padding-top: 18px; position: relative; } .v4-banner-plate-cap::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 52px; height: 1px; background: rgba(236,166,8,0.5); } /* --- stream tags (replaces the 64/5/40 stat tally) --- */ .v4-term-streams { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgba(15,27,34,0.1); border-bottom: 1px solid rgba(15,27,34,0.1); padding: 18px 0; margin-bottom: 24px; } .v4-term-streams span { font-family: var(--sg-font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--sg-astral); padding: 5px 13px; white-space: nowrap; border: 1px solid rgba(48,112,142,0.28); border-radius: var(--sg-radius-pill); } @media (max-width: 920px) { .v4-banner-split { grid-template-columns: 1fr; } .v4-banner-split .v4-banner-inner { justify-self: stretch; max-width: 760px; padding: 48px 40px 36px; } .v4-banner-plate { display: none; } } @media (max-width: 720px) { .v4-banner-split .v4-banner-inner { padding: 44px 24px 32px; } .v4-banner-split h1 { font-size: clamp(32px, 9vw, 44px); } } /* ========================================================================== KHATAM ORNAMENT LAYER -------------------------------------------------------------------------- A single, light, disciplined motif drawn ONLY from the 8-point khatam star. Inline SVG, monochrome, gamboge (#ECA608) the lone accent, hairline weight. Nothing sits behind body text. Removing every rule below loses warmth but breaks no layout — every ornament is decorative and self-contained. ========================================================================== */ /* (1) seal beside a name — alignment helper only */ .om-seal { display: inline-block; vertical-align: -0.12em; flex: none; margin-inline-start: 0.4em; color: var(--sg-gamboge); } /* (2) section divider — hairline rule with a centred star in the gap */ .om-divider { display: flex; align-items: center; gap: 18px; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 40px; --om-rule: rgba(15, 27, 34, 0.12); } .om-divider .om-rule { flex: 1; height: 1px; background: var(--om-rule); } .om-divider .om-star { flex: none; color: var(--sg-gamboge); line-height: 0; } .om-divider.om-on-dark { --om-rule: rgba(245, 236, 218, 0.20); } @media (max-width: 720px) { .om-divider { padding: 0 24px; gap: 12px; } } /* (3) colophon — faint repeating star+diamond band above the footer legal line */ .om-colophon { max-width: 1280px; margin: 40px auto 0; line-height: 0; color: var(--sg-gamboge); opacity: 0.3; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); } .om-colophon svg { display: block; width: 100%; } /* FULL tier — corner-frames around a single anchoring verse (one per page) */ .v4-verse-inner.om-framed { position: relative; max-width: 680px; } /* when the star frame is present, recede the hexagon watermark so they don't compete */ .v4-verse:has(.om-framed) .v4-verse-emblem { opacity: 0.03; } .om-frame-corner { position: absolute; width: 26px; height: 26px; border: 1.5px solid var(--sg-gamboge); opacity: 0.5; pointer-events: none; } .om-frame-tl { top: -26px; left: -26px; border-right: 0; border-bottom: 0; } .om-frame-tr { top: -26px; right: -26px; border-left: 0; border-bottom: 0; } .om-frame-bl { bottom: -26px; left: -26px; border-right: 0; border-top: 0; } .om-frame-br { bottom: -26px; right: -26px; border-left: 0; border-top: 0; } .om-frame-star { position: absolute; color: var(--sg-gamboge); opacity: 0.7; line-height: 0; pointer-events: none; } .om-frame-star.s-tl { top: -34px; left: -34px; } .om-frame-star.s-tr { top: -34px; right: -34px; } .om-frame-star.s-bl { bottom: -34px; left: -34px; } .om-frame-star.s-br { bottom: -34px; right: -34px; } @media (max-width: 720px) { .om-frame-corner, .om-frame-star { display: none; } } /* FULL tier — faint star watermark behind one heading (never reduces contrast) */ .om-watermark-wrap { position: relative; } .om-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--sg-gamboge); opacity: 0.06; line-height: 0; pointer-events: none; z-index: 0; } .om-watermark-wrap > *:not(.om-watermark) { position: relative; z-index: 1; } @media (max-width: 720px) { .om-watermark { opacity: 0.05; } } /* ========================================================================== READING TYPE — three-role system (LTR / English only). -------------------------------------------------------------------------- Display = Quarto (headings, untouched). UI chrome = --sg-font-ui (Source Sans). Running prose = --sg-font-read (Spectral). Strategy: set the reading face on ALL content text tags, then exclude the handful of UI bits that use those same tags (eyebrows, kickers, footer/nav lists, meta). Guarded to html:not([dir="rtl"]); the RTL mirror of this rule lives in v4_ar.css and maps Arabic prose to the Arabic reading face (29LT Riwaya / Scheherazade). ========================================================================== */ html:not([dir="rtl"]) :is(p, li, blockquote, dd, .lede, .deck) { font-family: var(--sg-font-read); } /* the one multi-class reading container, kept OUT of the broad rule above so it doesn't inflate that rule's specificity and defeat the UI exclusions */ html:not([dir="rtl"]) .v4-comp-preview .frame .body { font-family: var(--sg-font-read); } /* …but UI chrome that happens to use those tags stays in the sans. Placed AFTER the broad rule, with equal-or-higher specificity, so it wins. */ html:not([dir="rtl"]) :is( .eyebrow, .kicker, [class*="kicker"], [class*="eyebrow"], .v4-foot li, .v4-foot li a, .v4-foot p, .v4-nav-items li, .v4-util li, .v4-util p, .v4-crumb, .crumb, .meta, .when, .lab, .role, .tag, .v4-answer-foot, .v4-answer-foot *, .v4-lst-show-meta, .v4-lst-show-teacher, .v4-lst-show-actions *, .v4-mc-fchip, .v4-foot-legal, .v4-foot-legal * ) { font-family: var(--sg-font-ui); } html:not([dir="rtl"]) .v4-ans-body { letter-spacing: 0.002em; } /* Italics retired across the system — emphasis is carried by weight/colour, not slant. Neutralise the UA default on inline emphasis tags too. */ .sg-v4 em, .sg-v4 i, .sg-v4 cite, .sg-v4 blockquote { font-style: normal; } /* ---- end v4.css ---- */ /* ---- begin v4_about.css ---- */ /* ========================================================================== v4_about.css — Pass 4 · About (the institutional story) -------------------------------------------------------------------------- Who SeekersGuidance is: Est. 2008, a 501(c)(3), a federation taught in the unbroken chain. Editorial broadsheet register — reading face for prose, display for headings, dotted-rule dividers, restrained numerals as fact. Reuses chrome + role-swap from v4_library.css. Mirrors by direction. ========================================================================== */ .v4-ab-hero { background: #FBF6EC; border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-ab-hero-inner { max-width: 880px; margin: 0 auto; padding: 64px 40px 56px; text-align: center; } .v4-ab-kicker { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 18px; } [dir="rtl"] .v4-ab-kicker { letter-spacing: 0; } .v4-ab-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(34px,4.6vw,56px); line-height: 1.04; letter-spacing: -0.016em; color: var(--sg-fg); margin: 0 auto 20px; max-width: 18ch; text-wrap: balance; } [dir="rtl"] .v4-ab-hero h1 { letter-spacing: 0; line-height: 1.28; } .v4-ab-hero .lede { font-family: var(--sg-font-read); font-size: 20px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 auto; max-width: 60ch; text-wrap: pretty; } /* fact strip — Est. 2008, 501(c)(3), 250k — once, as fact */ .v4-ab-facts { background: var(--sg-astral-shade-90); color: #F5ECDA; } .v4-ab-facts-inner { max-width: 1100px; margin: 0 auto; padding: 34px 40px; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; } @media (max-width: 760px){ .v4-ab-facts-inner { grid-template-columns: 1fr 1fr; gap: 28px 24px; } } .v4-ab-fact .n { font-family: var(--sg-font-display); font-weight: 600; font-size: 32px; line-height: 1; color: var(--sg-gamboge); font-variant-numeric: tabular-nums; } .v4-ab-fact .l { font-family: var(--sg-font-ui); font-size: 12.5px; color: rgba(245,236,218,0.8); margin-top: 8px; } /* prose body — editorial column */ .v4-ab-body { max-width: 720px; margin: 0 auto; padding: 64px 40px; } .v4-ab-body section { margin-bottom: 48px; } .v4-ab-body section:last-child { margin-bottom: 0; } .v4-ab-body h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 28px; line-height: 1.14; color: var(--sg-fg); margin: 0 0 16px; } .v4-ab-body h2::before { content: ''; display: block; width: 40px; height: 2px; background: var(--sg-gamboge); margin-bottom: 18px; } .v4-ab-body p { font-family: var(--sg-font-read); font-size: 18px; line-height: 1.62; color: var(--sg-ink, var(--sg-fg)); margin: 0 0 18px; text-wrap: pretty; } [dir="rtl"] .v4-ab-body p { line-height: 2.0; } .v4-ab-body p:last-child { margin-bottom: 0; } .v4-ab-body .dotted { border: none; border-top: 1px dotted var(--sg-rule, #E5D3B3); margin: 0; } /* mission pull — gold top-rule (never a left bar) */ .v4-ab-pull { background: #FBF7EF; border: 1px solid rgba(15,27,34,0.1); border-top: 2px solid var(--sg-gamboge); border-radius: 2px; padding: 28px 30px; margin: 8px 0 0; } .v4-ab-pull p { font-family: var(--sg-font-display); font-weight: 500; font-size: 23px; line-height: 1.32; color: var(--sg-fg); margin: 0; text-wrap: pretty; } [dir="rtl"] .v4-ab-pull p { line-height: 1.6; } /* the chain — compact lineage motif reused from federation */ .v4-ab-chain { background: #FBF6EC; border-block: 1px solid rgba(15,27,34,0.08); } .v4-ab-chain-inner { max-width: 720px; margin: 0 auto; padding: 56px 40px; } .v4-ab-chain h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 28px; color: var(--sg-fg); margin: 0 0 8px; } .v4-ab-chain .note { font-family: var(--sg-font-read); font-size: 16px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 26px; max-width: 56ch; } .v4-ab-chain ol { list-style: none; margin: 0; padding: 0; position: relative; } .v4-ab-chain ol::before { content: ''; position: absolute; inset-block: 12px 12px; inset-inline-start: 13px; width: 2px; background: linear-gradient(180deg, var(--sg-gamboge), rgba(236,166,8,0.25)); } .v4-ab-node { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 18px; padding-bottom: 20px; } .v4-ab-node:last-child { padding-bottom: 0; } .v4-ab-node .star { position: relative; z-index: 1; color: var(--sg-gamboge); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: #FBF6EC; } .v4-ab-node .nm { font-family: var(--sg-font-display); font-weight: 600; font-size: 17px; color: var(--sg-fg); margin: 2px 0 2px; } .v4-ab-node .det { font-family: var(--sg-font-read); font-size: 14px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0; } /* closing CTA band */ .v4-ab-cta { background: var(--sg-astral-shade-90); color: #F5ECDA; text-align: center; } .v4-ab-cta-inner { max-width: 720px; margin: 0 auto; padding: 56px 40px; } .v4-ab-cta h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(26px,3vw,36px); line-height: 1.1; color: #FBF6EC; margin: 0 0 22px; } .v4-ab-cta .acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---- end v4_about.css ---- */ /* ---- begin v4_almanac.css ---- */ /* ========================================================================== v4_almanac.css — Pass 4 · The Almanac (the daily Prophetic rhythm) [NEW] -------------------------------------------------------------------------- Pillar III, built: prayer times where you are, today in both calendars, today's lesson, a Prophetic du'ā', and the sunnah of the day. A calm daily surface, not a feed — no countdown urgency, only the day's rhythm as fact. Reuses chrome + role-swap from v4_library.css; du'ā' uses the Arabic reading face, Quranic text (if any) the certified mushaf. Mirrors by direction. ========================================================================== */ .v4-alm-hero { background: linear-gradient(180deg, var(--sg-astral-shade-90), var(--sg-astral-shade-70)); color: #F5ECDA; } .v4-alm-hero-inner { max-width: 1180px; margin: 0 auto; padding: 46px 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; } .v4-alm-date .k { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 12px; } [dir="rtl"] .v4-alm-date .k { letter-spacing: 0; } .v4-alm-date .hijri { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px,3.4vw,40px); line-height: 1.1; color: #FBF6EC; margin: 0 0 6px; } .v4-alm-date .greg { font-family: var(--sg-font-read); font-size: 16px; color: rgba(245,236,218,0.78); margin: 0; } .v4-alm-next { text-align: end; flex: none; } [dir="rtl"] .v4-alm-next { text-align: start; } .v4-alm-next .lab { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,236,218,0.7); margin: 0 0 6px; } [dir="rtl"] .v4-alm-next .lab { letter-spacing: 0; } .v4-alm-next .nm { font-family: var(--sg-font-display); font-weight: 600; font-size: 26px; color: var(--sg-gamboge); } .v4-alm-next .tm { font-family: var(--sg-font-display); font-weight: 500; font-size: 26px; color: #FBF6EC; margin-inline-start: 10px; unicode-bidi: isolate; direction: ltr; } .v4-alm-wrap { max-width: 1180px; margin: 0 auto; padding: 40px 40px 80px; } .v4-alm-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; align-items: start; } @media (max-width: 880px){ .v4-alm-grid { grid-template-columns: 1fr; } } .v4-alm-card { background: #fff; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 24px 26px; } .v4-alm-card.span { grid-column: 1 / -1; } .v4-alm-card .ttl { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 0 0 18px; display: flex; align-items: center; justify-content: space-between; } [dir="rtl"] .v4-alm-card .ttl { letter-spacing: 0; } .v4-alm-card .ttl .loc { color: var(--sg-astral); font-weight: 700; } /* prayer times — the centerpiece */ .v4-alm-prayers { list-style: none; margin: 0; padding: 0; } .v4-alm-prayers li { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(15,27,34,0.07); } .v4-alm-prayers li:last-child { border-bottom: none; } .v4-alm-prayers .nm { font-family: var(--sg-font-display); font-weight: 500; font-size: 19px; color: var(--sg-fg); } .v4-alm-prayers .ar { font-family: var(--sg-font-arabic-display); font-size: 17px; color: var(--sg-fg-muted); margin-inline-start: 10px; } .v4-alm-prayers .tm { font-family: var(--sg-font-ui); font-size: 16px; color: var(--sg-fg); font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; } .v4-alm-prayers li.now { } .v4-alm-prayers li.now .nm { color: var(--sg-fg); font-weight: 600; } .v4-alm-prayers li.now .tm { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); font-weight: 700; padding: 3px 11px; border-radius: 2px; } .v4-alm-prayers li.now .badge { font-family: var(--sg-font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); margin-inline-start: 10px; } [dir="rtl"] .v4-alm-prayers li.now .badge { letter-spacing: 0; } /* du'ā' of the day — Prophetic supplication (hadith), reading face */ .v4-alm-dua .ar { font-family: var(--sg-font-arabic-read); direction: rtl; text-align: start; font-size: 24px; line-height: 2.0; color: var(--sg-fg); margin: 0 0 14px; } .v4-alm-dua .tr { font-family: var(--sg-font-read); font-size: 16px; line-height: 1.6; color: var(--sg-fg); margin: 0 0 10px; } .v4-alm-dua .src { font-family: var(--sg-font-ui); font-size: 12.5px; font-weight: 600; color: var(--gold-ink); } /* today's lesson teaser */ .v4-alm-lesson { display: flex; gap: 16px; align-items: flex-start; } .v4-alm-lesson .mark { width: 44px; height: 44px; border-radius: 2px; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg,#22506A,#0A1E29); color: var(--sg-gamboge); } .v4-alm-lesson .lvl { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 5px; } [dir="rtl"] .v4-alm-lesson .lvl { letter-spacing: 0; } .v4-alm-lesson h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 19px; line-height: 1.22; color: var(--sg-fg); margin: 0 0 5px; } .v4-alm-lesson h3 a { color: inherit; text-decoration: none; } .v4-alm-lesson h3 a:hover { color: var(--sg-astral); } .v4-alm-lesson .by { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); margin: 0; } /* sunnah of the day */ .v4-alm-sunnah p { font-family: var(--sg-font-read); font-size: 16px; line-height: 1.6; color: var(--sg-fg); margin: 0 0 10px; } .v4-alm-sunnah .src { font-family: var(--sg-font-ui); font-size: 12.5px; color: var(--sg-fg-muted); } /* location note */ .v4-alm-locnote { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(15,27,34,0.07); } .v4-alm-locnote a { color: var(--sg-astral); text-decoration: none; } /* ---- end v4_almanac.css ---- */ /* ---- begin v4_begin.css ---- */ /* ========================================================================== Where to Begin — the guided starting-point flow. Built on the v4 system: Quarto display, Spectral read, Source Sans UI, cream ground, sharp hairline frames, gold accent. Calm and unhurried. ========================================================================== */ .wtb-stage { background: #FBF6EC; border-bottom: 1px solid rgba(15, 27, 34, 0.08); display: flex; justify-content: center; padding: 72px 24px 104px; } .wtb-shell { width: 100%; max-width: 760px; } .wtb-screen { animation: wtb-fade 360ms var(--sg-ease); } @keyframes wtb-fade { from { transform: translateY(10px); } to { transform: none; } } /* shared eyebrow with the short gold rule */ .wtb-eyebrow { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 11px; } .wtb-eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--sg-gamboge); } /* ── Intro ─────────────────────────────────────────────────────────── */ .wtb-intro { text-align: center; padding: 24px 0 8px; } .wtb-intro .wtb-eyebrow { justify-content: center; } .wtb-intro-title { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(34px, 5vw, 54px); line-height: 1.06; letter-spacing: -0.015em; color: var(--sg-fg); margin: 0 0 18px; text-wrap: balance; } .wtb-intro-lede { font-family: var(--sg-font-read); font-size: 19px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 auto 34px; max-width: 50ch; text-wrap: pretty; } .wtb-begin-btn { padding: 15px 32px; font-size: 15.5px; } .wtb-intro-note { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); margin: 22px 0 0; letter-spacing: 0.01em; } /* ── Progress ──────────────────────────────────────────────────────── */ .wtb-progress { margin-bottom: 36px; } .wtb-progress-label { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-muted); margin-bottom: 10px; } .wtb-progress-track { height: 3px; background: var(--sg-soft-sand); border-radius: 999px; overflow: hidden; } .wtb-progress-track span { display: block; height: 100%; background: var(--sg-gamboge); border-radius: 999px; transition: width 320ms var(--sg-ease); } /* ── Question ──────────────────────────────────────────────────────── */ .wtb-q-eyebrow { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 10px; } .wtb-q-prompt { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 30px; text-wrap: pretty; } .wtb-options { display: flex; flex-direction: column; gap: 12px; } .wtb-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; cursor: pointer; font-family: inherit; background: #fff; border: 1px solid rgba(15, 27, 34, 0.14); border-radius: 3px; padding: 20px 24px; transition: border-color 160ms var(--sg-ease), transform 160ms var(--sg-ease), box-shadow 160ms var(--sg-ease), background 160ms; } .wtb-option:hover { border-color: var(--sg-astral); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20, 40, 60, 0.08); } .wtb-option:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 3px; } .wtb-option.on { border-color: var(--sg-astral); box-shadow: inset 0 0 0 1px var(--sg-astral); } .wtb-option-main { display: block; } .wtb-option-label { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--sg-fg); display: block; } .wtb-option-desc { font-family: var(--sg-font-read); font-size: 14.5px; line-height: 1.45; color: var(--sg-fg-muted); margin-top: 4px; display: block; } .wtb-option-arrow { font-family: var(--sg-font-ui); color: var(--sg-astral); font-size: 20px; flex: none; opacity: 0; transform: translateX(-5px); transition: opacity 160ms, transform 160ms; } .wtb-option:hover .wtb-option-arrow, .wtb-option.on .wtb-option-arrow { opacity: 1; transform: none; } .wtb-back { margin-top: 26px; background: none; border: none; cursor: pointer; font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; color: var(--sg-fg-muted); padding: 6px 0; transition: color 150ms; } .wtb-back:hover { color: var(--sg-fg); } .wtb-back:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 3px; } /* ── Result ────────────────────────────────────────────────────────── */ .wtb-result-title { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(32px, 4.6vw, 50px); line-height: 1.06; letter-spacing: -0.015em; color: var(--sg-fg); margin: 0 0 14px; text-wrap: balance; } .wtb-result-summary { font-family: var(--sg-font-read); font-size: 18px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 40px; max-width: 54ch; text-wrap: pretty; } .wtb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .wtb-card { background: #fff; border: 1px solid rgba(15, 27, 34, 0.1); border-top: 2px solid var(--sg-gamboge); border-radius: 2px; padding: 24px 24px 26px; display: flex; flex-direction: column; } .wtb-card-kicker { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); margin-bottom: 12px; } .wtb-course-code { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-astral); margin-bottom: 6px; } .wtb-card-title { font-family: var(--sg-font-display); font-weight: 600; font-size: 20px; line-height: 1.22; color: var(--sg-fg); margin: 0 0 8px; text-wrap: pretty; } .wtb-card-sub { font-family: var(--sg-font-read); font-size: 14.5px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0 0 20px; flex: 1; } .wtb-card .v4-btn { align-self: flex-start; } .wtb-notify { align-self: flex-start; font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; color: var(--sg-astral); display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(48, 112, 142, 0.3); padding-bottom: 2px; transition: border-color 150ms; } .wtb-notify:hover { border-bottom-color: var(--sg-astral); } .wtb-notify:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 3px; border-radius: 2px; } /* Next step — the committed deep-teal takeaway */ .wtb-next { margin-top: 24px; background: var(--sg-astral-shade-70); color: #F5ECDA; border-radius: 2px; padding: 28px 30px; } .wtb-next-label { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 10px; } .wtb-next-line { font-family: var(--sg-font-display); font-weight: 500; font-size: 21px; line-height: 1.4; color: #FBF6EC; margin: 0; text-wrap: pretty; } .wtb-lang-note { margin: 22px 0 0; font-family: var(--sg-font-ui); font-size: 14.5px; color: var(--sg-fg-muted); } .wtb-lang-note a { color: var(--sg-astral); font-weight: 600; border-bottom: 1px solid rgba(48,112,142,0.3); } .wtb-recap-row { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(15, 27, 34, 0.1); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .wtb-recap { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); margin: 0; } .wtb-restart { background: none; border: none; cursor: pointer; font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; color: var(--sg-astral); display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; border-bottom: 1px solid rgba(48, 112, 142, 0.3); transition: border-color 150ms; } .wtb-restart:hover { border-bottom-color: var(--sg-astral); } .wtb-restart:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 3px; } /* ── Responsive ────────────────────────────────────────────────────── */ @media (max-width: 720px) { .wtb-stage { padding: 48px 20px 80px; } .wtb-cards { grid-template-columns: 1fr; } .wtb-option { padding: 18px 20px; } .wtb-next { padding: 24px 22px; } } /* ---- end v4_begin.css ---- */ /* ---- begin v4_books.css ---- */ /* ========================================================================== v4_books.css — Pass 3 · Seekers Books shelf -------------------------------------------------------------------------- The e-books library as an institutional shelf, not a store. Reuses the bilingual chrome + switcher + badges + per-card toggle from v4_library.css (load that first); adds only the book card, the typographic cover, and the format chips (PDF / EPUB / AUDIO). One component mirrors by direction — logical properties only, [dir="rtl"] re-voices type (handled in v4_library.css). Pass-1 type/colour obeyed. ========================================================================== */ .v4-bk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 1000px){ .v4-bk-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px){ .v4-bk-grid { grid-template-columns: 1fr; } } .v4-bk-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; overflow: hidden; position: relative; transition: border-color 180ms, transform 180ms, box-shadow 180ms; } .v4-bk-card:hover { border-color: var(--sg-astral); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,40,60,0.07); } /* Typographic cover — a designed cover, never a photo. Tonal field + title. */ .v4-bk-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: #FBF6EC; border-bottom: 1px solid rgba(15,27,34,0.1); } .v4-bk-cover::after { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0; right: 0; height: 3px; background: var(--sg-gamboge); opacity: 0.9; } .v4-bk-cover .seal { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; width: 30px; height: 30px; opacity: 0.5; } .v4-bk-cover .ct { font-family: var(--sg-font-display); font-weight: 600; font-size: 22px; line-height: 1.16; letter-spacing: -0.01em; margin: 0; text-wrap: balance; max-width: 18ch; } [dir="rtl"] .v4-bk-cover .ct { font-family: var(--sg-font-arabic-display); line-height: 1.4; } .v4-bk-cover .ca { font-family: var(--sg-font-ui); font-size: 12px; letter-spacing: 0.04em; color: rgba(245,236,218,0.82); margin: 8px 0 0; } [dir="rtl"] .v4-bk-cover .ca { font-family: var(--sg-font-arabic-ui); } .v4-bk-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 18px; } .v4-bk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .v4-bk-genre { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); } [dir="rtl"] .v4-bk-genre { letter-spacing: 0; } .v4-bk-title { font-family: var(--sg-font-display); font-weight: 500; font-size: 18px; line-height: 1.22; letter-spacing: -0.004em; color: var(--sg-fg); margin: 0 0 4px; text-wrap: pretty; } .v4-bk-title a { color: inherit; text-decoration: none; } .v4-bk-title a:hover { color: var(--sg-astral); } .v4-bk-author { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); margin: 0 0 12px; } .v4-bk-blurb { font-size: 14px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 16px; flex: 1; } /* format chips — PDF / EPUB / AUDIO */ .v4-bk-fmts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .v4-bk-fmt { font-family: var(--sg-font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--sg-astral); border: 1px solid rgba(48,112,142,0.3); border-radius: 2px; padding: 3px 8px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; } .v4-bk-fmt .g { width: 5px; height: 5px; border-radius: 50%; background: var(--sg-astral); } .v4-bk-fmt.audio { color: var(--gold-ink); border-color: rgba(143,102,4,0.34); } .v4-bk-fmt.audio .g { background: var(--gold-ink); } .v4-bk-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(15,27,34,0.08); } /* dim treatment reuses .v4-lib-card.dim semantics for book cards */ .v4-bk-card.dim { background: #FBF7EF; border-color: rgba(15,27,34,0.08); } .v4-bk-card.dim:hover { transform: none; box-shadow: none; border-color: rgba(15,27,34,0.12); } .v4-bk-card.dim .v4-bk-cover { filter: grayscale(0.35); opacity: 0.72; } .v4-bk-card.dim .v4-bk-title, .v4-bk-card.dim .v4-bk-author, .v4-bk-card.dim .v4-bk-blurb { opacity: 0.55; } /* ---- end v4_books.css ---- */ /* ---- begin v4_classroom.css ---- */ /* ========================================================================== SeekersGuidance — v4 Classroom (Sprint 2) Course Home (enrolled view) · My Notes Journal · Ask the Scholar Privately ========================================================================== */ /* ========================================================================== COURSE HOME — the enrolled-view classroom landing ========================================================================== */ .v4-ch { background: #FBF6EC; min-height: 100vh; } /* Course bar — persistent header showing course, scholar, your progress */ .v4-ch-bar { background: var(--sg-astral-shade-90); color: #F5ECDA; padding: 18px 0; position: relative; overflow: hidden; } .v4-ch-bar::after { content: ''; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; opacity: 0.06; pointer-events: none; } .v4-ch-bar-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; position: relative; } .v4-ch-bar .crumb { font-size: 12.5px; color: rgba(245,236,218,0.65); letter-spacing: 0.04em; } .v4-ch-bar .crumb a { color: rgba(245,236,218,0.85); text-decoration: none; } .v4-ch-bar .crumb a:hover { color: #FBF6EC; } .v4-ch-bar .crumb .sep { opacity: 0.4; margin: 0 8px; } .v4-ch-bar .meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(245,236,218,0.78); } .v4-ch-bar .meta .av { width: 28px; height: 28px; border-radius: 50%; background: var(--sg-astral-shade-30); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sg-font-display); font-weight: 600; font-size: 11px; color: #F5ECDA; } .v4-ch-bar .meta b { color: #FBF6EC; font-weight: 600; } .v4-ch-bar .prog { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: rgba(245,236,218,0.7); } .v4-ch-bar .prog .bar { width: 140px; height: 6px; background: rgba(245,236,218,0.12); border-radius: 3px; overflow: hidden; } .v4-ch-bar .prog .bar .fill { width: 58%; height: 100%; background: linear-gradient(90deg, var(--sg-astral) 0%, var(--sg-gamboge) 100%); } .v4-ch-bar .prog b { color: #FBF6EC; font-weight: 600; } /* Hero — course title + continue + tonight */ .v4-ch-hero { padding: 56px 0 40px; background: linear-gradient(180deg, var(--sg-astral-shade-90) 0%, var(--sg-astral-shade-70) 100%); color: #F5ECDA; position: relative; overflow: hidden; } .v4-ch-hero-inner { max-width: 1180px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: end; } .v4-ch-hero .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 16px; display: inline-flex; align-items: center; gap: 14px; } .v4-ch-hero .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--sg-gamboge); } .v4-ch-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(36px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.018em; color: #FBF6EC; margin: 0 0 14px; text-wrap: balance; } .v4-ch-hero h1 em { font-style: normal; color: var(--sg-gamboge); font-weight: 400; } .v4-ch-hero .lede { font-size: 17.5px; line-height: 1.55; color: rgba(245,236,218,0.78); margin: 0 0 28px; max-width: 52ch; } .v4-ch-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .v4-ch-hero-actions .primary { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); border: 1.5px solid var(--sg-gamboge); padding: 13px 24px; border-radius: 2px; font-weight: 700; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .v4-ch-hero-actions .primary:hover { background: #f6c054; border-color: #f6c054; } .v4-ch-hero-actions .ghost { background: transparent; color: rgba(245,236,218,0.85); border: 1px solid rgba(245,236,218,0.28); padding: 12px 22px; border-radius: 2px; font-weight: 600; font-size: 14.5px; text-decoration: none; } .v4-ch-hero-actions .ghost:hover { color: #FBF6EC; border-color: #F5ECDA; } .v4-ch-hero-actions .where { font-family: var(--sg-font-display); font-style: normal; font-size: 14.5px; color: rgba(245,236,218,0.6); margin-left: 4px; } .v4-ch-hero-next { background: rgba(245,236,218,0.05); border: 1px solid rgba(245,236,218,0.12); border-radius: 2px; padding: 22px 24px; position: relative; } .v4-ch-hero-next .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 8px; display: inline-flex; align-items: center; gap: 8px; } .v4-ch-hero-next .lab .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--sg-gamboge); animation: v4-pulse 1.6s ease-in-out infinite; } .v4-ch-hero-next h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.008em; margin: 0 0 8px; color: #FBF6EC; } .v4-ch-hero-next .when { font-size: 13.5px; color: rgba(245,236,218,0.75); margin: 0 0 18px; font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.04em; } .v4-ch-hero-next a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sg-font-display); font-style: normal; font-size: 14px; color: var(--sg-gamboge); text-decoration: none; } .v4-ch-hero-next a:hover { text-decoration: underline; } /* Main grid — syllabus | sidebar */ .v4-ch-main { padding: 48px 0 80px; } .v4-ch-main-inner { max-width: 1180px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: start; } /* Syllabus accordion */ .v4-ch-syllabus h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 28px; letter-spacing: -0.012em; margin: 0 0 6px; color: var(--sg-fg); } .v4-ch-syllabus h2 + .sub { font-size: 15px; color: var(--sg-fg-muted); margin: 0 0 24px; font-family: var(--sg-font-display); font-style: normal; } .v4-ch-weeks { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(15,27,34,0.08); background: #FFFFFF; border-radius: 2px; border: 1px solid rgba(15,27,34,0.08); overflow: hidden; } .v4-ch-week { border-bottom: 1px solid rgba(15,27,34,0.06); } .v4-ch-week:last-child { border-bottom: none; } .v4-ch-week-row { display: grid; grid-template-columns: 80px 1fr auto auto; gap: 20px; align-items: center; padding: 18px 22px; cursor: pointer; transition: background 120ms; } .v4-ch-week-row:hover { background: #FDFBF6; } .v4-ch-week.current { background: rgba(236,166,8,0.05); } .v4-ch-week.current .v4-ch-week-row { background: transparent; } .v4-ch-week .wk { font-family: var(--sg-font-display); font-style: normal; font-size: 14px; color: var(--sg-fg-muted); font-weight: 500; } .v4-ch-week .wk b { display: block; font-style: normal; font-family: var(--sg-font-display); font-size: 22px; font-weight: 600; color: var(--sg-astral); line-height: 1; margin-bottom: 2px; } .v4-ch-week.done .wk b { color: var(--sg-success); } .v4-ch-week.current .wk b { color: var(--sg-burnt-umber); } .v4-ch-week .t h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.005em; color: var(--sg-fg); margin: 0 0 2px; } .v4-ch-week .t p { font-size: 13.5px; color: var(--sg-fg-muted); margin: 0; } .v4-ch-week .state { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .v4-ch-week.done .state { background: rgba(79,122,74,0.12); color: #355A30; } .v4-ch-week.current .state { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); } .v4-ch-week.upcoming .state { background: #FBF6EC; color: var(--sg-fg-subtle); border: 1px solid rgba(15,27,34,0.08); } .v4-ch-week .chev { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--sg-fg-muted); transition: transform 200ms; } .v4-ch-week.open .chev { transform: rotate(90deg); color: var(--sg-fg); } .v4-ch-week-body { padding: 0 22px 24px 122px; display: none; } .v4-ch-week.open .v4-ch-week-body { display: block; } .v4-ch-week-lessons { display: flex; flex-direction: column; gap: 12px; } .v4-ch-lesson { background: #FBF6EC; border: 1px solid rgba(15,27,34,0.07); border-radius: 2px; padding: 16px 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; } .v4-ch-lesson .pl { width: 36px; height: 36px; border-radius: 50%; background: var(--sg-astral); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; padding-left: 3px; } .v4-ch-lesson.done .pl { background: var(--sg-success); } .v4-ch-lesson .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 2px; } .v4-ch-lesson h4 { font-family: var(--sg-font-display); font-weight: 500; font-size: 16px; letter-spacing: -0.005em; color: var(--sg-fg); margin: 0 0 4px; } .v4-ch-lesson p { font-size: 13px; color: var(--sg-fg-muted); margin: 0; display: flex; gap: 14px; flex-wrap: wrap; } .v4-ch-lesson p span { display: inline-flex; align-items: center; gap: 4px; } .v4-ch-lesson .open { background: transparent; border: 1px solid var(--sg-astral); color: var(--sg-astral); padding: 8px 14px; border-radius: 2px; font-family: var(--sg-font-body); font-weight: 600; font-size: 13px; text-decoration: none; } .v4-ch-lesson .open:hover { background: var(--sg-astral); color: #fff; } /* Sidebar */ .v4-ch-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; } .v4-ch-card { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 22px 24px; } .v4-ch-card .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 12px; } .v4-ch-card h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.005em; color: var(--sg-fg); margin: 0 0 12px; } .v4-ch-card p { font-size: 13.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; } /* Announcements list */ .v4-ch-announce { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .v4-ch-announce li { padding-bottom: 14px; border-bottom: 1px solid rgba(15,27,34,0.06); } .v4-ch-announce li:last-child { padding-bottom: 0; border-bottom: none; } .v4-ch-announce .when { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--sg-fg-subtle); margin: 0 0 4px; letter-spacing: 0.02em; } .v4-ch-announce h4 { font-family: var(--sg-font-display); font-weight: 500; font-size: 15.5px; letter-spacing: -0.005em; color: var(--sg-fg); margin: 0 0 4px; line-height: 1.3; } .v4-ch-announce p { font-size: 13.5px; line-height: 1.45; color: var(--sg-fg-muted); margin: 0; } /* Class roster line */ .v4-ch-roster { display: flex; align-items: center; gap: 14px; margin-top: 6px; } .v4-ch-roster .pile { display: flex; } .v4-ch-roster .pile .av { width: 28px; height: 28px; border-radius: 50%; background: var(--sg-burnt-umber); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sg-font-display); font-weight: 600; color: #F5ECDA; font-size: 11px; border: 2px solid #FFFFFF; } .v4-ch-roster .pile .av + .av { margin-left: -8px; } .v4-ch-roster .pile .av.alt { background: var(--sg-astral-shade-30); } .v4-ch-roster .pile .av.alt2 { background: var(--sg-deep-olive); } .v4-ch-roster .ct { font-size: 13px; color: var(--sg-fg-muted); } .v4-ch-roster .ct b { color: var(--sg-fg); font-weight: 600; font-family: var(--sg-font-display); } /* Term downloads list */ .v4-ch-downloads ul { list-style: none; padding: 0; margin: 0; } .v4-ch-downloads li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(15,27,34,0.05); font-size: 13.5px; } .v4-ch-downloads li:last-child { border-bottom: none; } .v4-ch-downloads li .k { color: var(--sg-burnt-umber); font-size: 14px; } .v4-ch-downloads li .f { color: var(--sg-fg); } .v4-ch-downloads li .s { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--sg-fg-subtle); } /* ========================================================================== MY NOTES JOURNAL — the seeker's writing across all courses ========================================================================== */ .v4-jr { background: #FBF6EC; min-height: 100vh; padding: 0; } .v4-jr-hero { background: linear-gradient(180deg, #F5ECDA 0%, #FBF6EC 100%); padding: 64px 0 48px; border-bottom: 1px solid rgba(15,27,34,0.06); } .v4-jr-hero-inner { max-width: 1180px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: end; } .v4-jr-hero .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 14px; } .v4-jr-hero .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--sg-burnt-umber); } .v4-jr-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(36px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.018em; color: var(--sg-fg); margin: 0 0 14px; text-wrap: balance; } .v4-jr-hero h1 em { font-style: normal; color: var(--sg-burnt-umber); font-weight: 400; } .v4-jr-hero .lede { font-size: 17px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; max-width: 52ch; } /* Stats card on the hero right */ .v4-jr-stats { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 24px 28px; } .v4-jr-stats .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 14px; } .v4-jr-stats .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .v4-jr-stats .stat .n { font-family: var(--sg-font-display); font-weight: 500; font-size: 32px; line-height: 1; color: var(--sg-astral); letter-spacing: -0.012em; } .v4-jr-stats .stat .l { display: block; font-size: 11.5px; letter-spacing: 0.06em; color: var(--sg-fg-muted); margin-top: 6px; line-height: 1.4; } .v4-jr-stats .since { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(15,27,34,0.06); font-family: var(--sg-font-display); font-style: normal; font-size: 13.5px; color: var(--sg-fg-muted); } /* Main grid */ .v4-jr-main { padding: 56px 0 80px; } .v4-jr-main-inner { max-width: 1180px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; } /* Filter rail */ .v4-jr-filters { position: sticky; top: 24px; } .v4-jr-filters h3 { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-fg-muted); margin: 0 0 12px; } .v4-jr-filters h3:not(:first-child) { margin-top: 28px; } .v4-jr-filters ul { list-style: none; padding: 0; margin: 0; } .v4-jr-filters li { padding: 8px 0; font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--sg-fg); transition: color 150ms; } .v4-jr-filters li:hover { color: var(--sg-burnt-umber); } .v4-jr-filters li.on { color: var(--sg-burnt-umber); font-weight: 600; } .v4-jr-filters li.on::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sg-burnt-umber); margin-right: 8px; } .v4-jr-filters li .ct { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--sg-fg-subtle); font-weight: 500; } .v4-jr-search { display: flex; align-items: center; background: #FFFFFF; border: 1px solid rgba(15,27,34,0.12); border-radius: 2px; padding: 8px 12px; gap: 8px; margin-bottom: 14px; } .v4-jr-search input { flex: 1; border: none; outline: none; font-family: var(--sg-font-body); font-size: 14px; color: var(--sg-fg); background: transparent; } .v4-jr-search input::placeholder { color: var(--sg-fg-subtle); font-style: normal; font-family: var(--sg-font-display); } .v4-jr-search .icon { color: var(--sg-fg-subtle); font-size: 13px; } /* Timeline */ .v4-jr-time { position: relative; padding-left: 24px; } .v4-jr-time::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--sg-soft-sand) 0%, rgba(229,211,179,0.1) 100%); } .v4-jr-week { margin-bottom: 36px; position: relative; } .v4-jr-week::before { content: ''; position: absolute; left: -23px; top: 12px; width: 11px; height: 11px; border-radius: 50%; background: var(--sg-gamboge); border: 2px solid #FBF6EC; box-shadow: 0 0 0 1px var(--sg-soft-sand); } .v4-jr-week .when { font-family: var(--sg-font-display); font-style: normal; font-weight: 500; font-size: 15px; color: var(--sg-burnt-umber); margin: 0 0 4px; } .v4-jr-week .when b { font-style: normal; font-weight: 600; color: var(--sg-astral-shade-30); } .v4-jr-week h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.008em; margin: 0 0 16px; color: var(--sg-fg); } .v4-jr-entry { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.07); border-top: 2px solid var(--sg-gamboge); border-radius: 0; padding: 18px 22px; margin-bottom: 12px; } .v4-jr-entry .head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; } .v4-jr-entry .at { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--sg-burnt-umber); font-weight: 600; letter-spacing: 0.04em; } .v4-jr-entry .at .lab { color: var(--sg-fg-subtle); font-weight: 500; letter-spacing: 0.06em; margin-right: 6px; } .v4-jr-entry .ctx { font-size: 12px; color: var(--sg-fg-muted); font-family: var(--sg-font-display); font-style: normal; } .v4-jr-entry .ctx a { color: var(--sg-astral); text-decoration: none; font-style: normal; font-weight: 600; } .v4-jr-entry .ctx a:hover { text-decoration: underline; } .v4-jr-entry p.t { font-family: var(--sg-font-display); font-size: 16px; line-height: 1.5; color: var(--sg-fg); margin: 0; font-weight: 400; text-wrap: pretty; } .v4-jr-entry p.t em { font-style: normal; color: var(--sg-burnt-umber); } .v4-jr-entry .tags { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .v4-jr-entry .tags .tag { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: lowercase; padding: 3px 9px; border-radius: 999px; background: #FBF6EC; color: var(--sg-burnt-umber); border: 1px solid rgba(138,90,68,0.15); } /* Year roll-up at the bottom */ .v4-jr-rollup { margin-top: 56px; padding: 32px 36px; background: linear-gradient(180deg, #13303F 0%, #0A1E29 100%); color: #F5ECDA; border-radius: 2px; position: relative; overflow: hidden; } .v4-jr-rollup .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 12px; } .v4-jr-rollup h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.012em; color: #FBF6EC; margin: 0 0 12px; } .v4-jr-rollup p { font-family: var(--sg-font-display); font-style: normal; font-size: 16px; line-height: 1.55; color: rgba(245,236,218,0.85); margin: 0 0 18px; max-width: 60ch; } .v4-jr-rollup .a { display: inline-flex; align-items: center; gap: 6px; color: var(--sg-gamboge); text-decoration: none; font-family: var(--sg-font-display); font-style: normal; font-size: 15px; } /* ========================================================================== ASK THE SCHOLAR (PRIVATELY) — in-course thread + office hours ========================================================================== */ .v4-ask { background: #FBF6EC; min-height: 100vh; } .v4-ask-hero { background: linear-gradient(180deg, var(--sg-astral-shade-90) 0%, var(--sg-astral-shade-70) 100%); color: #F5ECDA; padding: 64px 0 56px; position: relative; overflow: hidden; } .v4-ask-hero::after { content: ''; position: absolute; left: -120px; bottom: -120px; width: 380px; height: 380px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; opacity: 0.05; pointer-events: none; } .v4-ask-hero-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; position: relative; } .v4-ask-hero .crumb { font-size: 12.5px; color: rgba(245,236,218,0.6); letter-spacing: 0.04em; margin: 0 0 24px; } .v4-ask-hero .crumb a { color: rgba(245,236,218,0.8); text-decoration: none; } .v4-ask-hero .crumb .sep { opacity: 0.4; margin: 0 8px; } .v4-ask-hero .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 16px; display: inline-flex; align-items: center; gap: 14px; } .v4-ask-hero .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--sg-gamboge); } .v4-ask-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(36px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.018em; color: #FBF6EC; margin: 0 0 14px; text-wrap: balance; } .v4-ask-hero h1 em { font-style: normal; color: var(--sg-gamboge); font-weight: 400; } .v4-ask-hero .lede { font-size: 17.5px; line-height: 1.55; color: rgba(245,236,218,0.78); margin: 0 0 28px; max-width: 56ch; } .v4-ask-scholar-row { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; background: rgba(245,236,218,0.06); border: 1px solid rgba(245,236,218,0.12); border-radius: 2px; } .v4-ask-scholar-row .av { width: 36px; height: 36px; border-radius: 50%; background: var(--sg-astral-shade-30); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sg-font-display); font-weight: 600; font-size: 13px; color: #F5ECDA; } .v4-ask-scholar-row .who { font-size: 14px; color: #FBF6EC; font-weight: 600; font-family: var(--sg-font-display); } .v4-ask-scholar-row .where { font-size: 12.5px; color: rgba(245,236,218,0.6); display: block; } /* Main grid */ .v4-ask-main { padding: 48px 0 80px; } .v4-ask-main-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; } /* Compose card */ .v4-ask-compose { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 28px 32px; margin-bottom: 36px; } .v4-ask-compose .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 12px; } .v4-ask-compose h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.008em; margin: 0 0 6px; color: var(--sg-fg); } .v4-ask-compose .sub { font-size: 14px; color: var(--sg-fg-muted); margin: 0 0 22px; line-height: 1.55; } .v4-ask-fields { display: flex; flex-direction: column; gap: 18px; } .v4-ask-fields .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .v4-ask-fld { display: flex; flex-direction: column; gap: 6px; } .v4-ask-fld label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-fg-muted); } .v4-ask-fld input, .v4-ask-fld select, .v4-ask-fld textarea { font-family: var(--sg-font-body); font-size: 14.5px; padding: 10px 12px; border: 1px solid rgba(15,27,34,0.14); border-radius: 2px; background: #FFFFFF; color: var(--sg-fg); outline: none; transition: border-color 150ms; } .v4-ask-fld input:focus, .v4-ask-fld select:focus, .v4-ask-fld textarea:focus { border-color: var(--sg-astral); } .v4-ask-fld textarea { min-height: 120px; resize: vertical; font-family: var(--sg-font-body); line-height: 1.55; } .v4-ask-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; flex-wrap: wrap; gap: 14px; } .v4-ask-actions .left { font-size: 12.5px; color: var(--sg-fg-subtle); font-style: normal; font-family: var(--sg-font-display); } .v4-ask-actions .left b { color: var(--sg-burnt-umber); font-style: normal; font-weight: 600; } .v4-ask-actions .submit { background: var(--sg-astral); color: #fff; border: 1.5px solid var(--sg-astral); padding: 11px 22px; border-radius: 2px; font-weight: 600; font-size: 14.5px; cursor: pointer; } .v4-ask-actions .submit:hover { background: var(--sg-astral-shade-30); border-color: var(--sg-astral-shade-30); } /* Threads */ .v4-ask-threads h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.008em; margin: 0 0 18px; color: var(--sg-fg); } .v4-ask-threads h3 + .sub { font-size: 14px; color: var(--sg-fg-muted); margin: -14px 0 18px; font-family: var(--sg-font-display); font-style: normal; } .v4-thread { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 20px 24px; margin-bottom: 14px; } .v4-thread .head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .v4-thread .state { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; } .v4-thread .state.replied { background: rgba(79,122,74,0.12); color: #355A30; } .v4-thread .state.awaiting { background: rgba(199,127,26,0.13); color: #7E4F0E; } .v4-thread .state.closed { background: rgba(15,27,34,0.06); color: var(--sg-fg-subtle); } .v4-thread .ctx { font-size: 12px; color: var(--sg-fg-subtle); font-family: var(--sg-font-display); font-style: normal; } .v4-thread .when { margin-left: auto; font-size: 11.5px; color: var(--sg-fg-subtle); font-family: ui-monospace, Menlo, monospace; } .v4-thread .q { font-family: var(--sg-font-display); font-style: normal; font-size: 17px; line-height: 1.4; color: var(--sg-fg); margin: 0 0 12px; } .v4-thread .preview { font-size: 14px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; } .v4-thread .preview b { display: block; font-family: var(--sg-font-display); font-weight: 600; font-style: normal; color: var(--sg-burnt-umber); font-size: 12px; letter-spacing: 0.08em; margin-bottom: 4px; text-transform: uppercase; } /* Expanded thread — the conversation */ .v4-thread.open { border-color: var(--sg-burnt-umber); box-shadow: 0 8px 24px -12px rgba(15,27,34,0.12); } .v4-thread.open .conv { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(15,27,34,0.06); display: flex; flex-direction: column; gap: 18px; } .v4-msg { display: grid; grid-template-columns: 40px 1fr; gap: 14px; } .v4-msg .av { width: 40px; height: 40px; border-radius: 50%; background: var(--sg-burnt-umber); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sg-font-display); font-weight: 600; font-size: 13px; color: #F5ECDA; flex-shrink: 0; } .v4-msg.scholar .av { background: var(--sg-astral-shade-30); } .v4-msg .body { font-size: 14.5px; line-height: 1.55; color: var(--sg-fg); } .v4-msg .body .who { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; font-size: 13px; } .v4-msg .body .who b { font-family: var(--sg-font-display); font-weight: 600; font-size: 14.5px; color: var(--sg-fg); } .v4-msg .body .who .at { color: var(--sg-fg-subtle); font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; } .v4-msg.scholar .body .who b { color: var(--sg-astral-shade-30); } .v4-msg .body p { margin: 0 0 8px; } .v4-msg .body p:last-child { margin-bottom: 0; } .v4-thread .reply { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(15,27,34,0.06); display: flex; flex-direction: column; gap: 10px; } .v4-thread .reply textarea { font-family: var(--sg-font-body); font-size: 14px; padding: 12px; min-height: 80px; border: 1px solid rgba(15,27,34,0.14); border-radius: 2px; background: #FBF6EC; resize: vertical; outline: none; } .v4-thread .reply textarea:focus { border-color: var(--sg-astral); background: #FFFFFF; } .v4-thread .reply .row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--sg-fg-subtle); flex-wrap: wrap; gap: 10px; } .v4-thread .reply button { background: var(--sg-astral); color: #fff; border: 1.5px solid var(--sg-astral); padding: 8px 18px; border-radius: 2px; font-weight: 600; font-size: 13.5px; cursor: pointer; } /* Office hours sidebar card */ .v4-ask-oh { background: linear-gradient(180deg, #FBF6EC 0%, #F5ECDA 100%); border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 24px 26px; } .v4-ask-oh .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 10px; } .v4-ask-oh h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.005em; margin: 0 0 6px; color: var(--sg-fg); } .v4-ask-oh p { font-size: 13.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 16px; } .v4-ask-oh .slots { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .v4-ask-oh .slot { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; background: #FFFFFF; cursor: pointer; transition: border-color 150ms; } .v4-ask-oh .slot:hover { border-color: var(--sg-astral); } .v4-ask-oh .slot.taken { opacity: 0.5; cursor: not-allowed; background: transparent; } .v4-ask-oh .slot .when { font-family: var(--sg-font-display); font-weight: 600; font-size: 14px; color: var(--sg-fg); } .v4-ask-oh .slot .where { font-size: 12px; color: var(--sg-fg-muted); } .v4-ask-oh .slot .pick { font-family: var(--sg-font-display); font-style: normal; font-size: 13px; color: var(--sg-astral); } .v4-ask-oh .slot.taken .pick { color: var(--sg-fg-subtle); font-style: normal; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .v4-ask-oh .all { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sg-font-display); font-style: normal; font-size: 13.5px; color: var(--sg-burnt-umber); text-decoration: none; } /* Public-answer bridge card */ .v4-ask-bridge { margin-top: 20px; padding: 22px 24px; background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; } .v4-ask-bridge .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 8px; } .v4-ask-bridge h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 17px; letter-spacing: -0.005em; margin: 0 0 8px; color: var(--sg-fg); } .v4-ask-bridge p { font-size: 13.5px; color: var(--sg-fg-muted); line-height: 1.55; margin: 0 0 12px; } .v4-ask-bridge a { font-family: var(--sg-font-display); font-style: normal; font-size: 14px; color: var(--sg-astral); text-decoration: none; } /* Adab / how-this-works */ .v4-ask-adab { margin-top: 20px; padding: 22px 24px; background: #FBF6EC; border-top: 2px solid var(--sg-gamboge); border-radius: 0; } .v4-ask-adab .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 10px; } .v4-ask-adab p { font-family: var(--sg-font-display); font-style: normal; font-size: 14px; line-height: 1.55; color: var(--sg-fg); margin: 0; } .v4-ask-adab p + p { margin-top: 8px; } /* Responsive collapses */ @media (max-width: 900px) { .v4-ch-hero-inner { grid-template-columns: 1fr; gap: 28px; } .v4-ch-main-inner { grid-template-columns: 1fr; gap: 36px; } .v4-ch-side { position: static; } .v4-ch-week-row { grid-template-columns: 60px 1fr auto; } .v4-ch-week-row .chev { display: none; } .v4-ch-week-body { padding-left: 80px; } .v4-ch-bar-inner { grid-template-columns: 1fr; gap: 12px; } .v4-ch-bar .prog { justify-content: flex-start; } .v4-jr-hero-inner { grid-template-columns: 1fr; gap: 24px; } .v4-jr-main-inner { grid-template-columns: 1fr; gap: 36px; } .v4-jr-filters { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; } .v4-jr-filters h3:not(:first-child) { margin-top: 0; } .v4-ask-main-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; } .v4-ask-fields .row { grid-template-columns: 1fr; } .v4-ask-compose textarea, .v4-ask-compose input { min-width: 0; max-width: 100%; box-sizing: border-box; } } /* Phone gutters — keep the classroom/flow wrappers in step with the rest of the site */ @media (max-width: 560px) { .v4-ch-hero-inner, .v4-ch-main-inner, .v4-ch-bar-inner, .v4-jr-hero-inner, .v4-jr-main-inner, .v4-ask-hero-inner, .v4-ask-main-inner { padding-left: 22px; padding-right: 22px; } } /* ---- end v4_classroom.css ---- */ /* ---- begin v4_classroom_shell.css ---- */ /* ========================================================================== v4_classroom_shell.css — "Built vs embedded" classroom (Pass 2) -------------------------------------------------------------------------- The committed build rule, made visible: • BUILT — presentational surfaces (course home, lesson, dashboard, certificates) live in OUR shell. • EMBED — interactive / graded activities (self-check / quiz, forum, gradebook) are the activities engine, rendered as panels wearing our EXACT tokens. We never reimplement them, and there is no separate "Moodle look". The seam is invisible — the "Show the seam" toggle is the only thing that reveals it. Obeys Pass 1: reading face on prose, display on headings, ui on chrome; gold is decoration, gold-ink for gold text, astral for links. ========================================================================== */ .v4-cs-hero { background: linear-gradient(180deg, var(--sg-astral-shade-90) 0%, var(--sg-astral-shade-70) 100%); color: #F5ECDA; } .v4-cs-hero-inner { max-width: 1080px; margin: 0 auto; padding: 64px 40px 56px; } .v4-cs-hero .kicker { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 14px; } .v4-cs-hero .kicker::before { content: ''; width: 28px; height: 1px; background: var(--sg-gamboge); } .v4-cs-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -0.016em; color: #FBF6EC; margin: 0 0 18px; max-width: 20ch; text-wrap: balance; } .v4-cs-hero .lede { font-size: 18.5px; line-height: 1.55; color: rgba(245,236,218,0.82); margin: 0; max-width: 64ch; } /* ── The rule — two columns: built vs embedded ─────────────────────────── */ .v4-cs-rule { background: #FBF6EC; border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-cs-rule-inner { max-width: 1080px; margin: 0 auto; padding: 64px 40px; } .v4-cs-rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 820px){ .v4-cs-rule-grid { grid-template-columns: 1fr; } } .v4-cs-col { background: #fff; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 30px 32px 32px; } .v4-cs-col.built { border-top: 2px solid var(--sg-astral); } .v4-cs-col.embed { border-top: 2px solid var(--sg-gamboge); } .v4-cs-col .tag { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 6px; } .v4-cs-col.built .tag { color: var(--sg-astral); } .v4-cs-col.embed .tag { color: var(--gold-ink); } .v4-cs-col h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 25px; line-height: 1.15; margin: 0 0 12px; color: var(--sg-fg); } .v4-cs-col p { font-family: var(--sg-font-read); font-size: 15.5px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0 0 18px; } .v4-cs-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .v4-cs-col li { font-family: var(--sg-font-ui); font-size: 14.5px; color: var(--sg-fg); display: flex; align-items: baseline; gap: 10px; } .v4-cs-col li .mk { flex: none; font-weight: 700; } .v4-cs-col.built li .mk { color: var(--sg-astral); } .v4-cs-col.embed li .mk { color: var(--gold-ink); } .v4-cs-col li b { font-weight: 600; } .v4-cs-col li span.sub { color: var(--sg-fg-muted); } /* ── Demonstration band ────────────────────────────────────────────────── */ .v4-cs-demo { background: #fff; } .v4-cs-demo-inner { max-width: 1080px; margin: 0 auto; padding: 56px 40px 80px; } .v4-cs-demo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; } .v4-cs-demo-head .kicker { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 12px; } .v4-cs-demo-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.012em; margin: 0; color: var(--sg-fg); max-width: 22ch; } .v4-cs-demo-head .sub { font-family: var(--sg-font-read); font-size: 16px; line-height: 1.55; color: var(--sg-fg-muted); margin: 12px 0 0; max-width: 46ch; } /* the seam toggle */ .v4-cs-seam { display: inline-flex; align-items: center; gap: 10px; flex: none; font-family: var(--sg-font-ui); font-size: 13.5px; font-weight: 600; color: var(--sg-fg); background: #fff; border: 1px solid rgba(15,27,34,0.18); border-radius: 999px; padding: 8px 8px 8px 16px; cursor: pointer; } .v4-cs-seam .pip { width: 36px; height: 20px; border-radius: 999px; background: rgba(15,27,34,0.18); position: relative; transition: background 160ms; } .v4-cs-seam .pip::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 160ms; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .v4-cs-seam.on .pip { background: var(--sg-gamboge); } .v4-cs-seam.on .pip::after { transform: translateX(16px); } /* The lesson surface that hosts the panels */ .v4-cs-surface { display: flex; flex-direction: column; gap: 22px; } .v4-cs-lessonhead { border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 22px 26px; background: #FBF7EF; } .v4-cs-lessonhead .k { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 6px; } .v4-cs-lessonhead h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 23px; line-height: 1.2; margin: 0; color: var(--sg-fg); } .v4-cs-lessonhead p { font-family: var(--sg-font-ui); font-size: 13.5px; color: var(--sg-fg-muted); margin: 6px 0 0; } /* A panel = a card in our tokens. data-embed marks embedded ones. */ .v4-cs-panel { border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; background: #fff; padding: 26px 28px 28px; position: relative; } .v4-cs-panel .v4-cs-panel-k { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 4px; } .v4-cs-panel h4 { font-family: var(--sg-font-display); font-weight: 500; font-size: 21px; line-height: 1.2; margin: 0 0 4px; color: var(--sg-fg); } .v4-cs-panel .v4-cs-panel-sub { font-family: var(--sg-font-read); font-size: 14.5px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0 0 20px; } /* the seam marker — invisible until "Show the seam" is on */ .v4-cs-embed-tag { position: absolute; top: -1px; inset-inline-end: 22px; transform: translateY(-50%); font-family: var(--sg-font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); background: #FBF6EC; border: 1px solid rgba(143,102,4,0.4); border-radius: 999px; padding: 3px 11px; pointer-events: none; } .v4-cs-surface.seam .v4-cs-panel[data-embed] { outline: 1.5px dashed rgba(143,102,4,0.55); outline-offset: 4px; } .v4-cs-surface.seam .v4-cs-panel[data-built] { outline: 1.5px dashed rgba(48,112,142,0.4); outline-offset: 4px; } .v4-cs-built-tag { position: absolute; top: -1px; inset-inline-end: 22px; transform: translateY(-50%); font-family: var(--sg-font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-astral); background: #fff; border: 1px solid rgba(48,112,142,0.4); border-radius: 999px; padding: 3px 11px; pointer-events: none; } /* ── Quiz (embedded self-check) ────────────────────────────────────────── */ .v4-cs-quiz { display: flex; flex-direction: column; gap: 22px; } .v4-cs-q .qt { font-family: var(--sg-font-display); font-weight: 500; font-size: 17px; line-height: 1.35; color: var(--sg-fg); margin: 0 0 12px; } .v4-cs-q .qt .n { color: var(--gold-ink); margin-inline-end: 8px; } .v4-cs-opts { display: flex; flex-direction: column; gap: 8px; } .v4-cs-opt { display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px solid rgba(15,27,34,0.16); border-radius: 2px; padding: 12px 14px; font-family: var(--sg-font-ui); font-size: 14.5px; color: var(--sg-fg); transition: border-color 140ms, background 140ms; } .v4-cs-opt:hover { border-color: var(--sg-astral); } .v4-cs-opt input { accent-color: var(--sg-astral); width: 17px; height: 17px; } .v4-cs-opt.correct { border-color: var(--sg-success); background: rgba(79,122,74,0.07); } .v4-cs-opt.wrong { border-color: var(--sg-danger); background: rgba(176,58,46,0.06); } .v4-cs-opt .res { margin-inline-start: auto; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .v4-cs-opt.correct .res { color: var(--sg-success); } .v4-cs-opt.wrong .res { color: var(--sg-danger); } .v4-cs-quiz-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 6px; } .v4-cs-quiz-btn { font-family: var(--sg-font-ui); font-weight: 600; font-size: 14.5px; background: var(--sg-astral); color: #fff; border: 1.5px solid var(--sg-astral); border-radius: 2px; padding: 11px 22px; cursor: pointer; transition: background 150ms; } .v4-cs-quiz-btn:hover { background: var(--sg-astral-shade-30); border-color: var(--sg-astral-shade-30); } .v4-cs-quiz-btn.ghost { background: transparent; color: var(--sg-astral); } .v4-cs-quiz-score { font-family: var(--sg-font-ui); font-size: 14.5px; color: var(--sg-fg); } .v4-cs-quiz-score b { font-family: var(--sg-font-display); font-weight: 600; color: var(--sg-astral); } .v4-cs-quiz-pass { color: var(--sg-success); font-weight: 600; } /* ── Forum (embedded discussion) ───────────────────────────────────────── */ .v4-cs-forum { display: flex; flex-direction: column; gap: 16px; } .v4-cs-post { display: grid; grid-template-columns: 38px 1fr; gap: 14px; } .v4-cs-post .av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #F5ECDA; font-family: var(--sg-font-display); font-weight: 600; font-size: 14px; } .v4-cs-post .who { font-family: var(--sg-font-ui); font-size: 13.5px; color: var(--sg-fg); } .v4-cs-post .who b { font-weight: 600; } .v4-cs-post .who .scholar { color: var(--gold-ink); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-inline-start: 8px; } .v4-cs-post .when { color: var(--sg-fg-subtle); } .v4-cs-post .body { font-family: var(--sg-font-read); font-size: 15px; line-height: 1.55; color: var(--sg-fg); margin: 5px 0 0; } .v4-cs-post.reply { margin-inline-start: 30px; padding-inline-start: 16px; border-inline-start: 2px solid rgba(15,27,34,0.08); } .v4-cs-forum-reply { display: flex; gap: 10px; align-items: center; margin-top: 4px; } .v4-cs-forum-reply input { flex: 1; font-family: var(--sg-font-ui); font-size: 14px; padding: 11px 14px; border: 1px solid rgba(15,27,34,0.18); border-radius: 2px; } .v4-cs-forum-reply input:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 1px; border-color: var(--sg-astral); } .v4-cs-forum-reply button { font-family: var(--sg-font-ui); font-weight: 600; font-size: 14px; background: var(--sg-astral); color: #fff; border: none; border-radius: 2px; padding: 11px 18px; cursor: pointer; } /* ── Gradebook (embedded) ──────────────────────────────────────────────── */ .v4-cs-grades { width: 100%; border-collapse: collapse; } .v4-cs-grades th, .v4-cs-grades td { text-align: start; padding: 12px 14px; border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-cs-grades th { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-fg-subtle); } .v4-cs-grades td { font-family: var(--sg-font-ui); font-size: 14px; color: var(--sg-fg); } .v4-cs-grades td.wk { font-family: var(--sg-font-display); font-weight: 500; } .v4-cs-grades td.score b { font-variant-numeric: tabular-nums; } .v4-cs-grades .st { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .v4-cs-grades .st.pass { color: var(--sg-success); } .v4-cs-grades .st.due { color: var(--gold-ink); } .v4-cs-grades tfoot td { font-family: var(--sg-font-ui); font-weight: 700; color: var(--sg-fg); border-bottom: none; border-top: 2px solid rgba(15,27,34,0.12); } /* ---- end v4_classroom_shell.css ---- */ /* ---- begin v4_course_detail.css ---- */ /* ========================================================================== Course Detail — built on the v4 system. Reuses .v4-band / .v4-wrap / .v4-sect-head / .v4-answer / .v4-course / .v4-fac and the newsletter. Open / Opening-soon is toggled by a `course-soon` class on . ========================================================================== */ /* ── Hero ──────────────────────────────────────────────────────────── */ .co-hero { background: #FBF6EC; border-bottom: 1px solid rgba(15, 27, 34, 0.08); } .co-hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: stretch; } .co-hero-eyebrow { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 16px; display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; } .co-hero-eyebrow .co-code { color: var(--sg-burnt-umber); } .co-hero-eyebrow .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--sg-soft-sand); } .co-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.05; letter-spacing: -0.015em; color: var(--sg-fg); margin: 0 0 18px; text-wrap: balance; } .co-promise { font-family: var(--sg-font-read); font-size: 19px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 28px; max-width: 46ch; text-wrap: pretty; } /* status chip */ .co-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; } .co-status .dot { width: 7px; height: 7px; border-radius: 50%; } .co-status-open { color: var(--sg-success); background: rgba(79, 122, 74, 0.1); border: 1px solid rgba(79, 122, 74, 0.28); } .co-status-open .dot { background: var(--sg-success); } .co-status-soon { color: var(--sg-burnt-umber); background: rgba(138, 90, 68, 0.08); border: 1px solid rgba(138, 90, 68, 0.22); } .co-status-soon .dot { background: var(--sg-burnt-umber); } /* facts bar */ .co-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; } .co-fact { flex: 1 1 150px; background: #fff; border: 1px solid rgba(15, 27, 34, 0.12); border-top: 2px solid var(--sg-gamboge); border-radius: 2px; padding: 14px 16px; } .co-fact .l { font-family: var(--sg-font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sg-astral); margin-bottom: 6px; } .co-fact .v { font-family: var(--sg-font-read); font-size: 15px; line-height: 1.38; color: var(--sg-fg); } .co-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .co-enrol-open { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; } .co-actions .v4-btn-accent { padding: 14px 28px; font-size: 15px; } .co-free-note { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); margin: 16px 0 0; display: inline-flex; align-items: center; gap: 8px; } .co-free-note .seal { color: var(--sg-gamboge); flex: none; } .co-jump { font-family: var(--sg-font-ui); font-size: 14.5px; font-weight: 600; color: var(--sg-astral); display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(48, 112, 142, 0.3); padding-bottom: 2px; transition: border-color 150ms; } .co-jump:hover { border-bottom-color: var(--sg-astral); } /* soon "be notified" link in hero */ .co-notify { font-family: var(--sg-font-ui); font-size: 15px; font-weight: 600; color: var(--sg-astral); display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(48, 112, 142, 0.3); padding-bottom: 2px; transition: border-color 150ms; } .co-notify:hover { border-bottom-color: var(--sg-astral); } .co-notify:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 3px; } /* hero cover panel */ .co-cover { position: relative; overflow: hidden; border-radius: 3px; background: linear-gradient(165deg, #13303F 0%, #0A1E29 100%); color: #F5ECDA; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; } .co-cover-rosette { position: absolute; right: -70px; bottom: -70px; color: #ECA608; opacity: 0.14; pointer-events: none; } .co-cover-term { position: relative; font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-gamboge); } .co-cover-foot { position: relative; } .co-cover-foot .big { font-family: var(--sg-font-display); font-weight: 500; font-size: 24px; line-height: 1.2; color: #FBF6EC; margin: 0 0 6px; } .co-cover-foot .small { font-family: var(--sg-font-read); font-size: 14.5px; color: rgba(245, 236, 218, 0.72); margin: 0; } /* ── Section scaffold reuse ────────────────────────────────────────── */ .co-sec-note { font-family: var(--sg-font-ui); font-size: 12.5px; color: var(--sg-fg-subtle); margin: 10px 0 0; font-style: normal; letter-spacing: 0.01em; } /* Taught by — faculty lockup */ .co-teacher { display: grid; grid-template-columns: 132px 1fr; gap: 28px; align-items: center; background: #fff; border: 1px solid rgba(15, 27, 34, 0.1); border-top: 2px solid var(--sg-gamboge); border-radius: 2px; padding: 26px 30px; text-decoration: none; color: inherit; transition: box-shadow 200ms var(--sg-ease), transform 200ms var(--sg-ease); } .co-teacher:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20, 40, 60, 0.08); } .co-teacher-photo { width: 132px; aspect-ratio: 4/5; border-radius: 3px; overflow: hidden; background: #EFE0C5; } .co-teacher-photo image-slot, .co-teacher-photo > div { width: 100%; height: 100%; } .co-teacher-loc { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-astral); margin-bottom: 6px; } .co-teacher-name { font-family: var(--sg-font-display); font-weight: 600; font-size: 26px; line-height: 1.1; color: var(--sg-fg); margin: 0 0 8px; } .co-teacher-bio { font-family: var(--sg-font-read); font-size: 16px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 12px; max-width: 60ch; } .co-teacher-link { font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; color: var(--sg-astral); display: inline-flex; gap: 7px; align-items: center; } .co-teacher:hover .co-teacher-link .arrow { transform: translateX(3px); } .co-teacher-link .arrow { transition: transform 160ms; } /* Who this is for — three reader types */ .co-who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .co-who-card { background: #fff; border: 1px solid rgba(15, 27, 34, 0.1); border-radius: 2px; padding: 24px 24px 26px; } .co-who-card .n { font-family: var(--sg-font-display); font-weight: 600; font-size: 20px; color: var(--gold-ink); line-height: 1; margin-bottom: 14px; } .co-who-card p { font-family: var(--sg-font-read); font-size: 16px; line-height: 1.55; color: var(--sg-fg); margin: 0; } /* Outcomes */ .co-outcomes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; } .co-outcomes li { position: relative; padding-left: 34px; font-family: var(--sg-font-read); font-size: 17px; line-height: 1.5; color: var(--sg-fg); } .co-outcomes li .ck { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; color: var(--sg-gamboge); flex: none; } /* Syllabus */ .co-syllabus { border-top: 1px solid rgba(15, 27, 34, 0.1); } .co-week { display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: baseline; padding: 20px 4px; border-bottom: 1px solid rgba(15, 27, 34, 0.1); } .co-week-n { font-family: var(--sg-font-display); font-weight: 500; font-size: 17px; color: var(--sg-astral); letter-spacing: 0.02em; } .co-week-n span { display: block; font-family: var(--sg-font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-fg-subtle); margin-bottom: 2px; } .co-week-title { font-family: var(--sg-font-display); font-weight: 600; font-size: 19px; line-height: 1.25; color: var(--sg-fg); margin: 0 0 4px; } .co-week-sum { font-family: var(--sg-font-read); font-size: 15px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0; } /* What you'll need */ .co-need { list-style: none; margin: 0; padding: 0; max-width: 64ch; } .co-need li { position: relative; padding-left: 26px; margin-bottom: 14px; font-family: var(--sg-font-read); font-size: 16.5px; line-height: 1.55; color: var(--sg-fg); } .co-need li::before { content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; background: var(--sg-gamboge); } .co-need li b { font-weight: 600; } /* Closing enrol band */ .co-close { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; } .co-close h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -0.012em; color: #FBF6EC; margin: 0 0 14px; text-wrap: pretty; } .co-close-lede { font-family: var(--sg-font-read); font-size: 17px; line-height: 1.55; color: rgba(245, 236, 218, 0.78); margin: 0 0 26px; max-width: 44ch; } .co-close-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .co-close .co-free-note { color: rgba(245, 236, 218, 0.6); } .co-close-letter { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(245, 236, 218, 0.18); border-radius: 3px; padding: 28px 30px; } .co-close-letter .k { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 8px; } .co-close-letter h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; line-height: 1.2; color: #FBF6EC; margin: 0 0 16px; } .co-close-letter .sg-letter-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .co-close-letter .sg-letter-input { background: rgba(255, 255, 255, 0.06); border-color: rgba(245, 236, 218, 0.24); color: #F5ECDA; } .co-close-letter .sg-letter-input::placeholder { color: rgba(245, 236, 218, 0.5); } .co-close-letter .sg-letter-input:focus-visible { border-color: var(--sg-gamboge); box-shadow: 0 0 0 3px rgba(236, 166, 8, 0.25); } .co-close-letter .sg-letter-reassure { color: rgba(245, 236, 218, 0.5); } .co-close-letter .sg-letter.is-success .sg-letter-msg { color: var(--sg-gamboge); } .co-close-letter .sg-letter.is-success .sg-letter-msg::before { background: var(--sg-gamboge); } /* ── Open / Soon visibility ────────────────────────────────────────── */ .enrol-soon, .co-status-soon { display: none; } body.course-soon .enrol-open, body.course-soon .co-status-open { display: none; } body.course-soon .enrol-soon { display: revert; } /* block elems (h2/p) + inline span restore naturally */ body.course-soon .co-status-soon { display: inline-flex; } body.course-soon .co-notify.enrol-soon, body.course-soon .co-free-note.enrol-soon { display: inline-flex; } /* the cover dims a little when opening soon */ body.course-soon .co-cover { background: linear-gradient(165deg, #2A3942 0%, #16242B 100%); } /* ── Preview control (not production — demonstrates both states) ──────── */ .co-preview { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 80; display: inline-flex; align-items: center; gap: 10px; background: rgba(10, 30, 41, 0.94); color: rgba(245, 236, 218, 0.7); border: 1px solid rgba(245, 236, 218, 0.16); border-radius: 999px; padding: 7px 8px 7px 16px; font-family: var(--sg-font-ui); font-size: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .co-preview-label { letter-spacing: 0.04em; } .co-preview-seg { display: inline-flex; background: rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 2px; } .co-preview-seg button { border: none; background: transparent; cursor: pointer; color: rgba(245, 236, 218, 0.7); font-family: var(--sg-font-ui); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; transition: background 150ms, color 150ms; } .co-preview-seg button.on { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); } .co-preview-seg button:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 2px; } /* ── Responsive ────────────────────────────────────────────────────── */ @media (max-width: 980px) { .co-hero-grid { grid-template-columns: 1fr; gap: 32px; } .co-close { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 760px) { .co-who { grid-template-columns: 1fr; } .co-outcomes { grid-template-columns: 1fr; } .co-teacher { grid-template-columns: 96px 1fr; gap: 20px; padding: 22px; } .co-teacher-photo { width: 96px; } } @media (max-width: 520px) { .co-week { grid-template-columns: 1fr; gap: 4px; } .co-preview { left: 12px; right: 12px; transform: none; justify-content: space-between; bottom: 12px; } } /* RTL */ [dir="rtl"] .co-promise, [dir="rtl"] .co-teacher-bio, [dir="rtl"] .co-who-card p, [dir="rtl"] .co-outcomes li, [dir="rtl"] .co-week-sum, [dir="rtl"] .co-need li, [dir="rtl"] .co-close-lede, [dir="rtl"] .co-fact .v { font-family: var(--sg-font-arabic-read); } [dir="rtl"] .co-hero h1, [dir="rtl"] .co-teacher-name, [dir="rtl"] .co-week-title, [dir="rtl"] .co-close h2, [dir="rtl"] .co-who-card .n { font-family: "Zarid Display", "Riwaya", serif; letter-spacing: 0; } [dir="rtl"] .co-outcomes li { padding-left: 0; padding-right: 34px; } [dir="rtl"] .co-outcomes li .ck { left: auto; right: 0; } [dir="rtl"] .co-need li { padding-left: 0; padding-right: 26px; } [dir="rtl"] .co-need li::before { left: auto; right: 0; } /* ---- end v4_course_detail.css ---- */ /* ---- begin v4_curriculum.css ---- */ /* ========================================================================== v4_curriculum.css — Pass 4 · The Curriculum (institutional term catalog) -------------------------------------------------------------------------- Pillar I made whole: twelve structured streams, term-based, scholar-led, free. Reuses chrome + [dir="rtl"] role-swap from v4_library.css (load first). One component mirrors by direction; logical properties throughout. ========================================================================== */ .v4-cur-hero { background: #FBF6EC; border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-cur-hero-inner { max-width: 1200px; margin: 0 auto; padding: 56px 40px 0; } .v4-cur-kicker { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } [dir="rtl"] .v4-cur-kicker { letter-spacing: 0; } .v4-cur-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(32px,4vw,50px); line-height: 1.05; letter-spacing: -0.014em; color: var(--sg-fg); margin: 0 0 16px; max-width: 20ch; text-wrap: balance; } [dir="rtl"] .v4-cur-hero h1 { letter-spacing: 0; line-height: 1.3; } .v4-cur-lede { font-family: var(--sg-font-read); font-size: 18px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0; max-width: 60ch; text-wrap: pretty; } /* term banner — a fact, never a countdown */ .v4-cur-term { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; margin: 30px 0 0; padding: 22px 0; border-top: 1px solid rgba(15,27,34,0.1); } .v4-cur-term .when { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; color: var(--sg-fg); } .v4-cur-term .when b { color: var(--gold-ink); } .v4-cur-term .fact { font-family: var(--sg-font-ui); font-size: 14px; color: var(--sg-fg-muted); display: inline-flex; align-items: center; gap: 8px; } .v4-cur-term .fact::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sg-gamboge); } .v4-cur-term .cta { margin-inline-start: auto; } /* stream filter rail */ .v4-cur-controls { background: #fff; border-bottom: 1px solid rgba(15,27,34,0.08); position: sticky; top: 0; z-index: 10; } .v4-cur-controls-inner { max-width: 1200px; margin: 0 auto; padding: 14px 40px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .v4-cur-chip { font-family: var(--sg-font-ui); font-size: 13px; font-weight: 600; border: 1px solid rgba(15,27,34,0.16); background: #fff; color: var(--sg-fg-muted); padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: all 150ms var(--sg-ease); } .v4-cur-chip:hover { color: var(--sg-fg); border-color: rgba(15,27,34,0.32); } .v4-cur-chip.on { background: var(--sg-astral); border-color: var(--sg-astral); color: #fff; } .v4-cur-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 40px 80px; } /* a stream = a titled section with its courses */ .v4-cur-stream { margin-bottom: 48px; } .v4-cur-stream:last-child { margin-bottom: 0; } .v4-cur-stream-head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid rgba(15,27,34,0.12); } .v4-cur-stream-num { font-family: var(--sg-font-display); font-weight: 600; font-size: 24px; color: var(--sg-gamboge); line-height: 1; flex: none; } .v4-cur-stream-h h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 26px; line-height: 1.15; color: var(--sg-fg); margin: 0 0 2px; } .v4-cur-stream-h p { font-family: var(--sg-font-read); font-size: 14.5px; color: var(--sg-fg-muted); margin: 0; } .v4-cur-stream-count { margin-inline-start: auto; font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sg-fg-subtle); flex: none; } [dir="rtl"] .v4-cur-stream-count { letter-spacing: 0; } .v4-cur-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 1000px){ .v4-cur-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .v4-cur-grid { grid-template-columns: 1fr; } } .v4-cur-course { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 20px 22px; transition: border-color 180ms, transform 180ms, box-shadow 180ms; } .v4-cur-course:hover { border-color: var(--sg-astral); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,40,60,0.06); } .v4-cur-course .lvl { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 8px; } [dir="rtl"] .v4-cur-course .lvl { letter-spacing: 0; } .v4-cur-course h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 19px; line-height: 1.22; color: var(--sg-fg); margin: 0 0 8px; } .v4-cur-course h3 a { color: inherit; text-decoration: none; } .v4-cur-course h3 a:hover { color: var(--sg-astral); } .v4-cur-course .by { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); display: flex; align-items: center; gap: 9px; margin-bottom: 12px; } .v4-cur-course .by .av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #F5ECDA; font-family: var(--sg-font-display); font-size: 11px; font-weight: 600; } [dir="rtl"] .v4-cur-course .by .av { font-family: var(--sg-font-arabic-display); } .v4-cur-course .meta { font-family: var(--sg-font-ui); font-size: 12.5px; color: var(--sg-fg-subtle); margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(15,27,34,0.08); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .v4-cur-course .meta .free { color: var(--sg-success); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; } /* ---- end v4_curriculum.css ---- */ /* ---- begin v4_dashboard.css ---- */ /* ========================================================================== v4_dashboard.css — Pass 4 · Student Dashboard (the companion register) -------------------------------------------------------------------------- Where the seeker stands, this week. Warm cream, the scholar walking beside. Reuses chrome + role-swap from v4_library.css; prayer rail mirrors Today. One component mirrors by direction; logical properties throughout. ========================================================================== */ .v4-dash-hero { background: linear-gradient(180deg, var(--sg-astral-shade-90), var(--sg-astral-shade-70)); color: #F5ECDA; } .v4-dash-hero-inner { max-width: 1180px; margin: 0 auto; padding: 44px 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; } .v4-dash-hello .k { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 10px; } [dir="rtl"] .v4-dash-hello .k { letter-spacing: 0; } .v4-dash-hello h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px,3.4vw,42px); line-height: 1.08; letter-spacing: -0.012em; color: #FBF6EC; margin: 0 0 8px; } [dir="rtl"] .v4-dash-hello h1 { letter-spacing: 0; line-height: 1.3; } .v4-dash-hello p { font-family: var(--sg-font-read); font-size: 16.5px; line-height: 1.55; color: rgba(245,236,218,0.85); margin: 0; max-width: 52ch; } .v4-dash-overall { text-align: center; flex: none; } .v4-dash-overall .pct { font-family: var(--sg-font-display); font-weight: 600; font-size: 44px; line-height: 1; color: var(--sg-gamboge); font-variant-numeric: tabular-nums; } .v4-dash-overall .lab { font-family: var(--sg-font-ui); font-size: 12px; color: rgba(245,236,218,0.7); margin-top: 6px; } .v4-dash-layout { max-width: 1180px; margin: 0 auto; padding: 44px 40px 80px; display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; } @media (max-width: 940px){ .v4-dash-layout { grid-template-columns: 1fr; gap: 36px; } } .v4-dash-sec-h { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(15,27,34,0.1); } [dir="rtl"] .v4-dash-sec-h { letter-spacing: 0; } /* enrolled-course card with progress */ .v4-dash-course { background: #fff; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 22px 24px; margin-bottom: 16px; } .v4-dash-course.next { border-color: rgba(236,166,8,0.5); border-top: 2px solid var(--sg-gamboge); } .v4-dash-course-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .v4-dash-course .lvl { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 6px; } [dir="rtl"] .v4-dash-course .lvl { letter-spacing: 0; } .v4-dash-course h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 21px; line-height: 1.2; color: var(--sg-fg); margin: 0 0 6px; } .v4-dash-course .by { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); margin: 0 0 16px; } .v4-dash-course .left { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-subtle); white-space: nowrap; } .v4-dash-bar { height: 6px; border-radius: 999px; background: rgba(15,27,34,0.1); overflow: hidden; margin-bottom: 8px; } .v4-dash-bar i { display: block; height: 100%; background: var(--sg-gamboge); border-radius: 999px; } .v4-dash-prog-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .v4-dash-prog-row .n { font-family: var(--sg-font-ui); font-size: 12.5px; color: var(--sg-fg-muted); font-variant-numeric: tabular-nums; } .v4-dash-course-acts { display: flex; gap: 12px; flex-wrap: wrap; } .v4-dash-btn { font-family: var(--sg-font-ui); font-weight: 600; font-size: 14px; border-radius: 2px; padding: 10px 18px; cursor: pointer; text-decoration: none; border: 1.5px solid transparent; display: inline-flex; align-items: center; gap: 8px; } .v4-dash-btn.primary { background: var(--sg-astral); color: #fff; border-color: var(--sg-astral); } .v4-dash-btn.primary:hover { background: var(--sg-astral-shade-30); } .v4-dash-btn.ghost { background: transparent; color: var(--sg-astral); border-color: rgba(48,112,142,0.4); } .v4-dash-btn.ghost:hover { border-color: var(--sg-astral); } /* rail cards reuse Today's look */ .v4-dash-rail { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 20px; } @media (max-width: 940px){ .v4-dash-rail { position: static; } } .v4-dash-card { background: #fff; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 20px 22px; } .v4-dash-card .ttl { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; } [dir="rtl"] .v4-dash-card .ttl { letter-spacing: 0; } .v4-dash-card .ttl .loc { color: var(--sg-astral); font-weight: 700; } /* your scholar */ .v4-dash-scholar-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .v4-dash-scholar-top .av { width: 46px; height: 46px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #F5ECDA; font-family: var(--sg-font-display); font-weight: 600; font-size: 16px; } [dir="rtl"] .v4-dash-scholar-top .av { font-family: var(--sg-font-arabic-display); } .v4-dash-scholar-top .nm { font-family: var(--sg-font-display); font-weight: 600; font-size: 16px; color: var(--sg-fg); margin: 0; } .v4-dash-scholar-top .sp { font-family: var(--sg-font-ui); font-size: 12px; color: var(--sg-fg-muted); margin: 2px 0 0; } .v4-dash-scholar-note { font-family: var(--sg-font-read); font-size: 14.5px; line-height: 1.55; color: var(--sg-fg); margin: 0 0 14px; } /* prayer rail (same vocabulary as Today) */ .v4-dash-prayers { list-style: none; margin: 0; padding: 0; } .v4-dash-prayers li { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-family: var(--sg-font-ui); font-size: 14.5px; color: var(--sg-fg); border-bottom: 1px solid rgba(15,27,34,0.06); } .v4-dash-prayers li:last-child { border-bottom: none; } .v4-dash-prayers li .nm { color: var(--sg-fg-muted); } .v4-dash-prayers li .tm { font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; } .v4-dash-prayers li.now { font-weight: 700; } .v4-dash-prayers li.now .nm { color: var(--sg-fg); } .v4-dash-prayers li.now .tm { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); padding: 2px 9px; border-radius: 2px; } /* schedule list */ .v4-dash-sched { list-style: none; margin: 0; padding: 0; } .v4-dash-sched li { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(15,27,34,0.06); } .v4-dash-sched li:last-child { border-bottom: none; } .v4-dash-sched .day { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); } [dir="rtl"] .v4-dash-sched .day { letter-spacing: 0; } .v4-dash-sched .ev { font-family: var(--sg-font-ui); font-size: 13.5px; color: var(--sg-fg); } .v4-dash-sched .ev .tm { color: var(--sg-fg-subtle); display: block; font-size: 12px; margin-top: 1px; unicode-bidi: isolate; direction: ltr; } /* ---- end v4_dashboard.css ---- */ /* ---- begin v4_extra.css ---- */ /* ============================================================================ v4_extra.css — the screens that complete the desktop set: Weekly schedule · My-next-term plan · Withdraw/change seat · 404/empty · Global search. EN + AR share these (RTL via v4_ar.css). ========================================================================== */ /* ── Shared page header ─────────────────────────────────────────────────── */ .xt-head { background: linear-gradient(180deg, #F8F4EC 0%, #F1E7D2 100%); border-bottom: 1px solid var(--sg-soft-sand); padding: 64px 0 48px; } .xt-head-inner { max-width: 1180px; margin: 0 auto; padding: 0 40px; } .xt-crumb { font-size: 13.5px; color: var(--sg-fg-muted); margin: 0 0 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .xt-crumb a { color: var(--sg-astral); text-decoration: none; } .xt-crumb .sep { color: rgba(15,27,34,0.25); } .xt-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 16px; display: inline-flex; gap: 14px; align-items: center; } .xt-kicker::before { content: ''; width: 28px; height: 1px; background: var(--sg-burnt-umber); } .xt-head h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.08; letter-spacing: -0.014em; margin: 0 0 16px; color: var(--sg-fg); text-wrap: balance; } .xt-head h1 em { font-style: normal; color: var(--sg-burnt-umber); font-weight: 400; } .xt-head .lede { font-size: 18.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; font-weight: 300; max-width: 64ch; } .xt-wrap { max-width: 1180px; margin: 0 auto; padding: 56px 40px 120px; } /* ── Weekly schedule grid ───────────────────────────────────────────────── */ .xt-sched-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; } .xt-sched-toolbar .lab { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-fg-muted); } .xt-chip { border: 1px solid rgba(15,27,34,0.16); background: #fff; color: var(--sg-fg); font-size: 13.5px; font-weight: 500; padding: 7px 15px; border-radius: 999px; cursor: pointer; } .xt-chip.on { background: var(--sg-astral-shade-50); border-color: var(--sg-astral-shade-50); color: #F5ECDA; } .xt-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; } .xt-day { background: #fff; border: 1px solid rgba(15,27,34,0.08); border-radius: 5px; min-height: 360px; display: flex; flex-direction: column; } .xt-day-h { padding: 12px 14px; border-bottom: 1px solid var(--sg-soft-sand); } .xt-day-h .d { font-family: var(--sg-font-display); font-weight: 600; font-size: 15px; color: var(--sg-fg); } .xt-day-h .n { font-size: 12px; color: var(--sg-fg-subtle); } .xt-day-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .xt-ev { border-left: 3px solid var(--tint, var(--sg-astral)); background: #FBF6EC; border-radius: 3px; padding: 9px 10px; text-decoration: none; display: block; } [dir="rtl"] .xt-ev { border-left: none; border-right: 3px solid var(--tint, var(--sg-astral)); } .xt-ev .t { font-size: 11px; font-weight: 700; color: var(--sg-burnt-umber); letter-spacing: 0.02em; } .xt-ev .nm { font-size: 13px; font-weight: 600; color: var(--sg-fg); line-height: 1.25; margin: 3px 0 2px; } .xt-ev .by { font-size: 11.5px; color: var(--sg-fg-muted); } .xt-day-empty { color: var(--sg-fg-subtle); font-family: var(--sg-font-display); font-style: normal; font-size: 13px; padding: 14px 4px; } [dir="rtl"] .xt-day-empty { font-style: normal; } /* ── Plan (cart) ────────────────────────────────────────────────────────── */ .xt-plan { display: grid; grid-template-columns: 1.7fr 1fr; gap: 40px; align-items: start; } .xt-plan-list { display: flex; flex-direction: column; gap: 14px; } .xt-plan-row { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: #fff; border: 1px solid rgba(15,27,34,0.08); border-left: 3px solid var(--tint, var(--sg-astral)); border-radius: 2px; padding: 16px 18px; } [dir="rtl"] .xt-plan-row { border-left: 1px solid rgba(15,27,34,0.08); border-right: 3px solid var(--tint, var(--sg-astral)); } .xt-plan-row .av { width: 40px; height: 40px; border-radius: 50%; background: var(--tint); color: #F5ECDA; display: flex; align-items: center; justify-content: center; font-family: "Zarid Display", "Riwaya", serif; font-weight: 600; font-size: 16px; } .xt-plan-row .code { font-family: var(--sg-font-mono); font-size: 11px; color: var(--sg-fg-subtle); letter-spacing: 0.04em; } .xt-plan-row h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 18px; margin: 2px 0 3px; color: var(--sg-fg); } .xt-plan-row .meta { font-size: 13px; color: var(--sg-fg-muted); } .xt-plan-row .rm { background: none; border: none; color: var(--sg-danger); font-size: 13px; cursor: pointer; font-family: var(--sg-font-display); font-style: normal; } .xt-plan-side { background: #fff; border: 1px solid rgba(15,27,34,0.08); border-radius: 5px; padding: 24px 26px; position: sticky; top: 24px; } .xt-plan-side h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 20px; margin: 0 0 14px; } .xt-plan-stat { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dotted rgba(15,27,34,0.12); font-size: 14.5px; } .xt-plan-stat:last-of-type { border-bottom: none; } .xt-plan-stat b { color: var(--sg-fg); } .xt-warn { background: rgba(199,127,26,0.1); border: 1px solid rgba(199,127,26,0.3); border-radius: 2px; padding: 12px 14px; font-size: 13.5px; color: #7E4F0E; margin: 16px 0; line-height: 1.5; } .xt-cta { display: block; width: 100%; text-align: center; background: var(--sg-burnt-umber); color: #fff; border: none; font-size: 15px; font-weight: 600; padding: 14px; border-radius: 2px; text-decoration: none; cursor: pointer; margin-top: 8px; } .xt-cta.ghost { background: transparent; color: var(--sg-astral); border: 1px solid rgba(48,112,142,0.3); margin-top: 10px; } /* ── Withdraw ───────────────────────────────────────────────────────────── */ .xt-wd { max-width: 720px; margin: 0 auto; } .xt-wd-card { background: #fff; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 36px 40px; } .xt-wd-course { display: flex; gap: 16px; align-items: center; padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--sg-soft-sand); } .xt-wd-course .av { width: 48px; height: 48px; border-radius: 50%; background: var(--sg-astral-shade-50); color: #F5ECDA; display: flex; align-items: center; justify-content: center; font-family: "Zarid Display", "Riwaya", serif; font-size: 19px; font-weight: 600; } .xt-wd-course h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 20px; margin: 0 0 2px; } .xt-wd-course .meta { font-size: 13.5px; color: var(--sg-fg-muted); } .xt-wd-opt { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid rgba(15,27,34,0.1); border-radius: 5px; margin-bottom: 12px; cursor: pointer; } .xt-wd-opt.on { border-color: var(--sg-astral); background: #FBF6EC; } .xt-wd-opt .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(15,27,34,0.25); flex-shrink: 0; margin-top: 2px; } .xt-wd-opt.on .dot { border-color: var(--sg-astral); background: var(--sg-astral); box-shadow: inset 0 0 0 3px #fff; } .xt-wd-opt h4 { font-family: var(--sg-font-display); font-weight: 600; font-size: 16px; margin: 0 0 3px; } .xt-wd-opt p { font-size: 13.5px; color: var(--sg-fg-muted); margin: 0; line-height: 1.5; } .xt-wd-note { font-family: var(--sg-font-display); font-style: normal; font-size: 14.5px; color: var(--sg-fg-muted); margin: 22px 0; line-height: 1.6; } [dir="rtl"] .xt-wd-note { font-style: normal; } .xt-wd-actions { display: flex; gap: 12px; margin-top: 8px; } .xt-wd-actions .keep { flex: 1; text-align: center; background: var(--sg-deep-olive); color: #fff; border: none; padding: 13px; border-radius: 2px; font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none; } .xt-wd-actions .release { background: transparent; border: 1px solid rgba(168,69,47,0.4); color: var(--sg-danger); padding: 13px 22px; border-radius: 2px; font-size: 14.5px; cursor: pointer; } /* ── 404 / empty ────────────────────────────────────────────────────────── */ .xt-404 { max-width: 680px; margin: 0 auto; text-align: center; padding: 40px 0; } .xt-404 .emb { opacity: 0.5; margin-bottom: 28px; } .xt-404 h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.012em; margin: 0 0 16px; color: var(--sg-fg); } .xt-404 .lede { font-size: 18px; color: var(--sg-fg-muted); line-height: 1.55; margin: 0 0 32px; } .xt-404-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .xt-404-links a { font-size: 14px; padding: 11px 20px; border-radius: 2px; text-decoration: none; } .xt-404-links a.primary { background: var(--sg-burnt-umber); color: #fff; } .xt-404-links a.ghost { border: 1px solid rgba(15,27,34,0.18); color: var(--sg-fg); } .xt-404-verse { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--sg-soft-sand); font-family: var(--font-quran); font-size: 22px; color: var(--sg-astral-shade-30); line-height: 1.7; } /* ── Search ─────────────────────────────────────────────────────────────── */ .xt-search-bar { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid rgba(15,27,34,0.16); border-radius: 2px; padding: 4px 6px 4px 18px; max-width: 720px; } [dir="rtl"] .xt-search-bar { padding: 4px 18px 4px 6px; } .xt-search-bar .ico { color: var(--sg-fg-subtle); font-size: 20px; } .xt-search-bar input { flex: 1; border: none; outline: none; font-size: 17px; font-family: var(--sg-font-body); background: transparent; color: var(--sg-fg); padding: 12px 0; } .xt-search-bar button { background: var(--sg-astral-shade-50); color: #F5ECDA; border: none; padding: 11px 22px; border-radius: 2px; font-size: 14.5px; font-weight: 600; cursor: pointer; } .xt-search-meta { font-size: 14px; color: var(--sg-fg-muted); margin: 22px 0 8px; } .xt-search-meta b { color: var(--sg-fg); } .xt-facets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .xt-results { display: flex; flex-direction: column; gap: 4px; } .xt-result { display: grid; grid-template-columns: 96px 1fr; gap: 18px; padding: 20px 4px; border-bottom: 1px solid rgba(15,27,34,0.07); text-decoration: none; align-items: baseline; } .xt-result .kind { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-burnt-umber); } .xt-result h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 19px; margin: 0 0 5px; color: var(--sg-fg); line-height: 1.25; } .xt-result p { font-size: 14.5px; color: var(--sg-fg-muted); margin: 0 0 6px; line-height: 1.5; } .xt-result .meta { font-size: 12.5px; color: var(--sg-fg-subtle); } .xt-result:hover h3 { color: var(--sg-burnt-umber); } @media (max-width: 1080px) { .xt-week { grid-template-columns: repeat(2, 1fr); } .xt-plan { grid-template-columns: 1fr; } } @media (max-width: 640px) { .xt-week { grid-template-columns: 1fr; } .xt-result { grid-template-columns: 1fr; gap: 4px; } } /* ---- end v4_extra.css ---- */ /* ---- begin v4_federation.css ---- */ /* ========================================================================== v4_federation.css — Pass 3 · Scholars grid + Individual Scholar -------------------------------------------------------------------------- The federation rendered as institutional faculty: a grid of named scholars, the founder elevated, and the individual scholar destination with the isnad rendered as fact (not decoration), six content streams, and contact actions. Reuses chrome + [dir="rtl"] type re-voicing from v4_library.css. Portrait slots are placeholders for COMMISSIONED photography — never AI imagery — so they render as dignified tonal monograms until a photograph is dropped in. Logical properties throughout; one component mirrors by direction. ========================================================================== */ /* shared portrait monogram (commissioned-photo placeholder) */ .v4-fed-portrait { position: relative; overflow: hidden; border-radius: 2px; display: flex; align-items: center; justify-content: center; color: #FBF6EC; font-family: var(--sg-font-display); font-weight: 600; line-height: 1; } [dir="rtl"] .v4-fed-portrait { font-family: "Riwaya", serif; } .v4-fed-portrait::after { content: attr(data-cap); position: absolute; inset-block-end: 8px; inset-inline-start: 8px; font-family: var(--sg-font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,236,218,0.6); } /* ── Scholars grid hero ────────────────────────────────────────────────── */ .v4-fed-hero { background: #FBF6EC; border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-fed-hero-inner { max-width: 1200px; margin: 0 auto; padding: 56px 40px; } .v4-fed-kicker { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } [dir="rtl"] .v4-fed-kicker { letter-spacing: 0; } .v4-fed-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(32px,4vw,50px); line-height: 1.05; letter-spacing: -0.014em; color: var(--sg-fg); margin: 0 0 16px; max-width: 20ch; text-wrap: balance; } [dir="rtl"] .v4-fed-hero h1 { letter-spacing: 0; line-height: 1.3; } .v4-fed-lede { font-family: var(--sg-font-read); font-size: 18px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0; max-width: 64ch; text-wrap: pretty; } /* ── Founder block (elevated) ──────────────────────────────────────────── */ .v4-fed-wrap { max-width: 1200px; margin: 0 auto; padding: 48px 40px 80px; } .v4-fed-founder { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: stretch; background: linear-gradient(180deg, var(--sg-astral-shade-90), var(--sg-astral-shade-70)); color: #F5ECDA; border-radius: 2px; padding: 0; overflow: hidden; margin-bottom: 48px; position: relative; } .v4-fed-founder .v4-fed-portrait { aspect-ratio: auto; min-height: 320px; font-size: 76px; border-radius: 0; } .v4-fed-founder-body { padding: 40px 44px 40px 0; } [dir="rtl"] .v4-fed-founder-body { padding: 40px 0 40px 44px; } .v4-fed-founder .tag { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 12px; } [dir="rtl"] .v4-fed-founder .tag { letter-spacing: 0; } .v4-fed-founder h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px,3vw,38px); line-height: 1.1; color: #FBF6EC; margin: 0 0 6px; } .v4-fed-founder .role { font-family: var(--sg-font-ui); font-size: 14px; color: rgba(245,236,218,0.78); margin: 0 0 16px; } .v4-fed-founder .isnad { font-family: var(--sg-font-read); font-size: 15px; line-height: 1.55; color: rgba(245,236,218,0.82); margin: 0 0 14px; padding-block: 14px; border-block: 1px solid rgba(245,236,218,0.16); } .v4-fed-founder .isnad b { color: var(--sg-gamboge); font-weight: 600; } .v4-fed-founder .bio { font-family: var(--sg-font-read); font-size: 16px; line-height: 1.6; color: rgba(245,236,218,0.88); margin: 0 0 20px; max-width: 60ch; } .v4-fed-founder .acts { display: flex; gap: 12px; flex-wrap: wrap; } /* chips for content streams a scholar carries */ .v4-fed-chips { display: flex; gap: 7px; flex-wrap: wrap; } .v4-fed-chip { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 600; color: var(--sg-astral); border: 1px solid rgba(48,112,142,0.28); border-radius: 999px; padding: 4px 11px; } .v4-fed-founder .v4-fed-chip { color: #FBF6EC; border-color: rgba(245,236,218,0.3); } /* ── Scholars grid ─────────────────────────────────────────────────────── */ .v4-fed-section-h { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid rgba(15,27,34,0.1); } [dir="rtl"] .v4-fed-section-h { letter-spacing: 0; } .v4-fed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 980px){ .v4-fed-grid { grid-template-columns: 1fr 1fr; } .v4-fed-founder { grid-template-columns: 1fr; } .v4-fed-founder .v4-fed-portrait { min-height: 220px; } .v4-fed-founder-body { padding: 32px 28px; } [dir="rtl"] .v4-fed-founder-body { padding: 32px 28px; } } @media (max-width: 620px){ .v4-fed-grid { grid-template-columns: 1fr; } } .v4-fed-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; overflow: hidden; transition: border-color 180ms, transform 180ms, box-shadow 180ms; } .v4-fed-card:hover { border-color: var(--sg-astral); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,40,60,0.06); } .v4-fed-card .v4-fed-portrait { aspect-ratio: 5/4; font-size: 44px; border-radius: 0; border-bottom: 1px solid rgba(15,27,34,0.1); } .v4-fed-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; } .v4-fed-card h3 { font-family: var(--sg-font-display); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--sg-fg); margin: 0 0 4px; } .v4-fed-card h3 a { color: inherit; text-decoration: none; } .v4-fed-card h3 a:hover { color: var(--sg-astral); } .v4-fed-card .loc { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 10px; } [dir="rtl"] .v4-fed-card .loc { letter-spacing: 0; } .v4-fed-card .isnad { font-family: var(--sg-font-read); font-size: 13.5px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0 0 14px; flex: 1; } .v4-fed-card .isnad b { color: var(--gold-ink); font-weight: 600; } .v4-fed-card .v4-fed-chips { margin-bottom: 14px; } .v4-fed-card-foot { padding-top: 12px; border-top: 1px solid rgba(15,27,34,0.08); } .v4-fed-card-link { font-family: var(--sg-font-ui); font-size: 13.5px; font-weight: 600; color: var(--sg-astral); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; } .v4-fed-card-link .arrow { transition: transform 150ms; } .v4-fed-card-link:hover .arrow { transform: translateX(3px); } [dir="rtl"] .v4-fed-card-link .arrow { transform: scaleX(-1); } [dir="rtl"] .v4-fed-card-link:hover .arrow { transform: scaleX(-1) translateX(3px); } /* ========================================================================== INDIVIDUAL SCHOLAR DESTINATION (.v4-sd-*) ========================================================================== */ .v4-sd-hero { background: linear-gradient(180deg, var(--sg-astral-shade-90), var(--sg-astral-shade-70)); color: #F5ECDA; } .v4-sd-hero-inner { max-width: 1100px; margin: 0 auto; padding: 56px 40px; display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; } @media (max-width: 820px){ .v4-sd-hero-inner { grid-template-columns: 1fr; gap: 28px; } } .v4-sd-hero .v4-fed-portrait { aspect-ratio: 1/1; font-size: 64px; } .v4-sd-crumb { font-family: var(--sg-font-ui); font-size: 12.5px; color: rgba(245,236,218,0.7); margin: 0 0 14px; } .v4-sd-crumb a { color: rgba(245,236,218,0.85); text-decoration: none; } .v4-sd-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(30px,3.6vw,46px); line-height: 1.06; letter-spacing: -0.014em; color: #FBF6EC; margin: 0 0 6px; } [dir="rtl"] .v4-sd-hero h1 { letter-spacing: 0; line-height: 1.3; } .v4-sd-hero .role { font-family: var(--sg-font-ui); font-size: 14.5px; color: var(--sg-gamboge); margin: 0 0 16px; } .v4-sd-hero .bio { font-family: var(--sg-font-read); font-size: 17px; line-height: 1.6; color: rgba(245,236,218,0.86); margin: 0 0 22px; max-width: 62ch; } .v4-sd-acts { display: flex; gap: 12px; flex-wrap: wrap; } /* lineage block — isnad as institutional fact */ .v4-sd-isnad { background: #FBF6EC; border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-sd-isnad-inner { max-width: 1100px; margin: 0 auto; padding: 48px 40px; } .v4-sd-isnad h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 26px; color: var(--sg-fg); margin: 0 0 6px; } .v4-sd-isnad .note { font-family: var(--sg-font-read); font-size: 15.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 28px; max-width: 60ch; } .v4-sd-chain { list-style: none; margin: 0; padding: 0; position: relative; } .v4-sd-chain::before { content: ''; position: absolute; inset-block: 14px 14px; inset-inline-start: 13px; width: 2px; background: linear-gradient(180deg, var(--sg-gamboge), rgba(236,166,8,0.25)); } .v4-sd-node { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 20px; padding-bottom: 22px; } .v4-sd-node:last-child { padding-bottom: 0; } .v4-sd-node .star { position: relative; z-index: 1; color: var(--sg-gamboge); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: #FBF6EC; } .v4-sd-node .nm { font-family: var(--sg-font-display); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--sg-fg); margin: 2px 0 2px; } .v4-sd-node .det { font-family: var(--sg-font-read); font-size: 14px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0; } /* six content streams — one row per type */ .v4-sd-streams { max-width: 1100px; margin: 0 auto; padding: 48px 40px 88px; } .v4-sd-stream { padding: 26px 0; border-bottom: 1px solid rgba(15,27,34,0.1); display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; } .v4-sd-stream:last-child { border-bottom: none; } @media (max-width: 760px){ .v4-sd-stream { grid-template-columns: 1fr; gap: 16px; } } .v4-sd-stream-h .k { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 6px; } [dir="rtl"] .v4-sd-stream-h .k { letter-spacing: 0; } .v4-sd-stream-h h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 21px; line-height: 1.2; color: var(--sg-fg); margin: 0 0 8px; } .v4-sd-stream-h .all { font-family: var(--sg-font-ui); font-size: 13px; font-weight: 600; color: var(--sg-astral); text-decoration: none; } .v4-sd-item { background: #fff; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 18px 20px; } .v4-sd-item .it-meta { font-family: var(--sg-font-ui); font-size: 12px; color: var(--sg-fg-subtle); margin: 0 0 6px; } .v4-sd-item .it-title { font-family: var(--sg-font-display); font-weight: 500; font-size: 18px; line-height: 1.25; color: var(--sg-fg); margin: 0 0 8px; } .v4-sd-item .it-title a { color: inherit; text-decoration: none; } .v4-sd-item .it-title a:hover { color: var(--sg-astral); } .v4-sd-item .it-blurb { font-family: var(--sg-font-read); font-size: 14.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; } .v4-sd-item.q .it-title::before { content: '“'; color: var(--sg-gamboge); } .v4-sd-item.q .it-title::after { content: '”'; color: var(--sg-gamboge); } /* contact actions reuse the v4 buttons; subscribe is a quiet gold-ink link on dark */ .v4-sd-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sg-font-ui); font-weight: 600; font-size: 14.5px; border-radius: 2px; padding: 12px 22px; cursor: pointer; text-decoration: none; border: 1.5px solid transparent; } .v4-sd-btn.primary { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); border-color: var(--sg-gamboge); } .v4-sd-btn.primary:hover { background: #f6c054; } .v4-sd-btn.ghost { background: transparent; color: #FBF6EC; border-color: rgba(245,236,218,0.4); } .v4-sd-btn.ghost:hover { border-color: #F5ECDA; background: rgba(255,255,255,0.05); } /* RTL type roles handled centrally in v4_library.css (variable-level role swap + chrome-exclusion). No per-page font guards needed. */ /* ---- end v4_federation.css ---- */ /* ---- begin v4_flows.css ---- */ /* ========================================================================== SeekersGuidance — v4 Flows Reservation · Waiting Room · Mobile Lesson Three screens that close the most expensive gaps in the product. ========================================================================== */ /* ========================================================================== FLOW SHOWCASE — the wrapper that frames a multi-screen flow (used by the Reservation page) ========================================================================== */ .v4-flow-intro { background: #FBF6EC; border-bottom: 1px solid rgba(15,27,34,0.08); padding: 56px 0 48px; } .v4-flow-intro-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; } .v4-flow-intro .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 16px; display: inline-flex; align-items: center; gap: 14px; } .v4-flow-intro .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--sg-burnt-umber); } .v4-flow-intro h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: 44px; line-height: 1.08; letter-spacing: -0.014em; margin: 0 0 16px; color: var(--sg-fg); text-wrap: balance; } .v4-flow-intro h1 em { font-style: normal; color: var(--sg-burnt-umber); font-weight: 400; } .v4-flow-intro .lede { font-size: 17.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; max-width: 56ch; } .v4-flow-intro-meta { font-family: var(--sg-font-display); font-style: normal; color: var(--sg-fg-muted); font-size: 14.5px; line-height: 1.7; padding-left: 28px; border-left: 1px solid var(--sg-soft-sand); } .v4-flow-intro-meta b { font-style: normal; color: var(--sg-fg); font-weight: 600; } /* Step rail at the top of the flow */ .v4-flow-rail { background: #FFFFFF; border-bottom: 1px solid rgba(15,27,34,0.06); padding: 24px 0; } .v4-flow-rail-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 0; } .v4-flow-step { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; flex: 1; } .v4-flow-step .n { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--sg-font-display); font-weight: 600; font-size: 15px; background: #FBF6EC; border: 1.5px solid rgba(15,27,34,0.12); color: var(--sg-fg); flex-shrink: 0; } .v4-flow-step.is-cta .n { background: var(--sg-astral); border-color: var(--sg-astral); color: #fff; } .v4-flow-step .t { display: flex; flex-direction: column; font-size: 13px; } .v4-flow-step .t .lab { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); font-weight: 600; } .v4-flow-step .t .ti { font-family: var(--sg-font-display); font-weight: 600; font-size: 15px; color: var(--sg-fg); margin-top: 1px; letter-spacing: -0.005em; } .v4-flow-step + .v4-flow-step::before { content: ''; height: 1px; width: 28px; background: rgba(15,27,34,0.16); margin-right: 14px; flex-shrink: 0; } /* Stage frame — wraps each rendered screen on the canvas */ .v4-flow-stage { padding: 56px 0; background: var(--stage-bg, #F5ECDA); border-top: 1px solid rgba(15,27,34,0.06); position: relative; } .v4-flow-stage-label { max-width: 1080px; margin: 0 auto 28px; padding: 0 40px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; } .v4-flow-stage-label .n { font-family: var(--sg-font-display); font-style: normal; font-weight: 400; font-size: 14.5px; color: var(--sg-burnt-umber); } .v4-flow-stage-label .n b { font-style: normal; font-weight: 700; color: var(--sg-astral-shade-30); margin-right: 4px; } .v4-flow-stage-label h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: var(--sg-fg); } .v4-flow-stage-label .note { font-size: 14px; color: var(--sg-fg-muted); margin: 0; max-width: 56ch; line-height: 1.55; flex-basis: 100%; padding-top: 4px; } .v4-flow-stage-screen { max-width: 1180px; margin: 0 auto; background: #FFFFFF; border-radius: 2px; box-shadow: 0 24px 60px -28px rgba(15,27,34,0.28), 0 0 0 1px rgba(15,27,34,0.06); overflow: hidden; position: relative; } /* ========================================================================== SCREEN — Sign in / Create account (the gate) ========================================================================== */ .v4-auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; } .v4-auth-left { padding: 64px 56px; background: linear-gradient(180deg, #13303F 0%, #0A1E29 100%); color: #F5ECDA; display: flex; flex-direction: column; position: relative; overflow: hidden; } .v4-auth-left::after { content: ''; position: absolute; right: -80px; bottom: -80px; width: 280px; height: 280px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; opacity: 0.07; pointer-events: none; } .v4-auth-left .crumb { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,236,218,0.6); margin: 0 0 36px; } .v4-auth-left .crumb b { color: var(--sg-gamboge); font-weight: 700; } .v4-auth-left h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 36px; line-height: 1.1; letter-spacing: -0.012em; margin: 0 0 18px; color: #FBF6EC; text-wrap: balance; max-width: 14ch; } .v4-auth-left h2 em { font-style: normal; color: var(--sg-gamboge); font-weight: 400; } .v4-auth-left .lede { font-size: 16.5px; line-height: 1.55; color: rgba(245,236,218,0.78); margin: 0 0 28px; max-width: 36ch; } .v4-auth-course { margin-top: auto; padding: 20px 22px; border-top: 2px solid var(--sg-gamboge); background: rgba(255,255,255,0.04); border-radius: 2px; position: relative; z-index: 1; } .v4-auth-course .kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 6px; } .v4-auth-course .title { font-family: var(--sg-font-display); font-weight: 500; font-size: 19px; line-height: 1.25; color: #FBF6EC; margin: 0 0 6px; } .v4-auth-course .meta { font-size: 13.5px; color: rgba(245,236,218,0.65); margin: 0; } .v4-auth-quiet { margin-top: 24px; font-family: var(--sg-font-display); font-style: normal; font-size: 13.5px; color: rgba(245,236,218,0.5); position: relative; z-index: 1; } .v4-auth-right { padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; } .v4-auth-right h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 28px; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--sg-fg); } .v4-auth-right .sub { font-size: 15px; color: var(--sg-fg-muted); margin: 0 0 28px; line-height: 1.55; } .v4-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #FBF6EC; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 4px; margin-bottom: 28px; } .v4-auth-tabs button { background: transparent; border: none; padding: 10px 16px; font-family: var(--sg-font-body); font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; border-radius: 3px; color: var(--sg-fg-muted); transition: all 150ms; } .v4-auth-tabs button.on { background: #FFFFFF; color: var(--sg-fg); box-shadow: 0 1px 2px rgba(15,27,34,0.06); } .v4-auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .v4-auth-field label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-fg-muted); } .v4-auth-field input { font-family: var(--sg-font-body); font-size: 15px; padding: 12px 14px; border: 1px solid rgba(15,27,34,0.16); border-radius: 2px; background: #FFFFFF; color: var(--sg-fg); outline: none; transition: border-color 150ms; } .v4-auth-field input:focus { border-color: var(--sg-astral); } .v4-auth-field input::placeholder { color: var(--sg-fg-subtle); } .v4-auth-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; margin: 4px 0 24px; } .v4-auth-row label { display: inline-flex; align-items: center; gap: 8px; color: var(--sg-fg-muted); cursor: pointer; } .v4-auth-row a { color: var(--sg-astral); text-decoration: none; } .v4-auth-row a:hover { text-decoration: underline; } .v4-auth-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--sg-astral); color: #fff; border: 1.5px solid var(--sg-astral); padding: 13px 20px; border-radius: 2px; font-family: var(--sg-font-body); font-weight: 600; font-size: 15px; cursor: pointer; transition: background 150ms; text-decoration: none; text-align: center; width: 100%; } .v4-auth-cta:hover { background: var(--sg-astral-shade-30); border-color: var(--sg-astral-shade-30); } .v4-auth-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); } .v4-auth-or::before, .v4-auth-or::after { content: ''; flex: 1; height: 1px; background: rgba(15,27,34,0.1); } .v4-auth-sso { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .v4-auth-sso button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #FFFFFF; border: 1px solid rgba(15,27,34,0.16); padding: 11px 14px; border-radius: 2px; font-family: var(--sg-font-body); font-size: 14px; font-weight: 500; color: var(--sg-fg); cursor: pointer; transition: border-color 150ms; } .v4-auth-sso button:hover { border-color: var(--sg-fg); } .v4-auth-sso .icon { width: 18px; height: 18px; flex-shrink: 0; } /* ========================================================================== SCREEN — Reservation form ========================================================================== */ .v4-res { display: grid; grid-template-columns: 1fr 380px; min-height: 720px; } .v4-res-main { padding: 56px 56px 64px; background: #FFFFFF; } .v4-res-main .crumb { font-size: 12.5px; letter-spacing: 0.04em; color: var(--sg-fg-muted); margin: 0 0 24px; } .v4-res-main .crumb a { color: var(--sg-burnt-umber); text-decoration: none; } .v4-res-main .crumb .sep { opacity: 0.4; margin: 0 8px; } .v4-res-main h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 34px; line-height: 1.1; letter-spacing: -0.014em; margin: 0 0 12px; color: var(--sg-fg); text-wrap: balance; max-width: 18ch; } .v4-res-main h2 em { font-style: normal; color: var(--sg-burnt-umber); font-weight: 400; } .v4-res-main .lede { font-size: 16.5px; color: var(--sg-fg-muted); line-height: 1.55; margin: 0 0 36px; max-width: 56ch; } .v4-res-form { display: flex; flex-direction: column; gap: 28px; max-width: 560px; } .v4-res-fld { display: flex; flex-direction: column; gap: 8px; } .v4-res-fld > label { font-family: var(--sg-font-display); font-weight: 500; font-size: 15.5px; color: var(--sg-fg); } .v4-res-fld > label .req { color: var(--sg-burnt-umber); font-weight: 600; margin-left: 2px; } .v4-res-fld > .hint { font-size: 13px; color: var(--sg-fg-subtle); font-style: normal; font-family: var(--sg-font-display); margin: 0; line-height: 1.45; } .v4-res-fld input[type=text], .v4-res-fld input[type=email], .v4-res-fld select, .v4-res-fld textarea { font-family: var(--sg-font-body); font-size: 15px; padding: 12px 14px; border: 1px solid rgba(15,27,34,0.16); border-radius: 2px; background: #FFFFFF; color: var(--sg-fg); outline: none; transition: border-color 150ms; width: 100%; } .v4-res-fld textarea { min-height: 92px; resize: vertical; font-family: var(--sg-font-body); line-height: 1.55; } .v4-res-fld input:focus, .v4-res-fld select:focus, .v4-res-fld textarea:focus { border-color: var(--sg-astral); } .v4-res-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .v4-res-radios { display: flex; flex-direction: column; gap: 10px; } .v4-res-radio { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid rgba(15,27,34,0.12); border-radius: 2px; cursor: pointer; background: #FBF6EC; transition: all 150ms; } .v4-res-radio.on { background: rgba(48,112,142,0.06); border-color: var(--sg-astral); } .v4-res-radio .dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(15,27,34,0.3); flex-shrink: 0; margin-top: 2px; position: relative; } .v4-res-radio.on .dot { border-color: var(--sg-astral); } .v4-res-radio.on .dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--sg-astral); } .v4-res-radio .t b { display: block; font-family: var(--sg-font-display); font-weight: 500; font-size: 16px; color: var(--sg-fg); margin-bottom: 2px; } .v4-res-radio .t span { font-size: 13.5px; color: var(--sg-fg-muted); line-height: 1.5; } .v4-res-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding-top: 24px; border-top: 1px solid rgba(15,27,34,0.08); flex-wrap: wrap; } .v4-res-cta { background: var(--sg-astral); color: #fff; border: 1.5px solid var(--sg-astral); padding: 13px 28px; border-radius: 2px; font-family: var(--sg-font-body); font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .v4-res-cta:hover { background: var(--sg-astral-shade-30); border-color: var(--sg-astral-shade-30); } .v4-res-skip { font-family: var(--sg-font-display); font-style: normal; font-size: 14.5px; color: var(--sg-burnt-umber); text-decoration: none; } .v4-res-skip:hover { text-decoration: underline; } /* Reservation sidebar */ .v4-res-side { background: #FBF6EC; border-left: 1px solid rgba(15,27,34,0.08); padding: 48px 36px; } .v4-res-side .kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 10px; } .v4-res-side h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 21px; line-height: 1.2; letter-spacing: -0.005em; margin: 0 0 8px; color: var(--sg-fg); } .v4-res-side .by { font-size: 14px; color: var(--sg-fg-muted); margin: 0 0 20px; } .v4-res-side dl { margin: 0 0 24px; padding: 16px 0; border-top: 1px solid rgba(15,27,34,0.1); border-bottom: 1px solid rgba(15,27,34,0.1); display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; } .v4-res-side dt { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 0; } .v4-res-side dd { font-family: var(--sg-font-display); font-weight: 600; font-size: 14.5px; color: var(--sg-fg); margin: 2px 0 0; grid-column: 1 / -1; } .v4-res-side dl > .pair { display: contents; } .v4-res-side .free-note { font-family: var(--sg-font-display); font-style: normal; font-size: 13.5px; color: var(--sg-fg-muted); line-height: 1.55; margin: 0; } .v4-res-side .free-note b { color: var(--sg-burnt-umber); font-style: normal; font-weight: 600; } /* ========================================================================== SCREEN — Confirmation (seat held) ========================================================================== */ .v4-conf { padding: 80px 56px 72px; text-align: center; background: #FFFFFF; position: relative; overflow: hidden; } .v4-conf::before { content: ''; position: absolute; top: -120px; left: 50%; width: 520px; height: 520px; transform: translateX(-50%); background: radial-gradient(circle, rgba(236,166,8,0.10) 0%, rgba(236,166,8,0) 60%); pointer-events: none; } .v4-conf-inner { max-width: 680px; margin: 0 auto; position: relative; } .v4-conf .seal { width: 64px; height: 64px; margin: 0 auto 22px; position: relative; display: flex; align-items: center; justify-content: center; } .v4-conf .seal svg { width: 64px; height: 64px; } .v4-conf .seal .check { position: absolute; font-size: 22px; color: var(--sg-astral-shade-90); font-weight: 700; } .v4-conf .kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 14px; } .v4-conf h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 42px; line-height: 1.06; letter-spacing: -0.016em; margin: 0 0 20px; color: var(--sg-fg); text-wrap: balance; } .v4-conf h2 em { font-style: normal; color: var(--sg-burnt-umber); font-weight: 400; } .v4-conf .lede { font-size: 18px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0 0 36px; max-width: 48ch; margin-left: auto; margin-right: auto; } .v4-conf-receipt { background: #FBF6EC; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 28px 32px; margin: 0 0 32px; text-align: left; } .v4-conf-receipt .row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(15,27,34,0.06); } .v4-conf-receipt .row:last-child { border-bottom: none; } .v4-conf-receipt .row dt { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 4px 0 0; } .v4-conf-receipt .row dd { font-family: var(--sg-font-display); font-weight: 500; font-size: 17px; line-height: 1.35; color: var(--sg-fg); margin: 0; } .v4-conf-receipt .row dd b { color: var(--sg-burnt-umber); font-weight: 600; } .v4-conf-receipt .row dd small { display: block; font-family: var(--sg-font-body); font-weight: 400; font-size: 13.5px; color: var(--sg-fg-muted); margin-top: 2px; } .v4-conf-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .v4-conf-actions .primary { display: inline-flex; align-items: center; gap: 8px; background: var(--sg-astral); color: #fff; border: 1.5px solid var(--sg-astral); padding: 13px 24px; border-radius: 2px; font-weight: 600; font-size: 14.5px; text-decoration: none; } .v4-conf-actions .primary:hover { background: var(--sg-astral-shade-30); border-color: var(--sg-astral-shade-30); } .v4-conf-actions .ghost { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--sg-fg); border: 1.5px solid rgba(15,27,34,0.18); padding: 13px 24px; border-radius: 2px; font-weight: 600; font-size: 14.5px; text-decoration: none; } .v4-conf-actions .ghost:hover { border-color: var(--sg-fg); } .v4-conf-next { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--sg-soft-sand); font-family: var(--sg-font-display); font-style: normal; color: var(--sg-fg-muted); font-size: 15px; line-height: 1.55; text-align: center; } .v4-conf-next a { color: var(--sg-burnt-umber); font-style: normal; font-weight: 600; text-decoration: none; } .v4-conf-next a:hover { text-decoration: underline; } .v4-conf-next b { display: block; font-family: var(--sg-font-body); font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-astral); margin-bottom: 8px; } /* ========================================================================== SCREEN — Pre-term holding (the dashboard the seeker sees while waiting) ========================================================================== */ .v4-hold { background: #FBF6EC; padding: 56px 0; } .v4-hold-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; } .v4-hold-main h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 32px; line-height: 1.1; letter-spacing: -0.012em; margin: 0 0 12px; color: var(--sg-fg); text-wrap: balance; } .v4-hold-main .ar { font-family: "Riwaya", serif; direction: rtl; font-size: 24px; color: var(--sg-burnt-umber); margin: 0 0 14px; line-height: 1.6; } .v4-hold-main .sub { font-size: 16.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 36px; max-width: 52ch; } .v4-hold-countdown { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 28px 32px; margin-bottom: 32px; } .v4-hold-countdown .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 0 0 8px; } .v4-hold-countdown .target { font-family: var(--sg-font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.005em; color: var(--sg-fg); margin: 0 0 14px; } .v4-hold-countdown .target b { color: var(--sg-burnt-umber); font-weight: 600; } .v4-hold-bar { height: 8px; background: #F5ECDA; border-radius: 2px; overflow: hidden; position: relative; margin-bottom: 16px; } .v4-hold-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: linear-gradient(90deg, var(--sg-astral) 0%, var(--sg-gamboge) 100%); } .v4-hold-bar-track { display: flex; justify-content: space-between; font-size: 12px; color: var(--sg-fg-muted); font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.04em; } .v4-hold-meantime { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 32px 36px; } .v4-hold-meantime > .lab { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 8px; } .v4-hold-meantime > h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.005em; margin: 0 0 22px; color: var(--sg-fg); } .v4-hold-meantime ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .v4-hold-meantime li { display: grid; grid-template-columns: 36px 1fr auto; gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid rgba(15,27,34,0.06); } .v4-hold-meantime li:last-child { border-bottom: none; } .v4-hold-meantime li .icon { width: 36px; height: 36px; border-radius: 2px; background: #FBF6EC; border: 1px solid rgba(138,90,68,0.18); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--sg-burnt-umber); flex-shrink: 0; } .v4-hold-meantime li h4 { font-family: var(--sg-font-display); font-weight: 500; font-size: 17px; letter-spacing: -0.005em; margin: 0 0 4px; color: var(--sg-fg); } .v4-hold-meantime li p { font-size: 14px; color: var(--sg-fg-muted); margin: 0; line-height: 1.5; } .v4-hold-meantime li a { font-family: var(--sg-font-display); font-style: normal; font-size: 14px; color: var(--sg-astral); text-decoration: none; white-space: nowrap; align-self: center; } .v4-hold-meantime li a:hover { text-decoration: underline; } .v4-hold-side { display: flex; flex-direction: column; gap: 20px; } .v4-hold-card { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 24px 26px; } .v4-hold-card .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 10px; } .v4-hold-card h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.005em; margin: 0 0 8px; color: var(--sg-fg); } .v4-hold-card p { font-size: 14px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 14px; } .v4-hold-card .row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 14px; } .v4-hold-card .row + .row { border-top: 1px solid rgba(15,27,34,0.05); } .v4-hold-card .row b { font-family: var(--sg-font-display); font-weight: 500; color: var(--sg-fg); font-size: 15px; } .v4-hold-card .row span { color: var(--sg-fg-muted); font-size: 13px; } .v4-hold-card .action { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sg-font-display); font-style: normal; font-size: 14px; color: var(--sg-astral); text-decoration: none; } .v4-hold-card .action:hover { text-decoration: underline; } .v4-hold-card.tint { background: linear-gradient(180deg, #13303F 0%, #0A1E29 100%); border-color: rgba(245,236,218,0.1); color: #F5ECDA; } .v4-hold-card.tint .lab { color: var(--sg-gamboge); } .v4-hold-card.tint h3 { color: #FBF6EC; } .v4-hold-card.tint p { color: rgba(245,236,218,0.75); } .v4-hold-card.tint .action { color: var(--sg-gamboge); } /* ========================================================================== SCREEN — Welcome email (the inbox view) ========================================================================== */ .v4-mail { background: #F4F1ED; padding: 0; } .v4-mail-chrome { background: #FFFFFF; border-bottom: 1px solid rgba(15,27,34,0.08); padding: 14px 24px; display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--sg-fg-muted); } .v4-mail-chrome .dots { display: flex; gap: 6px; } .v4-mail-chrome .dots span { width: 11px; height: 11px; border-radius: 50%; background: #E0DDD7; } .v4-mail-chrome .dots span:nth-child(1) { background: #ED6A5E; } .v4-mail-chrome .dots span:nth-child(2) { background: #F4BE4F; } .v4-mail-chrome .dots span:nth-child(3) { background: #61C554; } .v4-mail-chrome .crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sg-fg-subtle); } .v4-mail-chrome .crumbs .arr { opacity: 0.5; } .v4-mail-chrome .actions { margin-left: auto; display: flex; gap: 16px; font-size: 12px; color: var(--sg-fg-subtle); } .v4-mail-meta { padding: 24px 56px 18px; background: #FFFFFF; border-bottom: 1px solid rgba(15,27,34,0.06); } .v4-mail-meta .from { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .v4-mail-meta .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--sg-astral) 0%, var(--sg-astral-shade-50) 100%); color: #FBF6EC; display: inline-flex; align-items: center; justify-content: center; font-family: var(--sg-font-display); font-weight: 600; font-size: 14px; flex-shrink: 0; } .v4-mail-meta .who { font-size: 14px; color: var(--sg-fg); } .v4-mail-meta .who b { font-weight: 600; } .v4-mail-meta .who span { color: var(--sg-fg-muted); } .v4-mail-meta .to { font-size: 13px; color: var(--sg-fg-muted); margin-top: 2px; } .v4-mail-meta .when { margin-left: auto; font-size: 13px; color: var(--sg-fg-subtle); } .v4-mail-meta .from-row { display: flex; align-items: center; gap: 12px; width: 100%; } .v4-mail-meta h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.008em; margin: 0 0 4px; color: var(--sg-fg); } .v4-mail-body { background: #FFFFFF; padding: 36px 56px 48px; font-family: var(--sg-font-body); font-size: 15.5px; line-height: 1.65; color: var(--sg-fg); } .v4-mail-body .salutation { font-family: "Riwaya", serif; direction: rtl; font-size: 24px; color: var(--sg-burnt-umber); margin: 0 0 6px; line-height: 1.4; } .v4-mail-body .sal-en { font-family: var(--sg-font-display); font-style: normal; font-size: 14.5px; color: var(--sg-fg-muted); margin: 0 0 24px; } .v4-mail-body p { margin: 0 0 16px; max-width: 64ch; } .v4-mail-body p.first { font-size: 17px; line-height: 1.55; } .v4-mail-body .signoff { font-family: var(--sg-font-display); font-style: normal; margin: 28px 0 6px; color: var(--sg-fg); } .v4-mail-body .signature { font-family: var(--sg-font-display); font-weight: 600; font-size: 16.5px; color: var(--sg-fg); } .v4-mail-body .signature .role { display: block; font-family: var(--sg-font-body); font-style: normal; font-weight: 400; font-size: 13.5px; color: var(--sg-fg-muted); margin-top: 2px; } .v4-mail-bracket { margin: 28px 0; padding: 22px 26px; background: #FBF6EC; border-top: 2px solid var(--sg-gamboge); border-radius: 0; } .v4-mail-bracket .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 12px; } .v4-mail-bracket dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; } .v4-mail-bracket dt { font-size: 13px; color: var(--sg-fg-muted); margin: 0; } .v4-mail-bracket dd { font-family: var(--sg-font-display); font-weight: 600; font-size: 14.5px; color: var(--sg-fg); margin: 0; } .v4-mail-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--sg-astral); color: #fff; padding: 11px 22px; border-radius: 2px; font-family: var(--sg-font-body); font-weight: 600; font-size: 14px; text-decoration: none; margin: 8px 0 20px; } .v4-mail-foot { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(15,27,34,0.08); font-size: 12.5px; color: var(--sg-fg-subtle); line-height: 1.55; } .v4-mail-foot a { color: var(--sg-burnt-umber); text-decoration: none; } /* ========================================================================== WAITING ROOM — the screen between "Enter class" and the class going live ========================================================================== */ .v4-wait { background: linear-gradient(180deg, #0A1E29 0%, #13303F 60%, #0A1E29 100%); color: #F5ECDA; min-height: 100vh; position: relative; overflow: hidden; } .v4-wait::after { content: ''; position: absolute; right: -160px; bottom: -160px; width: 600px; height: 600px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; opacity: 0.05; pointer-events: none; } .v4-wait-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; background: rgba(10,30,41,0.6); border-bottom: 1px solid rgba(245,236,218,0.08); backdrop-filter: blur(8px); } .v4-wait-bar .crumb { font-size: 12.5px; letter-spacing: 0.06em; color: rgba(245,236,218,0.65); display: flex; gap: 8px; align-items: center; } .v4-wait-bar .crumb a { color: rgba(245,236,218,0.85); text-decoration: none; } .v4-wait-bar .crumb a:hover { color: #FBF6EC; } .v4-wait-bar .crumb .sep { opacity: 0.4; } .v4-wait-bar .live-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(236,166,8,0.12); border: 1px solid rgba(236,166,8,0.3); padding: 6px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-gamboge); } .v4-wait-bar .live-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sg-gamboge); animation: v4-pulse 1.6s ease-in-out infinite; } @keyframes v4-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .v4-wait-main { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 56px 40px 80px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: start; } .v4-wait-stage { position: relative; } .v4-wait-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 18px; } .v4-wait-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--sg-gamboge); } .v4-wait h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(36px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.018em; margin: 0 0 14px; color: #FBF6EC; text-wrap: balance; } .v4-wait h1 em { font-style: normal; color: var(--sg-gamboge); font-weight: 400; } .v4-wait .lede { font-size: 18px; line-height: 1.5; color: rgba(245,236,218,0.78); margin: 0 0 36px; max-width: 52ch; } .v4-wait-clock { display: flex; align-items: baseline; gap: 18px; margin: 0 0 36px; padding: 24px 0; border-top: 1px solid rgba(245,236,218,0.12); border-bottom: 1px solid rgba(245,236,218,0.12); } .v4-wait-clock .countdown { font-family: var(--sg-font-display); font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: -0.02em; color: #FBF6EC; font-variant-numeric: tabular-nums; } .v4-wait-clock .countdown b { color: var(--sg-gamboge); font-weight: 600; } .v4-wait-clock .meta { font-size: 14px; line-height: 1.5; color: rgba(245,236,218,0.7); } .v4-wait-clock .meta b { color: #FBF6EC; font-weight: 600; } .v4-wait-prep { background: rgba(245,236,218,0.04); border: 1px solid rgba(245,236,218,0.1); border-radius: 2px; padding: 28px 32px; margin-bottom: 28px; } .v4-wait-prep h3 { font-family: var(--sg-font-display); font-style: normal; font-weight: 500; font-size: 22px; color: #FBF6EC; margin: 0 0 18px; letter-spacing: -0.005em; } .v4-wait-prep ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: prep; } .v4-wait-prep ol li { counter-increment: prep; padding-left: 36px; position: relative; font-size: 15.5px; line-height: 1.55; color: rgba(245,236,218,0.86); } .v4-wait-prep ol li::before { content: counter(prep); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--sg-gamboge); color: var(--sg-gamboge); font-family: var(--sg-font-display); font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; } .v4-wait-prep ol li b { color: #FBF6EC; font-weight: 600; } .v4-wait-prep ol li i { font-family: var(--sg-font-display); font-style: normal; color: rgba(245,236,218,0.65); display: block; margin-top: 2px; font-size: 14px; } .v4-wait-recite { background: rgba(236,166,8,0.05); border-top: 2px solid var(--sg-gamboge); padding: 24px 28px; border-radius: 0; margin-bottom: 28px; } .v4-wait-recite .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 12px; } .v4-wait-recite .ar { font-family: var(--font-quran); font-size: 30px; font-weight: 500; line-height: 1.7; color: #FBF6EC; direction: rtl; margin: 0 0 8px; } .v4-wait-recite .en { font-family: var(--sg-font-display); font-style: normal; font-size: 14.5px; color: rgba(245,236,218,0.72); margin: 0; } .v4-wait-side { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 24px; } .v4-wait-card { background: rgba(245,236,218,0.04); border: 1px solid rgba(245,236,218,0.1); border-radius: 2px; padding: 24px 26px; } .v4-wait-card .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 14px; } .v4-wait-card h4 { font-family: var(--sg-font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.005em; margin: 0 0 8px; color: #FBF6EC; } .v4-wait-card p { font-size: 14px; line-height: 1.55; color: rgba(245,236,218,0.75); margin: 0; } .v4-wait-card p + p { margin-top: 10px; } .v4-wait-scholar { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid rgba(245,236,218,0.08); } .v4-wait-scholar .av { width: 48px; height: 48px; border-radius: 50%; background: #22506A; display: inline-flex; align-items: center; justify-content: center; font-family: var(--sg-font-display); font-weight: 600; color: #F5ECDA; font-size: 16px; flex-shrink: 0; } .v4-wait-scholar .who { font-family: var(--sg-font-display); font-weight: 600; font-size: 16px; color: #FBF6EC; } .v4-wait-scholar .where { font-size: 12.5px; color: rgba(245,236,218,0.6); } .v4-wait-seekers { display: flex; align-items: center; gap: 14px; } .v4-wait-seekers .pile { display: flex; } .v4-wait-seekers .pile .av { width: 32px; height: 32px; border-radius: 50%; background: var(--sg-burnt-umber); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sg-font-display); font-weight: 600; color: #F5ECDA; font-size: 12px; border: 2px solid #0F2530; } .v4-wait-seekers .pile .av + .av { margin-left: -10px; } .v4-wait-seekers .pile .av.alt { background: var(--sg-astral-shade-30); } .v4-wait-seekers .pile .av.alt2 { background: var(--sg-deep-olive); } .v4-wait-seekers .pile .av.more { background: rgba(245,236,218,0.1); color: #F5ECDA; font-size: 11px; } .v4-wait-seekers .ct { font-size: 13.5px; color: rgba(245,236,218,0.78); line-height: 1.4; } .v4-wait-seekers .ct b { color: #FBF6EC; font-weight: 600; font-family: var(--sg-font-display); } .v4-wait-rules ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .v4-wait-rules li { font-size: 13.5px; line-height: 1.5; color: rgba(245,236,218,0.78); padding-left: 22px; position: relative; } .v4-wait-rules li::before { content: '·'; position: absolute; left: 4px; top: -3px; color: var(--sg-gamboge); font-weight: 700; font-size: 22px; } .v4-wait-rules li b { color: #FBF6EC; font-weight: 600; } .v4-wait-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; } .v4-wait-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--sg-gamboge); color: var(--sg-astral-shade-90); border: 1.5px solid var(--sg-gamboge); padding: 14px 26px; border-radius: 2px; font-family: var(--sg-font-body); font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; transition: all 150ms; } .v4-wait-cta:hover { background: #f6c054; border-color: #f6c054; } .v4-wait-cta .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--sg-astral-shade-90); animation: v4-pulse 1.6s ease-in-out infinite; } .v4-wait-ghost { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: rgba(245,236,218,0.82); border: 1px solid rgba(245,236,218,0.22); padding: 14px 22px; border-radius: 2px; font-family: var(--sg-font-body); font-weight: 600; font-size: 14.5px; text-decoration: none; cursor: pointer; } .v4-wait-ghost:hover { color: #FBF6EC; border-color: #F5ECDA; } /* ========================================================================== MOBILE LESSON — sticky video + chip tabs + outline drawer ========================================================================== */ .v4-mlsn { font-family: var(--sg-font-body); background: #FBF6EC; min-height: 100%; color: var(--sg-fg); } /* Top bar inside the mobile lesson */ .v4-mlsn-top { position: sticky; top: 0; z-index: 30; background: #FFFFFF; border-bottom: 1px solid rgba(15,27,34,0.08); display: flex; align-items: center; padding: 10px 12px; gap: 8px; } .v4-mlsn-top .back, .v4-mlsn-top .menu { width: 36px; height: 36px; border-radius: 2px; background: transparent; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--sg-fg); cursor: pointer; flex-shrink: 0; } .v4-mlsn-top .back:hover, .v4-mlsn-top .menu:hover { background: #FBF6EC; } .v4-mlsn-top .center { flex: 1; text-align: center; min-width: 0; } .v4-mlsn-top .center .ti { font-family: var(--sg-font-display); font-weight: 600; font-size: 13px; letter-spacing: -0.005em; color: var(--sg-fg); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v4-mlsn-top .center .wk { font-size: 11px; color: var(--sg-burnt-umber); font-weight: 600; letter-spacing: 0.06em; } /* Sticky video */ .v4-mlsn-video { position: sticky; top: 56px; z-index: 20; background: var(--sg-astral-shade-90); aspect-ratio: 16/9; overflow: hidden; } .v4-mlsn-video > svg { width: 100%; height: 100%; display: block; } .v4-mlsn-video .shroud { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(15,27,34,0.1), rgba(15,27,34,0.6)); pointer-events: none; } .v4-mlsn-video .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(236,166,8,0.95); color: var(--sg-astral-shade-90); border: none; font-size: 22px; display: inline-flex; align-items: center; justify-content: center; padding-left: 4px; } .v4-mlsn-video .cap { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; } .v4-mlsn-video .cap .lab, .v4-mlsn-video .cap .dur { background: rgba(15,27,34,0.7); color: #F5ECDA; padding: 3px 8px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 2px; } .v4-mlsn-video .cap .lab { color: #ECA608; } .v4-mlsn-video .bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(245,236,218,0.18); } .v4-mlsn-video .bar .fill { width: 42%; height: 100%; background: var(--sg-gamboge); } /* Chip tabs row */ .v4-mlsn-chips { position: sticky; top: calc(56px + (100vw * 9 / 16)); z-index: 19; background: #FFFFFF; border-bottom: 1px solid rgba(15,27,34,0.06); padding: 12px 14px; display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .v4-mlsn-chips::-webkit-scrollbar { display: none; } .v4-mlsn-chip { flex-shrink: 0; background: #FBF6EC; border: 1px solid rgba(15,27,34,0.1); padding: 8px 14px; border-radius: 999px; font-family: var(--sg-font-body); font-weight: 600; font-size: 13px; color: var(--sg-fg-muted); cursor: pointer; } .v4-mlsn-chip.on { background: var(--sg-astral); border-color: var(--sg-astral); color: #fff; } .v4-mlsn-chip .ct { margin-left: 4px; opacity: 0.6; font-weight: 500; font-size: 11.5px; } /* Lesson body */ .v4-mlsn-body { padding: 18px 18px 80px; } .v4-mlsn-head h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; line-height: 1.18; letter-spacing: -0.008em; margin: 0 0 6px; color: var(--sg-fg); text-wrap: pretty; } .v4-mlsn-head .meta { font-size: 12.5px; color: var(--sg-fg-subtle); margin: 0 0 22px; } .v4-mlsn-head .meta span { opacity: 0.4; margin: 0 5px; } /* Notes (default tab) */ .v4-mlsn-notes { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.07); border-radius: 2px; padding: 14px 14px 6px; } .v4-mlsn-notes .lab { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 0 0 10px; } .v4-mlsn-notes ul { list-style: none; padding: 0; margin: 0; } .v4-mlsn-notes li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(15,27,34,0.05); align-items: baseline; } .v4-mlsn-notes li:last-child { border-bottom: none; } .v4-mlsn-notes li .t { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--sg-astral); font-weight: 600; } .v4-mlsn-notes li .n { font-size: 14px; line-height: 1.45; color: var(--sg-fg); } /* My-notes (your private notes for this lesson) */ .v4-mlsn-mynotes { margin-top: 18px; background: #FFFFFF; border: 1px solid rgba(15,27,34,0.07); border-radius: 2px; padding: 16px; } .v4-mlsn-mynotes .lab { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 10px; display: flex; justify-content: space-between; } .v4-mlsn-mynotes .lab span { color: var(--sg-fg-subtle); font-weight: 500; letter-spacing: 0.04em; text-transform: none;} .v4-mlsn-mynotes .entry { border-left: 2px solid var(--sg-gamboge); padding: 6px 0 6px 12px; margin-bottom: 12px; } .v4-mlsn-mynotes .entry .at { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--sg-burnt-umber); font-weight: 600; } .v4-mlsn-mynotes .entry p { font-family: var(--sg-font-display); font-style: normal; font-size: 14px; line-height: 1.5; color: var(--sg-fg); margin: 4px 0 0; } .v4-mlsn-mynotes .add { display: flex; align-items: center; gap: 8px; background: #FBF6EC; border: 1px dashed rgba(138,90,68,0.35); color: var(--sg-burnt-umber); padding: 10px 12px; border-radius: 2px; font-family: var(--sg-font-body); font-size: 13px; font-weight: 600; cursor: pointer; width: 100%; text-align: left; } /* Outline drawer (overlay) */ .v4-mlsn-fab { position: absolute; right: 16px; bottom: 16px; z-index: 25; display: inline-flex; align-items: center; gap: 6px; background: var(--sg-astral-shade-90); color: #F5ECDA; border: none; padding: 12px 16px; border-radius: 999px; font-family: var(--sg-font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; box-shadow: 0 8px 24px rgba(15,27,34,0.32); cursor: pointer; } .v4-mlsn-fab .progress { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); padding: 1px 6px; border-radius: 999px; font-size: 11px; letter-spacing: 0; } .v4-mlsn-drawer-scrim { position: absolute; inset: 0; background: rgba(15,27,34,0.5); z-index: 40; display: flex; align-items: flex-end; } .v4-mlsn-drawer { background: #FFFFFF; width: 100%; border-radius: 14px 14px 0 0; padding: 8px 0 20px; max-height: 84%; display: flex; flex-direction: column; overflow: hidden; } .v4-mlsn-drawer-handle { width: 44px; height: 4px; border-radius: 2px; background: rgba(15,27,34,0.16); margin: 6px auto 14px; flex-shrink: 0; } .v4-mlsn-drawer-head { padding: 0 18px 14px; border-bottom: 1px solid rgba(15,27,34,0.06); flex-shrink: 0; } .v4-mlsn-drawer-head .kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 4px; } .v4-mlsn-drawer-head h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.005em; margin: 0; color: var(--sg-fg); } .v4-mlsn-drawer-head .sub { font-size: 12.5px; color: var(--sg-fg-muted); margin: 4px 0 0; } .v4-mlsn-drawer-list { padding: 8px 18px 0; overflow-y: auto; flex: 1; } .v4-mlsn-drawer-list ul { list-style: none; padding: 0; margin: 0; } .v4-mlsn-drawer-list li { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(15,27,34,0.05); } .v4-mlsn-drawer-list li .mk { width: 22px; height: 22px; border-radius: 50%; background: rgba(79,122,74,0.14); color: #355A30; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .v4-mlsn-drawer-list li.current .mk { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); } .v4-mlsn-drawer-list li.upcoming .mk { background: #FBF6EC; color: var(--sg-fg-subtle); border: 1px solid rgba(15,27,34,0.1); } .v4-mlsn-drawer-list li .t { font-size: 14.5px; font-family: var(--sg-font-display); font-weight: 500; color: var(--sg-fg); line-height: 1.3; } .v4-mlsn-drawer-list li .t .wk { display: block; font-family: var(--sg-font-body); font-style: normal; font-weight: 600; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-fg-subtle); margin-bottom: 2px; } .v4-mlsn-drawer-list li.current .t .wk { color: var(--sg-burnt-umber); } .v4-mlsn-drawer-list li .when { font-size: 11.5px; color: var(--sg-fg-subtle); } /* Mobile lesson Q&A on the panel */ .v4-mlsn-qa { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.07); border-radius: 2px; padding: 14px 14px; } .v4-mlsn-qa .lab { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 0 0 12px; } .v4-mlsn-qa-item { padding: 12px 0; border-bottom: 1px solid rgba(15,27,34,0.05);} .v4-mlsn-qa-item:last-child { border-bottom: none; } .v4-mlsn-qa-item .q { font-family: var(--sg-font-display); font-style: normal; font-size: 15px; line-height: 1.4; color: var(--sg-fg); margin: 0 0 6px; } .v4-mlsn-qa-item .who { font-size: 11px; color: var(--sg-fg-subtle); margin: 0 0 4px; } .v4-mlsn-qa-item .a { font-size: 13.5px; line-height: 1.45; color: var(--sg-fg-muted); margin: 0; } .v4-mlsn-ask { margin-top: 14px; padding: 12px; background: #FBF6EC; border-radius: 2px; border: 1px solid rgba(15,27,34,0.06); font-size: 13px; color: var(--sg-fg-muted); font-family: var(--sg-font-display); font-style: normal; text-align: center; cursor: pointer; } .v4-mlsn-ask b { color: var(--sg-astral); font-style: normal; font-weight: 600; } /* Responsive collapse */ @media (max-width: 900px) { .v4-flow-intro-inner { grid-template-columns: 1fr; gap: 32px; } .v4-flow-intro-meta { border-left: none; padding-left: 0; padding-top: 20px; border-top: 1px solid var(--sg-soft-sand); } .v4-flow-rail-inner { overflow-x: auto; padding-bottom: 6px; } .v4-flow-step + .v4-flow-step::before { width: 18px; margin-right: 8px; } .v4-flow-step { flex: none; } .v4-auth, .v4-res { grid-template-columns: 1fr; } .v4-auth-left, .v4-auth-right, .v4-res-main, .v4-res-side { padding: 40px 28px; } .v4-hold-inner { grid-template-columns: 1fr; } .v4-wait-main { grid-template-columns: 1fr; gap: 40px; padding: 40px 24px 60px;} .v4-wait-side { position: static; } .v4-mail-body, .v4-mail-meta { padding-left: 28px; padding-right: 28px; } .v4-flow-stage-screen { border-radius: 0; box-shadow: none; } } /* ---- end v4_flows.css ---- */ /* ---- begin v4_footer.css ---- */ /* ============================================================================ v4_footer.css — shared layout for the quiet footer-link pages: Mission · Press · Privacy · Volunteer. Used by EN and AR peers alike (RTL handled by v4_ar.css variable swap + dir="rtl"). ========================================================================== */ .fp-hero { background: linear-gradient(180deg, #F8F4EC 0%, #F1E7D2 100%); border-bottom: 1px solid var(--sg-soft-sand); padding: 88px 0 64px; } .fp-hero-inner { max-width: 880px; margin: 0 auto; padding: 0 40px; } .fp-hero .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 20px; display: inline-flex; align-items: center; gap: 14px; } .fp-hero .kicker::before { content: ''; width: 28px; height: 1px; background: var(--sg-burnt-umber); } .fp-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(36px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.016em; margin: 0 0 20px; color: var(--sg-fg); text-wrap: balance; } .fp-hero h1 em { font-style: normal; color: var(--sg-burnt-umber); font-weight: 400; } .fp-hero .lede { font-size: 20px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; font-weight: 300; max-width: 62ch; } .fp-body { max-width: 880px; margin: 0 auto; padding: 72px 40px 120px; } .fp-section { margin: 0 0 56px; } .fp-section:last-child { margin-bottom: 0; } .fp-section > h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 28px; letter-spacing: -0.01em; margin: 0 0 18px; color: var(--sg-fg); line-height: 1.2; } .fp-section p { font-size: 17px; line-height: 1.68; color: var(--sg-fg); margin: 0 0 18px; max-width: 64ch; } .fp-section p.muted { color: var(--sg-fg-muted); } .fp-section p b { font-weight: 600; } .fp-section a.inline { color: var(--sg-astral); text-decoration: none; border-bottom: 1px solid rgba(48,112,142,0.3); } .fp-section a.inline:hover { border-bottom-color: var(--sg-astral); } /* Pull quote / verse */ .fp-pull { font-family: var(--sg-font-display); font-style: normal; font-weight: 400; font-size: 24px; line-height: 1.4; color: var(--sg-astral-shade-30); margin: 36px 0; padding: 18px 0 0 0; border-top: 2px solid var(--sg-gamboge); max-width: 60ch; } [dir="rtl"] .fp-pull { padding: 18px 0 0 0; border-right: none; border-top: 2px solid var(--sg-gamboge); font-style: normal; } /* Principle / value list */ .fp-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; } .fp-list > li { padding-left: 26px; position: relative; } [dir="rtl"] .fp-list > li { padding-left: 0; padding-right: 26px; } .fp-list > li::before { content: ''; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; background: var(--sg-gamboge); border-radius: 50%; } [dir="rtl"] .fp-list > li::before { left: auto; right: 0; } .fp-list h3 { font-family: var(--sg-font-display); font-weight: 600; font-size: 18px; margin: 0 0 5px; color: var(--sg-fg); } .fp-list p { font-size: 15.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; } /* Two-column meta cards (press contacts, facts) */ .fp-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 24px; } .fp-card { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 24px 26px; } .fp-card .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 10px; } .fp-card h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 20px; margin: 0 0 8px; color: var(--sg-fg); } .fp-card p { font-size: 15px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 6px; } .fp-card a { color: var(--sg-astral); text-decoration: none; font-size: 15px; } /* Numbered facts row */ .fp-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 32px 0; padding: 28px 0; border-top: 1px solid var(--sg-soft-sand); border-bottom: 1px solid var(--sg-soft-sand); } .fp-fact .n { font-family: var(--sg-font-display); font-weight: 500; font-size: 36px; color: var(--sg-astral-shade-30); line-height: 1; display: block; margin-bottom: 8px; } .fp-fact .l { font-size: 13.5px; color: var(--sg-fg-muted); line-height: 1.4; } /* Privacy — definition rows */ .fp-defs { margin: 24px 0 0; } .fp-def { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid rgba(15,27,34,0.07); } .fp-def:last-child { border-bottom: none; } .fp-def dt { font-family: var(--sg-font-display); font-weight: 600; font-size: 17px; color: var(--sg-fg); } .fp-def dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--sg-fg-muted); } /* CTA block */ .fp-cta { background: var(--sg-astral-shade-70); color: #F5ECDA; border-radius: 2px; padding: 44px 48px; margin-top: 16px; } .fp-cta h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 28px; margin: 0 0 12px; color: #F5ECDA; } .fp-cta p { font-size: 16px; line-height: 1.6; color: rgba(245,236,218,0.82); margin: 0 0 24px; max-width: 56ch; } .fp-cta a { display: inline-block; background: var(--sg-gamboge); color: #1A1205; font-weight: 600; font-size: 15px; padding: 13px 26px; border-radius: 3px; text-decoration: none; } .fp-updated { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--sg-soft-sand); font-family: var(--sg-font-display); font-style: normal; font-size: 14.5px; color: var(--sg-fg-subtle); } [dir="rtl"] .fp-updated { font-style: normal; } @media (max-width: 720px) { .fp-cards, .fp-facts { grid-template-columns: 1fr 1fr; } .fp-def { grid-template-columns: 1fr; gap: 6px; } .fp-cta { padding: 32px 28px; } } /* ---- end v4_footer.css ---- */ /* ---- begin v4_give.css ---- */ /* ========================================================================== v4_give.css — Pass 4 · Give / Zakat (the donor flow) -------------------------------------------------------------------------- The Prophetic model: knowledge given freely, supported by the community. A donation surface with frequency toggle, amount tiers, a Zakat path, and the "your gift funds another seeker's scholar" mandate. No scarcity, no pressure. Reuses chrome + role-swap from v4_library.css. Mirrors by dir. NOTE: this is v4_give.css for Pass 4 — distinct from the legacy give styles. ========================================================================== */ .gv-hero { background: linear-gradient(180deg, var(--sg-astral-shade-90), var(--sg-astral-shade-70)); color: #F5ECDA; } .gv-hero-inner { max-width: 1080px; margin: 0 auto; padding: 60px 40px 52px; text-align: center; } .gv-kicker { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 18px; } [dir="rtl"] .gv-kicker { letter-spacing: 0; } .gv-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(32px,4.4vw,52px); line-height: 1.05; letter-spacing: -0.014em; color: #FBF6EC; margin: 0 auto 18px; max-width: 22ch; text-wrap: balance; } [dir="rtl"] .gv-hero h1 { letter-spacing: 0; line-height: 1.28; } .gv-hero .lede { font-family: var(--sg-font-read); font-size: 18.5px; line-height: 1.55; color: rgba(245,236,218,0.86); margin: 0 auto; max-width: 56ch; text-wrap: pretty; } .gv-layout { max-width: 1080px; margin: 0 auto; padding: 48px 40px 80px; display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; } @media (max-width: 880px){ .gv-layout { grid-template-columns: 1fr; gap: 40px; } } /* the donation panel */ .gv-panel { background: #fff; border: 1px solid rgba(15,27,34,0.12); border-top: 2px solid var(--sg-gamboge); border-radius: 2px; padding: 28px 30px; position: sticky; top: 20px; } @media (max-width: 880px){ .gv-panel { position: static; order: -1; } } .gv-panel h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 24px; color: var(--sg-fg); margin: 0 0 18px; } .gv-freq { display: flex; background: #FBF7EF; border: 1px solid rgba(15,27,34,0.12); border-radius: 999px; padding: 4px; margin-bottom: 22px; } .gv-freq button { flex: 1; font-family: var(--sg-font-ui); font-size: 13.5px; font-weight: 600; border: none; background: transparent; color: var(--sg-fg-muted); padding: 9px 14px; border-radius: 999px; cursor: pointer; transition: all 150ms var(--sg-ease); } .gv-freq button.on { background: var(--sg-astral); color: #fff; } .gv-amounts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 16px; } .gv-amt { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; color: var(--sg-fg); background: #fff; border: 1.5px solid rgba(15,27,34,0.16); border-radius: 2px; padding: 16px 8px; cursor: pointer; text-align: center; transition: all 150ms var(--sg-ease); unicode-bidi: isolate; } .gv-amt:hover { border-color: var(--sg-astral); } .gv-amt.on { border-color: var(--sg-gamboge); background: #FBF6EC; color: var(--gold-ink); } .gv-amt .per { display: block; font-family: var(--sg-font-ui); font-size: 11px; font-weight: 600; color: var(--sg-fg-subtle); margin-top: 3px; } .gv-other { width: 100%; box-sizing: border-box; font-family: var(--sg-font-ui); font-size: 15px; padding: 13px 16px; border: 1px solid rgba(15,27,34,0.18); border-radius: 2px; margin-bottom: 18px; } .gv-other:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 1px; border-color: var(--sg-astral); } .gv-give-btn { width: 100%; font-family: var(--sg-font-ui); font-weight: 700; font-size: 16px; background: var(--sg-gamboge); color: var(--sg-astral-shade-90); border: none; border-radius: 2px; padding: 15px; cursor: pointer; transition: background 150ms; } .gv-give-btn:hover { background: #f6c054; } .gv-zakat-row { text-align: center; margin-top: 16px; } .gv-zakat-link { font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; color: var(--sg-astral); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: none; } .gv-assure { font-family: var(--sg-font-ui); font-size: 12.5px; color: var(--sg-fg-subtle); text-align: center; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(15,27,34,0.08); line-height: 1.5; } /* left column — the case, as mission not pitch */ .gv-case section { margin-bottom: 36px; } .gv-case section:last-child { margin-bottom: 0; } .gv-case h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 26px; line-height: 1.14; color: var(--sg-fg); margin: 0 0 14px; } .gv-case h2::before { content: ''; display: block; width: 38px; height: 2px; background: var(--sg-gamboge); margin-bottom: 16px; } .gv-case p { font-family: var(--sg-font-read); font-size: 17.5px; line-height: 1.62; color: var(--sg-ink, var(--sg-fg)); margin: 0 0 16px; text-wrap: pretty; } [dir="rtl"] .gv-case p { line-height: 2.0; } /* impact line items */ .gv-impact { list-style: none; margin: 0; padding: 0; } .gv-impact li { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(15,27,34,0.08); align-items: baseline; } .gv-impact li:last-child { border-bottom: none; } .gv-impact .amt { font-family: var(--sg-font-display); font-weight: 600; font-size: 20px; color: var(--gold-ink); unicode-bidi: isolate; } .gv-impact .what { font-family: var(--sg-font-read); font-size: 15.5px; line-height: 1.5; color: var(--sg-fg); } /* zakat note */ .gv-zakat-note { background: #FBF7EF; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 22px 24px; margin-top: 8px; } .gv-zakat-note h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 19px; color: var(--sg-fg); margin: 0 0 8px; } .gv-zakat-note p { font-family: var(--sg-font-read); font-size: 15px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; } /* ---- end v4_give.css ---- */ /* ---- begin v4_home.css ---- */ /* ========================================================================== v4_home.css — Pass 4 · Institutional Home (Direction V · Seminary Companion) -------------------------------------------------------------------------- The front door. Cream paper, broadsheet type, dotted-rule dividers, Roman- numeral pillar grammar. Holds two registers at once — institutional (term, faculty, pillars, donor) and companion (where are you on your path, the scholar beside you). Reuses the bilingual chrome (.v4-lib-*) and the [dir="rtl"] type re-voicing from v4_library.css (load it first). Pass-1 type/colour obeyed: reading face on prose, display on headings, UI sans on chrome; gamboge is decoration only, gold-ink for any gold TEXT, astral for links. Logical properties throughout. No countdown, no scarcity. ========================================================================== */ /* skip link */ .v4-skip { position: absolute; inset-inline-start: 16px; inset-block-start: -48px; z-index: 60; background: var(--sg-astral); color: #fff; font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 2px; text-decoration: none; transition: inset-block-start 140ms; } .v4-skip:focus { inset-block-start: 16px; outline: 2px solid var(--sg-gamboge); outline-offset: 2px; } /* shared dotted rule */ .v4-h-rule { border: none; border-block-start: 1px dotted var(--sg-rule, #E5D3B3); margin: 0; } /* dignified portrait monogram (commissioned-photo placeholder, never AI) */ .v4-h-portrait { display: flex; align-items: center; justify-content: center; color: #F5ECDA; font-family: var(--sg-font-display); font-weight: 600; line-height: 1; overflow: hidden; } [dir="rtl"] .v4-h-portrait { font-family: "Riwaya", serif; } /* numbers forced LTR under RTL (prayer times, money) */ .ltr-iso { unicode-bidi: isolate; direction: ltr; font-variant-numeric: tabular-nums; } /* ── 2 · DUAL HERO ─────────────────────────────────────────────────────── */ .v4-h-hero { background: var(--sg-paper, #FBF7EF); } .v4-h-hero-inner { max-width: 880px; margin: 0 auto; padding: 72px 40px 64px; text-align: center; } .v4-h-eyebrow { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 22px; } [dir="rtl"] .v4-h-eyebrow { letter-spacing: 0; } .v4-h-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(38px, 5.4vw, 54px); line-height: 1.04; letter-spacing: -0.016em; color: var(--sg-fg); margin: 0 0 18px; text-wrap: balance; } [dir="rtl"] .v4-h-hero h1 { letter-spacing: 0; line-height: 1.24; } .v4-h-subframe { font-family: var(--sg-font-read); font-size: clamp(19px, 2.4vw, 22px); line-height: 1.4; color: var(--sg-fg); margin: 0 auto 14px; max-width: 30ch; text-wrap: balance; } .v4-h-dek { font-family: var(--sg-font-read); font-size: 18px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 auto 40px; max-width: 56ch; text-wrap: pretty; } /* the two doors */ .v4-h-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin: 0 auto; text-align: start; } @media (max-width: 680px){ .v4-h-doors { grid-template-columns: 1fr; } } .v4-h-door { border-radius: 2px; padding: 30px 30px 32px; display: flex; flex-direction: column; } .v4-h-door .k { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 12px; } [dir="rtl"] .v4-h-door .k { letter-spacing: 0; } .v4-h-door h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 25px; line-height: 1.16; color: var(--sg-fg); margin: 0 0 10px; } .v4-h-door p { font-family: var(--sg-font-read); font-size: 15px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 22px; flex: 1; } .v4-h-door .btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; font-family: var(--sg-font-ui); font-size: 14.5px; font-weight: 600; border-radius: 2px; padding: 12px 22px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; } .v4-h-door .btn .arrow { transition: transform 150ms; } .v4-h-door .btn:hover .arrow { transform: translateX(3px); } [dir="rtl"] .v4-h-door .btn .arrow { transform: scaleX(-1); } [dir="rtl"] .v4-h-door .btn:hover .arrow { transform: scaleX(-1) translateX(3px); } /* Door A — institutional */ .v4-h-door.inst { background: #fff; border: 1px solid var(--sg-fg); } .v4-h-door.inst .k { color: var(--sg-fg-muted); } .v4-h-door.inst .btn { background: var(--sg-astral-shade-90); color: #FBF6EC; border-color: var(--sg-astral-shade-90); } .v4-h-door.inst .btn:hover { background: #0F1B22; } /* Door B — companion */ .v4-h-door.comp { background: var(--sg-paper-alt, #F8F4EC); border: 1px solid var(--sg-gamboge); border-block-start: 3px solid var(--sg-gamboge); } .v4-h-door.comp .k { color: var(--gold-ink); } .v4-h-door.comp .btn { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); border-color: var(--sg-gamboge); } .v4-h-door.comp .btn:hover { background: #f6c054; } /* ── 3 · CONTINUE YOUR PATH strip ──────────────────────────────────────── */ .v4-h-continue { background: var(--sg-paper-alt, #F8F4EC); border-block: 1px solid rgba(15,27,34,0.12); } .v4-h-continue-inner { max-width: 1180px; margin: 0 auto; padding: 30px 40px 38px; } .v4-h-greeting { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); margin: 0 0 18px; text-align: end; } [dir="rtl"] .v4-h-greeting { text-align: start; } .v4-h-greeting b { color: var(--sg-fg); font-weight: 600; } .v4-h-cont-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 18px; align-items: stretch; } @media (max-width: 900px){ .v4-h-cont-grid { grid-template-columns: 1fr; } } .v4-h-cont-card { background: #fff; border: 1px solid rgba(15,27,34,0.12); border-radius: 2px; padding: 22px 24px; display: flex; flex-direction: column; } .v4-h-cont-card.main { border-color: var(--sg-gamboge); } .v4-h-cl { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 8px; } [dir="rtl"] .v4-h-cl { letter-spacing: 0; } .v4-h-cont-card.main h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 23px; line-height: 1.18; color: var(--sg-fg); margin: 0 0 8px; } .v4-h-cont-meta { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); margin: 0 0 16px; } .v4-h-prog { height: 6px; border-radius: 999px; background: rgba(15,27,34,0.1); overflow: hidden; margin-bottom: 18px; } .v4-h-prog .fill { height: 100%; background: var(--sg-gamboge); border-radius: 999px; } .v4-h-cont-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; } .v4-h-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; border-radius: 2px; padding: 10px 18px; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; } .v4-h-btn.primary { background: var(--sg-astral); color: #fff; border-color: var(--sg-astral); } .v4-h-btn.primary:hover { background: var(--sg-astral-shade-30); } .v4-h-btn.ghost { background: transparent; color: var(--sg-astral); border-color: rgba(48,112,142,0.4); } .v4-h-btn.ghost:hover { border-color: var(--sg-astral); } /* scholar side card */ .v4-h-scholar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .v4-h-scholar-row .av { width: 36px; height: 36px; border-radius: 50%; flex: none; font-size: 13px; } .v4-h-scholar-row .nm { font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; color: var(--sg-fg); margin: 0; } .v4-h-scholar-row .sp { font-family: var(--sg-font-ui); font-size: 12px; color: var(--sg-fg-muted); margin: 0; } .v4-h-scholar-note { font-family: var(--sg-font-read); font-size: 14.5px; line-height: 1.5; color: var(--sg-fg); margin: 0 0 16px; } /* prayer side card */ .v4-h-prayers { list-style: none; margin: 0 0 4px; padding: 0; } .v4-h-prayers li { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-family: var(--sg-font-ui); font-size: 14px; color: var(--sg-fg); border-block-end: 1px solid rgba(15,27,34,0.06); } .v4-h-prayers li:last-child { border-block-end: none; } .v4-h-prayers li .nm { color: var(--sg-fg-muted); } .v4-h-prayers li.now { font-weight: 700; } .v4-h-prayers li.now .nm { color: var(--gold-ink); } .v4-h-prayers li.now .tm { color: var(--gold-ink); } /* RTL type roles are handled centrally in v4_library.css (variable-level role swap + chrome-exclusion list) — no per-page font guards needed here. */ /* ── 4 · FACULTY band ──────────────────────────────────────────────────── */ .v4-h-faculty { background: var(--sg-paper, #FBF7EF); } .v4-h-faculty-inner { max-width: 1080px; margin: 0 auto; padding: 80px 40px; text-align: center; } .v4-h-eyebrow-ruled { display: inline-flex; align-items: center; gap: 16px; font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 18px; } [dir="rtl"] .v4-h-eyebrow-ruled { letter-spacing: 0; } .v4-h-eyebrow-ruled::before, .v4-h-eyebrow-ruled::after { content: ''; width: 34px; height: 1px; background: var(--sg-gamboge); } .v4-h-faculty h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 34px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 14px; text-wrap: balance; } [dir="rtl"] .v4-h-faculty h2 { letter-spacing: 0; line-height: 1.3; } .v4-h-faculty .dek { font-family: var(--sg-font-read); font-size: 17px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 auto 44px; max-width: 58ch; text-wrap: pretty; } .v4-h-circles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-bottom: 40px; } @media (max-width: 760px){ .v4-h-circles { grid-template-columns: 1fr 1fr; gap: 28px 24px; } } .v4-h-circle { display: flex; flex-direction: column; align-items: center; gap: 12px; } .v4-h-circle .av { width: 110px; height: 110px; border-radius: 50%; aspect-ratio: 1/1; font-size: 34px; } @media (max-width: 760px){ .v4-h-circle .av { width: 96px; height: 96px; } } .v4-h-circle .nm { font-family: var(--sg-font-read); font-size: 15px; font-weight: 500; color: var(--sg-fg); margin: 0; line-height: 1.3; text-wrap: balance; } .v4-h-circle .sp { font-family: var(--sg-font-ui); font-size: 12px; color: var(--sg-fg-muted); margin: 0; } .v4-h-meetall { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; color: var(--sg-astral); text-decoration: none; border: 1px solid rgba(48,112,142,0.4); border-radius: 2px; padding: 11px 22px; } .v4-h-meetall:hover { border-color: var(--sg-astral); } .v4-h-meetall .arrow { transition: transform 150ms; } .v4-h-meetall:hover .arrow { transform: translateX(3px); } [dir="rtl"] .v4-h-meetall .arrow { transform: scaleX(-1); } [dir="rtl"] .v4-h-meetall:hover .arrow { transform: scaleX(-1) translateX(3px); } /* ── 5 · THREE PILLARS ─────────────────────────────────────────────────── */ .v4-h-pillars { background: var(--sg-paper-alt, #F8F4EC); border-block-start: 1px dotted var(--sg-rule, #E5D3B3); } .v4-h-pillars-inner { max-width: 1180px; margin: 0 auto; padding: 72px 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 820px){ .v4-h-pillars-inner { grid-template-columns: 1fr; } } .v4-h-pillar { background: #fff; border: 1px solid rgba(15,27,34,0.12); border-radius: 2px; padding: 30px 32px 28px; display: flex; flex-direction: column; } .v4-h-pillar .rn { font-family: var(--sg-font-display); font-weight: 600; font-size: 42px; line-height: 1; color: var(--sg-gamboge); margin: 0 0 16px; } .v4-h-pillar h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 25px; line-height: 1.15; color: var(--sg-fg); margin: 0 0 12px; } .v4-h-pillar p { font-family: var(--sg-font-read); font-size: 16px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 22px; flex: 1; } .v4-h-pillar .open { font-family: var(--sg-font-ui); font-size: 13px; font-weight: 600; color: var(--sg-astral); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; } .v4-h-pillar .open .arrow { transition: transform 150ms; } .v4-h-pillar .open:hover .arrow { transform: translateX(3px); } [dir="rtl"] .v4-h-pillar .open .arrow { transform: scaleX(-1); } [dir="rtl"] .v4-h-pillar .open:hover .arrow { transform: scaleX(-1) translateX(3px); } /* ── 6 · A SEEKER'S WORD ───────────────────────────────────────────────── */ .v4-h-word { background: var(--sg-paper-alt, #F8F4EC); border-block: 1px solid rgba(15,27,34,0.12); } .v4-h-word-inner { max-width: 760px; margin: 0 auto; padding: 72px 40px; text-align: center; } .v4-h-word .v4-h-eyebrow { margin-bottom: 26px; } .v4-h-word blockquote { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.28; letter-spacing: -0.01em; color: var(--sg-fg); margin: 0 auto 22px; max-width: 32ch; text-wrap: balance; } [dir="rtl"] .v4-h-word blockquote { letter-spacing: 0; line-height: 1.5; } .v4-h-word .cite { font-family: var(--sg-font-ui); font-size: 14px; color: var(--sg-fg-muted); } /* ── 7 · DONOR band ────────────────────────────────────────────────────── */ .v4-h-donor { background: var(--sg-astral); color: #F5ECDA; } .v4-h-donor-inner { max-width: 720px; margin: 0 auto; padding: 76px 40px; text-align: center; } .v4-h-donor .v4-h-eyebrow { color: var(--sg-gamboge); margin-bottom: 18px; } .v4-h-donor h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 34px); line-height: 1.1; color: #FBF6EC; margin: 0 auto 16px; max-width: 24ch; text-wrap: balance; } [dir="rtl"] .v4-h-donor h2 { line-height: 1.3; } .v4-h-donor .dek { font-family: var(--sg-font-read); font-size: 17px; line-height: 1.6; color: rgba(245,236,218,0.86); margin: 0 auto 32px; max-width: 54ch; text-wrap: pretty; } .v4-h-donate { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; } .v4-h-donate .amt { font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; border-radius: 2px; padding: 13px 26px; cursor: pointer; border: 1.5px solid var(--sg-gamboge); background: var(--sg-gamboge); color: var(--sg-astral-shade-90); } .v4-h-donate .amt:hover { background: #f6c054; border-color: #f6c054; } .v4-h-donate .amt.other { background: transparent; color: #FBF6EC; border-color: rgba(245,236,218,0.5); } .v4-h-donate .amt.other:hover { background: rgba(255,255,255,0.06); border-color: #F5ECDA; } .v4-h-zakat { font-family: var(--sg-font-ui); font-size: 14px; color: rgba(245,236,218,0.86); text-decoration: underline; text-underline-offset: 3px; } .v4-h-zakat:hover { color: #FBF6EC; } /* focus state — astral, everywhere on the home */ .v4-h-hero a:focus-visible, .v4-h-door .btn:focus-visible, .v4-h-btn:focus-visible, .v4-h-meetall:focus-visible, .v4-h-pillar .open:focus-visible, .v4-h-donate .amt:focus-visible, .v4-h-zakat:focus-visible, .v4-h-circle a:focus-visible { outline: 2px solid var(--sg-astral); outline-offset: 2px; border-radius: 2px; } .v4-h-donor a:focus-visible, .v4-h-donate .amt:focus-visible { outline-color: #FBF6EC; } /* ---- end v4_home.css ---- */ /* ---- begin v4_home_v.css ---- */ /* ============================================================================ v4_home_v.css — Pass 4 · Institutional Home (Direction V · Seminary Companion) -------------------------------------------------------------------------- The front door. Holds two registers in one composition: institutional (term, faculty, pillars, donor) and companion (your path, your scholar). Cream paper, broadsheet type, dotted rules, Roman-numeral pillars. Reuses the bilingual chrome (.v4-lib-*) + [dir="rtl"] type re-voicing from v4_library.css. Logical CSS throughout; one source mirrors by direction. Pass-1 discipline: reading face on prose, display on headings, ui on chrome; gold is decoration only, gold-ink for any gold text, astral for links. ============================================================================ */ /* a11y utilities */ .skip { position: absolute; inset-inline-start: 12px; inset-block-start: -48px; z-index: 80; background: var(--sg-astral); color: #fff; padding: 10px 16px; border-radius: 2px; font-family: var(--sg-font-ui); font-weight: 600; transition: inset-block-start 160ms; } .skip:focus { inset-block-start: 12px; } .ltr-iso { unicode-bidi: isolate; direction: ltr; } .v4-hm :is(section, header) :focus-visible { outline: 2px solid var(--sg-astral); outline-offset: 2px; } .v4-hm { background: #FBF7EF; } /* shared monogram portrait — commissioned-photo placeholder, never AI */ .v4-hm-mono { display: flex; align-items: center; justify-content: center; color: #FBF6EC; font-family: var(--sg-font-display); font-weight: 600; line-height: 1; } [dir="rtl"] .v4-hm-mono { font-family: "Riwaya", serif; } /* ── 2 · Dual hero ─────────────────────────────────────────────────────── */ .v4-hm-hero { background: #FBF7EF; text-align: center; padding: 64px 40px 56px; } .v4-hm-hero-inner { max-width: 880px; margin: 0 auto; } .v4-hm-eyebrow { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 20px; } [dir="rtl"] .v4-hm-eyebrow { letter-spacing: 0; } .v4-hm-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(38px, 5.2vw, 54px); line-height: 1.04; letter-spacing: -0.016em; color: var(--sg-fg); margin: 0 0 16px; text-wrap: balance; } [dir="rtl"] .v4-hm-hero h1 { letter-spacing: 0; line-height: 1.25; } .v4-hm-subframe { font-family: var(--sg-font-read); font-size: clamp(19px, 2.4vw, 22px); line-height: 1.4; color: var(--sg-fg); margin: 0 auto 14px; max-width: 30ch; text-wrap: balance; } .v4-hm-dek { font-family: var(--sg-font-read); font-size: 18px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 auto 36px; max-width: 56ch; text-wrap: pretty; } .v4-hm-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; margin: 0 auto; text-align: start; } @media (max-width: 640px){ .v4-hm-doors { grid-template-columns: 1fr; } } .v4-hm-door { border-radius: 2px; padding: 26px 28px 28px; display: flex; flex-direction: column; } .v4-hm-door .lbl { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 10px; } [dir="rtl"] .v4-hm-door .lbl { letter-spacing: 0; } .v4-hm-door h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 24px; line-height: 1.18; color: var(--sg-fg); margin: 0 0 8px; text-wrap: pretty; } .v4-hm-door p { font-family: var(--sg-font-read); font-size: 15px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 20px; flex: 1; } .v4-hm-door .cta { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--sg-font-ui); font-weight: 600; font-size: 14.5px; border-radius: 2px; padding: 11px 20px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; } .v4-hm-door.a { background: #fff; border: 1px solid rgba(15,27,34,0.18); } .v4-hm-door.a .lbl { color: var(--sg-astral); } .v4-hm-door.a .cta { background: var(--sg-astral-shade-90); color: #FBF6EC; border-color: var(--sg-astral-shade-90); } .v4-hm-door.a .cta:hover { background: var(--sg-astral-shade-70); } .v4-hm-door.b { background: #F8F4EC; border: 1px solid rgba(236,166,8,0.45); border-top: 2px solid var(--sg-gamboge); } .v4-hm-door.b .lbl { color: var(--gold-ink); } .v4-hm-door.b .cta { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); border-color: var(--sg-gamboge); } .v4-hm-door.b .cta:hover { background: #f6c054; } /* ── 3 · Continue your path strip ──────────────────────────────────────── */ .v4-hm-continue { background: #F8F4EC; border-block: 1px solid rgba(15,27,34,0.1); padding: 36px 40px; } .v4-hm-continue-inner { max-width: 1180px; margin: 0 auto; } .v4-hm-greet { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); margin: 0 0 18px; text-align: end; } .v4-hm-greet b { color: var(--sg-fg); font-weight: 600; } .v4-hm-cont-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 18px; align-items: stretch; } @media (max-width: 900px){ .v4-hm-cont-grid { grid-template-columns: 1fr; } } .v4-hm-cardw { background: #fff; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 22px 24px; display: flex; flex-direction: column; } .v4-hm-path { border-color: rgba(236,166,8,0.5); border-top: 2px solid var(--sg-gamboge); } .v4-hm-cardk { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 8px; } [dir="rtl"] .v4-hm-cardk { letter-spacing: 0; } .v4-hm-path h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--sg-fg); margin: 0 0 8px; } .v4-hm-path .left { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); margin: 0 0 16px; } .v4-hm-progress { height: 6px; border-radius: 999px; background: rgba(15,27,34,0.1); overflow: hidden; margin-bottom: 18px; } .v4-hm-progress .fill { height: 100%; background: var(--sg-gamboge); border-radius: 999px; } .v4-hm-path-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; } .v4-hm-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sg-font-ui); font-weight: 600; font-size: 14px; border-radius: 2px; padding: 10px 18px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; } .v4-hm-btn.primary { background: var(--sg-astral); color: #fff; border-color: var(--sg-astral); } .v4-hm-btn.primary:hover { background: var(--sg-astral-shade-30); } .v4-hm-btn.ghost { background: transparent; color: var(--sg-astral); border-color: rgba(48,112,142,0.4); } .v4-hm-btn.ghost:hover { border-color: var(--sg-astral); } .v4-hm-scholar .av { width: 36px; height: 36px; border-radius: 50%; font-size: 14px; margin-bottom: 12px; } .v4-hm-scholar .nm { font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; color: var(--sg-fg); margin: 0 0 2px; } .v4-hm-scholar .spec { font-family: var(--sg-font-ui); font-size: 12px; color: var(--sg-fg-muted); margin: 0 0 12px; } .v4-hm-scholar .note { font-family: var(--sg-font-read); font-size: 14.5px; line-height: 1.5; color: var(--sg-fg); margin: 0 0 16px; flex: 1; } [dir="rtl"] .v4-hm-scholar .note { font-family: var(--sg-font-arabic-read); } .v4-hm-prayer .plist { list-style: none; margin: 0; padding: 0; } .v4-hm-prayer li { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-family: var(--sg-font-ui); font-size: 14px; border-bottom: 1px solid rgba(15,27,34,0.06); } .v4-hm-prayer li:last-child { border-bottom: none; } .v4-hm-prayer li .nm { color: var(--sg-fg-muted); } .v4-hm-prayer li .tm { color: var(--sg-fg); font-variant-numeric: tabular-nums; } .v4-hm-prayer li.now .nm { color: var(--gold-ink); font-weight: 700; } .v4-hm-prayer li.now .tm { color: var(--gold-ink); font-weight: 700; } /* ── 4 · Faculty band ──────────────────────────────────────────────────── */ .v4-hm-faculty { background: #FBF7EF; text-align: center; padding: 72px 40px; } .v4-hm-faculty-inner { max-width: 1000px; margin: 0 auto; } .v4-hm-eyebrow-rules { display: inline-flex; align-items: center; gap: 16px; font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 16px; } [dir="rtl"] .v4-hm-eyebrow-rules { letter-spacing: 0; } .v4-hm-eyebrow-rules::before, .v4-hm-eyebrow-rules::after { content: ''; width: 34px; height: 1px; background: rgba(143,102,4,0.5); } .v4-hm-faculty h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px,3.4vw,34px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 14px; text-wrap: balance; } [dir="rtl"] .v4-hm-faculty h2 { letter-spacing: 0; line-height: 1.3; } .v4-hm-faculty .dek { font-family: var(--sg-font-read); font-size: 17px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 auto 40px; max-width: 56ch; } .v4-hm-circles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-bottom: 40px; } @media (max-width: 720px){ .v4-hm-circles { grid-template-columns: 1fr 1fr; } } .v4-hm-circle .av { width: 100%; aspect-ratio: 1/1; border-radius: 50%; font-size: 30px; margin: 0 auto 14px; max-width: 132px; } .v4-hm-circle .nm { font-family: var(--sg-font-read); font-size: 15px; color: var(--sg-fg); margin: 0 0 2px; } .v4-hm-circle .spec { font-family: var(--sg-font-ui); font-size: 12px; color: var(--sg-fg-muted); margin: 0; } .v4-hm-alllink { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; color: var(--sg-astral); text-decoration: none; border: 1px solid rgba(48,112,142,0.4); border-radius: 2px; padding: 10px 20px; } .v4-hm-alllink:hover { border-color: var(--sg-astral); } .v4-hm-alllink .arrow { transition: transform 150ms; } .v4-hm-alllink:hover .arrow { transform: translateX(3px); } [dir="rtl"] .v4-hm-alllink .arrow { transform: scaleX(-1); } [dir="rtl"] .v4-hm-alllink:hover .arrow { transform: scaleX(-1) translateX(3px); } /* ── 5 · Three Pillars ─────────────────────────────────────────────────── */ .v4-hm-pillars { background: #F8F4EC; border-block: 1px solid rgba(15,27,34,0.08); padding: 64px 40px; } .v4-hm-pillars-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 820px){ .v4-hm-pillars-inner { grid-template-columns: 1fr; } } .v4-hm-pillar { background: #fff; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 30px 30px 28px; text-decoration: none; display: flex; flex-direction: column; transition: border-color 180ms, transform 180ms, box-shadow 180ms; } .v4-hm-pillar:hover { border-color: var(--sg-astral); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,40,60,0.06); } .v4-hm-pillar .rn { font-family: var(--sg-font-display); font-weight: 500; font-size: 42px; line-height: 1; color: var(--sg-gamboge); margin: 0 0 14px; } .v4-hm-pillar h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 26px; line-height: 1.12; color: var(--sg-fg); margin: 0 0 10px; } .v4-hm-pillar p { font-family: var(--sg-font-read); font-size: 16px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 18px; flex: 1; } .v4-hm-pillar .open { font-family: var(--sg-font-ui); font-size: 13px; font-weight: 600; color: var(--sg-astral); display: inline-flex; align-items: center; gap: 7px; } .v4-hm-pillar .open .arrow { transition: transform 150ms; } .v4-hm-pillar:hover .open .arrow { transform: translateX(3px); } [dir="rtl"] .v4-hm-pillar .open .arrow { transform: scaleX(-1); } [dir="rtl"] .v4-hm-pillar:hover .open .arrow { transform: scaleX(-1) translateX(3px); } /* ── 6 · A Seeker's Word ───────────────────────────────────────────────── */ .v4-hm-word { background: #FBF7EF; border-block: 1px solid rgba(15,27,34,0.08); padding: 72px 40px; text-align: center; } .v4-hm-word-inner { max-width: 760px; margin: 0 auto; } .v4-hm-word .eyebrow { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 26px; } [dir="rtl"] .v4-hm-word .eyebrow { letter-spacing: 0; } .v4-hm-word blockquote { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(26px,3.2vw,32px); line-height: 1.28; letter-spacing: -0.008em; color: var(--sg-fg); margin: 0 auto 22px; max-width: 32ch; text-wrap: balance; } [dir="rtl"] .v4-hm-word blockquote { letter-spacing: 0; line-height: 1.5; } .v4-hm-word cite { font-family: var(--sg-font-ui); font-size: 14px; font-style: normal; color: var(--sg-fg-muted); } /* ── 7 · Donor band ────────────────────────────────────────────────────── */ .v4-hm-donor { background: var(--sg-astral-shade-70); color: #F5ECDA; text-align: center; padding: 72px 40px; } .v4-hm-donor-inner { max-width: 680px; margin: 0 auto; } .v4-hm-donor .eyebrow { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 18px; } [dir="rtl"] .v4-hm-donor .eyebrow { letter-spacing: 0; } .v4-hm-donor h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px,3.6vw,34px); line-height: 1.1; color: #FBF6EC; margin: 0 auto 16px; max-width: 24ch; text-wrap: balance; } [dir="rtl"] .v4-hm-donor h2 { line-height: 1.3; } .v4-hm-donor .dek { font-family: var(--sg-font-read); font-size: 17px; line-height: 1.55; color: rgba(245,236,218,0.86); margin: 0 auto 30px; max-width: 52ch; } .v4-hm-donate-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; } .v4-hm-donate { font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; border-radius: 2px; padding: 13px 24px; cursor: pointer; border: 1.5px solid transparent; } .v4-hm-donate.solid { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); border-color: var(--sg-gamboge); } .v4-hm-donate.solid:hover { background: #f6c054; } .v4-hm-donate.outline { background: transparent; color: #FBF6EC; border-color: rgba(245,236,218,0.5); } .v4-hm-donate.outline:hover { border-color: #F5ECDA; } .v4-hm-zakat { font-family: var(--sg-font-ui); font-size: 14px; color: rgba(245,236,218,0.86); text-decoration: underline; text-underline-offset: 3px; background: none; border: none; cursor: pointer; } .v4-hm-zakat:hover { color: #FBF6EC; } /* ---- end v4_home_v.css ---- */ /* ---- begin v4_letter.css ---- */ /* ========================================================================== The Seekers Letter — newsletter capture (band · slim inline · footer) -------------------------------------------------------------------------- Built on the v4 system: Quarto display, Source Sans UI, Spectral read, sharp 2px radii, gold accent, hairline frames. Calm, not pushy. States (idle / focus / success / error) are toggled by v4_letter.js. ========================================================================== */ /* ---- shared form ---------------------------------------------------------- */ .sg-letter { width: 100%; } .sg-letter-label { display: block; font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-muted); margin: 0 0 9px; } .sg-letter-row { display: flex; gap: 10px; align-items: stretch; } .sg-letter-input { flex: 1 1 auto; min-width: 0; font-family: var(--sg-font-ui); font-size: 16px; line-height: 1.4; padding: 13px 16px; border: 1px solid rgba(15, 27, 34, 0.20); border-radius: 2px; background: #fff; color: var(--sg-fg); transition: border-color 160ms var(--sg-ease), box-shadow 160ms var(--sg-ease); } .sg-letter-input::placeholder { color: var(--sg-fg-subtle); } .sg-letter-input:focus-visible { outline: none; border-color: var(--sg-astral); box-shadow: 0 0 0 3px rgba(48, 112, 142, 0.22); } .sg-letter-submit { flex: 0 0 auto; white-space: nowrap; } /* message (success / error) — hidden until a state is set */ .sg-letter-msg { font-family: var(--sg-font-ui); font-size: 13.5px; line-height: 1.5; margin: 11px 0 0; } .sg-letter:not(.is-error):not(.is-success) .sg-letter-msg { display: none; } .sg-letter.is-error .sg-letter-input { border-color: var(--sg-danger); box-shadow: 0 0 0 3px rgba(168, 69, 47, 0.16); } .sg-letter.is-error .sg-letter-msg { color: var(--sg-danger); } .sg-letter.is-success .sg-letter-row { display: none; } .sg-letter.is-success .sg-letter-label { color: var(--sg-success); } .sg-letter.is-success .sg-letter-msg { color: var(--sg-success); font-size: 15px; font-weight: 600; display: inline-flex; gap: 9px; align-items: baseline; margin-top: 0; } .sg-letter.is-success .sg-letter-msg::before { content: ''; flex: none; width: 8px; height: 8px; transform: translateY(1px); background: var(--sg-gamboge); clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); } /* reassurance line */ .sg-letter-reassure { font-family: var(--sg-font-ui); font-size: 12.5px; letter-spacing: 0.01em; color: var(--sg-fg-subtle); margin: 13px 0 0; } /* course-preselected context (set by v4_letter.js when "be notified" is used) */ .sg-letter-context { font-family: var(--sg-font-ui); font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--sg-astral); margin: 0 auto 18px; max-width: 46ch; padding: 9px 16px; border: 1px solid rgba(48, 112, 142, 0.28); background: rgba(48, 112, 142, 0.06); border-radius: 2px; } [dir="rtl"] .sg-letter-context { font-family: var(--sg-font-arabic); } /* ========================================================================== 1 · DEDICATED BAND (light, sand ground — distinct from cream Answers) ========================================================================== */ .v4-letter-band { background: #F5ECDA; } .v4-letter { max-width: 600px; margin: 0 auto; text-align: center; } .v4-letter .eyebrow { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 16px; display: inline-flex; align-items: center; gap: 11px; justify-content: center; } .v4-letter .eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--sg-gamboge); } .v4-letter h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 14px; text-wrap: pretty; } .v4-letter-sub { font-family: var(--sg-font-read); font-size: 17.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 auto 28px; max-width: 50ch; text-wrap: pretty; } .v4-letter .sg-letter { max-width: 460px; margin: 0 auto; text-align: start; } .v4-letter .sg-letter-reassure { text-align: center; } /* the visually-hidden label on the band + inline (placeholder + heading carry meaning) */ .v4-letter .sg-letter-label, .v4-letter-inline .sg-letter-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== 3 · SLIM INLINE PROMPT (foot of the Answers feed) ========================================================================== */ .v4-letter-inline { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(15, 27, 34, 0.12); display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .v4-letter-inline-label { font-family: var(--sg-font-display); font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--sg-fg); flex: 1 1 240px; margin: 0; } .v4-letter-inline .sg-letter { flex: 1 1 360px; max-width: 440px; } .v4-letter-inline .sg-letter-reassure { display: none; } .v4-letter-inline .sg-letter.is-success .sg-letter-msg { font-size: 14px; } /* ========================================================================== 2 · FOOTER COMPACT (dark ground — first column, under "Begin your path") ========================================================================== */ .v4-foot-letter { margin-top: 26px; max-width: 340px; } .v4-foot-letter .sg-letter-label { color: var(--sg-gamboge); font-size: 11px; letter-spacing: 0.16em; margin-bottom: 10px; } .v4-foot-letter .sg-letter-input { background: rgba(255, 255, 255, 0.06); border-color: rgba(245, 236, 218, 0.24); color: #F5ECDA; font-size: 15px; padding: 11px 14px; } .v4-foot-letter .sg-letter-input::placeholder { color: rgba(245, 236, 218, 0.5); } .v4-foot-letter .sg-letter-input:focus-visible { border-color: var(--sg-gamboge); box-shadow: 0 0 0 3px rgba(236, 166, 8, 0.25); } .v4-foot-letter .sg-letter-submit { padding: 11px 18px; font-size: 13px; } .v4-foot-letter .sg-letter-reassure { color: rgba(245, 236, 218, 0.5); } .v4-foot-letter .sg-letter.is-success .sg-letter-label { color: var(--sg-gamboge); } .v4-foot-letter .sg-letter.is-success .sg-letter-msg { color: var(--sg-gamboge); } .v4-foot-letter .sg-letter.is-success .sg-letter-msg::before { background: var(--sg-gamboge); } .v4-foot-letter .sg-letter.is-error .sg-letter-msg { color: #F0A98F; } .v4-foot-letter .sg-letter.is-error .sg-letter-input { border-color: #F0A98F; box-shadow: 0 0 0 3px rgba(240, 169, 143, 0.18); } /* ========================================================================== RTL — Arabic home ========================================================================== */ [dir="rtl"] .sg-letter-input, [dir="rtl"] .sg-letter-label, [dir="rtl"] .sg-letter-msg, [dir="rtl"] .sg-letter-reassure { font-family: var(--sg-font-arabic); } [dir="rtl"] .sg-letter-label { letter-spacing: 0.04em; } [dir="rtl"] .v4-letter-inline-label { font-family: "Riwaya", serif; } [dir="rtl"] .v4-letter h2 { font-family: "Riwaya", serif; font-weight: 500; letter-spacing: 0; line-height: 1.3; } [dir="rtl"] .v4-letter-sub { font-family: var(--sg-font-arabic); } /* email text itself stays LTR even inside the RTL field */ [dir="rtl"] .sg-letter-input { direction: rtl; text-align: start; } /* ========================================================================== MOBILE — stack the field + button, keep ≥44px tap targets ========================================================================== */ @media (max-width: 720px) { .sg-letter-row { flex-direction: column; } .sg-letter-input { min-height: 44px; } .sg-letter-submit { width: 100%; min-height: 44px; } .v4-letter-inline { gap: 16px; } .v4-letter-inline-label { flex-basis: auto; } } /* ---- end v4_letter.css ---- */ /* ---- begin v4_library.css ---- */ /* ========================================================================== v4_library.css — Integrated bilingual Library (Pass 2) -------------------------------------------------------------------------- ONE repository, three views (All / English / العربية). The view switcher sets BOTH the UI direction AND a content filter over a single shared catalogue. There is no separate _ar page: this component mirrors by direction. Everything below is direction-agnostic (flex/grid + logical properties); the [dir="rtl"] block only re-voices the type stacks. Type/colour obey Pass 1: reading face on prose, display on headings, interface sans on chrome; gold is decoration only, gold-ink for any gold text, astral for links. ========================================================================== */ /* When the switcher flips to Arabic, re-voice ALL THREE type roles by direction at the VARIABLE level — so every component that asks for var(--sg-font-read) / -ui / -display resolves to the right Arabic face with no per-page guard. This is the durable fix: bind the ROLE, let direction flip the variable. (Mirrors the site foundation in v4_ar.css.) */ [dir="rtl"] { --sg-font-display: '29LT Zarid Display', 'Scheherazade New', 'Readex Pro', serif; --sg-font-serif: '29LT Zarid Display', 'Scheherazade New', 'Readex Pro', serif; --sg-font-read: var(--sg-font-arabic-read); /* the missing line — reading role now flips */ --sg-font-ui: var(--sg-font-arabic-ui); --sg-font-body: var(--sg-font-arabic-ui); } /* Long-form prose defaults to the reading face; bare

/

  • included. */ [dir="rtl"] :is(p, li, .v4-lib-blurb, .v4-lib-lede, dd) { font-family: var(--sg-font-arabic-read); } /* CHROME EXCLUSION — labels/eyebrows/meta/nav/buttons built as

    /

  • are chrome, not prose: keep them on the interface sans. ONE centralized list for every Pass 2–4 page, working in BOTH directions — because --sg-font-ui is itself direction-swapped (Söhne in LTR, 29LT Bukra in RTL), a single rule re-voices correctly each way. The leading `html ` lifts specificity to 0-2-1 (one descendant arg in the :is list does the same), so it ties v4.css's LTR prose rule and beats v4_library's RTL prose rule; v4_library loads after v4.css, so it wins the tie. No surface needs its own chrome guard. */ html :is( [class*="eyebrow"], [class*="kicker"], [class*="-meta"], [class*="-cl"], .v4-lib-kicker, .v4-lib-kind, .v4-lib-count, .v4-lib-genre, .v4-bk-genre, .v4-bk-cover .ca, .v4-fed-kicker, .v4-fed-section-h, .v4-fed-card .loc, .v4-fed-founder .role, .v4-sd-crumb, .v4-sd-stream-h .k, .v4-sd-item .it-meta, .v4-td-mast .label, .v4-td-mini .day, .v4-td-prayers li, .v4-rd-crumb, .v4-rd-toc h2, .v4-h-eyebrow, .v4-h-eyebrow-ruled, .v4-h-greeting, .v4-h-cl, .v4-h-door .k, .v4-h-scholar-row .nm, .v4-h-scholar-row .sp, .v4-h-circle .sp, .v4-h-prayers li, .v4-h-word .cite, .v4-h-cont-meta, .v4-cur-course .lvl, .v4-cur-course .by, .v4-cur-course .meta, .v4-dash-hello .k, .v4-dash-course .lvl, .v4-dash-course .by, .v4-dash-card .ttl, .v4-dash-scholar-top .sp, .v4-dash-prayers li, .v4-alm-date .k, .v4-alm-next .lab, .v4-alm-card .ttl, .v4-alm-lesson .lvl, .v4-alm-lesson .by, .v4-alm-dua .src, .v4-alm-sunnah .src, .v4-alm-locnote, .gv-assure, .v4-si-aside .k, .v4-si-aside .ayah-src, .v4-si-fine ) { font-family: var(--sg-font-ui); } /* DISPLAY EXCLUSION — headings that are built as

    /

    (so the broad prose rule would otherwise force them to the reading face). Same mechanism: --sg-font-display is direction-swapped (Quarto → 29LT Zarid), so one rule serves both directions; `html ` lifts specificity to win. */ html :is( .v4-bk-cover .ct, .v4-td-mini .mq, .v4-sd-node .nm, .v4-h-pillar .rn, .v4-h-word blockquote, .v4-dash-scholar-top .nm, .v4-alm-date .hijri, .v4-ab-pull p, .v4-ab-node .nm ) { font-family: var(--sg-font-display); } /* ARABIC-SCRIPT content set inside otherwise-LTR pages — must hold the right Arabic face in BOTH directions, beating the 0-2-1 LTR prose rule. The du'ā' is a Prophetic supplication (Arabic reading face); the sign-in ayah is the QURAN and takes the certified mushaf — never an editorial face (bright line). */ html .v4-alm-dua .ar { font-family: var(--sg-font-arabic-read); } html .v4-si-aside .ayah { font-family: var(--sg-font-quran); } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.34; } /* ── Top chrome — compact bilingual bar (echoes .v4-nav) ───────────────── */ .v4-lib-util { background: #fff; border-bottom: 1px solid rgba(15,27,34,0.06); font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); } .v4-lib-util-inner { max-width: 1280px; margin: 0 auto; padding: 9px 40px; display: flex; align-items: center; justify-content: flex-end; gap: 22px; } .v4-lib-util a { color: inherit; text-decoration: none; } .v4-lib-util a:hover { color: var(--sg-fg); } .v4-lib-nav { background: #fff; border-bottom: 1px solid rgba(15,27,34,0.09); } .v4-lib-nav-inner { max-width: 1280px; margin: 0 auto; padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .v4-lib-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .v4-lib-logo .wm { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.005em; color: var(--sg-fg); } .v4-lib-logo .wm .guid { color: var(--sg-burnt-umber); font-weight: 700; } [dir="rtl"] .v4-lib-logo .wm { font-family: var(--sg-font-arabic-wordmark); font-weight: 700; color: var(--sg-astral); font-size: 26px; } .v4-lib-nav-links { display: flex; align-items: center; gap: 30px; font-family: var(--sg-font-ui); font-size: 15px; font-weight: 500; color: var(--sg-fg); } .v4-lib-nav-links a { color: inherit; text-decoration: none; } .v4-lib-nav-links a.on { color: var(--sg-astral); } .v4-lib-nav-links a:hover { color: var(--sg-burnt-umber); } /* mobile menu — hamburger reveals the primary nav as a dropdown (was: nav simply vanished below 860px). Shared by BiChrome + the Home bar. */ .v4-lib-burger { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px; margin-inline-start: auto; } .v4-lib-burger span { display: block; width: 22px; height: 2px; background: var(--sg-fg); transition: opacity 150ms; } @media (max-width: 860px){ .v4-lib-nav-inner { position: relative; flex-wrap: wrap; } .v4-lib-burger { display: flex; } .v4-lib-nav-links { display: none; } .v4-lib-nav-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; inset-inline: 0; top: 100%; background: #fff; border-top: 1px solid rgba(15,27,34,0.1); box-shadow: 0 10px 24px rgba(20,40,60,0.08); padding: 6px 0; z-index: 50; } .v4-lib-nav-links.open a { padding: 13px 40px; font-size: 16px; } .v4-lib-nav-links.open a.on { box-shadow: inset 3px 0 0 var(--sg-gamboge); } [dir="rtl"] .v4-lib-nav-links.open a.on { box-shadow: inset -3px 0 0 var(--sg-gamboge); } } /* ── Hero ──────────────────────────────────────────────────────────────── */ .v4-lib-hero { background: #FBF6EC; border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-lib-hero-inner { max-width: 1280px; margin: 0 auto; padding: 52px 40px 0; } .v4-lib-kicker { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } .v4-lib-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(32px, 4vw, 50px); line-height: 1.06; letter-spacing: -0.014em; color: var(--sg-fg); margin: 0 0 16px; max-width: 22ch; text-wrap: balance; } .v4-lib-lede { font-size: 18px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 32px; max-width: 60ch; text-wrap: pretty; } /* ── The view switcher — All / English / العربية ───────────────────────── */ .v4-lib-switch-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; padding-bottom: 22px; } .v4-lib-switch { display: inline-flex; background: #fff; border: 1px solid rgba(15,27,34,0.18); border-radius: 999px; padding: 4px; } .v4-lib-switch button { font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; border: none; background: transparent; color: var(--sg-fg-muted); padding: 9px 20px; border-radius: 999px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; transition: background 160ms var(--sg-ease), color 160ms var(--sg-ease); } .v4-lib-switch button .ct { font-size: 11px; font-weight: 700; color: var(--sg-fg-subtle); font-variant-numeric: tabular-nums; } .v4-lib-switch button:hover { color: var(--sg-fg); } .v4-lib-switch button.on { background: var(--sg-astral); color: #fff; } .v4-lib-switch button.on .ct { color: rgba(255,255,255,0.8); } .v4-lib-switch button[lang="ar"] { font-family: var(--sg-font-arabic-ui); } .v4-lib-switch button:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 2px; } .v4-lib-switch-note { font-family: var(--sg-font-read); font-size: 14.5px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0; max-width: 46ch; text-wrap: pretty; } [dir="rtl"] .v4-lib-switch-note { font-family: var(--sg-font-arabic-read); } .v4-lib-switch-note b { color: var(--sg-fg); font-weight: 600; } /* ── Controls — kind chips + search ────────────────────────────────────── */ .v4-lib-controls { background: #fff; border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-lib-controls-inner { max-width: 1280px; margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; } .v4-lib-chips { display: flex; gap: 8px; flex-wrap: wrap; } .v4-lib-chip { font-family: var(--sg-font-ui); font-size: 13px; font-weight: 600; border: 1px solid rgba(15,27,34,0.16); background: #fff; color: var(--sg-fg-muted); padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: all 150ms var(--sg-ease); } .v4-lib-chip:hover { color: var(--sg-fg); border-color: rgba(15,27,34,0.32); } .v4-lib-chip.on { background: var(--sg-astral); border-color: var(--sg-astral); color: #fff; } .v4-lib-search { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(15,27,34,0.18); border-radius: 999px; padding: 8px 16px; min-width: 230px; background: #fff; } .v4-lib-search .ico { color: var(--sg-fg-subtle); font-size: 15px; } .v4-lib-search input { border: none; outline: none; background: transparent; flex: 1; font-family: var(--sg-font-ui); font-size: 14px; color: var(--sg-fg); } .v4-lib-count { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); width: 100%; } .v4-lib-count b { color: var(--sg-fg); font-weight: 700; } /* ── Grid + cards ──────────────────────────────────────────────────────── */ .v4-lib-wrap { max-width: 1280px; margin: 0 auto; padding: 36px 40px 80px; } .v4-lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 1000px){ .v4-lib-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px){ .v4-lib-grid { grid-template-columns: 1fr; } } .v4-lib-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 22px 24px 20px; position: relative; transition: border-color 180ms, transform 180ms, box-shadow 180ms; } .v4-lib-card:hover { border-color: var(--sg-astral); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,40,60,0.06); } .v4-lib-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .v4-lib-kind { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); } [dir="rtl"] .v4-lib-kind { letter-spacing: 0; } /* language badge — EN · AR / EN / AR */ .v4-lib-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sg-font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--sg-astral); background: var(--sg-astral-tint-90); border: 1px solid rgba(48,112,142,0.22); border-radius: 999px; padding: 3px 9px; } .v4-lib-badge .sep { color: rgba(48,112,142,0.45); } .v4-lib-card h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 21px; line-height: 1.22; letter-spacing: -0.005em; color: var(--sg-fg); margin: 0 0 10px; text-wrap: pretty; } .v4-lib-card h3 a { color: inherit; text-decoration: none; } .v4-lib-card h3 a:hover { color: var(--sg-astral); } .v4-lib-by { display: flex; align-items: center; gap: 9px; font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); margin-bottom: 12px; } .v4-lib-by .av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #F5ECDA; font-family: var(--sg-font-display); font-size: 11px; font-weight: 600; } [dir="rtl"] .v4-lib-by .av { font-family: "Zarid Display", "Riwaya", serif; } .v4-lib-blurb { font-size: 14.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 16px; flex: 1; } .v4-lib-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(15,27,34,0.08); } .v4-lib-go { font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; color: var(--sg-astral); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; } .v4-lib-go .arrow { transition: transform 150ms; } .v4-lib-go:hover .arrow { transform: translateX(3px); } [dir="rtl"] .v4-lib-go .arrow { transform: scaleX(-1); } [dir="rtl"] .v4-lib-go:hover .arrow { transform: scaleX(-1) translateX(3px); } .v4-lib-date { font-family: var(--sg-font-ui); font-size: 12px; color: var(--sg-fg-subtle); } /* per-card EN / عربي toggle (only when an item exists in both) */ .v4-lib-cardtoggle { display: inline-flex; border: 1px solid rgba(15,27,34,0.16); border-radius: 999px; padding: 2px; background: #fff; } .v4-lib-cardtoggle button { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; border: none; background: transparent; color: var(--sg-fg-subtle); padding: 4px 11px; border-radius: 999px; cursor: pointer; line-height: 1; transition: all 140ms var(--sg-ease); } .v4-lib-cardtoggle button[lang="ar"] { font-family: var(--sg-font-arabic-ui); } .v4-lib-cardtoggle button.on { background: var(--sg-astral); color: #fff; } /* dimmed cross-language item (the language is not the reader's view) */ .v4-lib-card.dim { background: #FBF7EF; border-color: rgba(15,27,34,0.08); } .v4-lib-card.dim:hover { transform: none; box-shadow: none; border-color: rgba(15,27,34,0.12); } .v4-lib-card.dim h3, .v4-lib-card.dim .v4-lib-blurb, .v4-lib-card.dim .v4-lib-by { opacity: 0.5; } .v4-lib-card.dim .v4-lib-by .av { filter: grayscale(0.3); } .v4-lib-xlang { font-family: var(--sg-font-ui); font-size: 13.5px; font-weight: 600; color: var(--sg-astral); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent; cursor: pointer; padding: 0; } .v4-lib-xlang[lang="ar"] { font-family: var(--sg-font-arabic-ui); } .v4-lib-xlang .arrow { transition: transform 150ms; } .v4-lib-xlang:hover .arrow { transform: translateX(3px); } [dir="rtl"] .v4-lib-xlang .arrow { transform: scaleX(-1); } [dir="rtl"] .v4-lib-xlang:hover .arrow { transform: scaleX(-1) translateX(3px); } .v4-lib-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; font-family: var(--sg-font-read); font-size: 17px; color: var(--sg-fg-muted); } /* ── Footer note ───────────────────────────────────────────────────────── */ .v4-lib-pagefoot { background: var(--sg-astral-shade-90); color: rgba(245,236,218,0.72); padding: 44px 40px; } .v4-lib-pagefoot-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .v4-lib-pagefoot .wm { font-family: var(--sg-font-display); font-size: 20px; color: #FBF6EC; } .v4-lib-pagefoot .wm .guid { color: var(--sg-gamboge); font-weight: 700; } [dir="rtl"] .v4-lib-pagefoot .wm { font-family: var(--sg-font-arabic-wordmark); font-weight: 700; } .v4-lib-pagefoot p { font-family: var(--sg-font-ui); font-size: 13px; margin: 0; color: rgba(245,236,218,0.6); } /* ── Mobile gutters — tighten the heavy 40px side padding on phones ───────── One consolidated rule for the main inner/wrapper containers across every Pass 2–4 surface (BiChrome pages + Home + Library/Books/Reader/Today/ federation). Keeps content from sitting in 80px of gutter at 390px. */ @media (max-width: 560px){ .v4-lib-util-inner, .v4-lib-nav-inner, .v4-lib-hero-inner, .v4-lib-controls-inner, .v4-lib-wrap, .v4-lib-pagefoot, .v4-cur-hero-inner, .v4-cur-controls-inner, .v4-cur-wrap, .v4-dash-hero-inner, .v4-dash-layout, .v4-alm-hero-inner, .v4-alm-wrap, .v4-ab-hero-inner, .v4-ab-facts-inner, .v4-ab-body, .v4-ab-chain-inner, .v4-ab-cta-inner, .gv-hero-inner, .gv-layout, .v4-td-mast-inner, .v4-td-layout, .v4-td-earlier-inner, .v4-rd-bar-inner, .v4-rd-cite, .v4-rd-layout, .v4-fed-hero-inner, .v4-fed-wrap, .v4-sd-hero-inner, .v4-sd-isnad-inner, .v4-sd-streams, .v4-si-aside, .v4-si-main { padding-inline: 20px; } .v4-lib-nav-links.open a { padding-inline: 20px; } } /* ---- end v4_library.css ---- */ /* ---- begin v4_pages.css ---- */ /* ========================================================================== v4 page-specific styles — Answer, Scholars Fund, Atlas Built on tokens.css + v4.css. Append only. ========================================================================== */ /* ========================================================================== ANSWER PAGE — the conversion lab ========================================================================== */ .v4-ans-shell { padding: 56px 0 96px; background: #FFFFFF; } .v4-ans-wrap { max-width: 760px; margin: 0 auto; padding: 0 40px; } .v4-ans-meta { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--sg-fg-muted); margin-bottom: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .v4-ans-meta .crumb a { color: inherit; text-decoration: none; } .v4-ans-meta .crumb a:hover { color: var(--sg-burnt-umber); } .v4-ans-meta .sep { opacity: 0.4; } .v4-ans-meta .chip { display: inline-block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(138,90,68,0.08); color: var(--sg-burnt-umber); padding: 4px 10px; border-radius: 999px; font-weight: 700; margin-left: 6px; } .v4-ans-q { font-family: var(--sg-font-display); font-weight: 500; font-style: normal; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.18; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 28px; text-wrap: pretty; } .v4-ans-q::before { content: '"'; font-style: normal; color: var(--sg-gamboge); margin-right: 4px; } .v4-ans-q::after { content: '"'; font-style: normal; color: var(--sg-gamboge); margin-left: 2px; } .v4-ans-byline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid rgba(15,27,34,0.1); border-bottom: 1px solid rgba(15,27,34,0.1); margin-bottom: 40px; flex-wrap: wrap; } .v4-ans-byline .asked { font-size: 13.5px; color: var(--sg-fg-muted); } .v4-ans-byline .answered { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--sg-fg); } .v4-ans-byline .answered .v4-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #F5ECDA; font-family: var(--sg-font-display); font-weight: 600; font-size: 13px; flex-shrink: 0; } .v4-ans-byline .answered b { font-family: var(--sg-font-display); font-weight: 600; } .v4-ans-byline .answered .role { font-size: 12px; color: var(--sg-fg-muted); letter-spacing: 0.02em; } .v4-ans-body { font-family: var(--sg-font-body); font-size: 18px; line-height: 1.72; color: var(--sg-fg); } .v4-ans-body > .lede { font-family: var(--sg-font-display); font-style: normal; font-weight: 400; font-size: 22px; line-height: 1.45; color: var(--sg-fg); margin: 0 0 28px; } .v4-ans-body p { margin: 0 0 22px; max-width: 64ch; } .v4-ans-body h3 { font-family: var(--sg-font-display); font-weight: 600; font-size: 24px; line-height: 1.25; letter-spacing: -0.005em; margin: 40px 0 14px; color: var(--sg-fg); } .v4-ans-body .arabic-inline { font-family: "Riwaya", serif; font-size: 1.05em; direction: rtl; display: inline; } .v4-ans-body .v4-ans-quote { margin: 32px 0; padding: 22px 26px 22px 28px; border-top: 2px solid var(--sg-gamboge); background: #FBF6EC; font-family: var(--sg-font-display); font-style: normal; font-size: 19px; line-height: 1.55; color: var(--sg-fg); border-radius: 0; } .v4-ans-body .v4-ans-quote .src { display: block; margin-top: 12px; font-family: var(--sg-font-body); font-style: normal; font-size: 12.5px; letter-spacing: 0.06em; color: var(--sg-fg-muted); } .v4-ans-body .v4-ans-quote .ar { display: block; font-family: var(--font-quran); direction: rtl; font-style: normal; font-size: 24px; line-height: 1.6; margin-bottom: 10px; color: var(--sg-fg); } .v4-ans-body .v4-ans-signoff { font-family: var(--sg-font-display); font-style: normal; color: var(--sg-fg-muted); margin-top: 32px; font-size: 17px; } /* The Companion — inline newsletter capture, scholar-voiced */ .v4-companion { margin: 48px 0; padding: 32px; background: #FBF6EC; border: 1px solid rgba(138,90,68,0.2); border-radius: 2px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; position: relative; overflow: hidden; } .v4-companion::before { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; opacity: 0.1; pointer-events: none; } .v4-companion .kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); margin-bottom: 8px; } .v4-companion h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; color: var(--sg-fg); margin: 0 0 8px; text-wrap: balance; } .v4-companion p { font-size: 14.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; max-width: 36ch; } .v4-companion .form { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; } .v4-companion .form input { width: 100%; padding: 14px 16px; border: 1px solid rgba(138,90,68,0.3); border-radius: 2px; background: #FFFFFF; font-family: var(--sg-font-body); font-size: 15px; color: var(--sg-fg); outline: none; } .v4-companion .form input:focus { border-color: var(--sg-burnt-umber); } .v4-companion .form button { background: var(--sg-burnt-umber); color: #fff; border: none; padding: 14px 18px; border-radius: 2px; font-family: var(--sg-font-body); font-weight: 600; font-size: 14.5px; letter-spacing: 0.005em; cursor: pointer; transition: background 150ms; } .v4-companion .form button:hover { background: #6f4634; } .v4-companion .form small { font-size: 12px; color: var(--sg-fg-subtle); font-style: normal; } /* The Quiet Bridge — scholar's voice continuing into a course */ .v4-bridge { margin: 64px 0 40px; padding: 36px 40px; background: linear-gradient(180deg, #FFFFFF 0%, #FBF6EC 100%); border: 1px solid rgba(15,27,34,0.1); border-top: 2px solid var(--sg-astral); border-radius: 2px; position: relative; } .v4-bridge .kicker { font-family: var(--sg-font-display); font-style: normal; font-weight: 400; font-size: 15px; color: var(--sg-astral); margin-bottom: 10px; } .v4-bridge h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 28px; line-height: 1.18; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 14px; text-wrap: balance; } .v4-bridge p { font-size: 16.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 16px; max-width: 60ch; } .v4-bridge .meta-when { font-size: 14px; color: var(--sg-fg); margin-bottom: 22px; } .v4-bridge .meta-when b { color: var(--sg-astral); } .v4-bridge .actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } /* Related reading grid */ .v4-related { margin: 64px 0 40px; } .v4-related h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; margin: 0 0 24px; letter-spacing: -0.005em; color: var(--sg-fg); } .v4-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .v4-rel { display: block; padding: 22px 24px; background: #FFFFFF; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; text-decoration: none; cursor: pointer; transition: border-color 180ms, transform 180ms; } .v4-rel:hover { border-color: var(--sg-astral); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20,40,60,0.06); } .v4-rel .kind { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; } .v4-rel[data-kind="article"] .kind { color: var(--sg-deep-olive); } .v4-rel[data-kind="podcast"] .kind { color: var(--sg-burnt-umber); } .v4-rel[data-kind="course"] .kind { color: var(--sg-astral); } .v4-rel[data-kind="answer"] .kind { color: var(--gold-ink); } .v4-rel h4 { font-family: var(--sg-font-display); font-weight: 500; font-size: 17px; line-height: 1.25; color: var(--sg-fg); margin: 0 0 8px; } .v4-rel .meta { font-size: 12.5px; color: var(--sg-fg-muted); } /* Quiet end-of-page support nudge */ .v4-support-quiet { margin: 56px 0 0; padding: 22px 24px; background: transparent; border-top: 1px solid rgba(15,27,34,0.12); border-bottom: 1px solid rgba(15,27,34,0.12); font-family: var(--sg-font-display); font-style: normal; font-size: 16.5px; line-height: 1.55; color: var(--sg-fg-muted); text-align: center; } .v4-support-quiet b { font-style: normal; color: var(--sg-fg); font-weight: 600; } .v4-support-quiet a { display: inline-block; margin-top: 8px; color: var(--sg-burnt-umber); font-style: normal; font-family: var(--sg-font-body); font-weight: 600; font-size: 14px; text-decoration: none; letter-spacing: 0.02em; } .v4-support-quiet a:hover { text-decoration: underline; } /* ========================================================================== SCHOLARS FUND ========================================================================== */ .v4-fund-hero { padding: 88px 0 72px; background: linear-gradient(180deg, var(--sg-astral-shade-90) 0%, var(--sg-astral-shade-70) 100%); color: #F5ECDA; position: relative; overflow: hidden; } .v4-fund-hero::before { content: ''; position: absolute; right: -120px; top: 50%; width: 600px; height: 600px; transform: translateY(-50%); background-image: url('data:image/svg+xml;utf8,'); background-size: contain; opacity: 0.06; pointer-events: none; } .v4-fund-hero-inner { position: relative; z-index: 1; max-width: 880px; } .v4-fund-hero .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 24px; display: inline-flex; align-items: center; gap: 14px; } .v4-fund-hero .kicker::before { content: ''; width: 28px; height: 1px; background: var(--sg-gamboge); } .v4-fund-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(36px, 4.8vw, 60px); line-height: 1.05; letter-spacing: -0.016em; color: #FBF6EC; margin: 0 0 22px; max-width: 22ch; text-wrap: balance; } .v4-fund-hero .lede { font-size: 19px; line-height: 1.55; color: rgba(245,236,218,0.82); margin: 0 0 36px; max-width: 60ch; font-weight: 400; } .v4-fund-hero .hero-ask { background: rgba(255,255,255,0.04); border: 1px solid rgba(245,236,218,0.18); padding: 24px 26px; border-radius: 2px; max-width: 720px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .v4-fund-hero .hero-ask .amounts { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; } .v4-fund-hero .hero-ask .amt { padding: 10px 16px; border: 1.5px solid rgba(245,236,218,0.28); border-radius: 2px; font-family: var(--sg-font-display); font-weight: 500; font-size: 15.5px; color: #F5ECDA; cursor: pointer; background: transparent; transition: all 180ms; } .v4-fund-hero .hero-ask .amt:hover { border-color: var(--sg-gamboge); color: #FBF6EC; } .v4-fund-hero .hero-ask .amt.selected { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); border-color: var(--sg-gamboge); } .v4-fund-hero .hero-ask .amt .per { font-size: 12px; font-family: var(--sg-font-body); font-weight: 400; margin-left: 6px; opacity: 0.75; } .v4-fund-hero .hero-ask button { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); border: none; padding: 14px 24px; font-family: var(--sg-font-body); font-weight: 700; font-size: 14.5px; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 2px; cursor: pointer; transition: background 150ms; } .v4-fund-hero .hero-ask button:hover { background: #f6c054; } .v4-fund-hero .zakat-note { font-size: 13px; color: rgba(245,236,218,0.55); margin: 18px 0 0; font-family: var(--sg-font-display); font-style: normal; } /* Crisis — the honest situation */ .v4-fund-crisis { padding: 96px 0; background: #FFFFFF; } .v4-fund-crisis-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-fund-crisis-grid > div h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 24px; text-wrap: balance; } .v4-fund-crisis-grid > div p { font-size: 17px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0 0 18px; } .v4-fund-crisis-grid > div p:last-child { margin-bottom: 0; } .v4-fund-crisis-grid > div p b { color: var(--sg-fg); font-weight: 600; } .v4-fund-crisis-grid aside { background: #FBF6EC; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 28px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; } .v4-fund-crisis-grid aside .figure { border-top: 1px solid rgba(15,27,34,0.1); padding-top: 14px; } .v4-fund-crisis-grid aside .figure:nth-child(1), .v4-fund-crisis-grid aside .figure:nth-child(2) { border-top: none; padding-top: 0; } .v4-fund-crisis-grid aside .figure .big { font-family: var(--sg-font-display); font-weight: 500; font-size: 36px; line-height: 1; color: var(--sg-astral); margin-bottom: 6px; letter-spacing: -0.005em; } .v4-fund-crisis-grid aside .figure.urgent .big { color: var(--sg-burnt-umber); } .v4-fund-crisis-grid aside .figure .lab { font-size: 12.5px; color: var(--sg-fg-muted); line-height: 1.35; } /* Scholars — named, dollar-destined */ .v4-fund-scholars { padding: 96px 0; background: #FBF6EC; } .v4-fund-scholars-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-fund-scholars .sect-head { max-width: 720px; margin: 0 0 48px; } .v4-fund-scholars .sect-head .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } .v4-fund-scholars .sect-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 14px; text-wrap: balance; } .v4-fund-scholars .sect-head p { font-size: 17px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; } .v4-fund-scholars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .v4-fund-scholar { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.09); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; } .v4-fund-scholar .photo { aspect-ratio: 4/3; background: var(--sg-soft-sand); } .v4-fund-scholar .photo image-slot { width: 100%; height: 100%; } .v4-fund-scholar .body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .v4-fund-scholar .body .name { font-family: var(--sg-font-display); font-weight: 600; font-size: 20px; line-height: 1.15; color: var(--sg-fg); margin: 0; } .v4-fund-scholar .body .role { font-size: 12.5px; letter-spacing: 0.04em; color: var(--sg-fg-muted); } .v4-fund-scholar .body .work { font-size: 14.5px; line-height: 1.55; color: var(--sg-fg); margin: 4px 0 0; } .v4-fund-scholar .body .dollars { margin-top: auto; padding-top: 16px; border-top: 1px dashed rgba(138,90,68,0.3); font-size: 13.5px; color: var(--sg-fg-muted); } .v4-fund-scholar .body .dollars b { color: var(--sg-burnt-umber); font-family: var(--sg-font-display); font-weight: 600; font-size: 16px; } /* Tiers — reframed as roles, not amounts */ .v4-fund-tiers { padding: 96px 0; background: #FFFFFF; } .v4-fund-tiers-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-fund-tiers .sect-head { max-width: 720px; margin: 0 0 48px; } .v4-fund-tiers .sect-head .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } .v4-fund-tiers .sect-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0; } .v4-fund-tiers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .v4-fund-tier { background: #FBF6EC; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; transition: all 180ms; cursor: pointer; position: relative; } .v4-fund-tier:hover { border-color: var(--sg-burnt-umber); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,40,60,0.06); } .v4-fund-tier.featured { background: linear-gradient(180deg, #13303F 0%, #0A1E29 100%); color: #F5ECDA; border-color: transparent; } .v4-fund-tier.featured::before { content: 'Most chosen'; position: absolute; top: -10px; left: 24px; background: var(--sg-gamboge); color: var(--sg-astral-shade-90); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; } .v4-fund-tier .amount { font-family: var(--sg-font-display); font-weight: 500; font-size: 26px; letter-spacing: -0.01em; color: var(--sg-astral); } .v4-fund-tier.featured .amount { color: var(--sg-gamboge); } .v4-fund-tier h3 { font-family: var(--sg-font-display); font-weight: 600; font-size: 18px; line-height: 1.2; margin: 0; color: inherit; } .v4-fund-tier p { font-size: 13.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; flex: 1; } .v4-fund-tier.featured p { color: rgba(245,236,218,0.78); } .v4-fund-tier .perk { font-family: var(--sg-font-display); font-style: normal; font-size: 13.5px; color: var(--sg-burnt-umber); padding-top: 12px; border-top: 1px dashed rgba(138,90,68,0.3); } .v4-fund-tier.featured .perk { color: var(--sg-gamboge); border-top-color: rgba(236,166,8,0.3); } /* Zakat */ .v4-fund-zakat { padding: 96px 0; background: var(--sg-soft-sand); text-align: center; } .v4-fund-zakat-inner { max-width: 760px; margin: 0 auto; padding: 0 40px; } .v4-fund-zakat .kicker { font-family: var(--sg-font-display); font-style: normal; font-size: 18px; color: var(--sg-burnt-umber); margin: 0 0 14px; } .v4-fund-zakat h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 18px; text-wrap: balance; } .v4-fund-zakat p { font-size: 17px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0 auto 28px; max-width: 60ch; } .v4-fund-zakat p a { color: var(--sg-burnt-umber); font-weight: 600; } /* ========================================================================== ATLAS — impact storytelling ========================================================================== */ .v4-atlas-hero { padding: 88px 0 64px; background: #FFFFFF; } .v4-atlas-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-atlas-hero .kicker { font-family: var(--sg-font-display); font-style: normal; font-size: 17px; color: var(--sg-burnt-umber); margin: 0 0 18px; } .v4-atlas-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(40px, 5.2vw, 64px); line-height: 1.05; letter-spacing: -0.016em; color: var(--sg-fg); margin: 0 0 22px; max-width: 20ch; text-wrap: balance; } .v4-atlas-hero .lede { font-size: 20px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; max-width: 60ch; } /* Feature story */ .v4-atlas-feature { padding: 64px 0 96px; background: #FFFFFF; } .v4-atlas-feature-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-atlas-feature-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .v4-atlas-feature .photo { aspect-ratio: 4/5; background: var(--sg-soft-sand); border-radius: 2px; overflow: hidden; } .v4-atlas-feature .photo image-slot { width: 100%; height: 100%; } .v4-atlas-feature .kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 14px; } .v4-atlas-feature .kicker::before { content: ''; width: 28px; height: 1px; background: var(--sg-burnt-umber); } .v4-atlas-feature h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 22px; text-wrap: balance; } .v4-atlas-feature p { font-size: 17.5px; line-height: 1.6; color: var(--sg-fg); margin: 0 0 18px; max-width: 56ch; } .v4-atlas-feature .pull { margin: 28px 0 22px; padding: 18px 24px; border-top: 2px solid var(--sg-gamboge); background: #FBF6EC; border-radius: 0; } .v4-atlas-feature .pull blockquote { font-family: var(--sg-font-display); font-style: normal; font-weight: 400; font-size: 22px; line-height: 1.35; color: var(--sg-fg); margin: 0; } .v4-atlas-feature .pull .attr { margin-top: 12px; font-size: 13px; color: var(--sg-fg-muted); letter-spacing: 0.02em; } .v4-atlas-feature .pull .attr b { color: var(--sg-fg); font-weight: 600; font-family: var(--sg-font-display); } .v4-atlas-feature .more { display: inline-flex; align-items: center; gap: 8px; color: var(--sg-burnt-umber); font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; margin-top: 12px; } /* Global view — continent grid */ .v4-atlas-global { padding: 96px 0; background: #FBF6EC; } .v4-atlas-global-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-atlas-global .sect-head { max-width: 720px; margin: 0 0 48px; } .v4-atlas-global .sect-head .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } .v4-atlas-global .sect-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0; text-wrap: balance; } .v4-atlas-global-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .v4-atlas-card { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 22px 22px 20px; transition: all 180ms; cursor: pointer; display: flex; flex-direction: column; gap: 8px; } .v4-atlas-card:hover { border-color: var(--sg-burnt-umber); transform: translateY(-2px); } .v4-atlas-card .continent { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); } .v4-atlas-card .name-loc { font-family: var(--sg-font-display); font-weight: 600; font-size: 18px; color: var(--sg-fg); margin: 0; } .v4-atlas-card .name-loc .loc { color: var(--sg-fg-muted); font-weight: 400; font-style: normal; } .v4-atlas-card .what { font-size: 14px; color: var(--sg-fg-muted); line-height: 1.5; } /* Numbers — human-scale */ .v4-atlas-numbers { padding: 96px 0; background: var(--sg-astral-shade-90); color: #F5ECDA; } .v4-atlas-numbers-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-atlas-numbers .sect-head { max-width: 720px; margin: 0 0 48px; } .v4-atlas-numbers .sect-head .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 14px; } .v4-atlas-numbers .sect-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; color: #FBF6EC; margin: 0; text-wrap: balance; } .v4-atlas-numbers-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; border-top: 1px solid rgba(245,236,218,0.15); border-bottom: 1px solid rgba(245,236,218,0.15); padding: 36px 0; } .v4-atlas-num { text-align: center; padding: 0 12px; border-right: 1px solid rgba(245,236,218,0.08); } .v4-atlas-num:last-child { border-right: none; } .v4-atlas-num .big { font-family: var(--sg-font-display); font-weight: 500; font-size: 36px; letter-spacing: -0.012em; color: var(--sg-gamboge); line-height: 1; display: block; } .v4-atlas-num .lab { font-size: 11.5px; letter-spacing: 0.08em; color: rgba(245,236,218,0.7); margin-top: 10px; line-height: 1.4; display: block; } /* Where dollars went */ .v4-atlas-money { padding: 96px 0; background: #FFFFFF; } .v4-atlas-money-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; } .v4-atlas-money .sect-head { max-width: 720px; margin: 0 0 48px; } .v4-atlas-money .sect-head .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } .v4-atlas-money .sect-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0; } .v4-atlas-money-list { display: flex; flex-direction: column; border-top: 1px solid rgba(15,27,34,0.1); } .v4-atlas-money-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 28px; align-items: center; padding: 22px 0; border-bottom: 1px solid rgba(15,27,34,0.1); } .v4-atlas-money-row .pct { font-family: var(--sg-font-display); font-weight: 500; font-size: 32px; letter-spacing: -0.012em; color: var(--sg-astral); } .v4-atlas-money-row .name { font-family: var(--sg-font-display); font-weight: 600; font-size: 19px; color: var(--sg-fg); margin: 0; } .v4-atlas-money-row .name .desc { display: block; font-family: var(--sg-font-body); font-weight: 400; font-size: 14.5px; color: var(--sg-fg-muted); margin-top: 4px; line-height: 1.45; } .v4-atlas-money-row .bar-wrap { width: 220px; background: #FBF6EC; height: 8px; border-radius: 2px; overflow: hidden; } .v4-atlas-money-row .bar { height: 100%; background: var(--sg-gamboge); border-radius: 2px; } .v4-atlas-money-row:not(:first-child) .bar { background: var(--sg-astral); } .v4-atlas-money-row:nth-child(3) .bar { background: var(--sg-deep-olive); } .v4-atlas-money-row:nth-child(4) .bar { background: var(--sg-burnt-umber); } .v4-atlas-money-row:nth-child(5) .bar { background: var(--sg-slate-gray); } /* Archive grid */ .v4-atlas-archive { padding: 96px 0; background: #FBF6EC; } .v4-atlas-archive-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-atlas-archive .sect-head { max-width: 720px; margin: 0 0 32px; } .v4-atlas-archive .sect-head .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } .v4-atlas-archive .sect-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0; } .v4-atlas-archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .v4-atlas-archive-card { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 18px 18px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: all 180ms; } .v4-atlas-archive-card:hover { border-color: var(--sg-burnt-umber); } .v4-atlas-archive-card .when { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); } .v4-atlas-archive-card .who { font-family: var(--sg-font-display); font-weight: 600; font-size: 15.5px; line-height: 1.18; color: var(--sg-fg); } .v4-atlas-archive-card .desc { font-size: 12.5px; color: var(--sg-fg-muted); line-height: 1.45; } /* ========================================================================== RESPONSIVE — new pages ========================================================================== */ @media (max-width: 1080px) { .v4-fund-crisis-grid { grid-template-columns: 1fr; gap: 36px; } .v4-fund-scholars-grid { grid-template-columns: 1fr 1fr; } .v4-fund-tiers-grid { grid-template-columns: 1fr 1fr; } .v4-atlas-feature-layout { grid-template-columns: 1fr; gap: 32px; } .v4-atlas-global-grid { grid-template-columns: 1fr 1fr; } .v4-atlas-numbers-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 24px 0; } .v4-atlas-num { border-right: none; } .v4-atlas-archive-grid { grid-template-columns: 1fr 1fr; } .v4-companion { grid-template-columns: 1fr; gap: 22px; } .v4-related-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .v4-ans-wrap, .v4-fund-hero-inner, .v4-fund-crisis-grid, .v4-fund-scholars-inner, .v4-fund-tiers-inner, .v4-fund-zakat-inner, .v4-atlas-hero-inner, .v4-atlas-feature-inner, .v4-atlas-global-inner, .v4-atlas-numbers-inner, .v4-atlas-money-inner, .v4-atlas-archive-inner { padding-left: 24px; padding-right: 24px; } .v4-fund-scholars-grid { grid-template-columns: 1fr; } .v4-fund-tiers-grid { grid-template-columns: 1fr; } .v4-atlas-global-grid { grid-template-columns: 1fr; } .v4-atlas-numbers-grid { grid-template-columns: 1fr 1fr; } .v4-atlas-archive-grid { grid-template-columns: 1fr; } .v4-fund-hero .hero-ask { flex-direction: column; align-items: stretch; } .v4-atlas-money-row { grid-template-columns: 60px 1fr; } .v4-atlas-money-row .bar-wrap { grid-column: 1 / -1; width: 100%; } .v4-bridge { padding: 24px 22px; } .v4-bridge .actions { flex-direction: column; align-items: stretch; } } /* ========================================================================== FACULTY PAGE — dignified scholar profiles Principle: scholars are public through their teaching, not through their wage. ========================================================================== */ .v4-fac-hero { padding: 88px 0 56px; background: #FFFFFF; } .v4-fac-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-fac-hero .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 22px; display: inline-flex; align-items: center; gap: 14px; } .v4-fac-hero .kicker::before { content: ''; width: 28px; height: 1px; background: var(--sg-astral); } .v4-fac-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(40px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.014em; color: var(--sg-fg); margin: 0 0 22px; max-width: 22ch; text-wrap: balance; } .v4-fac-hero .lede { font-size: 19px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0; max-width: 64ch; } .v4-fac-hero-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 48px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(15,27,34,0.1); justify-content: start; } .v4-fac-hero-stat .n { font-family: var(--sg-font-display); font-weight: 500; font-size: 36px; letter-spacing: -0.012em; color: var(--sg-astral); line-height: 1; display: block; } .v4-fac-hero-stat .l { display: block; margin-top: 8px; font-size: 12.5px; color: var(--sg-fg-muted); letter-spacing: 0.04em; } /* Filter strip */ .v4-fac-filters { padding: 0 0 16px; background: #FFFFFF; border-bottom: 1px solid rgba(15,27,34,0.08); position: sticky; top: 0; z-index: 5; } .v4-fac-filters-inner { max-width: 1200px; margin: 0 auto; padding: 14px 40px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .v4-fac-filters .lab { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-muted); margin-right: 12px; } .v4-fac-filter { padding: 8px 14px; border-radius: 999px; font-size: 13.5px; color: var(--sg-fg); cursor: pointer; border: 1px solid transparent; background: transparent; white-space: nowrap; transition: all 150ms; } .v4-fac-filter:hover { background: rgba(15,27,34,0.04); } .v4-fac-filter.on { background: var(--sg-astral); color: #fff; border-color: var(--sg-astral); } /* Faculty grid */ .v4-fac-listing { padding: 56px 0 96px; background: #FFFFFF; } .v4-fac-listing-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-fac-listing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; } .v4-fac-card { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; cursor: pointer; } .v4-fac-card:hover .v4-fac-card-name { color: var(--sg-burnt-umber); } .v4-fac-card .v4-fac-card-photo { width: 100%; aspect-ratio: 4/5; background: var(--sg-soft-sand); border-radius: 2px; overflow: hidden; position: relative; } .v4-fac-card .v4-fac-card-photo image-slot { width: 100%; height: 100%; } .v4-fac-card .v4-fac-card-photo .v4-fac-card-companion-tag { position: absolute; top: 10px; right: 10px; background: var(--sg-gamboge); color: var(--sg-astral-shade-90); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; } .v4-fac-card .v4-fac-card-loc { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-astral); } .v4-fac-card .v4-fac-card-name { font-family: var(--sg-font-display); font-weight: 600; font-size: 19px; line-height: 1.15; color: var(--sg-fg); margin: 0; transition: color 150ms; } .v4-fac-card .v4-fac-card-subj { font-size: 13.5px; line-height: 1.45; color: var(--sg-fg-muted); margin: 0; } /* Featured deep profile */ .v4-fac-featured { padding: 96px 0; background: #FBF6EC; border-top: 1px solid rgba(15,27,34,0.08); } .v4-fac-featured-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-fac-featured .kicker { font-family: var(--sg-font-display); font-style: normal; font-size: 16px; color: var(--sg-burnt-umber); margin: 0 0 12px; } .v4-fac-featured-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; } .v4-fac-featured-photo { aspect-ratio: 4/5; background: var(--sg-soft-sand); border-radius: 2px; overflow: hidden; } .v4-fac-featured-photo image-slot { width: 100%; height: 100%; } .v4-fac-featured h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.014em; color: var(--sg-fg); margin: 0 0 14px; } .v4-fac-featured .role-loc { font-size: 14.5px; color: var(--sg-fg-muted); margin: 0 0 24px; letter-spacing: 0.02em; } .v4-fac-featured .role-loc b { color: var(--sg-astral); font-weight: 600; } .v4-fac-featured-body { font-size: 17px; line-height: 1.6; color: var(--sg-fg); } .v4-fac-featured-body p { margin: 0 0 16px; max-width: 60ch; } .v4-fac-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; margin-top: 32px; padding-top: 28px; border-top: 1px dashed rgba(138,90,68,0.3); } .v4-fac-meta-block .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); margin-bottom: 10px; display: block; } .v4-fac-meta-block ul { list-style: none; padding: 0; margin: 0; font-family: var(--sg-font-display); font-size: 15.5px; line-height: 1.55; color: var(--sg-fg); } .v4-fac-meta-block ul li { padding-left: 20px; position: relative; } .v4-fac-meta-block ul li::before { content: '·'; position: absolute; left: 6px; color: var(--sg-gamboge); font-weight: 700; } /* Sanad — chain of teachers — special quiet treatment */ .v4-fac-sanad { margin-top: 8px; } .v4-fac-sanad-item { font-family: var(--sg-font-display); font-style: normal; font-size: 15.5px; color: var(--sg-fg); padding: 6px 0 6px 26px; position: relative; } .v4-fac-sanad-item::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--sg-burnt-umber); opacity: 0.4; } .v4-fac-sanad-item:first-child::before { top: 50%; } .v4-fac-sanad-item:last-child::before { bottom: 50%; } .v4-fac-sanad-item::after { content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--sg-soft-sand); border: 1.5px solid var(--sg-burnt-umber); } .v4-fac-featured-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; } /* ========================================================================== COMPANION PAGE — choose your scholar ========================================================================== */ .v4-comp-hero { padding: 88px 0 56px; background: linear-gradient(180deg, #FBF6EC 0%, #F5ECDA 100%); } .v4-comp-hero-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; text-align: center; } .v4-comp-hero .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 22px; display: inline-flex; align-items: center; gap: 14px; } .v4-comp-hero .kicker::before, .v4-comp-hero .kicker::after { content: ''; width: 28px; height: 1px; background: var(--sg-burnt-umber); } .v4-comp-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(38px, 5vw, 62px); line-height: 1.05; letter-spacing: -0.014em; color: var(--sg-fg); margin: 0 auto 22px; max-width: 22ch; text-wrap: balance; } .v4-comp-hero .lede { font-size: 19px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0 auto; max-width: 56ch; } /* Three writers */ .v4-comp-writers { padding: 64px 0 96px; background: #FBF6EC; } .v4-comp-writers-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-comp-writers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .v4-comp-writer { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; transition: all 200ms; } .v4-comp-writer:hover { border-color: var(--sg-burnt-umber); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20,40,60,0.08); } .v4-comp-writer .photo { aspect-ratio: 5/4; background: var(--sg-soft-sand); } .v4-comp-writer .photo image-slot { width: 100%; height: 100%; } .v4-comp-writer .body { padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 14px; } .v4-comp-writer .role { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-astral); } .v4-comp-writer h3 { font-family: var(--sg-font-display); font-weight: 600; font-size: 24px; line-height: 1.15; letter-spacing: -0.005em; color: var(--sg-fg); margin: 0; } .v4-comp-writer .letter-name { font-family: var(--sg-font-display); font-style: normal; font-weight: 500; font-size: 18px; color: var(--sg-burnt-umber); margin: 0; } .v4-comp-writer .voice { font-family: var(--sg-font-display); font-style: normal; font-size: 16.5px; line-height: 1.5; color: var(--sg-fg); margin: 8px 0 0; padding: 14px 16px; border-top: 2px solid var(--sg-gamboge); background: #FBF6EC; border-radius: 0; } .v4-comp-writer .recent-lab { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-muted); margin-top: 12px; } .v4-comp-writer ul { list-style: none; padding: 0; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--sg-fg); display: flex; flex-direction: column; gap: 4px; } .v4-comp-writer ul li { padding-left: 14px; position: relative; } .v4-comp-writer ul li::before { content: '·'; position: absolute; left: 0; color: var(--sg-gamboge); font-weight: 700; } .v4-comp-writer .form { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(15,27,34,0.08); } .v4-comp-writer .form input { width: 100%; padding: 12px 14px; border: 1px solid rgba(15,27,34,0.15); border-radius: 2px; font-family: var(--sg-font-body); font-size: 15px; outline: none; } .v4-comp-writer .form input:focus { border-color: var(--sg-burnt-umber); } .v4-comp-writer .form button { background: var(--sg-astral); color: #fff; border: none; padding: 12px 16px; border-radius: 2px; font-family: var(--sg-font-body); font-weight: 600; font-size: 14.5px; letter-spacing: 0.005em; cursor: pointer; transition: background 150ms; } .v4-comp-writer .form button:hover { background: var(--sg-astral-shade-30); } .v4-comp-writer .form small { font-size: 12px; color: var(--sg-fg-subtle); text-align: center; margin-top: 2px; } /* Preview — what a Companion looks like */ .v4-comp-preview { padding: 96px 0; background: #FFFFFF; border-top: 1px solid rgba(15,27,34,0.08); } .v4-comp-preview-inner { max-width: 760px; margin: 0 auto; padding: 0 40px; } .v4-comp-preview .frame { background: #FBF6EC; border: 1px solid rgba(15,27,34,0.1); border-radius: 8px; padding: 0; overflow: hidden; } .v4-comp-preview .frame .frame-head { padding: 22px 32px; background: #FFFFFF; border-bottom: 1px solid rgba(15,27,34,0.08); display: flex; align-items: center; gap: 14px; } .v4-comp-preview .frame .from .label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); display: block; } .v4-comp-preview .frame .from .name { font-family: var(--sg-font-display); font-weight: 600; font-size: 16px; color: var(--sg-fg); display: block; margin-top: 2px; } .v4-comp-preview .frame .when { margin-left: auto; font-size: 13px; color: var(--sg-fg-muted); font-family: var(--sg-font-display); font-style: normal; } .v4-comp-preview .frame .body { padding: 36px 40px 40px; font-family: var(--sg-font-body); font-size: 17px; line-height: 1.7; color: var(--sg-fg); } .v4-comp-preview .frame .body h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 28px; line-height: 1.2; letter-spacing: -0.012em; margin: 0 0 18px; color: var(--sg-fg); } .v4-comp-preview .frame .body p { margin: 0 0 18px; } .v4-comp-preview .frame .body .ayah { margin: 28px 0; padding: 18px 22px; background: #FFFFFF; border-top: 2px solid var(--sg-gamboge); border-radius: 0; } .v4-comp-preview .frame .body .ayah .ar { font-family: var(--font-quran); font-size: 26px; direction: rtl; margin: 0 0 8px; color: var(--sg-fg); } .v4-comp-preview .frame .body .ayah .en { font-family: var(--sg-font-display); font-style: normal; font-size: 16px; color: var(--sg-fg-muted); margin: 0; } .v4-comp-preview .frame .body .sig { font-family: var(--sg-font-display); font-style: normal; margin-top: 32px; } .v4-comp-preview .frame .body .sig b { font-style: normal; } /* FAQ */ .v4-comp-faq { padding: 80px 0 96px; background: #FBF6EC; } .v4-comp-faq-inner { max-width: 760px; margin: 0 auto; padding: 0 40px; } .v4-comp-faq h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 32px; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 28px; } .v4-comp-faq dl { margin: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(15,27,34,0.1); } .v4-comp-faq dt { font-family: var(--sg-font-display); font-weight: 500; font-size: 18px; color: var(--sg-fg); padding: 20px 0 6px; } .v4-comp-faq dd { margin: 0 0 20px; font-size: 15.5px; line-height: 1.6; color: var(--sg-fg-muted); border-bottom: 1px solid rgba(15,27,34,0.1); padding-bottom: 20px; } /* ========================================================================== COURSE PAGE — inside of the Quiet Bridge ========================================================================== */ .v4-crs-hero { padding: 72px 0 56px; background: linear-gradient(180deg, var(--sg-astral-shade-90) 0%, var(--sg-astral-shade-70) 100%); color: #F5ECDA; } .v4-crs-hero-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; } /* Layer-2 cover split — text left, rosette medallion right */ .v4-crs-hero-split { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; } .v4-crs-hero-medallion { color: var(--sg-gamboge); opacity: 0.92; line-height: 0; filter: drop-shadow(0 2px 18px rgba(236,166,8,0.10)); } @media (max-width: 860px) { .v4-crs-hero-split { grid-template-columns: 1fr; } .v4-crs-hero-medallion { display: none; } } .v4-crs-hero .crumb { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; color: rgba(245,236,218,0.7); margin: 0 0 22px; } .v4-crs-hero .crumb a { color: inherit; text-decoration: none; } .v4-crs-hero .crumb .sep { opacity: 0.4; margin: 0 8px; } .v4-crs-hero .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 18px; } .v4-crs-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(40px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.014em; color: #FBF6EC; margin: 0 0 18px; max-width: 22ch; text-wrap: balance; } .v4-crs-hero .deck { font-size: 19.5px; line-height: 1.5; color: rgba(245,236,218,0.82); margin: 0 0 28px; max-width: 56ch; text-wrap: pretty; } .v4-crs-hero .teacher-row { display: inline-flex; align-items: center; gap: 14px; padding: 12px 16px 12px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(245,236,218,0.18); border-radius: 2px; } .v4-crs-hero .teacher-row .avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #F5ECDA; font-family: var(--sg-font-display); font-weight: 600; font-size: 14px; } .v4-crs-hero .teacher-row .name { font-family: var(--sg-font-display); font-weight: 600; font-size: 17px; color: #FBF6EC; display: block; } .v4-crs-hero .teacher-row .role { font-size: 12.5px; color: rgba(245,236,218,0.65); letter-spacing: 0.02em; } /* Practical info */ .v4-crs-meta { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); padding: 18px 0; } .v4-crs-meta-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(5, auto) 1fr; align-items: center; gap: 32px; } .v4-crs-meta-item .lab { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(15,27,34,0.65); display: block; margin-bottom: 4px; } .v4-crs-meta-item .val { font-family: var(--sg-font-display); font-weight: 600; font-size: 16px; color: var(--sg-astral-shade-90); } .v4-crs-meta-cta { justify-self: end; } .v4-crs-meta-cta a { display: inline-flex; align-items: center; gap: 8px; background: var(--sg-astral-shade-90); color: #FBF6EC; padding: 12px 22px; border-radius: 2px; text-decoration: none; font-family: var(--sg-font-body); font-weight: 600; font-size: 14.5px; letter-spacing: 0.005em; transition: background 150ms; white-space: nowrap; } .v4-crs-meta-cta a:hover { background: var(--sg-astral-shade-70); } /* Course body */ .v4-crs-body { padding: 80px 0; background: #FFFFFF; } .v4-crs-body-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 320px; gap: 80px; } .v4-crs-main h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 30px; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 18px; } .v4-crs-main h2:not(:first-child) { margin-top: 56px; } .v4-crs-main p { font-size: 17px; line-height: 1.65; color: var(--sg-fg); margin: 0 0 18px; max-width: 64ch; } .v4-crs-main p.lede { font-family: var(--sg-font-display); font-style: normal; font-weight: 400; font-size: 21px; line-height: 1.45; color: var(--sg-fg); } /* Who this is for / outcomes */ .v4-crs-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 12px; } .v4-crs-list li { padding-left: 28px; position: relative; font-size: 16.5px; line-height: 1.55; color: var(--sg-fg); } .v4-crs-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 14px; height: 14px; border: 1.5px solid var(--sg-gamboge); border-radius: 50%; } .v4-crs-list li::after { content: ''; position: absolute; left: 4px; top: 13px; width: 6px; height: 6px; background: var(--sg-gamboge); border-radius: 50%; } /* Syllabus */ .v4-crs-syllabus { margin: 8px 0 0; border-top: 1px solid rgba(15,27,34,0.1); } .v4-crs-week { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid rgba(15,27,34,0.1); align-items: baseline; } .v4-crs-week .when { font-family: var(--sg-font-display); font-style: normal; font-size: 15px; color: var(--sg-burnt-umber); } .v4-crs-week h3 { font-family: var(--sg-font-display); font-weight: 600; font-size: 19px; line-height: 1.25; margin: 0 0 6px; color: var(--sg-fg); } .v4-crs-week .what { font-size: 14.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; } /* Teacher note — long-form from the scholar */ .v4-crs-teacher { margin: 0; padding: 32px 36px; background: #FBF6EC; border: 1px solid rgba(138,90,68,0.18); border-top: 2px solid var(--sg-burnt-umber); border-radius: 2px; } .v4-crs-teacher-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .v4-crs-teacher-row .avatar { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #F5ECDA; font-family: var(--sg-font-display); font-weight: 600; font-size: 15px; } .v4-crs-teacher-row .meta { display: flex; flex-direction: column; } .v4-crs-teacher-row .meta .from { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); } .v4-crs-teacher-row .meta .name { font-family: var(--sg-font-display); font-weight: 600; font-size: 17px; color: var(--sg-fg); } .v4-crs-teacher p { font-family: var(--sg-font-display); font-style: normal; font-weight: 400; font-size: 17.5px; line-height: 1.55; color: var(--sg-fg); margin: 0 0 14px; } .v4-crs-teacher p:last-child { margin: 0; } /* Sidebar */ .v4-crs-side { position: sticky; top: 32px; align-self: start; } .v4-crs-side-card { background: #FBF6EC; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 24px 24px 26px; } .v4-crs-side-card .kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 14px; } .v4-crs-side-card h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; line-height: 1.18; margin: 0 0 10px; color: var(--sg-fg); } .v4-crs-side-card p { font-size: 14.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 18px; } .v4-crs-side-card .start { font-size: 13.5px; color: var(--sg-fg); padding: 12px 0; border-top: 1px dashed rgba(138,90,68,0.35); border-bottom: 1px dashed rgba(138,90,68,0.35); margin-bottom: 18px; } .v4-crs-side-card .start b { color: var(--sg-burnt-umber); } .v4-crs-side-card .actions { display: flex; flex-direction: column; gap: 10px; } .v4-crs-side-card .free-note { font-family: var(--sg-font-display); font-style: normal; font-size: 13px; color: var(--sg-fg-muted); margin-top: 14px; text-align: center; } /* Bridge back — the inverse of the Quiet Bridge */ .v4-crs-back-bridge { margin: 80px 0 0; padding: 28px 32px; background: linear-gradient(180deg, #FFFFFF 0%, #FBF6EC 100%); border: 1px solid rgba(15,27,34,0.1); border-top: 2px solid var(--sg-burnt-umber); border-radius: 2px; } .v4-crs-back-bridge .kicker { font-family: var(--sg-font-display); font-style: normal; font-size: 14.5px; color: var(--sg-burnt-umber); margin: 0 0 6px; } .v4-crs-back-bridge h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; margin: 0 0 6px; color: var(--sg-fg); } .v4-crs-back-bridge p { font-size: 15.5px; color: var(--sg-fg-muted); margin: 0 0 14px; } /* ========================================================================== RESPONSIVE — new pages ========================================================================== */ @media (max-width: 1080px) { .v4-fac-listing-grid { grid-template-columns: repeat(3, 1fr); } .v4-fac-featured-layout { grid-template-columns: 1fr; gap: 36px; } .v4-fac-featured-photo { max-width: 380px; } .v4-comp-writers-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; } .v4-crs-body-inner { grid-template-columns: 1fr; gap: 48px; } .v4-crs-side { position: static; max-width: 480px; } .v4-crs-meta-inner { grid-template-columns: repeat(3, 1fr); gap: 20px 24px; } .v4-crs-meta-cta { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 720px) { .v4-fac-hero-inner, .v4-fac-filters-inner, .v4-fac-listing-inner, .v4-fac-featured-inner, .v4-comp-hero-inner, .v4-comp-writers-inner, .v4-comp-preview-inner, .v4-comp-faq-inner, .v4-crs-hero-inner, .v4-crs-meta-inner, .v4-crs-body-inner { padding-left: 24px; padding-right: 24px; } .v4-fac-listing-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; } .v4-fac-hero-stats { grid-template-columns: 1fr 1fr; gap: 24px; } .v4-fac-meta-grid { grid-template-columns: 1fr; } .v4-crs-meta-inner { grid-template-columns: 1fr 1fr; } .v4-crs-week { grid-template-columns: 70px 1fr; gap: 14px; } .v4-comp-preview .frame .body { padding: 28px 24px; } .v4-comp-preview .frame .body h2 { font-size: 24px; } } /* ========================================================================== LISTEN PAGE — five shows, one teacher each ========================================================================== */ /* Hero */ .v4-lst-hero { padding: 88px 0 56px; background: linear-gradient(180deg, #FBF6EC 0%, #F5ECDA 100%); } .v4-lst-hero-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; text-align: center; } .v4-lst-hero .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 22px; display: inline-flex; align-items: center; gap: 14px; } .v4-lst-hero .kicker::before, .v4-lst-hero .kicker::after { content: ''; width: 28px; height: 1px; background: var(--sg-burnt-umber); } .v4-lst-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-style: normal; font-size: clamp(40px, 5.6vw, 64px); line-height: 1.06; letter-spacing: -0.018em; color: var(--sg-fg); margin: 0 0 24px; text-wrap: balance; } .v4-lst-hero .lede { font-size: 19px; line-height: 1.6; color: var(--sg-fg-muted); max-width: 760px; margin: 0 auto 14px; text-wrap: pretty; } .v4-lst-hero .sub { font-size: 13.5px; letter-spacing: 0.04em; color: var(--sg-fg-subtle); font-style: normal; font-family: var(--sg-font-display); margin: 0; } /* Shows grid */ .v4-lst-shows { padding: 80px 0 96px; background: #FBF6EC; } .v4-lst-shows-inner { max-width: 1240px; margin: 0 auto; padding: 0 40px; } .v4-lst-shows-head { text-align: center; margin-bottom: 44px; } .v4-lst-shows-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 36px; letter-spacing: -0.012em; margin: 0 0 8px; color: var(--sg-fg); } .v4-lst-shows-head p { font-family: var(--sg-font-display); font-style: normal; font-size: 17px; color: var(--sg-fg-muted); margin: 0; } .v4-lst-shows-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 28px; } /* Show card */ .v4-lst-show { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; transition: all 200ms; position: relative; } .v4-lst-show::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tint, var(--sg-burnt-umber)); opacity: 0; transition: opacity 180ms; } .v4-lst-show:hover { transform: translateY(-2px); border-color: var(--tint, var(--sg-burnt-umber)); box-shadow: 0 12px 28px rgba(20,40,60,0.08); } .v4-lst-show:hover::before { opacity: 1; } .v4-lst-show-art { aspect-ratio: 1 / 1; background: var(--sg-soft-sand); position: relative; } .v4-lst-show-art image-slot { width: 100%; height: 100%; display: block; } .v4-lst-show-eps { position: absolute; top: 12px; right: 12px; background: rgba(15,27,34,0.78); color: #F5ECDA; font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 0.08em; padding: 4px 8px; border-radius: 2px; } .v4-lst-show-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .v4-lst-show-meta { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); display: flex; align-items: center; gap: 8px; } .v4-lst-show-meta span { opacity: 0.5; } .v4-lst-show h3 { font-family: var(--sg-font-display); font-weight: 600; font-size: 24px; line-height: 1.18; letter-spacing: -0.008em; color: var(--sg-fg); margin: 0; } .v4-lst-show-teacher { font-size: 14px; color: var(--sg-fg-muted); margin: 0; } .v4-lst-show-teacher span { opacity: 0.4; margin: 0 6px; } .v4-lst-show-arc { font-family: var(--sg-font-display); font-style: normal; font-size: 15px; line-height: 1.5; color: var(--sg-fg-muted); margin: 4px 0 0; } .v4-lst-show-actions { margin-top: auto; padding-top: 18px; display: flex; gap: 10px; } .v4-lst-show-actions button, .v4-lst-show-actions a { border-radius: 2px; font-family: var(--sg-font-body); font-size: 13.5px; font-weight: 600; padding: 10px 16px; cursor: pointer; transition: all 150ms; border: 1px solid transparent; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; } .v4-lst-show-actions .primary { background: var(--tint, var(--sg-astral)); color: #fff; display: inline-flex; align-items: center; gap: 8px; } .v4-lst-show-actions .primary .play { font-size: 11px; opacity: 0.95; } .v4-lst-show-actions .primary:hover { filter: brightness(1.08); } .v4-lst-show-actions .ghost { background: transparent; color: var(--sg-fg); border-color: rgba(15,27,34,0.18); } .v4-lst-show-actions .ghost:hover { border-color: var(--sg-fg); } /* Now playing — latest episode */ .v4-lst-now { padding: 96px 0; background: #FFFFFF; border-top: 1px solid rgba(15,27,34,0.08); } .v4-lst-now-inner { max-width: 1120px; margin: 0 auto; padding: 0 40px; } .v4-lst-now-head { text-align: center; margin-bottom: 44px; } .v4-lst-now-head .kicker { font-family: var(--sg-font-display); font-style: normal; font-size: 15px; color: var(--sg-burnt-umber); margin: 0 0 8px; } .v4-lst-now-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 36px; letter-spacing: -0.012em; margin: 0; color: var(--sg-fg); } .v4-lst-player { background: #FBF6EC; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; overflow: hidden; display: grid; grid-template-columns: 280px 1fr; } .v4-lst-player-art { aspect-ratio: auto; height: 100%; min-height: 280px; } .v4-lst-player-body { padding: 32px 36px 36px; display: flex; flex-direction: column; gap: 12px; } .v4-lst-player-meta { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tint, var(--sg-burnt-umber)); display: flex; align-items: center; gap: 10px; } .v4-lst-player-meta span { opacity: 0.45; color: var(--sg-fg-subtle); } .v4-lst-player h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 30px; line-height: 1.18; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0; } .v4-lst-player-by { font-size: 14px; color: var(--sg-fg-muted); margin: 0 0 6px; } .v4-lst-player-by span { opacity: 0.4; margin: 0 6px; } .v4-lst-player-bar { display: flex; align-items: center; gap: 18px; margin-top: 8px; padding: 16px 18px; background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; } .v4-lst-player-play { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--tint, var(--sg-astral)); color: #fff; font-size: 15px; padding-left: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 150ms; } .v4-lst-player-play:hover { transform: scale(1.06); } .v4-lst-player-wave { flex: 1; display: flex; flex-direction: column; gap: 6px; } .v4-lst-wave { display: flex; align-items: center; gap: 2px; height: 44px; width: 100%; } .v4-lst-wave span { flex: 1; background: rgba(15,27,34,0.18); border-radius: 1px; min-width: 2px; transition: background 100ms; } .v4-lst-wave span.on { background: var(--sg-astral); } .v4-lst-player-times { display: flex; justify-content: space-between; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--sg-fg-subtle); letter-spacing: 0.04em; } .v4-lst-chapters { margin-top: 18px; } .v4-lst-chapters-lab { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); margin-bottom: 10px; } .v4-lst-chapters ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .v4-lst-chapters li { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; gap: 14px; padding: 9px 0; border-top: 1px solid rgba(15,27,34,0.06); font-size: 14.5px; color: var(--sg-fg); cursor: pointer; transition: color 120ms; } .v4-lst-chapters li:hover { color: var(--sg-burnt-umber); } .v4-lst-chapters li:last-child { border-bottom: 1px solid rgba(15,27,34,0.06); } .v4-lst-chapters li .t { font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.04em; color: var(--sg-fg-subtle); } /* Subscribe row */ .v4-lst-sub { padding: 80px 0; background: #F5ECDA; } .v4-lst-sub-inner { max-width: 1120px; margin: 0 auto; padding: 0 40px; } .v4-lst-sub-head { text-align: center; margin-bottom: 36px; } .v4-lst-sub-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 32px; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 8px; } .v4-lst-sub-head p { font-family: var(--sg-font-display); font-style: normal; font-size: 16px; color: var(--sg-fg-muted); margin: 0; } .v4-lst-sub-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .v4-lst-sub-card { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.1); padding: 22px 20px; border-radius: 2px; text-decoration: none; color: inherit; transition: all 160ms; display: flex; flex-direction: column; gap: 6px; } .v4-lst-sub-card:hover { border-color: var(--sg-fg); transform: translateY(-2px); } .v4-lst-sub-card .n { font-family: var(--sg-font-display); font-weight: 600; font-size: 16px; color: var(--sg-fg); } .v4-lst-sub-card .d { font-size: 12.5px; color: var(--sg-fg-subtle); font-style: normal; font-family: var(--sg-font-display); } /* FAQ */ .v4-lst-faq { padding: 80px 0 96px; background: #FBF6EC; } .v4-lst-faq-inner { max-width: 760px; margin: 0 auto; padding: 0 40px; } .v4-lst-faq h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 30px; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 28px; } .v4-lst-faq dl { margin: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(15,27,34,0.1); } .v4-lst-faq dt { font-family: var(--sg-font-display); font-weight: 500; font-size: 19px; color: var(--sg-fg); padding: 20px 0 6px; } .v4-lst-faq dd { margin: 0 0 20px; font-size: 15.5px; line-height: 1.6; color: var(--sg-fg-muted); padding-bottom: 4px; border-bottom: 1px solid rgba(15,27,34,0.1); } .v4-lst-faq dd a { color: var(--sg-burnt-umber); } /* Responsive */ @media (max-width: 980px) { .v4-lst-shows-grid { grid-template-columns: repeat(2, 1fr); } .v4-lst-player { grid-template-columns: 1fr; } .v4-lst-player-art { aspect-ratio: 16 / 9; min-height: 0; } .v4-lst-sub-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .v4-lst-hero-inner, .v4-lst-shows-inner, .v4-lst-now-inner, .v4-lst-sub-inner, .v4-lst-faq-inner { padding-left: 24px; padding-right: 24px; } .v4-lst-shows-grid { grid-template-columns: 1fr; } .v4-lst-player-body { padding: 24px 22px 28px; } .v4-lst-player h3 { font-size: 24px; } .v4-lst-sub-grid { grid-template-columns: 1fr; } .v4-lst-chapters li { grid-template-columns: 56px 1fr; gap: 10px; } } /* ========================================================================== SHOW PAGE — per-podcast episode archive (Friday Sermon, et al.) ========================================================================== */ /* Hero */ .v4-sh-hero { padding: 64px 0 72px; background: linear-gradient(180deg, #FBF6EC 0%, #F5ECDA 100%); border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-sh-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-sh-crumbs { font-size: 12.5px; letter-spacing: 0.04em; color: var(--sg-fg-subtle); margin-bottom: 28px; display: flex; align-items: center; gap: 10px; } .v4-sh-crumbs a { color: var(--sg-burnt-umber); text-decoration: none; } .v4-sh-crumbs a:hover { text-decoration: underline; } .v4-sh-crumbs span:not(a) { opacity: 0.5; } .v4-sh-hero-grid { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: center; } .v4-sh-hero-art { aspect-ratio: 1 / 1; border-radius: 2px; overflow: hidden; border: 1px solid rgba(15,27,34,0.1); box-shadow: 0 24px 48px -20px rgba(15,27,34,0.18); } .v4-sh-hero-art image-slot { width: 100%; height: 100%; display: block; } .v4-sh-hero-text .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tint, var(--sg-burnt-umber)); margin: 0 0 14px; } .v4-sh-hero-text h1 { font-family: var(--sg-font-display); font-weight: 500; font-style: normal; font-size: clamp(40px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.018em; color: var(--sg-fg); margin: 0 0 18px; } .v4-sh-hero-text .lede { font-size: 17px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0 0 14px; text-wrap: pretty; max-width: 620px; } .v4-sh-hero-text .by { font-family: var(--sg-font-display); font-style: normal; font-size: 15px; color: var(--sg-fg); margin: 0 0 24px; } .v4-sh-hero-text .by strong { font-style: normal; font-weight: 600; } .v4-sh-hero-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 36px; padding: 18px 0; border-top: 1px solid rgba(15,27,34,0.12); border-bottom: 1px solid rgba(15,27,34,0.12); margin-bottom: 24px; } .v4-sh-hero-stats > div { display: flex; flex-direction: column; gap: 4px; } .v4-sh-hero-stats .n { font-family: var(--sg-font-display); font-weight: 500; font-size: 28px; letter-spacing: -0.012em; color: var(--sg-fg); line-height: 1; } .v4-sh-hero-stats .l { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); } .v4-sh-hero-actions { display: flex; gap: 12px; } .v4-sh-hero-actions .primary { background: var(--tint, var(--sg-astral)); color: #fff; border: none; border-radius: 2px; padding: 12px 22px; font-family: var(--sg-font-body); font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: filter 150ms; white-space: nowrap; } .v4-sh-hero-actions .primary:hover { filter: brightness(1.08); } .v4-sh-hero-actions .primary .play { font-size: 11px; } .v4-sh-hero-actions .ghost { background: transparent; color: var(--sg-fg); border: 1px solid rgba(15,27,34,0.2); border-radius: 2px; padding: 12px 22px; font-family: var(--sg-font-body); font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; transition: border-color 150ms; white-space: nowrap; } .v4-sh-hero-actions .ghost:hover { border-color: var(--sg-fg); } /* Filter bar — sticky */ .v4-sh-filters { background: #FFFFFF; border-bottom: 1px solid rgba(15,27,34,0.08); position: sticky; top: 0; z-index: 10; } .v4-sh-filters-inner { max-width: 1200px; margin: 0 auto; padding: 20px 40px 16px; } .v4-sh-filter-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 16px; padding: 6px 0; } .v4-sh-filter-row .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-fg-subtle); } .v4-sh-filter-row .chips { display: flex; flex-wrap: wrap; gap: 6px; } .v4-sh-filter-row .chips button { background: transparent; border: 1px solid rgba(15,27,34,0.14); color: var(--sg-fg-muted); font-family: var(--sg-font-body); font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: all 120ms; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .v4-sh-filter-row .chips button:hover { border-color: var(--sg-fg); color: var(--sg-fg); } .v4-sh-filter-row .chips button.on { background: var(--tint, var(--sg-astral)); color: #FFFFFF; border-color: var(--tint, var(--sg-astral)); } .v4-sh-filter-row .chips button .ct { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; opacity: 0.6; } .v4-sh-filter-row .chips button.on .ct { opacity: 0.85; } .v4-sh-filter-meta { font-size: 12px; color: var(--sg-fg-subtle); margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(15,27,34,0.1); letter-spacing: 0.02em; } .v4-sh-filter-meta strong { color: var(--sg-fg); } /* Episode list */ .v4-sh-list { padding: 48px 0 80px; background: #FBF6EC; } .v4-sh-list-inner { max-width: 920px; margin: 0 auto; padding: 0 40px; } .v4-sh-empty { padding: 60px 40px; text-align: center; font-family: var(--sg-font-display); font-style: normal; color: var(--sg-fg-muted); background: #FFFFFF; border: 1px dashed rgba(15,27,34,0.15); border-radius: 2px; } .v4-sh-ep { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto auto; column-gap: 22px; row-gap: 6px; padding: 24px 0 24px; border-bottom: 1px solid rgba(15,27,34,0.1); align-items: start; } .v4-sh-ep:last-of-type { border-bottom-color: rgba(15,27,34,0.18); } .v4-sh-ep-play { grid-row: 1 / 4; grid-column: 1; width: 56px; height: 56px; border-radius: 50%; background: transparent; border: 1.5px solid rgba(15,27,34,0.18); color: var(--sg-fg); font-size: 16px; padding-left: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 160ms; margin-top: 4px; } .v4-sh-ep-play:hover { background: var(--tint, var(--sg-astral)); color: #FFFFFF; border-color: var(--tint, var(--sg-astral)); } .v4-sh-ep-meta { grid-column: 2; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .v4-sh-ep-meta .num { color: var(--tint, var(--sg-burnt-umber)); } .v4-sh-ep-meta .dot { opacity: 0.4; } .v4-sh-ep-meta .t { color: var(--sg-fg-muted); } .v4-sh-ep-title { grid-column: 2; font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; line-height: 1.22; letter-spacing: -0.008em; color: var(--sg-fg); margin: 2px 0 0; } .v4-sh-ep-note { grid-column: 2; font-family: var(--sg-font-display); font-style: normal; font-size: 15.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 2px 0 0; text-wrap: pretty; } .v4-sh-ep-actions { grid-column: 2; display: flex; gap: 18px; margin-top: 8px; } .v4-sh-ep-actions a { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sg-burnt-umber); text-decoration: none; border-bottom: 1px dotted currentColor; padding-bottom: 1px; } .v4-sh-ep-actions a:hover { color: var(--sg-fg); } .v4-sh-more { margin-top: 36px; text-align: center; } .v4-sh-more button { background: transparent; border: 1px solid rgba(15,27,34,0.2); color: var(--sg-fg); font-family: var(--sg-font-body); font-size: 13.5px; font-weight: 600; padding: 12px 28px; border-radius: 2px; cursor: pointer; transition: border-color 150ms; } .v4-sh-more button:hover { border-color: var(--sg-fg); } .v4-sh-more p { font-family: var(--sg-font-display); font-style: normal; font-size: 13.5px; color: var(--sg-fg-subtle); margin: 14px 0 0; } @media (max-width: 980px) { .v4-sh-hero-grid { grid-template-columns: 1fr; gap: 36px; } .v4-sh-hero-art { max-width: 280px; } .v4-sh-hero-stats { gap: 24px; } } @media (max-width: 720px) { .v4-sh-hero-inner, .v4-sh-filters-inner, .v4-sh-list-inner { padding-left: 24px; padding-right: 24px; } .v4-sh-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 18px 24px; } .v4-sh-filter-row { grid-template-columns: 1fr; gap: 8px; } .v4-sh-ep { grid-template-columns: 44px 1fr; column-gap: 16px; } .v4-sh-ep-play { width: 44px; height: 44px; font-size: 13px; } .v4-sh-ep-title { font-size: 19px; } .v4-sh-ep-actions { flex-wrap: wrap; gap: 12px 18px; } } /* ========================================================================== SEMINARY OVERVIEW — three pathways, seven sciences, the rhythm ========================================================================== */ /* Hero */ .v4-sem-hero { padding: 88px 0 64px; background: linear-gradient(180deg, #FBF6EC 0%, #F5ECDA 100%); } .v4-sem-hero-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; text-align: center; } .v4-sem-hero .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 22px; display: inline-flex; align-items: center; gap: 14px; } .v4-sem-hero .kicker::before, .v4-sem-hero .kicker::after { content: ''; width: 28px; height: 1px; background: var(--sg-burnt-umber); } .v4-sem-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-style: normal; font-size: clamp(40px, 5.4vw, 64px); line-height: 1.06; letter-spacing: -0.018em; color: var(--sg-fg); margin: 0 0 22px; text-wrap: balance; } .v4-sem-hero .lede { font-size: 19px; line-height: 1.6; color: var(--sg-fg-muted); max-width: 760px; margin: 0 auto 36px; text-wrap: pretty; } .v4-sem-hero-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 48px; padding: 20px 0; margin-bottom: 36px; border-top: 1px solid rgba(15,27,34,0.12); border-bottom: 1px solid rgba(15,27,34,0.12); } .v4-sem-hero-stats > div { display: flex; flex-direction: column; align-items: center; gap: 4px; } .v4-sem-hero-stats .n { font-family: var(--sg-font-display); font-weight: 500; font-size: 32px; letter-spacing: -0.012em; color: var(--sg-fg); line-height: 1; } .v4-sem-hero-stats .l { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); } .v4-sem-hero-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .v4-sem-hero-actions .primary, .v4-sem-hero-actions .ghost { border-radius: 2px; font-family: var(--sg-font-body); font-size: 14px; font-weight: 600; padding: 13px 24px; text-decoration: none; display: inline-flex; align-items: center; transition: all 150ms; white-space: nowrap; } .v4-sem-hero-actions .primary { background: var(--sg-astral); color: #fff; border: 1px solid var(--sg-astral); } .v4-sem-hero-actions .primary:hover { background: var(--sg-astral-shade-30); } .v4-sem-hero-actions .ghost { background: transparent; color: var(--sg-fg); border: 1px solid rgba(15,27,34,0.2); } .v4-sem-hero-actions .ghost:hover { border-color: var(--sg-fg); } /* Three pathways */ .v4-sem-paths { padding: 96px 0 96px; background: #FFFFFF; } .v4-sem-paths-inner { max-width: 1240px; margin: 0 auto; padding: 0 40px; } .v4-sem-paths-head { text-align: center; margin-bottom: 56px; } .v4-sem-paths-head .kicker { font-family: var(--sg-font-display); font-style: normal; font-size: 15px; color: var(--sg-burnt-umber); margin: 0 0 8px; } .v4-sem-paths-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 40px; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 12px; } .v4-sem-paths-head .sub { font-family: var(--sg-font-display); font-style: normal; font-size: 17px; color: var(--sg-fg-muted); max-width: 640px; margin: 0 auto; } .v4-sem-paths-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .v4-sem-path { background: #FBF6EC; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 32px 32px 32px; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; } .v4-sem-path::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--tint); } .v4-sem-path header { margin-bottom: 4px; } .v4-sem-path header .name { font-family: var(--sg-font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.008em; color: var(--sg-fg); margin: 0 0 8px; } .v4-sem-path header .for { font-family: var(--sg-font-display); font-style: normal; font-size: 15px; color: var(--sg-fg-muted); margin: 0; line-height: 1.45; } .v4-sem-path dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; row-gap: 8px; column-gap: 14px; padding: 14px 0; border-top: 1px solid rgba(15,27,34,0.1); border-bottom: 1px solid rgba(15,27,34,0.1); } .v4-sem-path dt { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); padding-top: 2px; } .v4-sem-path dd { margin: 0; font-size: 14px; color: var(--sg-fg); line-height: 1.45; } .v4-sem-path .arc { font-family: var(--sg-font-display); font-style: normal; font-size: 15.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; text-wrap: pretty; } .v4-sem-path .curr-lab { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); margin-top: 4px; } .v4-sem-path ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; } .v4-sem-path ul li { position: relative; padding-left: 14px; font-size: 14px; color: var(--sg-fg); line-height: 1.45; } .v4-sem-path ul li::before { content: '·'; position: absolute; left: 0; top: -2px; color: var(--tint); font-weight: 700; font-size: 18px; } .v4-sem-path .actions { margin-top: auto; padding-top: 8px; } .v4-sem-path .actions a { font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--tint); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: opacity 150ms; } .v4-sem-path .actions a:hover { opacity: 0.75; } /* Seven sciences */ .v4-sem-sci { padding: 88px 0 96px; background: #F5ECDA; } .v4-sem-sci-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; } .v4-sem-sci-head { text-align: center; margin-bottom: 44px; } .v4-sem-sci-head .kicker { font-family: var(--sg-font-display); font-style: normal; font-size: 15px; color: var(--sg-burnt-umber); margin: 0 0 8px; } .v4-sem-sci-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 36px; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 12px; } .v4-sem-sci-head .sub { font-family: var(--sg-font-display); font-style: normal; font-size: 16.5px; color: var(--sg-fg-muted); max-width: 620px; margin: 0 auto; } .v4-sem-sci-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .v4-sem-sci-grid > :last-child { grid-column: span 4; justify-self: center; max-width: 240px; } .v4-sem-sci-card { background: #FBF6EC; border: 1px solid rgba(15,27,34,0.1); padding: 24px 22px; border-radius: 2px; display: flex; flex-direction: column; gap: 6px; text-align: center; align-items: center; transition: all 160ms; } .v4-sem-sci-card:hover { border-color: var(--sg-burnt-umber); transform: translateY(-1px); } .v4-sem-sci-card .ar { font-family: "Riwaya", serif; font-size: 28px; color: var(--sg-fg); line-height: 1; margin-bottom: 4px; } .v4-sem-sci-card .en { font-family: var(--sg-font-display); font-weight: 600; font-size: 18px; color: var(--sg-fg); letter-spacing: -0.008em; } .v4-sem-sci-card .hint { font-family: var(--sg-font-display); font-style: normal; font-size: 13.5px; color: var(--sg-fg-subtle); line-height: 1.4; } /* A typical week */ .v4-sem-week { padding: 88px 0 96px; background: #FFFFFF; } .v4-sem-week-inner { max-width: 1120px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; } .v4-sem-week-text .kicker { font-family: var(--sg-font-display); font-style: normal; font-size: 15px; color: var(--sg-burnt-umber); margin: 0 0 8px; } .v4-sem-week-text h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 32px; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 16px; text-wrap: balance; } .v4-sem-week-text p { font-size: 16px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0 0 14px; } .v4-sem-week-text .aside { font-family: var(--sg-font-display); font-style: normal; font-size: 14.5px; color: var(--sg-fg-subtle); border-left: 2px solid var(--sg-burnt-umber); padding-left: 14px; margin-top: 18px; } .v4-sem-week-table { border: 1px solid rgba(15,27,34,0.12); border-radius: 2px; overflow: hidden; } .v4-sem-week-row { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 18px; padding: 14px 22px; border-bottom: 1px solid rgba(15,27,34,0.08); background: #FBF6EC; } .v4-sem-week-row:last-child { border-bottom: none; } .v4-sem-week-row:nth-child(even) { background: #FFFFFF; } .v4-sem-week-row .day { font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); } .v4-sem-week-row .a { font-family: var(--sg-font-display); font-weight: 500; font-size: 16px; color: var(--sg-fg); } .v4-sem-week-row .b { font-size: 13px; color: var(--sg-fg-subtle); font-style: normal; font-family: var(--sg-font-display); } /* How it's free */ .v4-sem-free { padding: 96px 0; background: #0F1B22; color: #F5ECDA; } .v4-sem-free-inner { max-width: 760px; margin: 0 auto; padding: 0 40px; text-align: center; } .v4-sem-free .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #ECA608; margin: 0 0 22px; } .v4-sem-free h2 { font-family: var(--sg-font-display); font-weight: 500; font-style: normal; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.012em; margin: 0 0 22px; text-wrap: balance; color: #F5ECDA; } .v4-sem-free .big { font-size: 18px; line-height: 1.65; color: rgba(245,236,218,0.88); margin: 0 0 16px; text-wrap: pretty; } .v4-sem-free p { font-size: 16px; line-height: 1.65; color: rgba(245,236,218,0.72); margin: 0 0 32px; } .v4-sem-free p strong { color: #ECA608; font-weight: 600; } .v4-sem-free .actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .v4-sem-free .primary, .v4-sem-free .ghost { border-radius: 2px; font-family: var(--sg-font-body); font-size: 14px; font-weight: 600; padding: 13px 24px; text-decoration: none; display: inline-flex; align-items: center; transition: all 150ms; white-space: nowrap; } .v4-sem-free .primary { background: #ECA608; color: #0F1B22; border: 1px solid #ECA608; } .v4-sem-free .primary:hover { background: #FFC844; border-color: #FFC844; } .v4-sem-free .ghost { background: transparent; color: #F5ECDA; border: 1px solid rgba(245,236,218,0.3); } .v4-sem-free .ghost:hover { border-color: #F5ECDA; } /* FAQ */ .v4-sem-faq { padding: 80px 0 96px; background: #FBF6EC; } .v4-sem-faq-inner { max-width: 760px; margin: 0 auto; padding: 0 40px; } .v4-sem-faq h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 30px; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 28px; } .v4-sem-faq dl { margin: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(15,27,34,0.1); } .v4-sem-faq dt { font-family: var(--sg-font-display); font-weight: 500; font-size: 19px; color: var(--sg-fg); padding: 20px 0 6px; } .v4-sem-faq dd { margin: 0 0 20px; font-size: 15.5px; line-height: 1.6; color: var(--sg-fg-muted); padding-bottom: 4px; border-bottom: 1px solid rgba(15,27,34,0.1); } .v4-sem-faq dd a { color: var(--sg-burnt-umber); } /* ========================================================================== CATALOGUE — Term One full listing with sidebar filters ========================================================================== */ /* Hero */ .v4-cat-hero { padding: 56px 0 36px; background: linear-gradient(180deg, #FBF6EC 0%, #F5ECDA 100%); border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-cat-hero-inner { max-width: 1240px; margin: 0 auto; padding: 0 40px; } .v4-cat-crumbs { font-size: 12.5px; letter-spacing: 0.04em; color: var(--sg-fg-subtle); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; } .v4-cat-crumbs a { color: var(--sg-burnt-umber); text-decoration: none; } .v4-cat-crumbs a:hover { text-decoration: underline; } .v4-cat-crumbs span:not(a) { opacity: 0.5; } .v4-cat-hero .kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 14px; } .v4-cat-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-style: normal; font-size: clamp(36px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -0.016em; color: var(--sg-fg); margin: 0 0 16px; text-wrap: balance; } .v4-cat-hero .lede { font-size: 16.5px; line-height: 1.6; color: var(--sg-fg-muted); max-width: 720px; margin: 0; text-wrap: pretty; } /* Search bar */ .v4-cat-search { background: #FFFFFF; border-bottom: 1px solid rgba(15,27,34,0.08); position: sticky; top: 0; z-index: 10; } .v4-cat-search-inner { max-width: 1240px; margin: 0 auto; padding: 18px 40px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .v4-cat-search-input { flex: 1; min-width: 280px; display: flex; align-items: center; gap: 10px; background: #FBF6EC; border: 1px solid rgba(15,27,34,0.12); border-radius: 2px; padding: 0 14px; transition: border-color 150ms; } .v4-cat-search-input:focus-within { border-color: var(--sg-burnt-umber); } .v4-cat-search-input .ico { color: var(--sg-fg-subtle); font-size: 18px; line-height: 1; } .v4-cat-search-input input { flex: 1; background: transparent; border: none; outline: none; padding: 12px 0; font-family: var(--sg-font-body); font-size: 14.5px; color: var(--sg-fg); } .v4-cat-search-input .clear { background: transparent; border: none; font-size: 20px; color: var(--sg-fg-subtle); cursor: pointer; padding: 0 4px; } .v4-cat-search-input .clear:hover { color: var(--sg-fg); } .v4-cat-search-meta { font-size: 12.5px; color: var(--sg-fg-subtle); letter-spacing: 0.02em; display: flex; align-items: center; gap: 14px; } .v4-cat-search-meta strong { color: var(--sg-fg); font-weight: 600; } .v4-cat-search-meta .reset { background: transparent; border: 1px solid rgba(15,27,34,0.18); border-radius: 999px; padding: 4px 12px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--sg-fg); cursor: pointer; transition: border-color 120ms; } .v4-cat-search-meta .reset:hover { border-color: var(--sg-fg); } /* Listing */ .v4-cat-listing { padding: 32px 0 80px; background: #FBF6EC; } .v4-cat-listing-inner { max-width: 1240px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; } /* Sidebar */ .v4-cat-side { position: sticky; top: 80px; background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 24px 22px; display: flex; flex-direction: column; gap: 24px; } .v4-cat-side-group h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 0 0 10px; } .v4-cat-radio { display: flex; flex-direction: column; gap: 4px; } .v4-cat-radio label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sg-fg-muted); cursor: pointer; padding: 5px 8px; border-radius: 3px; transition: all 120ms; } .v4-cat-radio label:hover { background: #FBF6EC; color: var(--sg-fg); } .v4-cat-radio label.on { background: var(--sg-soft-sand); color: var(--sg-fg); font-weight: 600; } .v4-cat-radio label input { position: absolute; opacity: 0; pointer-events: none; } .v4-cat-radio label .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .v4-cat-side select { width: 100%; background: #FBF6EC; border: 1px solid rgba(15,27,34,0.14); border-radius: 3px; padding: 9px 12px; font-family: var(--sg-font-body); font-size: 14px; color: var(--sg-fg); cursor: pointer; outline: none; } .v4-cat-side select:focus { border-color: var(--sg-burnt-umber); } /* Grid */ .v4-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .v4-cat-empty { grid-column: 1 / -1; background: #FFFFFF; border: 1px dashed rgba(15,27,34,0.16); border-radius: 2px; padding: 40px; text-align: center; color: var(--sg-fg-muted); } .v4-cat-empty p { font-family: var(--sg-font-display); font-style: normal; font-size: 17px; margin: 0 0 16px; } .v4-cat-empty button { background: var(--sg-astral); color: #fff; border: none; padding: 10px 22px; border-radius: 2px; font-family: var(--sg-font-body); font-weight: 600; font-size: 13.5px; cursor: pointer; } .v4-cat-card { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-top: 2px solid var(--tint, var(--sg-burnt-umber)); border-radius: 2px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; transition: all 180ms; } .v4-cat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(15,27,34,0.06); } .v4-cat-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .v4-cat-card-head .code { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: 0.08em; color: var(--sg-fg-subtle); } .v4-cat-card-head .lvl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(15,27,34,0.06); color: var(--sg-fg); white-space: nowrap; } .v4-cat-card-head .lvl-101 { background: rgba(34,80,106,0.1); color: #22506A; } .v4-cat-card-head .lvl-201 { background: rgba(107,123,82,0.14); color: #4D5A3C; } .v4-cat-card-head .lvl-301 { background: rgba(31,42,27,0.12); color: #1F2A1B; } .v4-cat-card h3 { font-family: var(--sg-font-display); font-weight: 600; font-size: 20px; line-height: 1.22; letter-spacing: -0.008em; margin: 0; color: var(--sg-fg); text-wrap: pretty; } .v4-cat-card h3 a { color: inherit; text-decoration: none; } .v4-cat-card h3 a:hover { color: var(--sg-burnt-umber); } .v4-cat-card-by { display: flex; align-items: center; gap: 10px; } .v4-cat-card-by .av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; color: #F5ECDA; font-family: var(--sg-font-display); font-weight: 600; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.04em; } .v4-cat-card-by .t { font-size: 13.5px; color: var(--sg-fg-muted); } .v4-cat-card-by .t .dot { opacity: 0.4; margin: 0 4px; } .v4-cat-card-when { display: flex; align-items: baseline; gap: 8px; padding: 8px 0 6px; border-top: 1px dashed rgba(15,27,34,0.1); border-bottom: 1px dashed rgba(15,27,34,0.1); font-size: 12.5px; color: var(--sg-fg-muted); font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.04em; } .v4-cat-card-when .day { font-weight: 700; color: var(--sg-fg); } .v4-cat-card-when .lang { margin-left: auto; color: var(--sg-fg-subtle); } .v4-cat-card-tags { display: flex; gap: 6px; flex-wrap: wrap; } .v4-cat-card-tags .tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-fg-subtle); padding: 2px 8px; border: 1px solid rgba(15,27,34,0.12); border-radius: 2px; } .v4-cat-card-actions { margin-top: 2px; } .v4-cat-card-actions .primary { font-size: 13px; font-weight: 600; color: var(--tint, var(--sg-astral)); text-decoration: none; letter-spacing: 0.02em; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: opacity 120ms; } .v4-cat-card-actions .primary:hover { opacity: 0.75; } .v4-cat-card-actions .placeholder { font-family: var(--sg-font-display); font-style: normal; font-size: 13px; color: var(--sg-fg-subtle); } /* Footer note */ .v4-cat-foot { padding: 56px 0 72px; background: #FBF6EC; border-top: 1px solid rgba(15,27,34,0.06); } .v4-cat-foot-inner { max-width: 760px; margin: 0 auto; padding: 0 40px; text-align: center; } .v4-cat-foot p { font-family: var(--sg-font-display); font-style: normal; font-size: 15.5px; color: var(--sg-fg-muted); margin: 0 0 14px; } .v4-cat-foot .kicker { font-style: normal; font-family: var(--sg-font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .v4-cat-foot .kicker a { color: var(--sg-burnt-umber); text-decoration: none; border-bottom: 1px solid currentColor; } /* Responsive */ @media (max-width: 1080px) { .v4-sem-paths-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } .v4-sem-sci-grid { grid-template-columns: repeat(3, 1fr); } .v4-sem-sci-grid > :last-child { grid-column: span 3; } .v4-sem-week-inner { grid-template-columns: 1fr; gap: 32px; } .v4-cat-listing-inner { grid-template-columns: 220px 1fr; gap: 24px; } } @media (max-width: 820px) { .v4-cat-listing-inner { grid-template-columns: 1fr; } .v4-cat-side { position: static; } .v4-cat-grid { grid-template-columns: 1fr; } .v4-sem-hero-stats { gap: 28px; } } @media (max-width: 720px) { .v4-sem-hero-inner, .v4-sem-paths-inner, .v4-sem-sci-inner, .v4-sem-week-inner, .v4-sem-free-inner, .v4-sem-faq-inner, .v4-cat-hero-inner, .v4-cat-search-inner, .v4-cat-listing-inner, .v4-cat-foot-inner { padding-left: 24px; padding-right: 24px; } .v4-sem-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; } .v4-sem-sci-grid { grid-template-columns: repeat(2, 1fr); } .v4-sem-sci-grid > :last-child { grid-column: span 2; } .v4-sem-week-row { grid-template-columns: 50px 1fr; row-gap: 4px; } .v4-sem-week-row .b { grid-column: 2; font-size: 12px; } } /* ========================================================================== STUDENT DASHBOARD — My Seminary (the post-enrolment home) ========================================================================== */ /* Top — greeting */ .v4-dash-top { padding: 48px 0 32px; background: linear-gradient(180deg, #FBF6EC 0%, #F5ECDA 100%); border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-dash-top-inner { max-width: 1240px; margin: 0 auto; padding: 0 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .v4-dash-greet .ar { font-family: "Riwaya", serif; font-size: 28px; color: var(--sg-burnt-umber); margin: 0 0 8px; line-height: 1; direction: rtl; } .v4-dash-greet h1 { font-family: var(--sg-font-display); font-weight: 500; font-style: normal; font-size: clamp(32px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.014em; color: var(--sg-fg); margin: 0 0 10px; text-wrap: balance; } .v4-dash-greet .sub { font-size: 13.5px; color: var(--sg-fg-muted); margin: 0; } .v4-dash-greet .sub span { opacity: 0.4; margin: 0 6px; } .v4-dash-greet-actions { display: flex; gap: 8px; } .v4-dash-greet-actions .ghost { background: transparent; border: 1px solid rgba(15,27,34,0.2); color: var(--sg-fg); font-family: var(--sg-font-body); font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 3px; cursor: pointer; white-space: nowrap; transition: border-color 150ms; } .v4-dash-greet-actions .ghost:hover { border-color: var(--sg-fg); } /* This week — live session strip */ .v4-dash-week { padding: 48px 0; background: #FFFFFF; } .v4-dash-week-inner { max-width: 1240px; margin: 0 auto; padding: 0 40px; } .v4-dash-week header { margin-bottom: 22px; } .v4-dash-week header h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 26px; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 6px; } .v4-dash-week header p { font-family: var(--sg-font-display); font-style: normal; font-size: 14.5px; color: var(--sg-fg-muted); margin: 0; } .v4-dash-week-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .v4-dash-sess { background: #FBF6EC; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; } .v4-dash-sess.live-soon { background: #0F1B22; color: #F5ECDA; border-color: #0F1B22; } .v4-dash-sess-when { display: flex; align-items: baseline; gap: 10px; } .v4-dash-sess-when .day { font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); } .v4-dash-sess.live-soon .v4-dash-sess-when .day { color: #ECA608; position: relative; padding-left: 12px; } .v4-dash-sess.live-soon .v4-dash-sess-when .day::before { content: ''; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #ECA608; transform: translateY(-50%); animation: dashPulse 1.8s ease-in-out infinite; } @keyframes dashPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .v4-dash-sess-when .date { font-size: 12px; color: var(--sg-fg-subtle); letter-spacing: 0.04em; } .v4-dash-sess.live-soon .v4-dash-sess-when .date { color: rgba(245,236,218,0.7); } .v4-dash-sess-body { flex: 1; } .v4-dash-sess-body .course { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 0 0 4px; } .v4-dash-sess.live-soon .v4-dash-sess-body .course { color: rgba(245,236,218,0.6); } .v4-dash-sess-body .wk { font-weight: 500; letter-spacing: 0.02em; text-transform: none; } .v4-dash-sess-body h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 19px; line-height: 1.22; margin: 0 0 6px; letter-spacing: -0.008em; color: var(--sg-fg); } .v4-dash-sess.live-soon .v4-dash-sess-body h3 { color: #F5ECDA; } .v4-dash-sess-body .scholar { font-family: var(--sg-font-display); font-style: normal; font-size: 14px; color: var(--sg-fg-muted); margin: 0; } .v4-dash-sess.live-soon .v4-dash-sess-body .scholar { color: rgba(245,236,218,0.65); } .v4-dash-sess-action .primary, .v4-dash-sess-action .ghost { font-family: var(--sg-font-body); font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 3px; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: all 150ms; } .v4-dash-sess-action .primary { background: #ECA608; color: #0F1B22; } .v4-dash-sess-action .primary:hover { background: #FFC844; } .v4-dash-sess-action .ghost { background: transparent; color: var(--sg-fg); border-color: rgba(15,27,34,0.2); } .v4-dash-sess-action .ghost:hover { border-color: var(--sg-fg); } /* Main grid — courses + side rail */ .v4-dash-main { padding: 48px 0 96px; background: #FBF6EC; } .v4-dash-main-inner { max-width: 1240px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 360px; gap: 36px; align-items: start; } /* Courses */ .v4-dash-courses { display: flex; flex-direction: column; gap: 24px; } .v4-dash-courses header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .v4-dash-courses header h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 26px; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0; } .v4-dash-courses .see-all { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--sg-burnt-umber); text-decoration: none; border-bottom: 1px dotted currentColor; white-space: nowrap; } .v4-dash-courses-list { display: flex; flex-direction: column; gap: 12px; } .v4-dash-course { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-top: 2px solid var(--tint); border-radius: 2px; padding: 20px 22px; display: grid; grid-template-columns: 48px 1fr auto; gap: 18px; align-items: center; } .v4-dash-course .av { width: 48px; height: 48px; border-radius: 50%; background: var(--tint); color: #F5ECDA; font-family: var(--sg-font-display); font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.04em; } .v4-dash-course .meta { min-width: 0; } .v4-dash-course .code { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--sg-fg-subtle); margin: 0 0 4px; } .v4-dash-course h3 { font-family: var(--sg-font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.008em; color: var(--sg-fg); margin: 0 0 4px; } .v4-dash-course h3 a { color: inherit; text-decoration: none; } .v4-dash-course h3 a:hover { color: var(--sg-burnt-umber); } .v4-dash-course .by { font-size: 13px; color: var(--sg-fg-muted); margin: 0 0 10px; } .v4-dash-course .left { font-family: var(--sg-font-display); font-style: normal; font-size: 12.5px; color: var(--sg-fg-subtle); margin: 8px 0 0; } .v4-dash-course .action .primary { background: transparent; border: 1px solid rgba(15,27,34,0.2); color: var(--sg-fg); font-family: var(--sg-font-body); font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 3px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: all 150ms; display: inline-flex; align-items: center; } .v4-dash-course .action .primary:hover { background: var(--tint); color: #fff; border-color: var(--tint); } /* Progress bar */ .v4-dash-prog { position: relative; height: 22px; display: flex; align-items: center; } .v4-dash-prog::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: rgba(15,27,34,0.08); border-radius: 2px; transform: translateY(-50%); } .v4-dash-prog-bar { position: absolute; left: 0; top: 50%; height: 4px; border-radius: 2px; background: var(--sg-astral); transform: translateY(-50%); z-index: 1; } .v4-dash-prog-lab { position: relative; margin-left: auto; z-index: 2; background: #FFFFFF; padding-left: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-fg-subtle); } /* Done — earlier terms */ .v4-dash-done { margin-top: 12px; padding-top: 24px; border-top: 1px solid rgba(15,27,34,0.12); } .v4-dash-done .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 0 0 14px; } .v4-dash-done ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .v4-dash-done li { display: grid; grid-template-columns: 180px 140px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(15,27,34,0.1); font-size: 13.5px; align-items: baseline; } .v4-dash-done li:last-child { border-bottom: none; } .v4-dash-done .t { font-family: var(--sg-font-display); font-weight: 500; color: var(--sg-fg); } .v4-dash-done .s { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: 0.04em; color: var(--sg-fg-subtle); } .v4-dash-done .w { font-family: var(--sg-font-display); font-style: normal; color: var(--sg-fg-muted); font-size: 13px; } /* Side rail cards */ .v4-dash-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; } .v4-dash-card { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 20px 22px; } .v4-dash-card.v4-dash-card-tint { background: var(--sg-soft-sand); border-color: rgba(138,90,68,0.16); } .v4-dash-card header { margin-bottom: 14px; } .v4-dash-card header h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.008em; color: var(--sg-fg); margin: 0 0 4px; } .v4-dash-card header p { font-family: var(--sg-font-display); font-style: normal; font-size: 13.5px; color: var(--sg-fg-muted); margin: 0; line-height: 1.4; } .v4-dash-queue { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .v4-dash-queue li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px dashed rgba(15,27,34,0.08); } .v4-dash-queue li:last-child { border-bottom: none; padding-bottom: 0; } .v4-dash-queue .kind { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: var(--sg-soft-sand); color: var(--sg-burnt-umber); } .v4-dash-queue .kind-audio { background: rgba(34,80,106,0.12); color: #22506A; } .v4-dash-queue .kind-letter { background: rgba(138,90,68,0.14); color: #8A5A44; } .v4-dash-queue .kind-pdf { background: rgba(107,123,82,0.18); color: #6B7B52; } .v4-dash-queue .t { font-family: var(--sg-font-display); font-weight: 500; font-size: 14.5px; color: var(--sg-fg); margin: 0 0 2px; line-height: 1.3; } .v4-dash-queue .m { font-size: 11.5px; color: var(--sg-fg-subtle); margin: 0; } .v4-dash-queue .m span { opacity: 0.45; margin: 0 4px; } .v4-dash-oh { list-style: none; padding: 0; margin: 0; } .v4-dash-oh li { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; } .v4-dash-oh .who { grid-column: 1; font-family: var(--sg-font-display); font-weight: 600; font-size: 14.5px; color: var(--sg-fg); } .v4-dash-oh .when { grid-column: 1; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: 0.06em; color: var(--sg-burnt-umber); font-weight: 700; } .v4-dash-oh .via { grid-column: 1; font-family: var(--sg-font-display); font-style: normal; font-size: 13px; color: var(--sg-fg-muted); } .v4-dash-oh button { grid-column: 2; grid-row: 1 / span 3; align-self: center; background: var(--sg-astral); color: #fff; border: none; font-family: var(--sg-font-body); font-size: 12.5px; font-weight: 600; padding: 9px 14px; border-radius: 3px; cursor: pointer; white-space: nowrap; } .v4-dash-oh button:hover { background: var(--sg-astral-shade-30); } .v4-dash-ask { display: inline-block; font-family: var(--sg-font-display); font-style: normal; font-size: 15px; color: var(--sg-burnt-umber); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .v4-dash-ask:hover { opacity: 0.75; } /* ========================================================================== LESSON VIEW — the classroom screen ========================================================================== */ /* Top course bar */ .v4-lsn-bar { background: #FFFFFF; border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-lsn-bar-inner { max-width: 1320px; margin: 0 auto; padding: 16px 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .v4-lsn-crumbs { font-size: 12.5px; letter-spacing: 0.04em; color: var(--sg-fg-subtle); display: flex; align-items: center; gap: 10px; } .v4-lsn-crumbs a { color: var(--sg-burnt-umber); text-decoration: none; } .v4-lsn-crumbs a:hover { text-decoration: underline; } .v4-lsn-crumbs span:not(a) { opacity: 0.5; } .v4-lsn-bar-scholar { display: flex; align-items: center; gap: 10px; } .v4-lsn-bar-scholar .av { width: 28px; height: 28px; border-radius: 50%; color: #F5ECDA; font-family: var(--sg-font-display); font-weight: 600; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.04em; } .v4-lsn-bar-scholar .t { font-size: 13px; color: var(--sg-fg); } .v4-lsn-bar-scholar .dot { opacity: 0.4; margin: 0 5px; } /* Main */ .v4-lsn-main { padding: 32px 0 80px; background: #FBF6EC; } .v4-lsn-main-inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; } /* Center — head, video, tabs, panel */ .v4-lsn-head { margin-bottom: 18px; } .v4-lsn-head .kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 8px; } .v4-lsn-head .kicker span { opacity: 0.4; margin: 0 5px; } .v4-lsn-head h1 { font-family: var(--sg-font-display); font-weight: 500; font-style: normal; font-size: clamp(28px, 3.5vw, 38px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 8px; text-wrap: balance; } .v4-lsn-head .meta { font-size: 13.5px; color: var(--sg-fg-subtle); margin: 0; } .v4-lsn-head .meta span { opacity: 0.4; margin: 0 5px; } /* Video frame */ .v4-lsn-video { border-radius: 2px; overflow: hidden; background: #0F1B22; border: 1px solid rgba(15,27,34,0.12); box-shadow: 0 18px 36px -22px rgba(15,27,34,0.3); } .v4-lsn-video-bg { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .v4-lsn-video-bg > svg { width: 100%; height: 100%; display: block; } .v4-lsn-video-shroud { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(15,27,34,0.1) 0%, rgba(15,27,34,0.55) 100%); pointer-events: none; } .v4-lsn-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; background: rgba(245,236,218,0.96); color: #0F1B22; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; padding-left: 5px; box-shadow: 0 12px 28px rgba(15,27,34,0.4); transition: transform 180ms; } .v4-lsn-video-play:hover { transform: translate(-50%, -50%) scale(1.05); } .v4-lsn-video-cap { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; } .v4-lsn-video-cap .lab, .v4-lsn-video-cap .dur { background: rgba(15,27,34,0.7); color: #F5ECDA; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; } .v4-lsn-video-cap .lab { color: #ECA608; } .v4-lsn-video-controls { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; padding: 14px 18px; background: #0F1B22; color: #F5ECDA; } .v4-lsn-video-controls .t { font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.04em; color: rgba(245,236,218,0.78); } .v4-lsn-video-controls .bar { position: relative; height: 6px; background: rgba(245,236,218,0.18); border-radius: 3px; } .v4-lsn-video-controls .bar .fill { position: absolute; left: 0; top: 0; height: 100%; background: #ECA608; border-radius: 3px; } .v4-lsn-video-controls .bar .head { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background: #ECA608; border-radius: 50%; border: 2px solid #0F1B22; } .v4-lsn-video-controls .ctrls { display: flex; gap: 4px; } .v4-lsn-video-controls .ctrls button { background: transparent; border: 1px solid rgba(245,236,218,0.18); color: #F5ECDA; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; padding: 5px 10px; border-radius: 3px; cursor: pointer; transition: border-color 120ms; } .v4-lsn-video-controls .ctrls button:hover { border-color: #ECA608; color: #ECA608; } /* Tabs */ .v4-lsn-tabs { display: flex; margin: 36px 0 0; border-bottom: 1px solid rgba(15,27,34,0.12); gap: 4px; } .v4-lsn-tabs button { background: transparent; border: none; font-family: var(--sg-font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--sg-fg-subtle); padding: 12px 18px; cursor: pointer; position: relative; white-space: nowrap; transition: color 120ms; } .v4-lsn-tabs button:hover { color: var(--sg-fg); } .v4-lsn-tabs button.on { color: var(--sg-fg); } .v4-lsn-tabs button.on::after { content: ''; position: absolute; bottom: -1px; left: 12px; right: 12px; height: 2px; background: var(--tint, var(--sg-burnt-umber)); } .v4-lsn-panel { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-top: none; border-radius: 0; padding: 28px 32px; } /* Notes tab */ .v4-lsn-notes .lab, .v4-lsn-qa .lab, .v4-lsn-downloads .lab { font-family: var(--sg-font-display); font-style: normal; font-size: 14px; color: var(--sg-fg-muted); margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px dashed rgba(15,27,34,0.1); } .v4-lsn-notes ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .v4-lsn-notes li { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(15,27,34,0.06); align-items: baseline; cursor: pointer; transition: background 120ms; border-radius: 2px; padding-left: 6px; padding-right: 6px; } .v4-lsn-notes li:hover { background: var(--sg-soft-sand); } .v4-lsn-notes li .t { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--sg-burnt-umber); } .v4-lsn-notes li .n { font-size: 14.5px; color: var(--sg-fg); line-height: 1.5; } /* Transcript tab */ .v4-lsn-transcript { font-size: 15.5px; line-height: 1.65; color: var(--sg-fg); max-width: 720px; } .v4-lsn-transcript .speaker { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 24px 0 8px; } .v4-lsn-transcript .speaker:first-child { margin-top: 0; } .v4-lsn-transcript p { margin: 0 0 14px; } .v4-lsn-transcript .more { font-family: var(--sg-font-display); font-style: normal; font-size: 14px; color: var(--sg-fg-subtle); margin-top: 24px; padding-top: 14px; border-top: 1px dashed rgba(15,27,34,0.1); } /* Q&A tab */ .v4-lsn-qa ul { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 18px; } .v4-lsn-qa li { padding: 18px 20px; background: var(--sg-soft-sand); border-top: 2px solid var(--sg-burnt-umber); border-radius: 0; } .v4-lsn-qa li .q { font-family: var(--sg-font-display); font-style: normal; font-size: 16.5px; color: var(--sg-fg); margin: 0 0 6px; line-height: 1.4; } .v4-lsn-qa li .who { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 0 0 10px; } .v4-lsn-qa li .who span { opacity: 0.4; margin: 0 4px; } .v4-lsn-qa li .a { font-size: 14.5px; line-height: 1.55; color: var(--sg-fg); margin: 0; } .v4-lsn-qa-form { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; } .v4-lsn-qa-form label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); } .v4-lsn-qa-form textarea { font-family: var(--sg-font-body); font-size: 14.5px; padding: 12px 14px; border: 1px solid rgba(15,27,34,0.14); border-radius: 3px; resize: vertical; outline: none; background: #FBF6EC; } .v4-lsn-qa-form textarea:focus { border-color: var(--sg-burnt-umber); } .v4-lsn-qa-form-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .v4-lsn-qa-form-row .anon { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--sg-fg-muted); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .v4-lsn-qa-form-row .anon input { width: 14px; height: 14px; } .v4-lsn-qa-form-row button { background: var(--sg-astral); color: #fff; border: none; font-family: var(--sg-font-body); font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 3px; cursor: pointer; } .v4-lsn-qa-form-row button:hover { background: var(--sg-astral-shade-30); } /* Downloads tab */ .v4-lsn-downloads ul { list-style: none; padding: 0; margin: 0; } .v4-lsn-downloads li { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(15,27,34,0.08); } .v4-lsn-downloads li:last-child { border-bottom: none; } .v4-lsn-downloads .kind { width: 36px; height: 36px; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; background: var(--sg-soft-sand); color: var(--sg-burnt-umber); font-size: 15px; } .v4-lsn-downloads .kind-audio { background: rgba(34,80,106,0.12); color: #22506A; } .v4-lsn-downloads .f { font-family: var(--sg-font-display); font-weight: 500; font-size: 15px; color: var(--sg-fg); } .v4-lsn-downloads .s { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--sg-fg-subtle); letter-spacing: 0.04em; } .v4-lsn-downloads .dl { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--sg-burnt-umber); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; } .v4-lsn-downloads .dl:hover { opacity: 0.75; } /* Prev/Next */ .v4-lsn-nav { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .v4-lsn-nav-prev, .v4-lsn-nav-next { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 16px 20px; text-decoration: none; display: flex; flex-direction: column; gap: 4px; transition: border-color 150ms; } .v4-lsn-nav-prev:hover, .v4-lsn-nav-next:hover { border-color: var(--sg-fg); } .v4-lsn-nav-next { text-align: right; } .v4-lsn-nav-prev .lab, .v4-lsn-nav-next .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-fg-subtle); } .v4-lsn-nav-prev .t, .v4-lsn-nav-next .t { font-family: var(--sg-font-display); font-weight: 500; font-size: 15.5px; color: var(--sg-fg); } /* Side rail */ .v4-lsn-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; } .v4-lsn-side-card { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 20px 22px; } .v4-lsn-side-card .kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tint, var(--sg-burnt-umber)); margin: 0 0 8px; } .v4-lsn-side-card h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.008em; color: var(--sg-fg); margin: 0 0 4px; } .v4-lsn-side-card .sub { font-family: var(--sg-font-display); font-style: normal; font-size: 13px; color: var(--sg-fg-muted); margin: 0 0 14px; } .v4-lsn-side-card .sub span { opacity: 0.4; margin: 0 4px; } /* Outline */ .v4-lsn-outline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; font-size: 13.5px; } .v4-lsn-outline li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 7px 0; align-items: baseline; color: var(--sg-fg-subtle); } .v4-lsn-outline li .mk { font-size: 12px; color: var(--sg-fg-subtle); } .v4-lsn-outline li .t .dot { opacity: 0.4; margin: 0 4px; } .v4-lsn-outline li.done { color: var(--sg-fg-muted); } .v4-lsn-outline li.done .mk { color: var(--tint); font-weight: 700; } .v4-lsn-outline li.current { background: var(--sg-soft-sand); border-radius: 3px; padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px; color: var(--sg-fg); font-weight: 600; } .v4-lsn-outline li.current .mk { color: var(--tint); font-weight: 700; font-size: 14px; } /* Side: live / office */ .v4-lsn-side-live { background: #FFFAEF; border-color: rgba(236,166,8,0.3); } .v4-lsn-side-card .when { font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--sg-fg); font-weight: 700; margin: 0 0 6px; } .v4-lsn-side-card .topic { font-size: 13.5px; color: var(--sg-fg-muted); line-height: 1.5; margin: 0 0 14px; } .v4-lsn-side-card .primary, .v4-lsn-side-card .ghost { display: inline-block; font-family: var(--sg-font-body); font-size: 12.5px; font-weight: 600; text-decoration: none; padding: 8px 14px; border-radius: 3px; border: 1px solid transparent; white-space: nowrap; transition: all 150ms; } .v4-lsn-side-card .primary { background: #ECA608; color: #0F1B22; } .v4-lsn-side-card .primary:hover { background: #FFC844; } .v4-lsn-side-card .ghost { color: var(--sg-burnt-umber); border-color: rgba(138,90,68,0.25); } .v4-lsn-side-card .ghost:hover { border-color: var(--sg-burnt-umber); } /* Responsive */ @media (max-width: 1080px) { .v4-dash-week-grid { grid-template-columns: 1fr; } .v4-dash-main-inner { grid-template-columns: 1fr; } .v4-dash-side { position: static; } .v4-lsn-main-inner { grid-template-columns: minmax(0, 1fr); } .v4-lsn-center { min-width: 0; } .v4-lsn-side { position: static; flex-direction: row; flex-wrap: wrap; } .v4-lsn-side-card { flex: 1 1 280px; } } @media (max-width: 720px) { .v4-dash-top-inner, .v4-dash-week-inner, .v4-dash-main-inner, .v4-lsn-bar-inner, .v4-lsn-main-inner { padding-left: 24px; padding-right: 24px; } .v4-dash-course { grid-template-columns: 40px 1fr; gap: 14px; } .v4-dash-course .av { width: 40px; height: 40px; font-size: 14px; } .v4-dash-course .action { grid-column: 1 / -1; } .v4-dash-done li { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; } .v4-lsn-tabs { overflow-x: auto; } .v4-lsn-tabs button { font-size: 13px; padding: 10px 14px; } .v4-lsn-panel { padding: 22px 20px; } .v4-lsn-nav { grid-template-columns: 1fr; } .v4-lsn-video-controls { grid-template-columns: auto 1fr auto; } .v4-lsn-video-controls .ctrls { grid-column: 1 / -1; justify-content: center; } } /* ========================================================================== SCHOLAR PROFILE PAGE — the trust artifact for the chain of transmission ========================================================================== */ /* Breadcrumb */ .v4-sch-crumb { background: #FFFFFF; border-bottom: 1px solid rgba(15,27,34,0.06); } .v4-sch-crumb-inner { max-width: 1200px; margin: 0 auto; padding: 14px 40px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--sg-fg-muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .v4-sch-crumb-inner a { color: inherit; text-decoration: none; } .v4-sch-crumb-inner a:hover { color: var(--sg-burnt-umber); } .v4-sch-crumb-inner .sep { opacity: 0.45; } /* Hero */ .v4-sch-hero { padding: 72px 0 88px; background: #FFFFFF; } .v4-sch-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: start; } .v4-sch-hero-photo-col { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 24px; } .v4-sch-hero-photo { width: 100%; aspect-ratio: 4/5; background: var(--sg-soft-sand); border-radius: 2px; overflow: hidden; } .v4-sch-hero-photo image-slot { width: 100%; height: 100%; } .v4-sch-id { display: flex; flex-direction: column; border-top: 1px solid rgba(15,27,34,0.1); } .v4-sch-id-row { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(15,27,34,0.08); font-size: 14px; color: var(--sg-fg); } .v4-sch-id-row .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-fg-muted); } /* Hero text */ .v4-sch-hero-text { padding-top: 0; } .v4-sch-hero-text .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 14px; } .v4-sch-hero-text .kicker::before { content: ''; width: 28px; height: 1px; background: var(--sg-astral); } .v4-sch-hero-text .kicker b { color: var(--sg-burnt-umber); } .v4-sch-hero-text h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.015em; color: var(--sg-fg); margin: 0 0 10px; } .v4-sch-hero-text h1 .period { color: var(--sg-gamboge); } .v4-sch-hero-text .ar-name { font-family: "Zarid Display", "Riwaya", serif; direction: rtl; font-size: 28px; color: var(--sg-fg-muted); margin: 0 0 18px; line-height: 1.4; } .v4-sch-hero-text .title-loc { font-size: 15px; color: var(--sg-fg-muted); margin: 0 0 28px; letter-spacing: 0.01em; line-height: 1.55; } .v4-sch-hero-text .title-loc b { color: var(--sg-astral); font-weight: 600; font-family: var(--sg-font-display); } .v4-sch-hero-text .title-loc .comp-tag { display: inline-block; background: var(--sg-gamboge); color: var(--sg-astral-shade-90); padding: 3px 8px; border-radius: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .v4-sch-body { font-size: 17.5px; line-height: 1.7; color: var(--sg-fg); margin: 0 0 32px; max-width: 64ch; } .v4-sch-body p { margin: 0 0 18px; } .v4-sch-body p:first-child { font-family: var(--sg-font-display); font-style: normal; font-weight: 400; font-size: 21px; line-height: 1.5; color: var(--sg-fg); } .v4-sch-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* The Sanad section */ .v4-sch-sanad { padding: 96px 0; background: #FBF6EC; border-top: 1px solid rgba(15,27,34,0.08); } .v4-sch-sanad-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .v4-sch-sanad-text .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 14px; } .v4-sch-sanad-text h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 22px; text-wrap: balance; } .v4-sch-sanad-text .lede { font-size: 17px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0 0 28px; max-width: 50ch; } .v4-sch-sanad-text .lede em { font-family: var(--sg-font-display); font-style: normal; color: var(--sg-fg); } .v4-sch-sanad-pull { margin: 0; padding: 22px 26px; border-top: 2px solid var(--sg-gamboge); background: #FFFFFF; font-family: var(--sg-font-display); font-style: normal; font-size: 19px; line-height: 1.45; color: var(--sg-fg); border-radius: 0; max-width: 48ch; } /* Sanad chain — visual pearl thread */ .v4-sch-sanad-chain { list-style: none; padding: 0; margin: 0; position: relative; } .v4-sch-sanad-chain::before { content: ''; position: absolute; left: 11px; top: 18px; bottom: 18px; width: 1px; background: linear-gradient(to bottom, var(--sg-burnt-umber) 0%, var(--sg-burnt-umber) 80%, transparent 100%); opacity: 0.4; } .v4-sch-sanad-node { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; padding: 14px 0; position: relative; } .v4-sch-sanad-node .dot { width: 13px; height: 13px; border-radius: 50%; background: #FBF6EC; border: 1.5px solid var(--sg-burnt-umber); margin-top: 5px; margin-left: 4px; position: relative; z-index: 1; } .v4-sch-sanad-node .dot.end { background: var(--sg-gamboge); border-color: var(--sg-gamboge-shade-30); } .v4-sch-sanad-node .body .teacher { font-family: var(--sg-font-display); font-weight: 600; font-size: 18px; color: var(--sg-fg); line-height: 1.25; margin: 0 0 4px; } .v4-sch-sanad-node .body .teacher.term { font-style: normal; font-weight: 500; color: var(--sg-burnt-umber); } .v4-sch-sanad-node .body .meta { font-size: 13.5px; color: var(--sg-fg-muted); letter-spacing: 0.01em; } .v4-sch-sanad-node .body .meta .dot-sep { margin: 0 6px; opacity: 0.5; } /* Section heads — shared by teaching, answers, others */ .v4-sch-section-head { margin: 0 0 36px; max-width: 720px; } .v4-sch-section-head .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } .v4-sch-section-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 14px; text-wrap: balance; } .v4-sch-section-head .lede { font-size: 16.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; max-width: 60ch; } /* Teaching this term */ .v4-sch-teaching { padding: 96px 0; background: #FFFFFF; } .v4-sch-teaching-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-sch-teaching-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .v4-sch-course { display: flex; flex-direction: column; padding: 28px 26px 26px; background: #FBF6EC; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; text-decoration: none; color: inherit; cursor: pointer; transition: all 200ms; position: relative; } .v4-sch-course:hover { border-color: var(--sg-astral); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,40,60,0.08); } .v4-sch-course .code { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); margin-bottom: 12px; } .v4-sch-course h3 { font-family: var(--sg-font-display); font-weight: 600; font-size: 19px; line-height: 1.22; letter-spacing: -0.005em; color: var(--sg-fg); margin: 0 0 14px; text-wrap: balance; } .v4-sch-course .when { font-size: 14px; color: var(--sg-fg); margin: 0 0 4px; } .v4-sch-course .lvl { font-family: var(--sg-font-display); font-style: normal; font-size: 14px; color: var(--sg-fg-muted); margin: 0 0 22px; } .v4-sch-course .arrow { margin-top: auto; padding-top: 16px; border-top: 1px dashed rgba(138,90,68,0.3); font-size: 13.5px; font-weight: 600; color: var(--sg-astral); letter-spacing: 0.01em; } /* Recent answers */ .v4-sch-answers { padding: 96px 0; background: #F5ECDA; } .v4-sch-answers-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-sch-answers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .v4-sch-answers .v4-answer { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.06); border-radius: 2px; padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; transition: all 200ms; cursor: pointer; } .v4-sch-answers .v4-answer:hover { border-color: var(--sg-burnt-umber); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,40,60,0.08); } .v4-sch-answers .v4-answer-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); } .v4-sch-answers .v4-answer-tag .when { margin-left: 8px; color: var(--sg-fg-subtle); font-weight: 400; letter-spacing: 0.04em; text-transform: none; font-size: 11.5px; } .v4-sch-answers .v4-answer-q { font-family: var(--sg-font-display); font-weight: 500; font-size: 19px; line-height: 1.28; color: var(--sg-fg); margin: 0; text-wrap: balance; } .v4-sch-answers .v4-answer-a { font-size: 14.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; flex: 1; } .v4-sch-answers .v4-answer-foot { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sg-fg-muted); padding-top: 14px; border-top: 1px dashed rgba(138,90,68,0.3); } .v4-sch-answers .v4-answer-foot .v4-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .v4-sch-answers .v4-answer-foot b { color: var(--sg-fg); font-weight: 600; font-family: var(--sg-font-display); } .v4-sch-answers-more { margin-top: 36px; } /* Selected works + audio */ .v4-sch-works { padding: 96px 0; background: #FFFFFF; } .v4-sch-works-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: start; } .v4-sch-works-text .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } .v4-sch-works-text h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 14px; } .v4-sch-works-text .lede { font-size: 16px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 28px; } .v4-sch-works-list { list-style: none; padding: 0; margin: 0; grid-column: 1 / 2; border-top: 1px solid rgba(15,27,34,0.1); } .v4-sch-work { display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(15,27,34,0.1); } .v4-sch-work .year { font-family: var(--sg-font-display); font-weight: 500; font-size: 18px; color: var(--sg-astral); letter-spacing: -0.005em; } .v4-sch-work .meat { display: flex; flex-direction: column; gap: 4px; } .v4-sch-work .kind { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); } .v4-sch-work .title { font-family: var(--sg-font-display); font-weight: 500; font-size: 17px; color: var(--sg-fg); line-height: 1.3; } .v4-sch-audio { grid-column: 2 / 3; grid-row: 1 / span 2; align-self: start; background: var(--sg-astral-shade-90); color: #F5ECDA; border-radius: 2px; padding: 32px 28px 30px; position: relative; overflow: hidden; } .v4-sch-audio::before { content: ''; position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; opacity: 0.12; pointer-events: none; } .v4-sch-audio > * { position: relative; z-index: 1; } .v4-sch-audio .lab { font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge); margin-bottom: 12px; } .v4-sch-audio .kind { font-family: var(--sg-font-display); font-weight: 600; font-size: 22px; line-height: 1.2; color: #FBF6EC; margin-bottom: 10px; } .v4-sch-audio p { font-size: 14.5px; line-height: 1.55; color: rgba(245,236,218,0.78); margin: 0 0 14px; } .v4-sch-audio .count { font-size: 12.5px; color: rgba(245,236,218,0.55); font-family: var(--sg-font-display); font-style: normal; margin: 0 0 22px; } .v4-sch-audio .v4-btn-link { color: var(--sg-gamboge); border-color: rgba(236,166,8,0.4); } /* Companion subscribe */ .v4-sch-companion { padding: 80px 0; background: #FBF6EC; border-top: 1px solid rgba(15,27,34,0.06); } .v4-sch-companion-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; } .v4-sch-companion .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 14px; } .v4-sch-companion h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 16px; text-wrap: balance; } .v4-sch-companion p { font-size: 16px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0; max-width: 44ch; } .v4-sch-companion .form { display: flex; flex-direction: column; gap: 10px; } .v4-sch-companion .form input { width: 100%; padding: 14px 16px; border: 1px solid rgba(138,90,68,0.3); border-radius: 2px; background: #FFFFFF; font-family: var(--sg-font-body); font-size: 15px; color: var(--sg-fg); outline: none; } .v4-sch-companion .form input:focus { border-color: var(--sg-burnt-umber); } .v4-sch-companion .form button { background: var(--sg-burnt-umber); color: #fff; border: none; padding: 14px 18px; border-radius: 2px; font-family: var(--sg-font-body); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: background 150ms; } .v4-sch-companion .form button:hover { background: #6f4634; } .v4-sch-companion .form small { font-size: 12px; color: var(--sg-fg-subtle); font-style: normal; text-align: center; margin-top: 4px; } /* Other faculty in the field */ .v4-sch-others { padding: 96px 0; background: #FFFFFF; border-top: 1px solid rgba(15,27,34,0.06); } .v4-sch-others-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-sch-others-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .v4-sch-others-back { margin-top: 48px; text-align: center; } /* Responsive */ @media (max-width: 1080px) { .v4-sch-hero-inner { grid-template-columns: 1fr; gap: 40px; } .v4-sch-hero-photo-col { position: static; flex-direction: row; gap: 32px; } .v4-sch-hero-photo { width: 280px; flex-shrink: 0; } .v4-sch-sanad-inner { grid-template-columns: 1fr; gap: 40px; } .v4-sch-teaching-grid { grid-template-columns: 1fr 1fr; } .v4-sch-answers-grid { grid-template-columns: 1fr 1fr; } .v4-sch-works-inner { grid-template-columns: 1fr; gap: 40px; } .v4-sch-audio { grid-column: 1 / 2; grid-row: auto; } .v4-sch-companion-inner { grid-template-columns: 1fr; gap: 28px; } .v4-sch-others-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .v4-sch-hero-inner, .v4-sch-sanad-inner, .v4-sch-teaching-inner, .v4-sch-answers-inner, .v4-sch-works-inner, .v4-sch-companion-inner, .v4-sch-others-inner { padding-left: 24px; padding-right: 24px; } .v4-sch-hero-photo-col { flex-direction: column; } .v4-sch-hero-photo { width: 100%; } .v4-sch-teaching-grid { grid-template-columns: 1fr; } .v4-sch-answers-grid { grid-template-columns: 1fr; } .v4-sch-others-grid { grid-template-columns: 1fr; } } /* ========================================================================== PATHWAY DETAIL — Foundations / Intermediate / Advanced Built on the seminary aesthetic but with its own visual rhythm: a dark hero (tint per tier), a flat "spine" arc, term cards with a syllabus table inside, a faculty strip, and an admission split. ========================================================================== */ /* Hero */ .v4-pwy-hero { padding: 64px 0 72px; background: var(--pwy-hero-bg); color: #F5ECDA; position: relative; overflow: hidden; } .v4-pwy-hero::before { content: ''; position: absolute; right: -160px; top: -120px; width: 720px; height: 720px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; opacity: 0.055; pointer-events: none; } .v4-pwy-hero-inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 40px; } .v4-pwy-crumb { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; color: rgba(245,236,218,0.7); margin: 0 0 28px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .v4-pwy-crumb a { color: inherit; text-decoration: none; } .v4-pwy-crumb a:hover { color: var(--sg-gamboge); } .v4-pwy-crumb .sep { opacity: 0.4; } .v4-pwy-crumb b { color: #FBF6EC; font-weight: 600; } .v4-pwy-tier { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 16px; display: inline-flex; align-items: center; gap: 14px; } .v4-pwy-tier::before { content: ''; width: 28px; height: 1px; background: var(--sg-gamboge); } .v4-pwy-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(40px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -0.016em; color: #FBF6EC; margin: 0 0 20px; max-width: 18ch; text-wrap: balance; } .v4-pwy-for { font-family: var(--sg-font-display); font-style: normal; font-weight: 400; font-size: 21px; line-height: 1.45; color: var(--sg-gamboge); margin: 0 0 22px; max-width: 38ch; } .v4-pwy-arc { font-size: 17.5px; line-height: 1.6; color: rgba(245,236,218,0.82); margin: 0 0 36px; max-width: 60ch; } .v4-pwy-stats { margin: 0 0 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(245,236,218,0.18); border-bottom: 1px solid rgba(245,236,218,0.18); padding: 22px 0; } .v4-pwy-stats > div { padding: 0 22px; border-right: 1px solid rgba(245,236,218,0.10); } .v4-pwy-stats > div:first-child { padding-left: 0; } .v4-pwy-stats > div:last-child { padding-right: 0; border-right: none; } .v4-pwy-stats dt { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,236,218,0.55); margin-bottom: 8px; } .v4-pwy-stats dd { margin: 0; font-family: var(--sg-font-display); font-weight: 500; font-size: 17px; line-height: 1.25; color: #FBF6EC; letter-spacing: -0.005em; } .v4-pwy-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } .v4-pwy-hero-actions .primary, .v4-pwy-hero-actions .ghost { border-radius: 2px; font-family: var(--sg-font-body); font-weight: 600; font-size: 14.5px; letter-spacing: 0.015em; padding: 14px 22px; text-decoration: none; transition: all 150ms; white-space: nowrap; } .v4-pwy-hero-actions .primary { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); border: 1px solid var(--sg-gamboge); } .v4-pwy-hero-actions .primary:hover { background: #FFC844; border-color: #FFC844; } .v4-pwy-hero-actions .ghost { background: transparent; color: #F5ECDA; border: 1px solid rgba(245,236,218,0.3); } .v4-pwy-hero-actions .ghost:hover { border-color: #F5ECDA; } /* The arc spine — a row of N tiles, one per term */ .v4-pwy-arc-section { padding: 80px 0 56px; background: #FFFFFF; } .v4-pwy-arc-inner { max-width: 1240px; margin: 0 auto; padding: 0 40px; } .v4-pwy-arc-head { text-align: center; margin-bottom: 36px; } .v4-pwy-arc-head .kicker { font-family: var(--sg-font-display); font-style: normal; font-size: 16px; color: var(--sg-burnt-umber); margin: 0 0 8px; } .v4-pwy-arc-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 12px; text-wrap: balance; } .v4-pwy-arc-head .sub { font-family: var(--sg-font-display); font-style: normal; color: var(--sg-fg-muted); font-size: 16px; margin: 0; } .v4-pwy-spine { display: grid; grid-template-columns: repeat(var(--term-count), 1fr); gap: 8px; position: relative; } .v4-pwy-spine::before { content: ''; position: absolute; left: 12px; right: 12px; top: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--pwy-tint), transparent); opacity: 0.25; z-index: 0; } .v4-pwy-spine-cell { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 16px; background: #FBF6EC; border: 1px solid rgba(15,27,34,0.08); border-top: 3px solid var(--pwy-tint); border-radius: 0; text-decoration: none; color: inherit; transition: all 160ms; text-align: left; } .v4-pwy-spine-cell:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,40,60,0.08); } .v4-pwy-spine-cell .num { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pwy-tint); } .v4-pwy-spine-cell .when { font-size: 11.5px; color: var(--sg-fg-muted); letter-spacing: 0.02em; } .v4-pwy-spine-cell .theme { font-family: var(--sg-font-display); font-weight: 600; font-size: 14.5px; line-height: 1.22; color: var(--sg-fg); text-wrap: balance; } /* Term-by-term syllabus */ .v4-pwy-terms { padding: 56px 0 96px; background: #FFFFFF; } .v4-pwy-terms-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; } .v4-pwy-terms-head { margin: 0 0 48px; max-width: 720px; } .v4-pwy-terms-head .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } .v4-pwy-terms-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 12px; text-wrap: balance; } .v4-pwy-terms-head .sub { font-size: 16.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; } .v4-pwy-terms-list { display: flex; flex-direction: column; gap: 32px; } .v4-pwy-term { border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; overflow: hidden; background: #FFFFFF; scroll-margin-top: 24px; } .v4-pwy-term-head { display: grid; grid-template-columns: 110px 1fr; gap: 28px; padding: 28px 32px; background: #FBF6EC; border-bottom: 1px solid rgba(15,27,34,0.08); align-items: start; } .v4-pwy-term-num { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 6px; border-left: 3px solid var(--pwy-tint); padding-left: 16px; } .v4-pwy-term-num .big { font-family: var(--sg-font-display); font-weight: 500; font-size: 44px; line-height: 0.95; letter-spacing: -0.02em; color: var(--pwy-tint); } .v4-pwy-term-num .lab { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-fg-muted); } .v4-pwy-term-meta .when { font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.08em; color: var(--sg-burnt-umber); margin: 0 0 6px; text-transform: uppercase; } .v4-pwy-term-meta h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -0.008em; color: var(--sg-fg); margin: 0 0 10px; text-wrap: balance; } .v4-pwy-term-meta .gist { font-family: var(--sg-font-display); font-style: normal; font-size: 16px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0; max-width: 58ch; } .v4-pwy-term-table { display: flex; flex-direction: column; } .v4-pwy-term-table-head, .v4-pwy-term-row { display: grid; grid-template-columns: 96px 1fr 220px 100px; gap: 18px; padding: 14px 32px; align-items: center; } .v4-pwy-term-table-head { background: #FFFFFF; border-bottom: 1px solid rgba(15,27,34,0.08); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-fg-muted); padding-top: 14px; padding-bottom: 12px; } .v4-pwy-term-row { border-bottom: 1px solid rgba(15,27,34,0.06); font-size: 14.5px; } .v4-pwy-term-row:last-child { border-bottom: none; } .v4-pwy-term-row:hover { background: #FBF6EC; } .v4-pwy-sci { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sci-tint); padding: 3px 0; border-left: 2px solid var(--sci-tint); padding-left: 10px; } .v4-pwy-course { font-family: var(--sg-font-display); font-weight: 500; font-size: 15.5px; color: var(--sg-fg); line-height: 1.35; text-wrap: balance; } .v4-pwy-who { font-size: 13.5px; color: var(--sg-fg-muted); } .v4-pwy-hrs { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--sg-fg-subtle); text-align: right; letter-spacing: 0.02em; } /* Faculty */ .v4-pwy-fac { padding: 96px 0; background: #FBF6EC; } .v4-pwy-fac-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .v4-pwy-fac-head { margin: 0 0 40px; max-width: 720px; } .v4-pwy-fac-head .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } .v4-pwy-fac-head h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 12px; text-wrap: balance; } .v4-pwy-fac-head .sub { font-size: 16.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0; } .v4-pwy-fac-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .v4-pwy-fac-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; overflow: hidden; transition: all 180ms; } .v4-pwy-fac-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(20,40,60,0.07); border-color: var(--sg-burnt-umber); } .v4-pwy-fac-photo { width: 100%; aspect-ratio: 4/5; background: var(--sg-soft-sand); } .v4-pwy-fac-photo image-slot { width: 100%; height: 100%; } .v4-pwy-fac-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; } .v4-pwy-fac-body .loc { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); } .v4-pwy-fac-body .name { font-family: var(--sg-font-display); font-weight: 600; font-size: 16px; line-height: 1.18; color: var(--sg-fg); margin: 4px 0 0; } .v4-pwy-fac-body .subj { font-size: 12.5px; color: var(--sg-fg-muted); margin: 4px 0 0; line-height: 1.4; } .v4-pwy-fac-foot { margin: 28px 0 0; font-family: var(--sg-font-display); font-style: normal; font-size: 15px; color: var(--sg-fg-muted); } .v4-pwy-fac-foot a { color: var(--sg-burnt-umber); font-style: normal; font-family: var(--sg-font-body); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; } /* Admission */ .v4-pwy-adm { padding: 96px 0; background: #FFFFFF; } .v4-pwy-adm-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; } .v4-pwy-adm-text .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 14px; } .v4-pwy-adm-text h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.012em; color: var(--sg-fg); margin: 0 0 22px; text-wrap: balance; } .v4-pwy-adm-text p { font-size: 17px; line-height: 1.6; color: var(--sg-fg); margin: 0 0 28px; max-width: 56ch; } .v4-pwy-adm-actions { display: flex; gap: 12px; flex-wrap: wrap; } .v4-pwy-adm-actions .primary, .v4-pwy-adm-actions .ghost { border-radius: 2px; font-family: var(--sg-font-body); font-weight: 600; font-size: 14.5px; letter-spacing: 0.005em; padding: 14px 22px; text-decoration: none; transition: all 150ms; white-space: nowrap; } .v4-pwy-adm-actions .primary { background: var(--sg-astral); color: #fff; border: 1px solid var(--sg-astral); } .v4-pwy-adm-actions .primary:hover { background: var(--sg-astral-shade-30); } .v4-pwy-adm-actions .ghost { background: transparent; color: var(--sg-fg); border: 1px solid rgba(15,27,34,0.2); } .v4-pwy-adm-actions .ghost:hover { border-color: var(--sg-fg); } .v4-pwy-adm-list { background: #FBF6EC; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 28px 32px; } .v4-pwy-adm-list .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 16px; } .v4-pwy-adm-list ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .v4-pwy-adm-list ul li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--sg-fg); } .v4-pwy-adm-list ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border: 1.5px solid var(--sg-gamboge); border-radius: 50%; } .v4-pwy-adm-list ul li::after { content: ''; position: absolute; left: 3px; top: 12px; width: 4px; height: 4px; background: var(--sg-gamboge); border-radius: 50%; } /* Sibling pathways */ .v4-pwy-siblings { padding: 72px 0 96px; background: #F5ECDA; } .v4-pwy-siblings-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; } .v4-pwy-siblings .kicker { font-family: var(--sg-font-display); font-style: normal; font-size: 17px; color: var(--sg-burnt-umber); margin: 0 0 22px; } .v4-pwy-siblings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .v4-pwy-sibling { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 28px 28px 24px; background: #FBF6EC; border: 1px solid rgba(15,27,34,0.08); border-left: 4px solid var(--pwy-tint); border-radius: 2px; text-decoration: none; color: inherit; transition: all 180ms; } .v4-pwy-sibling:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,40,60,0.07); } .v4-pwy-sibling .ord { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pwy-tint); } .v4-pwy-sibling .name { font-family: var(--sg-font-display); font-weight: 500; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; color: var(--sg-fg); } .v4-pwy-sibling .for { font-family: var(--sg-font-display); font-style: normal; font-size: 16px; line-height: 1.5; color: var(--sg-fg-muted); } .v4-pwy-sibling .more { font-family: var(--sg-font-body); font-weight: 600; font-size: 13.5px; letter-spacing: 0.04em; color: var(--sg-burnt-umber); padding-top: 6px; } /* Responsive */ @media (max-width: 1080px) { .v4-pwy-stats { grid-template-columns: 1fr 1fr; gap: 0 8px; } .v4-pwy-stats > div { padding: 8px 14px; border-right: none; border-bottom: 1px solid rgba(245,236,218,0.10); } .v4-pwy-stats > div:nth-last-child(1), .v4-pwy-stats > div:nth-last-child(2) { border-bottom: none; } .v4-pwy-spine { grid-template-columns: repeat(4, 1fr); } .v4-pwy-spine::before { display: none; } .v4-pwy-term-head { grid-template-columns: 80px 1fr; padding: 22px 24px; gap: 18px; } .v4-pwy-term-num .big { font-size: 36px; } .v4-pwy-term-table-head { display: none; } .v4-pwy-term-row { grid-template-columns: 88px 1fr; row-gap: 6px; padding: 14px 24px; } .v4-pwy-who { grid-column: 2; font-size: 13px; } .v4-pwy-hrs { grid-column: 2; text-align: left; font-size: 11.5px; } .v4-pwy-fac-grid { grid-template-columns: repeat(3, 1fr); } .v4-pwy-adm-inner { grid-template-columns: 1fr; gap: 32px; } .v4-pwy-siblings-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .v4-pwy-hero-inner, .v4-pwy-arc-inner, .v4-pwy-terms-inner, .v4-pwy-fac-inner, .v4-pwy-adm-inner, .v4-pwy-siblings-inner { padding-left: 24px; padding-right: 24px; } .v4-pwy-stats { grid-template-columns: 1fr; } .v4-pwy-stats > div { border-bottom: 1px solid rgba(245,236,218,0.10) !important; } .v4-pwy-stats > div:last-child { border-bottom: none !important; } .v4-pwy-spine { grid-template-columns: repeat(2, 1fr); } .v4-pwy-fac-grid { grid-template-columns: 1fr 1fr; } .v4-pwy-term-head { grid-template-columns: 1fr; gap: 12px; } .v4-pwy-term-num { flex-direction: row; align-items: baseline; gap: 10px; } .v4-pwy-term-row { grid-template-columns: 80px 1fr; padding: 12px 18px; } } /* ---- end v4_pages.css ---- */ /* ---- begin v4_reader.css ---- */ /* ========================================================================== v4_reader.css — Pass 3 · In-brand Reader -------------------------------------------------------------------------- The long-form reading surface for Seekers Books. Reading prose in the reading face (Lyon Text / 29LT Riwaya), headings in display, and — the institutional primitive — a HARD-BORDERED slot for certified Quran citations, set only in the certified mushaf (var(--sg-font-quran)). Reuses chrome + [dir="rtl"] re-voicing from v4_library.css (load first). One component mirrors by direction; logical properties throughout. The A+/A− control scales the reading column via --rd-fs. ========================================================================== */ /* ── Reading toolbar (sticky) ──────────────────────────────────────────── */ .v4-rd-bar { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid rgba(15,27,34,0.1); } .v4-rd-bar-inner { max-width: 1180px; margin: 0 auto; padding: 12px 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; } .v4-rd-crumb { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); } .v4-rd-crumb a { color: var(--sg-astral); text-decoration: none; } .v4-rd-crumb .chip { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-burnt-umber); background: rgba(138,90,68,0.08); border: 1px solid rgba(138,90,68,0.2); border-radius: 2px; padding: 4px 10px; } [dir="rtl"] .v4-rd-crumb .chip { letter-spacing: 0; } .v4-rd-tools { display: inline-flex; align-items: center; gap: 8px; } .v4-rd-sizer { display: inline-flex; align-items: center; border: 1px solid rgba(15,27,34,0.18); border-radius: 2px; overflow: hidden; } .v4-rd-sizer button { border: none; background: #fff; color: var(--sg-fg); cursor: pointer; font-family: var(--sg-font-ui); font-weight: 600; padding: 7px 12px; line-height: 1; } .v4-rd-sizer button:hover { background: var(--sg-astral-tint-90); } .v4-rd-sizer button:first-child { border-inline-end: 1px solid rgba(15,27,34,0.14); font-size: 12px; } .v4-rd-sizer button:last-child { font-size: 16px; } .v4-rd-tool-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sg-font-ui); font-size: 13px; font-weight: 600; color: var(--sg-astral); background: #fff; border: 1px solid rgba(15,27,34,0.18); border-radius: 2px; padding: 7px 13px; cursor: pointer; } .v4-rd-tool-btn:hover { border-color: var(--sg-astral); } .v4-rd-tool-btn.on { background: var(--sg-astral); color: #fff; border-color: var(--sg-astral); } .v4-rd-langtoggle { display: inline-flex; border: 1px solid rgba(15,27,34,0.18); border-radius: 2px; overflow: hidden; } .v4-rd-langtoggle button { border: none; background: #fff; color: var(--sg-fg-muted); cursor: pointer; font-family: var(--sg-font-ui); font-size: 12.5px; font-weight: 700; padding: 7px 13px; } .v4-rd-langtoggle button[lang="ar"] { font-family: var(--sg-font-arabic-ui); } .v4-rd-langtoggle button.on { background: var(--sg-astral); color: #fff; } /* ── Cite-this panel ───────────────────────────────────────────────────── */ .v4-rd-cite { max-width: 1180px; margin: 0 auto; padding: 0 40px; } .v4-rd-cite-inner { margin-top: 14px; background: #FBF7EF; border: 1px solid rgba(15,27,34,0.12); border-inline-start: 2px solid var(--sg-astral); border-radius: 2px; padding: 18px 22px; } .v4-rd-cite-inner .lab { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 8px; } .v4-rd-cite-inner p { font-family: var(--sg-font-read); font-size: 15px; line-height: 1.6; color: var(--sg-fg); margin: 0; } .v4-rd-cite-inner .copy { margin-top: 12px; font-family: var(--sg-font-ui); font-size: 13px; font-weight: 600; color: var(--sg-astral); background: none; border: none; cursor: pointer; padding: 0; } /* ── Layout: TOC + article ─────────────────────────────────────────────── */ .v4-rd-layout { max-width: 1180px; margin: 0 auto; padding: 40px 40px 90px; display: grid; grid-template-columns: 248px 1fr; gap: 56px; align-items: start; } @media (max-width: 900px){ .v4-rd-layout { grid-template-columns: 1fr; gap: 32px; } .v4-rd-toc { position: static; } } .v4-rd-toc { position: sticky; top: 76px; } .v4-rd-toc h2 { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 0 0 14px; } [dir="rtl"] .v4-rd-toc h2 { letter-spacing: 0; } .v4-rd-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .v4-rd-toc li a { display: flex; gap: 10px; align-items: baseline; font-family: var(--sg-font-ui); font-size: 14px; line-height: 1.4; color: var(--sg-fg-muted); text-decoration: none; padding: 8px 0; border-bottom: 1px solid rgba(15,27,34,0.06); } .v4-rd-toc li a .n { font-family: var(--sg-font-display); font-size: 13px; color: var(--sg-fg-subtle); flex: none; min-width: 18px; } .v4-rd-toc li a:hover { color: var(--sg-fg); } .v4-rd-toc li a.on { color: var(--sg-astral); font-weight: 600; } .v4-rd-toc li a.on .n { color: var(--gold-ink); } /* ── Article ───────────────────────────────────────────────────────────── */ .v4-rd-article { --rd-fs: 1; max-width: 68ch; } .v4-rd-article .v4-rd-eyebrow { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 14px; } [dir="rtl"] .v4-rd-article .v4-rd-eyebrow { letter-spacing: 0; } .v4-rd-article h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: calc(34px * var(--rd-fs)); line-height: 1.12; letter-spacing: -0.014em; color: var(--sg-fg); margin: 0 0 10px; text-wrap: balance; } [dir="rtl"] .v4-rd-article h1 { letter-spacing: 0; line-height: 1.3; } .v4-rd-article .v4-rd-sub { font-family: var(--sg-font-read); font-size: calc(18px * var(--rd-fs)); line-height: 1.5; color: var(--sg-fg-muted); margin: 0 0 28px; } .v4-rd-article h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: calc(24px * var(--rd-fs)); line-height: 1.2; color: var(--sg-fg); margin: 38px 0 14px; } .v4-rd-article p { font-size: calc(17px * var(--rd-fs)); line-height: 1.62; color: var(--sg-ink, var(--sg-fg)); margin: 0 0 20px; text-wrap: pretty; } [dir="rtl"] .v4-rd-article p { line-height: 2.0; } .v4-rd-article p .num { font-variant-numeric: tabular-nums; } /* hadith / matn pull — gold top-rule emphasis (never a left bar) */ .v4-rd-hadith { margin: 28px 0; padding: 22px 26px; background: #FBF7EF; border: 1px solid rgba(15,27,34,0.1); border-top: 2px solid var(--sg-gamboge); border-radius: 2px; } .v4-rd-hadith .ar { font-family: var(--sg-font-arabic-read); direction: rtl; text-align: start; font-size: calc(22px * var(--rd-fs)); line-height: 2.0; color: var(--sg-fg); margin: 0 0 12px; } .v4-rd-hadith .tr { font-family: var(--sg-font-read); font-size: calc(17px * var(--rd-fs)); line-height: 1.6; color: var(--sg-fg); margin: 0 0 8px; } .v4-rd-hadith .src { font-family: var(--sg-font-ui); font-size: 12.5px; color: var(--sg-fg-muted); } /* ── The certified-Quran citation primitive — HARD border, mushaf only ─── */ .v4-rd-quran { margin: 30px 0; padding: 26px 28px; background: #fff; border: 2px solid var(--sg-astral-shade-70); border-radius: 2px; position: relative; } .v4-rd-quran .tag { position: absolute; inset-block-start: -1px; inset-inline-start: 22px; transform: translateY(-50%); font-family: var(--sg-font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #FBF6EC; background: var(--sg-astral-shade-70); border-radius: 2px; padding: 3px 11px; } .v4-rd-quran .ayah { font-family: var(--sg-font-quran); direction: rtl; text-align: center; font-size: calc(34px * var(--rd-fs)); line-height: 1.9; color: var(--sg-fg); margin: 8px 0 16px; } .v4-rd-quran .gloss { font-family: var(--sg-font-read); font-size: calc(16px * var(--rd-fs)); line-height: 1.55; color: var(--sg-fg-muted); text-align: center; margin: 0 0 10px; } .v4-rd-quran .src { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); text-align: center; display: block; } [dir="rtl"] .v4-rd-quran .src { letter-spacing: 0; } /* prev / next chapter */ .v4-rd-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(15,27,34,0.1); } .v4-rd-nav a { text-decoration: none; } .v4-rd-nav .lab { display: block; font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-fg-subtle); margin-bottom: 4px; } .v4-rd-nav .t { font-family: var(--sg-font-display); font-size: 16px; color: var(--sg-astral); } .v4-rd-nav .next { text-align: end; } /* Specificity guard — the global LTR reading rule in v4.css (html:not([dir="rtl"]) :is(p,li,…), 0-2-1) targets these

    elements and would otherwise force the editorial reading face onto the Quran ayah and the hadith naskh. Bind so the certified mushaf / Arabic reading face win in BOTH directions, and on ANY page that reuses these primitives (Reader, Today …). Bright-line critical: the Quran is NEVER set in an editorial face. */ html:not([dir="rtl"]) .v4-rd-quran .ayah, .v4-rd-quran .ayah { font-family: var(--sg-font-quran); } html:not([dir="rtl"]) .v4-rd-hadith .ar, .v4-rd-hadith .ar { font-family: var(--sg-font-arabic-read); } /* RTL reading-prose for these primitives is handled centrally now (the variable-level --sg-font-read swap in v4_library.css). */ /* ---- end v4_reader.css ---- */ /* ---- begin v4_records.css ---- */ /* ========================================================================== SeekersGuidance v4 — Sprint 2 closers Self-check (weekly reflection) · Completion record · Account & settings Built on tokens.css + v4.css + v4_pages.css + v4_classroom.css conventions. ========================================================================== */ /* ── shared in-course page shell ─────────────────────────────────────── */ .v4-rec { background: #FBF6EC; min-height: 100vh; } /* shared dark hero (matches .v4-ask-hero family) */ .v4-rec-hero { background: linear-gradient(180deg, var(--sg-astral-shade-90) 0%, var(--sg-astral-shade-70) 100%); color: #F5ECDA; padding: 64px 0 56px; position: relative; overflow: hidden; } .v4-rec-hero::after { content: ''; position: absolute; left: -120px; bottom: -140px; width: 380px; height: 380px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; opacity: 0.05; pointer-events: none; } .v4-rec-hero-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; position: relative; } .v4-rec-hero .crumb { font-size: 12.5px; color: rgba(245,236,218,0.6); letter-spacing: 0.04em; margin: 0 0 24px; } .v4-rec-hero .crumb a { color: rgba(245,236,218,0.8); text-decoration: none; } .v4-rec-hero .crumb a:hover { color: var(--sg-gamboge); } .v4-rec-hero .crumb .sep { opacity: 0.4; margin: 0 8px; } .v4-rec-hero .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 16px; display: inline-flex; align-items: center; gap: 14px; } .v4-rec-hero .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--sg-gamboge); } .v4-rec-hero h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(36px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.018em; color: #FBF6EC; margin: 0 0 14px; text-wrap: balance; } .v4-rec-hero h1 em { font-style: normal; color: var(--sg-gamboge); font-weight: 400; } .v4-rec-hero .lede { font-size: 17.5px; line-height: 1.55; color: rgba(245,236,218,0.78); margin: 0; max-width: 58ch; } /* ========================================================================== 01 · SELF-CHECK (weekly reflection) ========================================================================== */ .v4-sc-main { padding: 48px 0 80px; } .v4-sc-main-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; } /* current week card */ .v4-sc-card { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-top: 3px solid var(--sg-gamboge); border-radius: 2px; padding: 32px 36px 28px; box-shadow: var(--sg-shadow-sm); } .v4-sc-card-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .v4-sc-card-head .wk { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--sg-burnt-umber); text-transform: uppercase; } .v4-sc-card-head .when { font-family: var(--sg-font-display); font-style: normal; font-size: 13px; color: var(--sg-fg-subtle); margin-left: auto; } .v4-sc-card h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 27px; letter-spacing: -0.012em; line-height: 1.12; margin: 0 0 6px; color: var(--sg-fg); } .v4-sc-card h2 em { font-style: normal; color: var(--sg-burnt-umber); } .v4-sc-card .sub { font-size: 14.5px; color: var(--sg-fg-muted); margin: 0 0 28px; line-height: 1.55; max-width: 56ch; } /* a single prompt */ .v4-sc-prompt { margin-bottom: 26px; } .v4-sc-prompt .q { display: flex; gap: 12px; align-items: baseline; margin: 0 0 10px; } .v4-sc-prompt .q .n { font-family: var(--sg-font-display); font-style: normal; font-size: 18px; color: var(--gold-ink); flex-shrink: 0; line-height: 1.3; } .v4-sc-prompt .q .txt { font-family: var(--sg-font-display); font-weight: 500; font-size: 18px; line-height: 1.35; color: var(--sg-fg); letter-spacing: -0.005em; } .v4-sc-prompt textarea { width: 100%; box-sizing: border-box; font-family: var(--sg-font-display); font-size: 15.5px; line-height: 1.6; color: var(--sg-fg); padding: 14px 16px; min-height: 88px; resize: vertical; border: 1px solid rgba(15,27,34,0.12); border-radius: 2px; background: #FCFAF4; outline: none; transition: border-color 150ms, background 150ms; } .v4-sc-prompt textarea::placeholder { color: var(--sg-fg-subtle); font-style: normal; } .v4-sc-prompt textarea:focus { border-color: var(--sg-astral); background: #FFFFFF; } .v4-sc-prompt .count { font-size: 11.5px; color: var(--sg-fg-subtle); margin: 6px 0 0; font-family: ui-monospace, Menlo, monospace; } /* footer — privacy + save */ .v4-sc-foot { margin-top: 28px; padding-top: 22px; border-top: 1px dashed rgba(15,27,34,0.14); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .v4-sc-privacy { display: flex; flex-direction: column; gap: 10px; } .v4-sc-privacy .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); } .v4-sc-toggle { display: inline-flex; gap: 4px; background: #F5ECDA; padding: 4px; border-radius: 999px; } .v4-sc-toggle button { border: none; background: transparent; cursor: pointer; font-family: var(--sg-font-body); font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px; color: var(--sg-fg-muted); transition: all 150ms var(--sg-ease); } .v4-sc-toggle button.on { background: #FFFFFF; color: var(--sg-astral-shade-30); box-shadow: var(--sg-shadow-xs); } .v4-sc-save { background: var(--sg-astral); color: #fff; border: 1.5px solid var(--sg-astral); padding: 12px 26px; border-radius: 2px; font-weight: 600; font-size: 14.5px; font-family: var(--sg-font-body); cursor: pointer; transition: all 150ms; } .v4-sc-save:hover { background: var(--sg-astral-shade-30); border-color: var(--sg-astral-shade-30); } .v4-sc-saved-note { font-family: var(--sg-font-display); font-style: normal; font-size: 13px; color: var(--sg-success); } /* past weeks */ .v4-sc-past { margin-top: 48px; } .v4-sc-past > h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.008em; margin: 0 0 6px; color: var(--sg-fg); } .v4-sc-past > .sub { font-size: 14px; font-family: var(--sg-font-display); font-style: normal; color: var(--sg-fg-muted); margin: 0 0 20px; } .v4-sc-week { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.07); border-radius: 2px; margin-bottom: 12px; overflow: hidden; } .v4-sc-week-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; cursor: pointer; list-style: none; } .v4-sc-week-head::-webkit-details-marker { display: none; } .v4-sc-week-head .wk { font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--sg-burnt-umber); text-transform: uppercase; } .v4-sc-week-head .ttl { font-family: var(--sg-font-display); font-weight: 500; font-size: 17px; color: var(--sg-fg); letter-spacing: -0.005em; } .v4-sc-week-head .meta { margin-left: auto; display: flex; align-items: center; gap: 12px; } .v4-sc-week-head .vis { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; } .v4-sc-week-head .vis.private { background: rgba(15,27,34,0.06); color: var(--sg-fg-subtle); } .v4-sc-week-head .vis.shared { background: rgba(48,112,142,0.12); color: var(--sg-astral-shade-30); } .v4-sc-week-head .chev { color: var(--sg-fg-subtle); font-size: 13px; transition: transform 200ms; } details[open] .v4-sc-week-head .chev { transform: rotate(90deg); } .v4-sc-week-body { padding: 4px 22px 22px; border-top: 1px solid rgba(15,27,34,0.05); } .v4-sc-answer { margin-top: 18px; } .v4-sc-answer .q { font-family: var(--sg-font-display); font-style: normal; font-size: 14px; color: var(--sg-burnt-umber); margin: 0 0 6px; } .v4-sc-answer .a { font-family: var(--sg-font-display); font-size: 16px; line-height: 1.55; color: var(--sg-fg); margin: 0; padding-left: 16px; border-left: 2px solid var(--sg-soft-sand); } /* side rail */ .v4-sc-side > div { margin-bottom: 24px; } .v4-rec-aside { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 24px 26px; } .v4-rec-aside .lab { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 12px; } .v4-rec-aside h3 { font-family: var(--sg-font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.008em; margin: 0 0 10px; color: var(--sg-fg); } .v4-rec-aside p { font-size: 14px; line-height: 1.6; color: var(--sg-fg-muted); margin: 0 0 12px; } .v4-rec-aside p:last-child { margin-bottom: 0; } .v4-rec-aside a.link { display: inline-flex; align-items: center; gap: 6px; color: var(--sg-astral); text-decoration: none; font-family: var(--sg-font-display); font-style: normal; font-size: 15px; } .v4-rec-aside a.link:hover { color: var(--sg-astral-shade-30); } .v4-rec-aside.tint { background: linear-gradient(180deg, #13303F 0%, #0A1E29 100%); border-color: transparent; } .v4-rec-aside.tint .lab { color: var(--sg-gamboge); } .v4-rec-aside.tint h3 { color: #FBF6EC; } .v4-rec-aside.tint p { color: rgba(245,236,218,0.82); font-family: var(--sg-font-display); font-style: normal; } .v4-rec-aside.tint a.link { color: var(--sg-gamboge); } .v4-sc-rhythm { list-style: none; padding: 0; margin: 0; counter-reset: r; } .v4-sc-rhythm li { counter-increment: r; display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--sg-fg-muted); margin-bottom: 12px; } .v4-sc-rhythm li::before { content: counter(r); font-family: var(--sg-font-display); font-style: normal; font-size: 15px; color: var(--gold-ink); } .v4-sc-rhythm li b { color: var(--sg-fg); font-weight: 600; } /* ========================================================================== 02 · COMPLETION RECORD (printable certificate) ========================================================================== */ .v4-cr { background: #EDE3D0; min-height: 100vh; } /* control bar — never printed */ .v4-cr-bar { position: sticky; top: 0; z-index: 20; background: var(--sg-astral-shade-90); color: #F5ECDA; border-bottom: 1px solid rgba(236,166,8,0.2); } .v4-cr-bar-inner { max-width: 1080px; margin: 0 auto; padding: 14px 40px; display: flex; align-items: center; gap: 16px; } .v4-cr-bar .back { color: rgba(245,236,218,0.7); text-decoration: none; font-size: 13.5px; } .v4-cr-bar .back:hover { color: var(--sg-gamboge); } .v4-cr-bar .ttl { font-family: var(--sg-font-display); font-style: normal; font-size: 14px; color: rgba(245,236,218,0.55); } .v4-cr-bar .actions { margin-left: auto; display: flex; gap: 10px; } .v4-cr-bar button { font-family: var(--sg-font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; padding: 9px 18px; border-radius: 2px; cursor: pointer; border: 1.5px solid transparent; transition: all 150ms; } .v4-cr-bar button.ghost { background: transparent; color: rgba(245,236,218,0.85); border-color: rgba(245,236,218,0.25); } .v4-cr-bar button.ghost:hover { border-color: var(--sg-gamboge); color: var(--sg-gamboge); } .v4-cr-bar button.primary { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); } .v4-cr-bar button.primary:hover { background: #fff; } /* the page area */ .v4-cr-stage { padding: 48px 24px 80px; display: flex; justify-content: center; } /* A4 portrait — 210 × 297mm ratio ≈ 1:1.414. Use px for screen. */ .v4-cr-page { width: 794px; /* ~210mm @ 96dpi */ min-height: 1123px; /* ~297mm */ background: #FCF8EF; box-shadow: 0 24px 60px -20px rgba(15,27,34,0.4); position: relative; padding: 70px 76px 64px; box-sizing: border-box; color: var(--sg-fg); background-image: radial-gradient(circle at 20% 12%, rgba(236,166,8,0.035), transparent 45%), radial-gradient(circle at 82% 88%, rgba(48,112,142,0.04), transparent 45%); } /* double gold rule frame */ .v4-cr-page::before { content: ''; position: absolute; inset: 26px; border: 2px solid var(--sg-gamboge); pointer-events: none; } .v4-cr-page::after { content: ''; position: absolute; inset: 32px; border: 0.75px solid rgba(138,90,68,0.5); pointer-events: none; } .v4-cr-inner { position: relative; text-align: center; } .v4-cr-emblem { display: flex; justify-content: center; margin: 6px 0 18px; } .v4-cr-inst { font-family: var(--sg-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sg-astral-shade-30); margin: 0 0 4px; } .v4-cr-inst-sub { font-family: var(--sg-font-display); font-style: normal; font-size: 14px; color: var(--sg-fg-muted); margin: 0 0 30px; } .v4-cr-basmala { font-family: var(--sg-font-arabic-display); font-size: 26px; direction: rtl; color: var(--sg-astral-shade-50); margin: 0 0 28px; line-height: 1.8; } .v4-cr-rule { width: 120px; height: 1px; margin: 0 auto 28px; background: linear-gradient(90deg, transparent, var(--sg-gamboge), transparent); position: relative; } .v4-cr-rule::after { content: '◆'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: var(--sg-gamboge); font-size: 9px; background: #FCF8EF; padding: 0 8px; } .v4-cr-pre { font-family: var(--sg-font-display); font-style: normal; font-size: 17px; color: var(--sg-fg-muted); margin: 0 0 16px; } .v4-cr-name { font-family: var(--sg-font-display); font-weight: 600; font-size: 46px; line-height: 1.05; letter-spacing: -0.01em; color: var(--sg-astral-shade-50); margin: 0 0 8px; } .v4-cr-name-ar { font-family: var(--sg-font-arabic-display); font-size: 24px; direction: rtl; color: var(--sg-fg-muted); margin: 0 0 26px; } .v4-cr-body { font-family: var(--sg-font-display); font-size: 18px; line-height: 1.75; color: var(--sg-fg); max-width: 46ch; margin: 0 auto 12px; text-wrap: pretty; } .v4-cr-body em { font-style: normal; color: var(--sg-burnt-umber); } .v4-cr-course { font-family: var(--sg-font-display); font-weight: 600; font-size: 26px; color: var(--sg-fg); margin: 18px 0 4px; letter-spacing: -0.01em; } .v4-cr-course-meta { font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--sg-fg-subtle); text-transform: uppercase; margin: 0 0 30px; } /* record facts */ .v4-cr-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(138,90,68,0.25); border-bottom: 1px solid rgba(138,90,68,0.25); margin: 0 0 30px; padding: 22px 0; } .v4-cr-fact { padding: 0 14px; border-right: 1px solid rgba(138,90,68,0.16); } .v4-cr-fact:last-child { border-right: none; } .v4-cr-fact .n { font-family: var(--sg-font-display); font-weight: 600; font-size: 30px; color: var(--sg-astral-shade-30); line-height: 1; } .v4-cr-fact .l { font-family: var(--sg-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-fg-muted); margin-top: 8px; display: block; } .v4-cr-studied { text-align: left; max-width: 52ch; margin: 0 auto 30px; } .v4-cr-studied .lab { font-family: var(--sg-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-burnt-umber); margin: 0 0 12px; text-align: center; } .v4-cr-studied ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; } .v4-cr-studied li { font-family: var(--sg-font-display); font-size: 14.5px; color: var(--sg-fg); padding-left: 16px; position: relative; line-height: 1.5; } .v4-cr-studied li::before { content: '·'; position: absolute; left: 2px; top: -2px; color: var(--sg-gamboge); font-weight: 700; font-size: 20px; } /* signature row */ .v4-cr-sign { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 40px; } .v4-cr-sign-block { flex: 1; text-align: center; } .v4-cr-sign-mark { font-family: var(--sg-font-display); font-style: normal; font-weight: 600; font-size: 26px; color: var(--sg-astral-shade-50); margin: 0 0 6px; line-height: 1; } .v4-cr-sign-line { border-top: 1px solid rgba(15,27,34,0.4); padding-top: 8px; } .v4-cr-sign-line .who { font-family: var(--sg-font-display); font-weight: 600; font-size: 14px; color: var(--sg-fg); } .v4-cr-sign-line .role { font-size: 11.5px; color: var(--sg-fg-muted); display: block; margin-top: 2px; } /* seal */ .v4-cr-seal { position: absolute; right: 6px; bottom: -6px; width: 116px; height: 116px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid var(--sg-gamboge); background: radial-gradient(circle, rgba(236,166,8,0.08), rgba(236,166,8,0.02)); transform: rotate(-8deg); } .v4-cr-seal::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 0.75px dashed rgba(184,129,10,0.6); } .v4-cr-seal .emb { margin-bottom: 4px; } .v4-cr-seal .tx { font-family: var(--sg-font-body); font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); text-align: center; line-height: 1.4; } .v4-cr-continue { margin: 36px auto 0; max-width: 50ch; font-family: var(--sg-font-display); font-style: normal; font-size: 14.5px; color: var(--sg-fg-muted); line-height: 1.55; } .v4-cr-continue b { font-style: normal; font-weight: 600; color: var(--sg-burnt-umber); } .v4-cr-foot-id { margin: 28px auto 0; padding: 0 110px; font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--sg-fg-subtle); text-transform: uppercase; } /* ========================================================================== 03 · ACCOUNT & SETTINGS ========================================================================== */ .v4-set-main { padding: 48px 0 80px; } .v4-set-main-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; } /* section nav */ .v4-set-nav { position: sticky; top: 24px; } .v4-set-nav ul { list-style: none; padding: 0; margin: 0; } .v4-set-nav li a { display: block; padding: 9px 0 9px 16px; font-size: 14px; color: var(--sg-fg-muted); text-decoration: none; border-left: 2px solid transparent; transition: all 150ms; } .v4-set-nav li a:hover { color: var(--sg-burnt-umber); } .v4-set-nav li a.on { color: var(--sg-burnt-umber); font-weight: 600; border-left-color: var(--sg-gamboge); } .v4-set-nav .who { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--sg-soft-sand); display: flex; align-items: center; gap: 12px; } .v4-set-nav .who .av { width: 40px; height: 40px; border-radius: 50%; background: var(--sg-astral-shade-30); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sg-font-display); font-weight: 600; font-size: 14px; color: #F5ECDA; } .v4-set-nav .who .nm { font-family: var(--sg-font-display); font-weight: 600; font-size: 14px; color: var(--sg-fg); } .v4-set-nav .who .since { font-size: 11.5px; color: var(--sg-fg-subtle); display: block; } /* a settings group */ .v4-set-group { background: #FFFFFF; border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 28px 32px; margin-bottom: 20px; } .v4-set-group > h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 21px; letter-spacing: -0.008em; margin: 0 0 4px; color: var(--sg-fg); } .v4-set-group > .sub { font-size: 13.5px; font-family: var(--sg-font-display); font-style: normal; color: var(--sg-fg-muted); margin: 0 0 24px; } .v4-set-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; padding: 18px 0; border-top: 1px solid rgba(15,27,34,0.06); } .v4-set-row:first-of-type { border-top: none; padding-top: 0; } .v4-set-row .label { font-size: 14px; font-weight: 600; color: var(--sg-fg); } .v4-set-row .label .hint { display: block; font-weight: 400; font-size: 12.5px; color: var(--sg-fg-subtle); margin-top: 4px; font-family: var(--sg-font-display); font-style: normal; line-height: 1.45; } .v4-set-row .field { display: flex; flex-direction: column; gap: 8px; } .v4-set-input, .v4-set-select { width: 100%; box-sizing: border-box; font-family: var(--sg-font-body); font-size: 14.5px; padding: 10px 12px; border: 1px solid rgba(15,27,34,0.14); border-radius: 2px; background: #FCFAF4; color: var(--sg-fg); outline: none; transition: border-color 150ms; } .v4-set-input:focus, .v4-set-select:focus { border-color: var(--sg-astral); background: #fff; } .v4-set-readout { font-size: 12.5px; color: var(--sg-fg-subtle); font-family: var(--sg-font-display); font-style: normal; } /* segmented (language) */ .v4-set-seg { display: inline-flex; gap: 4px; background: #F5ECDA; padding: 4px; border-radius: 2px; flex-wrap: wrap; } .v4-set-seg button { border: none; background: transparent; cursor: pointer; font-family: var(--sg-font-body); font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 2px; color: var(--sg-fg-muted); transition: all 150ms; } .v4-set-seg button.on { background: #fff; color: var(--sg-astral-shade-30); box-shadow: var(--sg-shadow-xs); } .v4-set-seg button .ar { font-family: var(--sg-font-arabic-display); margin-left: 6px; } /* toggle switch */ .v4-set-switch { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(15,27,34,0.05); } .v4-set-switch:first-child { border-top: none; padding-top: 0; } .v4-set-switch .txt { flex: 1; } .v4-set-switch .txt .t { font-size: 14px; font-weight: 600; color: var(--sg-fg); } .v4-set-switch .txt .d { font-size: 12.5px; color: var(--sg-fg-muted); display: block; margin-top: 2px; font-family: var(--sg-font-display); font-style: normal; } .v4-sw { position: relative; width: 42px; height: 24px; border-radius: 999px; background: rgba(15,27,34,0.18); border: none; cursor: pointer; flex-shrink: 0; transition: background 180ms var(--sg-ease); } .v4-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--sg-shadow-xs); transition: transform 180ms var(--sg-ease); } .v4-sw.on { background: var(--sg-astral); } .v4-sw.on::after { transform: translateX(18px); } /* calendar sync chips */ .v4-set-cal { display: flex; flex-direction: column; gap: 10px; } .v4-set-cal .opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(15,27,34,0.12); border-radius: 2px; cursor: pointer; background: #FCFAF4; transition: border-color 150ms, background 150ms; } .v4-set-cal .opt:hover { border-color: var(--sg-astral); } .v4-set-cal .opt.on { border-color: var(--sg-astral); background: var(--sg-astral-tint-90); } .v4-set-cal .opt .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(15,27,34,0.3); flex-shrink: 0; } .v4-set-cal .opt.on .dot { border-color: var(--sg-astral); background: var(--sg-astral); box-shadow: inset 0 0 0 2px #fff; } .v4-set-cal .opt .nm { font-size: 14px; font-weight: 600; color: var(--sg-fg); } .v4-set-cal .opt .ds { font-size: 12.5px; color: var(--sg-fg-muted); margin-left: auto; font-family: var(--sg-font-display); font-style: normal; } /* save bar */ .v4-set-savebar { position: sticky; bottom: 0; margin-top: 24px; background: rgba(252,248,239,0.92); backdrop-filter: blur(8px); border: 1px solid rgba(15,27,34,0.08); border-radius: 2px; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: var(--sg-shadow-md); } .v4-set-savebar .note { font-size: 13px; color: var(--sg-fg-muted); font-family: var(--sg-font-display); font-style: normal; } .v4-set-savebar .note.dirty { color: var(--sg-burnt-umber); } .v4-set-savebar .note.saved { color: var(--sg-success); } .v4-set-savebar .btns { display: flex; gap: 10px; } .v4-set-savebar .discard { background: transparent; border: 1.5px solid rgba(15,27,34,0.16); color: var(--sg-fg-muted); padding: 11px 20px; border-radius: 2px; font-weight: 600; font-size: 14px; cursor: pointer; font-family: var(--sg-font-body); } .v4-set-savebar .discard:hover { border-color: var(--sg-fg-muted); } .v4-set-savebar .save { background: var(--sg-astral); border: 1.5px solid var(--sg-astral); color: #fff; padding: 11px 24px; border-radius: 2px; font-weight: 600; font-size: 14px; cursor: pointer; font-family: var(--sg-font-body); } .v4-set-savebar .save:hover { background: var(--sg-astral-shade-30); border-color: var(--sg-astral-shade-30); } .v4-set-savebar .save:disabled { opacity: 0.45; cursor: default; } .v4-set-savebar .save:disabled:hover { background: var(--sg-astral); } .v4-set-danger { margin-top: 8px; } .v4-set-danger a { color: var(--sg-danger); font-size: 13px; text-decoration: none; font-family: var(--sg-font-display); font-style: normal; } .v4-set-danger a:hover { text-decoration: underline; } /* ── responsive ──────────────────────────────────────────────────────── */ @media (max-width: 980px) { .v4-sc-main-inner { grid-template-columns: 1fr; gap: 36px; } .v4-set-main-inner { grid-template-columns: 1fr; gap: 28px; } .v4-set-nav { position: static; } .v4-set-nav ul { display: flex; flex-wrap: wrap; gap: 4px; } .v4-set-nav li a { border-left: none; border-bottom: 2px solid transparent; padding: 8px 12px; } .v4-set-nav li a.on { border-left: none; border-bottom-color: var(--sg-gamboge); } .v4-set-nav .who { display: none; } .v4-set-row { grid-template-columns: 1fr; gap: 12px; } } @media (max-width: 860px) { .v4-cr-page { width: 100%; min-height: auto; padding: 48px 32px; } .v4-cr-name { font-size: 34px; } .v4-cr-facts { grid-template-columns: 1fr; gap: 16px; } .v4-cr-fact { border-right: none; border-bottom: 1px solid rgba(138,90,68,0.16); padding-bottom: 16px; } .v4-cr-fact:last-child { border-bottom: none; } .v4-cr-studied ul { grid-template-columns: 1fr; } .v4-cr-seal { width: 88px; height: 88px; right: 0; } } /* ── print: completion record ────────────────────────────────────────── */ @media print { @page { size: A4 portrait; margin: 0; } .v4-cr-bar, .v4-util, .v4-nav, .v4-foot { display: none !important; } .v4-cr, .v4-cr-stage { background: #fff !important; padding: 0 !important; } .v4-cr-page { width: 100% !important; min-height: 100vh !important; box-shadow: none !important; margin: 0 !important; } } /* ---- end v4_records.css ---- */ /* ---- begin v4_scholar.css ---- */ /* ========================================================================== Scholar Page — "the chain, made visible." Built on the v4 system: Quarto display, Spectral read, Source Sans UI, cream/sand grounds, gold accent, hairline frames. Reuses .v4-band / .v4-wrap / .v4-sect-head / .v4-answer / .v4-course. ========================================================================== */ /* ── Header ────────────────────────────────────────────────────────── */ .sc-header { background: #FBF6EC; border-bottom: 1px solid rgba(15, 27, 34, 0.08); } .sc-header-grid { display: grid; grid-template-columns: 320px 1fr; gap: 52px; align-items: center; } .sc-portrait { width: 320px; aspect-ratio: 4/5; border-radius: 3px; overflow: hidden; background: #EFE0C5; box-shadow: inset 0 0 0 1px rgba(15, 27, 34, 0.08); } .sc-portrait image-slot, .sc-portrait > div { width: 100%; height: 100%; } .sc-loc { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } .sc-name { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(36px, 4.8vw, 56px); line-height: 1.04; letter-spacing: -0.015em; color: var(--sg-fg); margin: 0 0 16px; text-wrap: balance; } .sc-identity { font-family: var(--sg-font-read); font-size: 19px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0 0 22px; max-width: 44ch; text-wrap: pretty; } .sc-creds { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sg-font-ui); font-size: 13px; font-weight: 600; color: var(--sg-burnt-umber); background: rgba(138, 90, 68, 0.07); border: 1px solid rgba(138, 90, 68, 0.2); border-radius: 999px; padding: 7px 14px; } .sc-creds .seal { color: var(--sg-gamboge); flex: none; } /* ── The chain ─────────────────────────────────────────────────────── */ .sc-chain { max-width: 720px; } .sc-chain-note { font-family: var(--sg-font-ui); font-size: 12.5px; color: var(--sg-fg-subtle); margin: 0 0 26px; letter-spacing: 0.01em; } .sc-chain-list { position: relative; margin: 0; padding: 0; list-style: none; } .sc-chain-list::before { content: ''; position: absolute; left: 13px; top: 14px; bottom: 40px; width: 1px; background: rgba(236, 166, 8, 0.4); } .sc-chain-node { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 22px; padding: 0 0 26px; } .sc-chain-node:last-child { padding-bottom: 0; } .sc-chain-star { position: relative; z-index: 1; color: var(--sg-gamboge); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--sg-bg-alt, #F8F4EC); } .sc-chain-sci { font-family: var(--sg-font-display); font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--sg-fg); margin: 2px 0 4px; } .sc-chain-under { font-family: var(--sg-font-read); font-size: 15.5px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0; } .sc-chain-under b { color: var(--sg-fg); font-weight: 600; } .sc-chain-under .where { color: var(--sg-fg-subtle); } .sc-chain-end { display: grid; grid-template-columns: 28px 1fr; gap: 22px; padding-top: 4px; } .sc-chain-end .sc-chain-star { color: var(--sg-astral); } .sc-chain-end p { font-family: var(--sg-font-display); font-style: normal; font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--sg-astral-shade-30); margin: 2px 0 0; } /* ── Bio ───────────────────────────────────────────────────────────── */ .sc-bio { max-width: 64ch; } .sc-bio p { font-family: var(--sg-font-read); font-size: 18px; line-height: 1.66; color: var(--sg-fg); margin: 0; text-wrap: pretty; } /* ── What I teach — science chips ──────────────────────────────────── */ .sc-sciences { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; } .sc-sci-chip { font-family: var(--sg-font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--sg-astral-shade-30); background: rgba(48, 112, 142, 0.08); border: 1px solid rgba(48, 112, 142, 0.2); border-radius: 999px; padding: 7px 16px; } /* ── Write to me — scoped Ask box ──────────────────────────────────── */ .sc-ask-band { background: var(--sg-astral-shade-70); } .sc-ask-wrap { max-width: 720px; margin: 0 auto; text-align: center; } .sc-ask-band .eyebrow { color: var(--sg-gamboge) !important; justify-content: center; } .sc-ask-band .v4-sect-head h2, .sc-ask-band .v4-sect-head .v4-sect-lede { color: #FBF6EC; } .sc-ask-band .v4-sect-lede { color: rgba(245, 236, 218, 0.78) !important; margin-left: auto; margin-right: auto; } .sc-ask { display: flex; align-items: center; gap: 12px; margin: 28px auto 0; max-width: 560px; background: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 3px; padding: 10px 10px 10px 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .sc-ask-icon { width: 20px; height: 20px; flex: none; color: var(--sg-burnt-umber); } .sc-ask input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--sg-font-ui); font-size: 16px; color: var(--sg-fg); } .sc-ask input::placeholder { color: var(--sg-fg-muted); } .sc-ask button { flex: none; background: var(--sg-gamboge); color: var(--sg-astral-shade-90); border: none; padding: 12px 20px; border-radius: 3px; font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background 150ms; } .sc-ask button:hover { background: var(--sg-gamboge-shade-30); color: #fff; } .sc-ask input:focus-visible { outline: none; } .sc-ask:focus-within { box-shadow: 0 0 0 3px rgba(236, 166, 8, 0.4), 0 8px 24px rgba(0, 0, 0, 0.18); } .sc-ask button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .sc-ask-note { font-family: var(--sg-font-ui); font-size: 13px; line-height: 1.5; color: rgba(245, 236, 218, 0.72); margin: 16px auto 0; } .sc-ask-assure { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sg-font-ui); font-size: 12.5px; color: rgba(245, 236, 218, 0.6); margin: 8px auto 0; } .sc-ask-assure .seal { color: var(--sg-gamboge); flex: none; } /* ── Responsive ────────────────────────────────────────────────────── */ @media (max-width: 860px) { .sc-header-grid { grid-template-columns: 1fr; gap: 32px; } .sc-portrait { width: 220px; } } @media (max-width: 560px) { .sc-portrait { width: 100%; max-width: 280px; } .sc-ask { flex-wrap: wrap; } .sc-ask input { flex-basis: 100%; padding: 6px 4px; } .sc-ask button { width: 100%; } } /* RTL */ [dir="rtl"] .sc-identity, [dir="rtl"] .sc-bio p, [dir="rtl"] .sc-chain-under { font-family: var(--sg-font-arabic); } [dir="rtl"] .sc-name, [dir="rtl"] .sc-chain-sci { font-family: "Zarid Display", "Riwaya", serif; letter-spacing: 0; } [dir="rtl"] .sc-chain-list::before { left: auto; right: 13px; } /* ---- end v4_scholar.css ---- */ /* ---- begin v4_signin.css ---- */ /* ========================================================================== v4_signin.css — Pass 4 · Sign in (bilingual auth, companion-warm) -------------------------------------------------------------------------- A two-panel sign-in: a warm scholar-companion side (institutional voice) and the form. Not a SaaS login — a return to the path. Reuses chrome + role-swap from v4_library.css. Logical properties; mirrors by direction. ========================================================================== */ .v4-si-wrap { min-height: calc(100vh - 60px); display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 820px){ .v4-si-wrap { grid-template-columns: 1fr; } } /* companion side */ .v4-si-aside { background: linear-gradient(165deg, var(--sg-astral-shade-70), var(--sg-astral-shade-90)); color: #F5ECDA; padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } @media (max-width: 820px){ .v4-si-aside { padding: 44px 36px; } } .v4-si-aside .emblem { position: absolute; inset-block-start: -40px; inset-inline-end: -40px; opacity: 0.08; } .v4-si-aside .k { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-gamboge); margin: 0 0 18px; } [dir="rtl"] .v4-si-aside .k { letter-spacing: 0; } .v4-si-aside h1 { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(30px,3.4vw,42px); line-height: 1.08; letter-spacing: -0.012em; color: #FBF6EC; margin: 0 0 18px; max-width: 16ch; text-wrap: balance; } [dir="rtl"] .v4-si-aside h1 { letter-spacing: 0; line-height: 1.3; } .v4-si-aside p { font-family: var(--sg-font-read); font-size: 17px; line-height: 1.6; color: rgba(245,236,218,0.86); margin: 0; max-width: 42ch; } .v4-si-aside .ayah { font-family: var(--sg-font-quran); direction: rtl; text-align: start; font-size: 26px; line-height: 1.9; color: #FBF6EC; margin: 28px 0 8px; } .v4-si-aside .ayah-src { font-family: var(--sg-font-ui); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sg-gamboge); } [dir="rtl"] .v4-si-aside .ayah-src { letter-spacing: 0; } /* form side */ .v4-si-main { background: #FBF6EC; padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 820px){ .v4-si-main { padding: 44px 36px; } } .v4-si-form { width: 100%; max-width: 380px; margin: 0 auto; } .v4-si-tabs { display: flex; gap: 4px; background: #fff; border: 1px solid rgba(15,27,34,0.14); border-radius: 999px; padding: 4px; margin-bottom: 28px; } .v4-si-tabs button { flex: 1; font-family: var(--sg-font-ui); font-size: 14px; font-weight: 600; border: none; background: transparent; color: var(--sg-fg-muted); padding: 10px; border-radius: 999px; cursor: pointer; transition: all 150ms var(--sg-ease); } .v4-si-tabs button.on { background: var(--sg-astral); color: #fff; } .v4-si-form h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 26px; color: var(--sg-fg); margin: 0 0 6px; } .v4-si-form .sub { font-family: var(--sg-font-read); font-size: 15px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0 0 26px; } .v4-si-field { margin-bottom: 16px; } .v4-si-field label { display: block; font-family: var(--sg-font-ui); font-size: 12.5px; font-weight: 600; color: var(--sg-fg); margin-bottom: 6px; } .v4-si-field input { width: 100%; box-sizing: border-box; font-family: var(--sg-font-ui); font-size: 15px; padding: 12px 14px; border: 1px solid rgba(15,27,34,0.2); border-radius: 2px; background: #fff; } .v4-si-field input:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 1px; border-color: var(--sg-astral); } .v4-si-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; } .v4-si-row label { font-family: var(--sg-font-ui); font-size: 13px; color: var(--sg-fg-muted); display: inline-flex; align-items: center; gap: 7px; } .v4-si-row a { font-family: var(--sg-font-ui); font-size: 13px; font-weight: 600; color: var(--sg-astral); text-decoration: none; } .v4-si-submit { width: 100%; font-family: var(--sg-font-ui); font-weight: 700; font-size: 15.5px; background: var(--sg-astral); color: #fff; border: none; border-radius: 2px; padding: 14px; cursor: pointer; transition: background 150ms; } .v4-si-submit:hover { background: var(--sg-astral-shade-30); } .v4-si-or { text-align: center; font-family: var(--sg-font-ui); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 22px 0; position: relative; } [dir="rtl"] .v4-si-or { letter-spacing: 0; } .v4-si-or::before, .v4-si-or::after { content: ''; position: absolute; inset-block-start: 50%; width: calc(50% - 28px); height: 1px; background: rgba(15,27,34,0.12); } .v4-si-or::before { inset-inline-start: 0; } .v4-si-or::after { inset-inline-end: 0; } .v4-si-sso { width: 100%; font-family: var(--sg-font-ui); font-weight: 600; font-size: 14.5px; background: #fff; color: var(--sg-fg); border: 1px solid rgba(15,27,34,0.2); border-radius: 2px; padding: 12px; cursor: pointer; margin-bottom: 10px; } .v4-si-sso:hover { border-color: var(--sg-astral); } .v4-si-fine { font-family: var(--sg-font-ui); font-size: 12px; line-height: 1.5; color: var(--sg-fg-subtle); text-align: center; margin: 22px 0 0; } .v4-si-fine a { color: var(--sg-astral); text-decoration: none; } /* ---- end v4_signin.css ---- */ /* ---- begin v4_today.css ---- */ /* ========================================================================== v4_today.css — Pass 3 · Daily Answer / Today (the newsroom) -------------------------------------------------------------------------- The masthead register: a Hijri + Gregorian dateline, today's Answer above the fold with scholar attribution, a video slot, reading-prose body, the certified-Quran primitive (reuse .v4-rd-quran from v4_reader.css), and a right rail (prayer times w/ current highlighted, live Q&A pulse, newsletter). Below: an "Earlier this week" federation strip. Logical CSS; mirrors by dir. No countdown timers, no scarcity — the live indicator is informational only. ========================================================================== */ /* ── Masthead dateline ─────────────────────────────────────────────────── */ .v4-td-mast { background: #FBF6EC; border-bottom: 1px solid rgba(15,27,34,0.1); } .v4-td-mast-inner { max-width: 1180px; margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; } .v4-td-mast .label { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-burnt-umber); display: inline-flex; align-items: center; gap: 12px; } [dir="rtl"] .v4-td-mast .label { letter-spacing: 0; } .v4-td-mast .label::before { content: ''; width: 26px; height: 2px; background: var(--sg-gamboge); } .v4-td-date { font-family: var(--sg-font-read); font-size: 14.5px; color: var(--sg-fg); display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .v4-td-date .hijri { font-weight: 600; color: var(--sg-fg); } .v4-td-date .greg { color: var(--sg-fg-muted); } .v4-td-date .greg::before { content: '·'; margin-inline-end: 10px; color: var(--sg-fg-subtle); } /* ── Layout ────────────────────────────────────────────────────────────── */ .v4-td-layout { max-width: 1180px; margin: 0 auto; padding: 44px 40px 72px; display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; } @media (max-width: 940px){ .v4-td-layout { grid-template-columns: 1fr; gap: 40px; } } .v4-td-eyebrow { font-family: var(--sg-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-astral); margin: 0 0 14px; } [dir="rtl"] .v4-td-eyebrow { letter-spacing: 0; } .v4-td-q { font-family: var(--sg-font-display); font-weight: 500; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.1; letter-spacing: -0.014em; color: var(--sg-fg); margin: 0 0 18px; text-wrap: balance; } [dir="rtl"] .v4-td-q { letter-spacing: 0; line-height: 1.3; } .v4-td-byline { display: flex; align-items: center; gap: 12px; padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid rgba(15,27,34,0.1); } .v4-td-byline .av { width: 42px; height: 42px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #F5ECDA; font-family: var(--sg-font-display); font-weight: 600; font-size: 15px; } [dir="rtl"] .v4-td-byline .av { font-family: "Zarid Display", "Riwaya", serif; } .v4-td-byline .who { font-family: var(--sg-font-ui); font-size: 14px; color: var(--sg-fg-muted); } .v4-td-byline .who b { font-family: var(--sg-font-display); font-weight: 600; font-size: 16px; color: var(--sg-fg); display: block; } .v4-td-byline .seal { color: var(--sg-gamboge); margin-inline-start: 2px; } /* video slot — placeholder for the recorded answer */ .v4-td-video { position: relative; aspect-ratio: 16/9; border-radius: 2px; overflow: hidden; margin-bottom: 26px; background: linear-gradient(160deg, #13303F, #0A1E29); display: flex; align-items: center; justify-content: center; } .v4-td-video::after { content: attr(data-cap); position: absolute; inset-block-end: 12px; inset-inline-start: 14px; font-family: var(--sg-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,236,218,0.6); } .v4-td-video .play { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--sg-gamboge); background: rgba(236,166,8,0.14); cursor: pointer; display: flex; align-items: center; justify-content: center; } /* play affordance drawn as a triangle — no glyph */ .v4-td-video .play::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--sg-gamboge); margin-inline-start: 4px; } [dir="rtl"] .v4-td-video .play::before { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: 4px; } .v4-td-video .dur { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; font-family: var(--sg-font-mono); font-size: 11px; color: #F5ECDA; background: rgba(15,27,34,0.6); padding: 4px 9px; border-radius: 2px; } .v4-td-body p { font-size: 17px; line-height: 1.62; color: var(--sg-fg); margin: 0 0 20px; max-width: 68ch; text-wrap: pretty; } [dir="rtl"] .v4-td-body p { line-height: 2.0; } .v4-td-body .lead { font-family: var(--sg-font-read); font-weight: 500; } .v4-td-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(15,27,34,0.1); } /* ── Right rail ────────────────────────────────────────────────────────── */ .v4-td-rail { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 20px; } @media (max-width: 940px){ .v4-td-rail { position: static; } } .v4-td-card { background: #fff; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 20px 22px; } .v4-td-card .ttl { font-family: var(--sg-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-fg-subtle); margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; } [dir="rtl"] .v4-td-card .ttl { letter-spacing: 0; } .v4-td-card .ttl .loc { color: var(--sg-astral); font-weight: 700; letter-spacing: 0.04em; } /* prayer times */ .v4-td-prayers { list-style: none; margin: 0; padding: 0; } .v4-td-prayers li { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-family: var(--sg-font-ui); font-size: 14.5px; color: var(--sg-fg); border-bottom: 1px solid rgba(15,27,34,0.06); } .v4-td-prayers li:last-child { border-bottom: none; } .v4-td-prayers li .nm { color: var(--sg-fg-muted); } .v4-td-prayers li .tm { font-variant-numeric: tabular-nums; } .v4-td-prayers li.now { font-weight: 700; } .v4-td-prayers li.now .nm { color: var(--sg-fg); } .v4-td-prayers li.now .tm { background: var(--sg-gamboge); color: var(--sg-astral-shade-90); padding: 2px 9px; border-radius: 2px; } /* live Q&A indicator — informational, not a countdown */ .v4-td-live { display: flex; align-items: flex-start; gap: 10px; } .v4-td-live .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sg-gamboge); margin-top: 6px; flex: none; box-shadow: 0 0 0 0 rgba(236,166,8,0.5); animation: v4-td-pulse 1.8s ease-out infinite; } @keyframes v4-td-pulse { 0%{ box-shadow: 0 0 0 0 rgba(236,166,8,0.45); } 70%{ box-shadow: 0 0 0 8px rgba(236,166,8,0); } 100%{ box-shadow: 0 0 0 0 rgba(236,166,8,0); } } @media (prefers-reduced-motion: reduce){ .v4-td-live .dot { animation: none; } } .v4-td-live .lt { font-family: var(--sg-font-display); font-weight: 600; font-size: 16px; color: var(--sg-fg); margin: 0 0 2px; } .v4-td-live .ls { font-family: var(--sg-font-read); font-size: 14px; line-height: 1.5; color: var(--sg-fg-muted); margin: 0; } .v4-td-live-link { font-family: var(--sg-font-ui); font-size: 13.5px; font-weight: 600; color: var(--sg-astral); text-decoration: none; display: inline-block; margin-top: 10px; } /* newsletter — pastoral */ .v4-td-news p { font-family: var(--sg-font-read); font-size: 14.5px; line-height: 1.55; color: var(--sg-fg-muted); margin: 0 0 14px; } .v4-td-news .field { display: flex; flex-direction: column; gap: 8px; } .v4-td-news input { font-family: var(--sg-font-ui); font-size: 14px; padding: 11px 14px; border: 1px solid rgba(15,27,34,0.18); border-radius: 2px; } .v4-td-news input:focus-visible { outline: 2px solid var(--sg-gamboge); outline-offset: 1px; border-color: var(--sg-astral); } .v4-td-news button { font-family: var(--sg-font-ui); font-weight: 600; font-size: 14px; background: var(--sg-astral); color: #fff; border: none; border-radius: 2px; padding: 11px 16px; cursor: pointer; } .v4-td-news .fine { font-family: var(--sg-font-ui); font-size: 12px; color: var(--sg-fg-subtle); margin: 10px 0 0; } /* ── Earlier this week — federation strip ──────────────────────────────── */ .v4-td-earlier { background: #FBF6EC; border-top: 1px solid rgba(15,27,34,0.08); } .v4-td-earlier-inner { max-width: 1180px; margin: 0 auto; padding: 52px 40px 72px; } .v4-td-earlier h2 { font-family: var(--sg-font-display); font-weight: 500; font-size: 28px; color: var(--sg-fg); margin: 0 0 6px; } .v4-td-earlier .sub { font-family: var(--sg-font-read); font-size: 15.5px; color: var(--sg-fg-muted); margin: 0 0 28px; } .v4-td-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 940px){ .v4-td-strip { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .v4-td-strip { grid-template-columns: 1fr; } } .v4-td-mini { background: #fff; border: 1px solid rgba(15,27,34,0.1); border-radius: 2px; padding: 18px 20px; display: flex; flex-direction: column; text-decoration: none; transition: border-color 160ms, transform 160ms; } .v4-td-mini:hover { border-color: var(--sg-astral); transform: translateY(-2px); } .v4-td-mini .day { font-family: var(--sg-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 8px; } [dir="rtl"] .v4-td-mini .day { letter-spacing: 0; } .v4-td-mini .mq { font-family: var(--sg-font-display); font-weight: 500; font-size: 17px; line-height: 1.25; color: var(--sg-fg); margin: 0 0 12px; } .v4-td-mini .by { font-family: var(--sg-font-ui); font-size: 12.5px; color: var(--sg-fg-muted); margin-top: auto; display: flex; align-items: center; gap: 8px; } .v4-td-mini .by .av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #F5ECDA; font-family: var(--sg-font-display); font-size: 10px; font-weight: 600; } [dir="rtl"] .v4-td-mini .by .av { font-family: "Zarid Display", "Riwaya", serif; } /* RTL type roles handled centrally in v4_library.css (variable-level role swap + chrome-exclusion). No per-page font guards needed. */ /* ---- end v4_today.css ---- */