/* ========================================================================== SHOHRAH — Showcase page chrome Hero, case-study panels, outro and CTA for the portfolio pages (/projects/projects.html and each /projects/.html case page). The drag canvas itself lives in `sc-canvas.css`, which the portfolio index loads alongside this file (the home-page strip loads it on its own). Loaded only on pages that set `pageCss: showcase.css` in front matter. Everything is scoped under .sc-page and reuses the existing site palette — no colours are redefined, so the global theme stays the single source. ========================================================================== */ .sc-page { --sc-accent: var(--accent--color); --sc-ink: var(--black--color); --sc-muted: var(--text--color2); --sc-line: var(--border--color); /* The theme sets `html, body { overflow-x: hidden }`. On that makes it a scroll container, which silently disables `position: sticky` for every descendant — the case-page track then drifted off diagonally instead of pinning. `clip` clips exactly the same way but creates no scroll container, so sticky keeps working. Scoped to this page only; the global rule is left alone. */ overflow-x: clip; } /* ========================================================================== 1. HERO ========================================================================== */ .sc-hero { position: relative; text-align: center; padding: clamp(88px, 13vh, 150px) 20px clamp(20px, 4vh, 44px); } .sc-hero-mark { display: inline-block; border: 1px solid var(--sc-accent); padding: clamp(18px, 3vw, 34px) clamp(26px, 5vw, 54px); margin-bottom: clamp(18px, 3vh, 32px); } .sc-hero-mark img { display: block; height: clamp(42px, 7vw, 68px); width: auto; } .sc-hero h1 { font-family: 'Thmanyah Serif Display', serif; font-weight: 400; font-size: clamp(2.1rem, 6vw, 4.2rem); line-height: 1.15; color: var(--sc-ink); margin: 0; padding-top: clamp(12px, 9vh, 50px); } .sc-hero p { color: var(--text--color); font-size: clamp(.95rem, 2.2vw, 1.08rem); max-width: 46ch; margin: 14px auto 0; line-height: 1.9; } /* Drag affordance — desktop only, since touch users simply swipe. */ .sc-hint { display: none; align-items: center; gap: 10px; justify-content: center; margin-top: 22px; color: var(--sc-muted); font-size: .82rem; letter-spacing: .06em; } .sc-hint i { color: var(--sc-accent); } @media (hover: hover) and (min-width: 992px) { .sc-hint { display: flex; } } /* ========================================================================== 2. CASE PAGE — horizontal track on desktop, vertical stack on mobile Scrolling the page drives the track sideways, exactly like the reference. ========================================================================== */ .sc-case-crumb { clear: both; padding: clamp(14px, 3vh, 28px) clamp(20px, 6vw, 90px) 0; font-size: .8rem; color: var(--sc-muted); } .sc-case-crumb a { color: var(--sc-muted); text-decoration: none; } .sc-case-crumb a:hover { color: var(--sc-accent); } /* Every panel carries an explicit box. Images have no intrinsic size until they load, so `width:auto` would collapse a panel to zero and leave the track measuring short. */ /* Height comes from the stretched panel, so media fills the pinned frame. */ .sc-panel-media { width: min(64vw, 880px); } .sc-panel-media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 18px; -webkit-user-drag: none; } /* Media panels are pure image — stretch rather than centre so they fill. */ .sc-panel-media { justify-content: stretch; } .sc-panel-text { width: min(62vw, 620px); } .sc-eyebrow { display: inline-block; font-size: .78rem; letter-spacing: .14em; color: var(--sc-accent); margin-bottom: 14px; } .sc-panel-text h1, .sc-panel-text h2 { font-family: 'Thmanyah Serif Display', serif; font-weight: 400; font-size: clamp(1.9rem, 4vw, 3.2rem) !important; line-height: 1.22 !important; color: var(--sc-ink); margin: 0 0 18px; } .sc-lead { color: var(--text--color); font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 2; margin: 0; } .sc-facts { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--sc-line); } .sc-facts .k { display: block; font-size: .74rem; letter-spacing: .1em; color: var(--sc-muted); margin-bottom: 6px; } .sc-facts .v { display: block; font-weight: 700; color: var(--sc-ink); font-size: 1rem; } .sc-services { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; } .sc-services li { border: 1px solid var(--sc-line); border-radius: 999px; padding: 7px 16px; font-size: .84rem; color: var(--text--color); background: var(--bg--color); } /* Narrative — the markdown body (التحدي / الحل / ماذا سلّمنا). Two columns keep it wide-and-short so it fits the horizontal viewport. */ .sc-narrative { width: min(72vw, 820px); columns: 2; column-gap: clamp(28px, 4vw, 56px); } .sc-narrative > * { break-inside: avoid; } .sc-narrative h2 { font-family: 'Thmanyah Sans', sans-serif; font-size: .78rem !important; font-weight: 700; letter-spacing: .14em; color: var(--sc-accent); margin: 0 0 12px; break-after: avoid; } .sc-narrative h2:not(:first-child) { margin-top: 26px; } .sc-narrative p { font-size: .97rem; line-height: 1.95; margin: 0 0 12px; color: var(--text--color); } .sc-narrative ul { margin: 0; padding: 0; list-style: none; } .sc-narrative li { position: relative; padding-inline-start: 18px; color: var(--text--color); font-size: .94rem; line-height: 1.95; } .sc-narrative li::before { content: ""; position: absolute; inset-inline-start: 0; top: .9em; width: 7px; height: 1px; background: var(--sc-accent); } /* The markdown bodies contain blank-space lines that render as empty

. */ .sc-narrative p:empty { display: none; } .sc-panel-results { width: min(72vw, 760px); } .sc-results { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); align-items: flex-start; } .sc-results .r { text-align: center; } .sc-results .big { font-family: 'Thmanyah Serif Display', serif; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1; color: var(--sc-accent); } .sc-results p { margin: 10px 0 0; color: var(--sc-muted); font-size: .9rem; } /* The closing slide fills the window, so the hand-off to the footer reads as a designed full-screen end rather than the track running out of content. The tint gives the generous whitespace an edge, instead of leaving the headline marooned in a blank frame. */ .sc-outro { width: min(92vw, 1180px); text-align: center; align-items: center; justify-content: center; background: var(--bg--color); border: 1px solid var(--sc-line); border-radius: 26px; padding: clamp(30px, 6vh, 70px) clamp(24px, 5vw, 70px); } .sc-outro h2 { font-size: clamp(2.4rem, 7.5vw, 6.5rem) !important; line-height: 1.1 !important; margin-bottom: clamp(28px, 5vh, 52px); } /* -------------------------------------------------------------------------- Mobile & reduced motion: unwind everything into a plain vertical article. -------------------------------------------------------------------------- */ @media (max-width: 991px), (prefers-reduced-motion: reduce) { .sc-panel-media { width: auto; height: auto; } .sc-outro h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); margin-bottom: 24px; } .sc-panel-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; } .sc-panel-text, .sc-panel-results, .sc-outro { width: auto; } .sc-narrative { width: auto; columns: 1; } .sc-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; } .sc-outro { text-align: center; } } /* ========================================================================== 3. OUTRO + CTA ========================================================================== */ .sc-outro { text-align: center; margin-top: clamp(40px, 8vh, 90px); padding-top: clamp(38px, 7vh, 80px); border-top: 1px solid var(--sc-line); } .sc-outro-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .sc-btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--accent--strong, #d1550e); background: var(--accent--strong, #d1550e); color: #fff; padding: 13px 28px; border-radius: 999px; text-decoration: none; font-size: .95rem; transition: background .3s ease, color .3s ease; } .sc-btn:hover { background: transparent; color: var(--accent--strong, #d1550e); } .sc-btn.ghost { background: transparent; border-color: var(--sc-ink); color: var(--sc-ink); } .sc-btn.ghost:hover { background: var(--sc-ink); color: #fff; } .sc-cta { text-align: center; padding: clamp(50px, 10vh, 110px) 20px clamp(60px, 12vh, 130px); border-top: 1px solid var(--sc-line); background: var(--bg--color); } .sc-cta h2 { font-family: 'Thmanyah Serif Display', serif; font-size: clamp(1.8rem, 5vw, 3.2rem) !important; line-height: 1.3 !important; color: var(--sc-ink); margin: 0 0 16px; } .sc-cta p { color: var(--text--color); max-width: 52ch; margin: 0 auto 28px; line-height: 1.95; } /* ========================================================================== 4. Small-screen tidy-ups ========================================================================== */ @media (max-width: 991px) { .sc-facts { gap: 16px 30px; justify-content: flex-start; } }