/** * Kalhor Academy Stories — modular frontend styles. * Loaded beside academy.css; does NOT edit global style.css. * Scope: .academy-stories-strip / .academy-story-modal (+ insulation z-index). */ :root { --as-navy: #0b1f3a; --as-gold: #c9a227; --as-gold-2: #e8c547; --as-ring-unread: linear-gradient(135deg, var(--as-gold) 0%, #f5d76e 45%, var(--as-navy) 100%); --as-ring-read: linear-gradient(135deg, #cbd5e1, #e2e8f0); /* Above sticky header / bottom-nav / sheets (≤1045) and homepage stacking contexts */ --as-modal-z: 12050; } /* —— Strip: horizontal scroll, hidden scrollbar —— */ .academy-stories-strip__scroller { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; } .academy-stories-strip__scroller::-webkit-scrollbar { display: none; width: 0; height: 0; } .academy-stories-strip__thumb { object-fit: cover; object-position: center; width: 100%; height: 100%; border-radius: 50%; display: block; } .academy-stories-strip__label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } /* Unread / read rings (Instagram-style) */ .academy-stories-strip--circles .academy-stories-strip__ring, .academy-stories-strip--basalam .academy-stories-strip__ring { background: var(--as-ring-unread); box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.25); } .academy-stories-strip--circles .academy-stories-strip__item.is-viewed .academy-stories-strip__ring, .academy-stories-strip--basalam .academy-stories-strip__item.is-viewed .academy-stories-strip__ring { background: var(--as-ring-read); box-shadow: none; opacity: 0.92; } /* * Modal — works when nested OR portaled to * (homepage hero creates a low stacking context that traps nested fixed). */ .academy-story-modal, body > .academy-story-modal, .academy-stories-strip .academy-story-modal, .academy-page .academy-story-modal { position: fixed; inset: 0; z-index: var(--as-modal-z); display: none; align-items: center; justify-content: center; padding: 0; margin: 0; isolation: isolate; contain: layout style; pointer-events: none; } .academy-story-modal.is-open, body > .academy-story-modal.is-open, .academy-stories-strip .academy-story-modal.is-open, .academy-page .academy-story-modal.is-open { display: flex !important; pointer-events: auto; } .academy-story-modal__backdrop { position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, 0.92); border: 0; cursor: pointer; pointer-events: auto; } .academy-story-modal__dialog { aspect-ratio: 9 / 16; width: min(100vw, 420px); max-height: min(100dvh, 100vh); max-width: 100%; margin: 0 auto; position: relative; z-index: 1; overflow: hidden; border-radius: clamp(0px, 2vw, 18px); background: #000; contain: layout paint; pointer-events: auto; } @media (max-width: 767.98px) { .academy-story-modal.is-open, body > .academy-story-modal.is-open { padding: 0; align-items: stretch; justify-content: stretch; } .academy-story-modal__dialog { width: 100vw; height: 100dvh; max-height: 100dvh; max-width: 100vw; border-radius: 0; aspect-ratio: auto; } /* Keep close control obvious on true fullscreen */ .academy-story-modal__close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 1.15rem; background: rgba(15, 23, 42, 0.45); border-radius: 50%; } } @media (min-width: 1920px) { .academy-story-modal__dialog { width: min(28vw, 480px); } } .academy-story-modal__media { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* CTA overlay */ .academy-story-modal__cta { position: absolute; z-index: 6; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: min(78%, 280px); padding: 0.65rem 1.25rem; border-radius: 999px; background: linear-gradient(135deg, var(--as-gold), var(--as-gold-2)); color: var(--as-navy); font-weight: 700; font-size: 0.92rem; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); pointer-events: auto; } .academy-story-modal__cta[hidden] { display: none !important; } .academy-story-modal__cta:hover, .academy-story-modal__cta:focus-visible { filter: brightness(1.05); outline: 2px solid #fff; outline-offset: 2px; } .academy-story-modal__close { z-index: 8; } /* Single-segment progress (one story = one media item) */ .academy-story-modal__progress { gap: 0; } .academy-story-modal__progress .academy-story-modal__bar { flex: 1 1 auto; } /* × always at physical top-left (گوشه بالا سمت چپ) */ .academy-story-modal__top { position: absolute; top: 14px; right: 10px; left: 10px; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; } .academy-story-modal__close { position: absolute; top: 0; left: 0; pointer-events: auto; } .academy-story-modal__meta { pointer-events: none; margin-right: 0; margin-left: auto; max-width: calc(100% - 48px); } /* Hide shell chrome while story is open */ html.academy-story-open, body.academy-story-open { overflow: hidden !important; } body.academy-story-open .sk-bottom-nav, body.academy-story-open .sk-app-header { visibility: hidden; pointer-events: none; } /* Defensive: strip never collapses under sticky shell header on homepage */ .home-hero-container--stories { position: relative; z-index: 2; }