/* ============================================================ Manzar — Home page (the front door + hub). Identity -> "what you'll project" slide -> two primary actions -> recent recitations -> secondary by audience -> admin (set apart). Reuses base.css tokens + present.css slide styles. Mobile-first. ============================================================ */ /* present.css (loaded first, for the showcase slide) pins html/body to a fixed, non-scrolling black projection viewport. The home is the light workspace and scrolls — undo both (same override the editor uses). */ html { height: auto; overflow: auto; background: var(--surface-canvas); /* Re-assert the reserved gutter on the VIEWPORT only (this page also loads present.css, which clears it). It must NOT also be on : with body overflow:auto that reserves a SECOND gutter, so the homepage sat ~half a scrollbar left of every other app page and content shifted on navigation. */ scrollbar-gutter: stable; } body { height: auto; overflow: visible; /* undo present.css; don't make body a 2nd scroll container */ background: var(--surface-canvas); } body.home-page { color: var(--text-body); font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); } /* The top nav is now the shared .site-header (base.css + templates/_header.html). */ /* --- Layout shell ------------------------------------------------------- */ .home__container { max-width: var(--maxw); margin: 0 auto; padding: var(--space-7) var(--space-6) var(--space-10); } .home-section { margin-top: var(--space-9); } .eyebrow { display: inline-block; font-family: var(--font-ui); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-faint); } .sechead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); } .seclink { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: var(--fs-body-sm); color: var(--accent); text-decoration: none; } .seclink svg { width: 14px; height: 14px; } .seclink:hover { color: var(--accent-press); } /* --- 1. Identity -------------------------------------------------------- */ .hero { max-width: 640px; } .hero__title { margin: var(--space-2) 0 0; font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: var(--fs-display); letter-spacing: var(--ls-tight); color: var(--text-strong); line-height: 1.1; } .hero__lead { margin: var(--space-4) 0 0; font-size: var(--fs-body-lg); line-height: var(--lh-reading); color: var(--text-muted); } .hero__lead em { font-family: var(--font-serif); font-style: italic; color: var(--text-body); } .hero__actions { margin-top: var(--space-5); display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } .hero__new svg { width: 16px; height: 16px; margin-right: 6px; } /* Quiet text link beside the primary action — the indigo button leads. */ .hero__about { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: var(--fs-body-sm); color: var(--text-muted); text-decoration: none; transition: color var(--dur) var(--ease-calm); } .hero__about svg { width: 14px; height: 14px; } .hero__about:hover { color: var(--accent); } /* --- 2. What you'll project (showcase slide) ---------------------------- */ .showcase { margin-top: var(--space-8); } .showcase__hint { font-family: var(--font-ui); font-size: var(--fs-body-sm); color: var(--text-faint); } .showcase__frame { display: block; position: relative; width: 100%; text-decoration: none; border: var(--bw-hair) solid var(--border-strong); background: #000; cursor: pointer; } /* Override present.css's fullscreen .stage so it's a framed 16:9 box here. */ .showcase__stage { width: 100%; height: auto; aspect-ratio: 16 / 9; } .showcase__cue { position: absolute; right: var(--space-4); bottom: var(--space-4); z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-family: var(--font-ui); font-size: var(--fs-body-sm); color: rgba(255, 255, 255, 0.86); background: rgba(0, 0, 0, 0.42); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-control); opacity: 0; transition: opacity var(--dur) var(--ease-calm); } .showcase__cue svg { width: 14px; height: 14px; } .showcase__frame:hover .showcase__cue, .showcase__frame:focus-visible .showcase__cue { opacity: 1; } .showcase__meta { margin: var(--space-4) 0 0; display: flex; flex-direction: column; gap: 2px; } .showcase__title { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--text-strong); } .showcase__sub { font-size: var(--fs-body-sm); color: var(--text-muted); } /* The sample is a real Qur'an slide (Āyat al-Kursī), rendered by the engine and auto-cycling; click plays it full screen. Needs the self-hosted Amiri font. */ @font-face { font-family: "Amiri Quran"; src: url("../fonts/quran/AmiriQuran-Regular.woff2") format("woff2"); font-display: swap; } .showcase__qframe { position: relative; width: 100%; aspect-ratio: 16 / 9; } .showcase__qframe .q-slide { position: absolute; inset: 0; opacity: 0; } .showcase__qframe.ready .q-slide { transition: opacity 1.2s var(--ease-calm); } .showcase__qframe .q-slide.show { opacity: 1; } /* Full screen: letterbox the 16:9 slide on black. */ .showcase__frame:fullscreen, .showcase__frame:-webkit-full-screen { display: grid; place-items: center; background: #000; border: 0; cursor: default; } .showcase__frame:fullscreen .showcase__qframe { width: min(100vw, 177.78vh); } .showcase__frame:-webkit-full-screen .showcase__qframe { width: min(100vw, 177.78vh); } .showcase__frame:fullscreen .showcase__cue, .showcase__frame:-webkit-full-screen .showcase__cue { display: none; } @media (prefers-reduced-motion: reduce) { .showcase__qframe.ready .q-slide { transition: none; } } /* --- 2. Two ways in: Qur'an & Poetry (matched neutral pair) ------------- */ /* Hero paired with the two library cards: 60/40 on wide screens, stacked on narrow. The cards sit in the 40% column, one above the other. */ .hero-row { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; } @media (min-width: 860px) { .hero-row { grid-template-columns: 3fr 2fr; gap: var(--space-7); } } .primary-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } .pcard { position: relative; /* anchor for the watermark motif */ overflow: hidden; /* the oversized mark bleeds off and is clipped */ padding: var(--space-4) var(--space-5); /* compact: shorter to balance the hero */ text-decoration: none; background: var(--surface-raised); border: var(--bw-hair) solid var(--border-strong); transition: border-color var(--dur) var(--ease-calm), background var(--dur) var(--ease-calm), box-shadow var(--dur) var(--ease-calm), transform var(--dur) var(--ease-calm); display: flex; flex-direction: column; } .pcard:hover { border-color: var(--border-strong); background: var(--surface-card); box-shadow: var(--shadow-raised); transform: translateY(-2px); } /* Oversized, faint line motif anchored bottom-right — gives each card its own quiet identity (book / feather) without a separate icon row. */ .pcard__mark { position: absolute; right: -26px; top: 50%; transform: translateY(-50%); /* vertically centred — equal bleed top & bottom */ z-index: 0; color: var(--text-strong); opacity: 0.04; pointer-events: none; } .pcard__mark svg { width: 150px; height: 150px; } .pcard__mark svg path { stroke-width: 0.9; } /* keep the lines fine at this scale */ .pcard:hover .pcard__mark { opacity: 0.06; color: var(--accent); } /* The book glyph fills its SVG box wider than the feather does, so it reads further right at the same offset; nudge the Qur'an (first) card's mark left so both watermarks share the same visible right edge. */ .primary-grid .pcard:first-child .pcard__mark { right: -12px; } .pcard__foot { position: relative; z-index: 1; display: flex; flex-direction: column; } .pcard__aud { font-family: var(--font-ui); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-faint); } .pcard__title { margin: var(--space-2) 0 0; font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--fs-h3); color: var(--text-strong); } /* Reserve exactly two lines so both cards' eyebrow/title line up regardless of how long the description runs (Qur'an wraps to 1 line, Poetry to 2). */ .pcard__desc { margin: var(--space-2) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); min-height: calc(var(--lh-body) * 2em); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .pcard__cta { margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--accent); } .pcard__cta svg { width: 15px; height: 15px; } .pcard--accent { background: var(--accent); border-color: var(--accent); } .pcard--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .pcard--accent .pcard__mark { color: var(--text-on-accent); opacity: 0.12; } .pcard--accent .pcard__aud { color: rgba(243, 242, 238, 0.72); } .pcard--accent .pcard__title { color: var(--text-on-accent); } .pcard--accent .pcard__desc { color: rgba(243, 242, 238, 0.82); } .pcard--accent .pcard__cta { color: var(--text-on-accent); } /* --- 4. Recent recitations --------------------------------------------- */ .feat-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } .rcard { position: relative; display: flex; flex-direction: column; padding: var(--space-5); background: var(--surface-card); border: var(--bw-hair) solid var(--border-default); transition: border-color var(--dur) var(--ease-calm), box-shadow var(--dur) var(--ease-calm); } .rcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); } /* Stretched link: the whole card opens Read; the Present button sits above it. */ .rcard__open { position: absolute; inset: 0; z-index: 1; } /* Type + Topic pills (mirror the library cards). z-index keeps them above the stretched .rcard__open link, like .rcard__foot. */ .rcard__tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--space-2); } .rcard__tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; background: var(--surface-sunken); border: var(--bw-hair) solid var(--border-default); border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: 0.02em; color: var(--text-muted); white-space: nowrap; } /* Type — accent-tinted, so the poetic form reads distinct from the topic. */ .rcard__tag--type { background: var(--accent-tint-weak); border-color: var(--accent-tint-border); color: var(--accent); } .rcard__title { margin: var(--space-2) 0 0; font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--text-strong); } .rcard__preview { margin: var(--space-2) 0 var(--space-5); font-family: var(--font-serif); font-style: italic; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); flex: 1; } .rcard__foot { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--bw-hair) solid var(--border-subtle); } .rcard__verses { font-family: var(--font-ui); font-size: var(--fs-caption); color: var(--text-faint); } .rcard__act { font-family: var(--font-ui); font-size: var(--fs-body-sm); color: var(--accent); margin-left: auto; text-decoration: none; } .rcard__act:hover { color: var(--accent-press); } .rcard__present { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-family: var(--font-ui); font-size: var(--fs-body-sm); color: var(--text-strong); text-decoration: none; background: var(--surface-raised); border: var(--bw-hair) solid var(--border-default); border-radius: var(--radius-control); transition: border-color var(--dur) var(--ease-calm), background var(--dur) var(--ease-calm); } .rcard__present svg { width: 15px; height: 15px; } .rcard__present:hover { border-color: var(--text-faint); background: var(--surface-fill); } .home-empty { color: var(--text-muted); } .home-empty a { color: var(--accent); } /* --- 4. Secondary, by audience ----------------------------------------- */ .sec-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } .scard { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); text-decoration: none; background: var(--surface-raised); border: var(--bw-hair) solid var(--border-default); transition: border-color var(--dur) var(--ease-calm); } .scard:hover { border-color: var(--border-strong); } .scard__icon { color: var(--text-muted); flex-shrink: 0; } .scard__icon svg { width: 22px; height: 22px; } .scard__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .scard__title { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--text-strong); } .scard__desc { font-size: var(--fs-body-sm); color: var(--text-muted); } .scard__aud { font-family: var(--font-ui); font-size: var(--fs-caption); color: var(--text-faint); margin-top: 2px; } .scard__chev { color: var(--text-faint); flex-shrink: 0; } .scard__chev svg { width: 18px; height: 18px; } /* --- 5. Admin, set apart ------------------------------------------------ */ .admin { margin-top: var(--space-9); padding-top: var(--space-6); border-top: var(--bw-hair) solid var(--border-default); } .admin__label { display: inline-flex; align-items: center; gap: 7px; margin-bottom: var(--space-3); font-family: var(--font-ui); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-faint); } .admin__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); } .admin__rows { display: flex; flex-direction: column; gap: var(--space-2); } .adminrow { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); text-decoration: none; background: var(--surface-sunken); border: var(--bw-hair) solid var(--border-default); transition: border-color var(--dur) var(--ease-calm); } .adminrow:hover { border-color: var(--border-strong); } .adminrow__icon { color: var(--text-muted); flex-shrink: 0; } .adminrow__icon svg { width: 20px; height: 20px; } .adminrow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .adminrow__title { font-family: var(--font-ui); font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-body); } .adminrow__desc { font-size: var(--fs-body-sm); color: var(--text-muted); } .adminrow__badge { flex-shrink: 0; font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--marker); padding: 3px 9px; background: var(--marker-tint); border-radius: var(--radius-pill); } .adminrow__chev { color: var(--text-faint); flex-shrink: 0; } .adminrow__chev svg { width: 18px; height: 18px; } /* --- Responsive --------------------------------------------------------- */ @media (min-width: 600px) { .feat-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 680px) { .sec-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .feat-grid { grid-template-columns: 1fr 1fr 1fr; } } /* Calm motion only; respect reduced-motion. */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }