/* ===================================================================== SHABLO — "Aurora Cinema" Design System 100% fluid & responsive. No fixed layout widths. Modes: desktop (windows) / mobile / tv (via [data-mode] on ) ===================================================================== */ /* ---------- Design tokens ---------- */ :root { /* brand */ --brand: #ff7a00; --brand-2: #ff9d2e; --brand-3: #ffb85c; --brand-glow: rgba(255, 122, 0, .55); /* surfaces */ --bg-0: #060608; --bg-1: #0b0b11; --bg-2: #12121b; --card: rgba(22, 22, 32, .55); --card-solid: #14141d; --stroke: rgba(255, 255, 255, .08); --stroke-strong: rgba(255, 255, 255, .16); /* text */ --text: #f4f5fa; --muted: #a3a5b5; --muted-2: #6f7180; /* status */ --good: #29d17d; --gold: #ffcf3f; /* fluid scale (all relative) */ --fs-xs: clamp(.68rem, .62rem + .3vw, .82rem); --fs-sm: clamp(.78rem, .72rem + .35vw, .95rem); --fs-md: clamp(.9rem, .82rem + .45vw, 1.08rem); --fs-lg: clamp(1.05rem, .95rem + .7vw, 1.4rem); --fs-xl: clamp(1.35rem, 1.1rem + 1.6vw, 2.4rem); --fs-2xl: clamp(1.8rem, 1.3rem + 3vw, 4rem); /* spacing rhythm */ --gap: clamp(.7rem, .4rem + 1vw, 1.4rem); --pad: clamp(1rem, .5rem + 2.5vw, 2.6rem); --radius: clamp(14px, 1vw + 10px, 22px); --radius-lg: clamp(20px, 2vw + 14px, 34px); /* layout */ --shell: min(96vw, 1680px); --header-h: clamp(58px, 4vw + 40px, 84px); --ease: cubic-bezier(.22, 1, .36, 1); --shadow: 0 18px 50px -18px rgba(0, 0, 0, .8); color-scheme: dark; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: "Vazirmatn", "Segoe UI", Tahoma, "Iran Sans", sans-serif; background: var(--bg-0); color: var(--text); line-height: 1.7; min-height: 100dvh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } ul { list-style: none; } :focus-visible { outline: none; } /* ---------- Living aurora background ---------- */ .aurora { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; background: radial-gradient(120% 90% at 50% -10%, #171019 0%, var(--bg-0) 55%), var(--bg-0); } .aurora::before, .aurora::after { content: ""; position: absolute; border-radius: 50%; filter: blur(clamp(50px, 8vw, 130px)); opacity: .5; mix-blend-mode: screen; } .aurora::before { width: 55vw; height: 55vw; left: -10vw; top: -12vw; background: radial-gradient(circle, rgba(255,122,0,.9), transparent 62%); animation: drift1 22s var(--ease) infinite alternate; } .aurora::after { width: 60vw; height: 60vw; right: -14vw; top: 4vw; background: radial-gradient(circle, rgba(126,60,255,.55), transparent 62%); animation: drift2 26s var(--ease) infinite alternate; } .aurora i { position: absolute; width: 42vw; height: 42vw; left: 30vw; bottom: -18vw; border-radius: 50%; filter: blur(clamp(50px,8vw,120px)); opacity: .35; background: radial-gradient(circle, rgba(255,203,63,.7), transparent 60%); animation: drift3 30s var(--ease) infinite alternate; } @keyframes drift1 { to { transform: translate(18vw, 12vh) scale(1.25); } } @keyframes drift2 { to { transform: translate(-16vw, 10vh) scale(1.15); } } @keyframes drift3 { to { transform: translate(-14vw, -12vh) scale(1.2); } } /* film-grain overlay */ .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { .aurora::before, .aurora::after, .aurora i { animation: none; } } /* ---------- Shell / layout helpers ---------- */ .shell { width: var(--shell); margin-inline: auto; } .section { padding-block: clamp(1.6rem, 3vw, 3.4rem); } .stack { display: flex; flex-direction: column; gap: var(--gap); } .row { display: flex; align-items: center; gap: var(--gap); } .wrap { flex-wrap: wrap; } .spread { justify-content: space-between; } .center { justify-content: center; } .grow { flex: 1 1 auto; min-width: 0; } .hidden { display: none !important; } /* ===================================================================== HEADER (desktop top bar) ===================================================================== */ .top { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); background: linear-gradient(180deg, rgba(6,6,9,.92), rgba(6,6,9,.55)); border-bottom: 1px solid var(--stroke); transition: background .3s var(--ease); } .top.scrolled { background: rgba(6,6,9,.96); box-shadow: var(--shadow); } .top__bar { height: var(--header-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(.6rem, 2vw, 2rem); width: var(--shell); margin-inline: auto; } /* brand */ .brand { display: flex; align-items: center; gap: clamp(.4rem, 1vw, .7rem); } .brand__logo { width: clamp(34px, 3.4vw, 50px); aspect-ratio: 1; border-radius: 12px; object-fit: contain; filter: drop-shadow(0 0 12px var(--brand-glow)); } .brand__name { font-weight: 800; letter-spacing: .5px; line-height: 1; font-size: clamp(1.05rem, 1.4vw, 1.5rem); background: linear-gradient(120deg, #fff, var(--brand-3)); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand__sub { font-size: var(--fs-xs); color: var(--muted); } /* primary nav */ .nav { display: flex; align-items: center; gap: clamp(.2rem, .8vw, .5rem); justify-content: center; } .nav__link { position: relative; display: inline-flex; align-items: center; gap: .45em; padding: clamp(.4rem, .8vw, .6rem) clamp(.7rem, 1.4vw, 1.1rem); border-radius: 999px; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; transition: color .2s, background .2s, transform .2s; } .nav__link svg { width: 1.15em; height: 1.15em; } .nav__link:hover { color: var(--text); background: rgba(255,255,255,.05); } .nav__link.active { color: #1a1105; font-weight: 700; background: linear-gradient(120deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 20px -6px var(--brand-glow); } .nav__link.ai.active, .nav__link.ai:hover { } .nav__link.ai::after { content: ""; position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 1px rgba(126,60,255,.4); opacity: 0; transition: opacity .2s; } .nav__link.ai:hover::after { opacity: 1; } /* header actions */ .actions { display: flex; align-items: center; gap: clamp(.4rem, 1vw, .7rem); justify-self: end; } .icon-btn { display: grid; place-items: center; width: clamp(38px, 3vw, 46px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--stroke); transition: transform .2s, background .2s, border-color .2s; } .icon-btn svg { width: 1.25em; height: 1.25em; } .icon-btn:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); } .chip-user { display: flex; align-items: center; gap: .5rem; padding: .35rem .35rem .35rem .9rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--stroke); } .chip-user__badge { font-size: var(--fs-xs); color: var(--good); background: rgba(41,209,125,.12); padding: .15em .6em; border-radius: 999px; border: 1px solid rgba(41,209,125,.3); } .chip-user__name { font-size: var(--fs-sm); font-weight: 600; } .avatar { width: clamp(32px, 2.6vw, 40px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #1a1105; background: linear-gradient(135deg, var(--brand), var(--brand-3)); } /* mobile menu toggle (hidden on desktop) */ .burger { display: none; } /* ===================================================================== BUTTONS ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: clamp(.55rem, 1vw, .85rem) clamp(1rem, 2vw, 1.6rem); border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); border: 1px solid var(--stroke); background: rgba(255,255,255,.06); transition: transform .18s var(--ease), box-shadow .2s, background .2s, filter .2s; white-space: nowrap; } .btn svg { width: 1.2em; height: 1.2em; } .btn:hover { transform: translateY(-2px); } .btn--primary { color: #1a1105; border-color: transparent; background: linear-gradient(120deg, var(--brand), var(--brand-2)); box-shadow: 0 10px 30px -10px var(--brand-glow); } .btn--primary:hover { box-shadow: 0 16px 40px -10px var(--brand-glow); filter: brightness(1.05); } .btn--ghost { background: rgba(255,255,255,.05); } .btn--ai { color: #fff; border-color: transparent; background: linear-gradient(120deg, #7e3cff, #b06bff); box-shadow: 0 10px 30px -10px rgba(126,60,255,.6); } /* ===================================================================== SECTION HEADINGS ===================================================================== */ .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1rem, 2vw, 1.6rem); flex-wrap: wrap; } .head__titles h2 { font-size: var(--fs-xl); font-weight: 800; line-height: 1.15; display: flex; align-items: center; gap: .5rem; } .head__titles h2::before { content: ""; width: clamp(6px, .5vw, 9px); height: 1.1em; border-radius: 99px; background: linear-gradient(var(--brand), var(--brand-3)); } .head__titles p { color: var(--muted); font-size: var(--fs-sm); } .head__nav { display: flex; gap: .5rem; } /* ===================================================================== HERO ===================================================================== */ .hero { position: relative; padding-block: clamp(1.5rem, 4vw, 3.5rem); } .hero__stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: clamp(340px, 46vw, 640px); display: grid; align-items: end; border: 1px solid var(--stroke); box-shadow: var(--shadow); isolation: isolate; } .hero__bg { position: absolute; inset: 0; z-index: -2; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; } .hero__stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,6,9,.95) 0%, rgba(6,6,9,.5) 45%, transparent 75%), linear-gradient(0deg, rgba(6,6,9,.98), transparent 55%); } [dir="rtl"] .hero__stage::after { background: linear-gradient(270deg, rgba(6,6,9,.95) 0%, rgba(6,6,9,.5) 45%, transparent 75%), linear-gradient(0deg, rgba(6,6,9,.98), transparent 55%); } .hero__content { padding: clamp(1.2rem, 4vw, 3.2rem); max-width: min(100%, 640px); } .hero__badge { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-xs); padding: .3em .8em; border-radius: 999px; margin-bottom: 1rem; background: rgba(255,122,0,.14); border: 1px solid rgba(255,122,0,.35); color: var(--brand-3); } .hero__title { font-size: var(--fs-2xl); font-weight: 900; line-height: 1.05; letter-spacing: -.5px; } .hero__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; } .hero__desc { color: var(--muted); font-size: var(--fs-md); margin-bottom: 1.4rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hero__cta { display: flex; gap: .7rem; flex-wrap: wrap; } /* hero slider dots */ .hero__dots { position: absolute; bottom: clamp(1rem, 2vw, 1.6rem); inset-inline-end: clamp(1.2rem, 4vw, 3.2rem); display: flex; gap: .5rem; z-index: 2; } .hero__dots button { width: 10px; height: 10px; border-radius: 99px; background: rgba(255,255,255,.3); transition: .3s; } .hero__dots button.on { width: 30px; background: var(--brand); } .pill { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-xs); padding: .3em .75em; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--stroke); color: var(--text); } .pill--star { color: var(--gold); } .pill--good { color: var(--good); border-color: rgba(41,209,125,.3); background: rgba(41,209,125,.1); } /* ===================================================================== MEDIA CARD (film-strip motif) ===================================================================== */ .grid-cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 15vw, 220px), 1fr)); } .rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(150px, 20vw, 230px); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: thin; scrollbar-color: var(--brand) transparent; } .rail::-webkit-scrollbar { height: 8px; } .rail::-webkit-scrollbar-thumb { background: rgba(255,122,0,.5); border-radius: 99px; } .rail > * { scroll-snap-align: start; } .card { position: relative; display: block; border-radius: var(--radius); background: var(--card); border: 1px solid var(--stroke); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; will-change: transform; } .card:hover, .card:focus-visible { transform: translateY(-6px); border-color: rgba(255,122,0,.45); box-shadow: 0 24px 50px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,122,0,.25); } .card__poster { position: relative; aspect-ratio: 2/3; overflow: hidden; } .card__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .card:hover .card__poster img { transform: scale(1.08); } /* perforation strip like the logo film reel */ .card__poster::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 10px; z-index: 2; opacity: .85; background: repeating-linear-gradient(180deg, transparent 0 6px, rgba(0,0,0,.55) 6px 12px); border-inline-end: 1px solid rgba(255,122,0,.25); } .card__rank { position: absolute; top: .5rem; inset-inline-start: .8rem; z-index: 3; font-weight: 900; font-size: clamp(1.3rem, 3vw, 2.2rem); color: rgba(255,255,255,.9); text-shadow: 0 2px 10px rgba(0,0,0,.8); -webkit-text-stroke: 1px rgba(255,122,0,.6); } .card__badge { position: absolute; top: .6rem; inset-inline-end: .6rem; z-index: 3; display: inline-flex; align-items: center; gap: .3em; font-size: var(--fs-xs); font-weight: 700; color: #1a1105; padding: .2em .55em; border-radius: 8px; background: linear-gradient(120deg, var(--brand), var(--brand-2)); box-shadow: 0 4px 12px -4px rgba(0,0,0,.7); } .card__save { position: absolute; bottom: .6rem; inset-inline-start: .6rem; z-index: 3; width: 34px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(6,6,9,.6); border: 1px solid var(--stroke); backdrop-filter: blur(6px); opacity: 0; transform: translateY(6px); transition: .25s var(--ease); } .card:hover .card__save, .card:focus-within .card__save { opacity: 1; transform: none; } .card__save svg { width: 1.1em; } .card__save:hover { background: var(--brand); color: #1a1105; } /* play overlay */ .card__play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: radial-gradient(circle at center, rgba(6,6,9,.35), rgba(6,6,9,.7)); opacity: 0; transition: opacity .3s; } .card:hover .card__play, .card:focus-within .card__play { opacity: 1; } .card__play span { width: clamp(44px, 4vw, 62px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #1a1105; background: linear-gradient(120deg, var(--brand), var(--brand-3)); box-shadow: 0 0 0 8px rgba(255,122,0,.18), 0 10px 30px -8px var(--brand-glow); transform: scale(.7); transition: transform .3s var(--ease); } .card:hover .card__play span { transform: scale(1); } .card__play svg { width: 45%; } .card__body { padding: clamp(.6rem, 1vw, .9rem); } .card__title { font-size: var(--fs-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card__sub { font-size: var(--fs-xs); color: var(--muted-2); direction: ltr; text-align: start; } .card__foot { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; } .card__tag { font-size: var(--fs-xs); color: var(--muted); } .card__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); } .card__rate { color: var(--gold); font-size: var(--fs-xs); font-weight: 700; display: inline-flex; gap: .25em; align-items: center; } .card__dub { font-size: var(--fs-xs); color: var(--good); display: inline-flex; gap: .3em; align-items: center; } /* ===================================================================== SEARCH (advanced) ===================================================================== */ .searchbar { display: flex; gap: .7rem; align-items: stretch; flex-wrap: wrap; } .searchbar__field { flex: 1 1 320px; display: flex; align-items: center; gap: .7rem; padding: clamp(.7rem, 1.4vw, 1.1rem) clamp(1rem, 2vw, 1.5rem); border-radius: 999px; background: var(--card); border: 1px solid var(--stroke); backdrop-filter: blur(10px); } .searchbar__field:focus-within { border-color: rgba(255,122,0,.5); box-shadow: 0 0 0 4px rgba(255,122,0,.12); } .searchbar__field input { flex: 1; background: none; border: 0; color: var(--text); font-size: var(--fs-md); } .searchbar__field input::placeholder { color: var(--muted-2); } .searchbar__field svg { width: 1.4em; color: var(--muted); } .filters { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 22vw, 280px), 1fr)); background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: var(--pad); backdrop-filter: blur(14px); } .field { display: flex; flex-direction: column; gap: .4rem; } .field > label { font-size: var(--fs-xs); color: var(--muted); } .select, .field input[type="number"] { width: 100%; padding: .7rem 1rem; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--stroke); color: var(--text); font-size: var(--fs-sm); } .seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--stroke); } .seg button { padding: .5rem 1.1rem; border-radius: 999px; font-size: var(--fs-sm); color: var(--muted); transition: .2s; } .seg button.on { color: #1a1105; background: linear-gradient(120deg, var(--brand), var(--brand-2)); font-weight: 700; } .toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--stroke); } .toggle span { font-size: var(--fs-sm); } .switch { position: relative; width: 46px; height: 26px; flex: none; } .switch input { opacity: 0; width: 0; height: 0; } .switch i { position: absolute; inset: 0; border-radius: 99px; background: #2a2a38; transition: .25s; } .switch i::before { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; top: 3px; inset-inline-start: 3px; background: #fff; transition: .25s; } .switch input:checked + i { background: linear-gradient(120deg, var(--brand), var(--brand-2)); } .switch input:checked + i::before { transform: translateX(-20px); } [dir="ltr"] .switch input:checked + i::before { transform: translateX(20px); } .range { display: flex; align-items: center; gap: .6rem; } .range input { width: 100%; } /* ===================================================================== AI PAGE ===================================================================== */ .ai-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 40vw, 520px), 1fr)); } .ai-card { background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: var(--pad); backdrop-filter: blur(14px); position: relative; overflow: hidden; } .ai-card::before { content: ""; position: absolute; inset: 0; opacity: .12; z-index: -1; background: radial-gradient(60% 60% at 100% 0%, var(--accent, var(--brand)), transparent 60%); } .ai-card--plot { --accent: #ffcf3f; } .ai-card--reco { --accent: #7e3cff; } .ai-card__tag { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-xs); padding: .3em .8em; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--stroke); margin-bottom: 1rem; } .ai-card h3 { font-size: var(--fs-lg); margin-bottom: .5rem; } .ai-card p.lead { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 1.2rem; } .ai-card textarea { width: 100%; min-height: clamp(90px, 12vh, 140px); resize: vertical; padding: 1rem; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--stroke); color: var(--text); font: inherit; font-size: var(--fs-sm); } .ai-result { margin-top: 1rem; display: grid; gap: .7rem; } /* ===================================================================== APPS PAGE ===================================================================== */ .apps-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 28vw, 340px), 1fr)); } .app-card { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: var(--pad); backdrop-filter: blur(12px); transition: transform .3s var(--ease), border-color .3s; } .app-card:hover { transform: translateY(-6px); border-color: rgba(255,122,0,.4); } .app-card__icon { width: clamp(54px, 5vw, 74px); aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255,122,0,.18), rgba(126,60,255,.18)); border: 1px solid var(--stroke); color: var(--brand-3); } .app-card__icon svg { width: 55%; } .app-card h3 { font-size: var(--fs-lg); } .app-card p { color: var(--muted); font-size: var(--fs-sm); } .app-card small { color: var(--muted-2); font-size: var(--fs-xs); } /* ===================================================================== DETAIL PAGE ===================================================================== */ .detail__hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--stroke); } .detail__backdrop { position: absolute; inset: 0; z-index: -2; } .detail__backdrop img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); } .detail__hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--bg-0) 4%, rgba(6,6,9,.6) 40%, rgba(6,6,9,.5)); } .detail__body { display: grid; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: end; grid-template-columns: minmax(0, 1fr); padding: clamp(1.2rem, 4vw, 3rem); } @media (min-width: 720px) { .detail__body { grid-template-columns: clamp(180px, 20vw, 280px) 1fr; } } .detail__poster { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--stroke-strong); box-shadow: var(--shadow); aspect-ratio: 2/3; } .detail__poster img { width: 100%; height: 100%; object-fit: cover; } .detail__title { font-size: var(--fs-2xl); font-weight: 900; line-height: 1.05; } .detail__orig { color: var(--muted); direction: ltr; text-align: start; } .detail__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; } .detail__desc { color: var(--muted); font-size: var(--fs-md); max-width: 70ch; } .dl-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0; } .dl-tabs button { padding: .6rem 1.1rem; border-radius: 12px; font-size: var(--fs-sm); background: var(--bg-2); border: 1px solid var(--stroke); color: var(--muted); transition: .2s; } .dl-tabs button.on { color: #1a1105; background: linear-gradient(120deg, var(--brand), var(--brand-2)); font-weight: 700; } .dl-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: clamp(.8rem, 1.6vw, 1.1rem); border-radius: 14px; background: var(--card); border: 1px solid var(--stroke); margin-bottom: .7rem; flex-wrap: wrap; } .dl-item__q { font-size: var(--fs-xs); font-weight: 700; color: #1a1105; padding: .2em .6em; border-radius: 8px; background: linear-gradient(120deg, var(--brand), var(--brand-2)); } .dl-item__info { min-width: 0; } .dl-item__info b { font-size: var(--fs-sm); } .dl-item__info small { display: block; color: var(--muted-2); font-size: var(--fs-xs); } .dl-item__actions { display: flex; gap: .5rem; flex-wrap: wrap; } .stats { display: grid; gap: 1rem; max-width: 520px; } .stat__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; } .stat__label { font-size: var(--fs-sm); color: var(--muted); } .bar { height: 8px; border-radius: 99px; background: var(--bg-2); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand-3)); } /* ===================================================================== FOOTER ===================================================================== */ .foot { border-top: 1px solid var(--stroke); margin-top: clamp(2rem, 5vw, 4rem); background: rgba(6,6,9,.6); } .foot__grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 20vw, 240px), 1fr)); padding-block: clamp(1.8rem, 4vw, 3rem); } .foot h4 { font-size: var(--fs-sm); margin-bottom: 1rem; color: var(--text); } .foot a { display: block; color: var(--muted); font-size: var(--fs-sm); padding: .25rem 0; transition: color .2s; } .foot a:hover { color: var(--brand-3); } .foot__bottom { border-top: 1px solid var(--stroke); padding-block: 1.2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; color: var(--muted-2); font-size: var(--fs-xs); } /* ===================================================================== MOBILE BOTTOM NAV + off-canvas drawer ===================================================================== */ .tabbar { display: none; } .drawer { display: none; } .scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s; } .scrim.on { opacity: 1; pointer-events: auto; } /* mode switch floating */ .mode-fab { position: fixed; z-index: 80; inset-block-end: clamp(1rem, 3vw, 2rem); inset-inline-start: clamp(1rem, 3vw, 2rem); display: flex; gap: .3rem; padding: .35rem; border-radius: 999px; background: rgba(12,12,18,.85); border: 1px solid var(--stroke); backdrop-filter: blur(12px); box-shadow: var(--shadow); } .mode-fab button { width: 38px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: .2s; } .mode-fab button svg { width: 1.2em; } .mode-fab button.on { color: #1a1105; background: linear-gradient(120deg, var(--brand), var(--brand-2)); } /* ===================================================================== RESPONSIVE — MOBILE / TABLET ===================================================================== */ @media (max-width: 900px) { .nav { display: none; } .chip-user__name, .chip-user__badge { display: none; } .burger { display: grid; place-items: center; width: clamp(40px, 10vw, 46px); aspect-ratio: 1; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid var(--stroke); } .burger svg { width: 1.4em; } .top__bar { grid-template-columns: auto 1fr auto; } /* bottom tab bar */ .tabbar { display: grid; position: fixed; z-index: 70; inset-inline: 0; inset-block-end: 0; grid-auto-flow: column; grid-auto-columns: 1fr; padding: .4rem clamp(.4rem, 3vw, 1rem) calc(.4rem + env(safe-area-inset-bottom)); background: rgba(8,8,12,.92); backdrop-filter: blur(20px); border-top: 1px solid var(--stroke); } .tabbar a { display: flex; flex-direction: column; align-items: center; gap: .2rem; font-size: clamp(.6rem, 2.6vw, .72rem); color: var(--muted); padding: .4rem 0; border-radius: 12px; transition: color .2s; } .tabbar a svg { width: 1.5em; height: 1.5em; } .tabbar a.active { color: var(--brand-3); } .tabbar a.active svg { filter: drop-shadow(0 0 8px var(--brand-glow)); } body { padding-bottom: clamp(64px, 16vw, 80px); } /* drawer */ /* base (LTR): slides in from the right edge */ .drawer { display: block; position: fixed; z-index: 95; top: 0; right: 0; left: auto; height: 100dvh; width: min(84vw, 340px); background: var(--bg-1); border-left: 1px solid var(--stroke); border-right: 0; transform: translateX(100%); transition: transform .35s var(--ease); padding: var(--pad); overflow-y: auto; } /* RTL: pin to the right, hide by pushing off-screen to the right */ [dir="rtl"] .drawer { right: 0; left: auto; border-right: 1px solid var(--stroke); border-left: 0; transform: translateX(100%); } .drawer.on { transform: translateX(0) !important; } .drawer__link { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 14px; font-size: var(--fs-md); color: var(--muted); } .drawer__link svg { width: 1.4em; } .drawer__link.active { color: var(--text); background: rgba(255,122,0,.12); } .mode-fab { inset-block-end: calc(clamp(64px, 16vw, 80px) + 1rem); } } @media (max-width: 560px) { .head { align-items: center; } .hero__cta .btn { flex: 1 1 auto; } } /* ===================================================================== TV MODE (10-foot UI, remote navigation) ===================================================================== */ [data-mode="tv"] { --fs-sm: clamp(1rem, .7rem + .6vw, 1.3rem); --fs-md: clamp(1.15rem, .8rem + .8vw, 1.6rem); --radius: 20px; } [data-mode="tv"] body { padding-bottom: 0; cursor: none; } [data-mode="tv"] .tabbar, [data-mode="tv"] .burger, [data-mode="tv"] .mode-fab { display: none; } [data-mode="tv"] .nav { display: flex; } [data-mode="tv"] .top { position: sticky; } [data-mode="tv"] .grid-cards { grid-template-columns: repeat(auto-fill, minmax(clamp(190px, 16vw, 260px), 1fr)); } /* focus ring for remote */ [data-mode="tv"] .focusable:focus-visible, [data-mode="tv"] .card:focus, [data-mode="tv"] .nav__link:focus, [data-mode="tv"] .btn:focus { outline: none; transform: scale(1.06); box-shadow: 0 0 0 4px var(--brand), 0 20px 50px -12px rgba(0,0,0,.9); z-index: 5; position: relative; } [data-mode="tv"] .card:focus { transform: translateY(-6px) scale(1.06); } [data-mode="tv"] .rail { scroll-behavior: smooth; } /* Generic focus-visible ring everywhere (keyboard/remote) */ .focusable:focus-visible, .card:focus-visible, .btn:focus-visible, .nav__link:focus-visible, .icon-btn:focus-visible, .tabbar a:focus-visible, .select:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-glow), 0 0 0 1px var(--brand); border-radius: var(--radius); } /* utility text */ .muted { color: var(--muted); } .section-lead { color: var(--muted); font-size: var(--fs-md); max-width: 60ch; } .badge-soft { display:inline-flex; align-items:center; gap:.4em; font-size: var(--fs-xs); padding:.3em .8em; border-radius:999px; background: rgba(255,255,255,.06); border: 1px solid var(--stroke); color: var(--muted); } /* empty state (no data yet) */ .empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: clamp(2rem, 6vw, 4rem) 1rem; color: var(--muted); border: 1px dashed var(--stroke); border-radius: var(--radius-lg); background: var(--card); } .empty-state svg { width: clamp(40px, 6vw, 64px); height: auto; color: var(--brand); opacity: .6; } .empty-state p { font-size: var(--fs-md); color: var(--text); } .empty-state small { font-size: var(--fs-xs); } .empty-state code { background: var(--bg-2); padding: .1em .5em; border-radius: 6px; color: var(--brand-3); direction: ltr; display: inline-block; } /* skeleton shimmer for perceived speed */ .skeleton { position: relative; overflow: hidden; background: var(--bg-2); } .skeleton::after { content:""; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: shimmer 1.4s infinite; } @keyframes shimmer { to { transform: translateX(100%); } } /* ===================================================================== WATCH PROGRESS ON MEDIA CARDS ===================================================================== */ .card__prog { position: absolute; bottom: 0; inset-inline: 0; height: 5px; background: rgba(255, 255, 255, .22); z-index: 4; } .card__prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-3)); box-shadow: 0 0 8px var(--brand-glow); transition: width .3s ease; } .card__prog-badge { position: absolute; bottom: .7rem; inset-inline-end: .7rem; z-index: 3; font-size: var(--fs-xs); padding: .2em .6em; border-radius: 6px; background: rgba(6, 6, 9, .85); border: 1px solid var(--stroke); color: var(--text); backdrop-filter: blur(4px); display: flex; align-items: center; gap: .3em; } /* ===================================================================== IN-BROWSER VIDEO PLAYER MODAL ===================================================================== */ .player-modal { position: fixed; inset: 0; z-index: 150; background: rgba(4, 4, 8, .93); backdrop-filter: blur(18px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(.5rem, 2vw, 1.5rem); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .player-modal.on { opacity: 1; pointer-events: auto; } .player-modal__box { width: min(96vw, 1120px); background: var(--bg-1); border: 1px solid var(--stroke-strong); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 122, 0, .2); display: flex; flex-direction: column; } .player-modal__header { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.2rem; background: rgba(20, 20, 30, .85); border-bottom: 1px solid var(--stroke); gap: 1rem; } .player-modal__title { font-size: var(--fs-md); font-weight: 700; display: flex; align-items: center; gap: .6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .player-modal__video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; display: flex; align-items: center; justify-content: center; } .player-modal__video-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; } .player-modal__footer { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.2rem; background: rgba(15, 15, 24, .9); border-top: 1px solid var(--stroke); flex-wrap: wrap; gap: .8rem; } .player-modal__resume-notice { font-size: var(--fs-xs); color: var(--brand-3); display: flex; align-items: center; gap: .4rem; } /* ===================================================================== AUTH & PROFILE UI ===================================================================== */ .auth-tabs { display: flex; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--stroke); padding: 4px; max-width: 360px; margin: 0 auto 1.6rem auto; } .auth-tabs button { flex: 1; padding: .65rem 1.2rem; border-radius: 999px; font-size: var(--fs-sm); color: var(--muted); transition: .2s; font-weight: 600; cursor: pointer; } .auth-tabs button.on { color: #1a1105; background: linear-gradient(120deg, var(--brand), var(--brand-2)); font-weight: 700; box-shadow: 0 4px 15px -4px var(--brand-glow); } .auth-box { max-width: 480px; margin: 0 auto 2rem auto; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3.5vw, 2.4rem); backdrop-filter: blur(14px); } .input-control { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; } .input-control label { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; } .input-field { width: 100%; padding: .8rem 1rem; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--stroke); color: var(--text); font: inherit; font-size: var(--fs-sm); transition: border-color .2s, box-shadow .2s; box-sizing: border-box; } .input-field:focus { outline: none; border-color: rgba(255, 122, 0, .5); box-shadow: 0 0 0 3px rgba(255, 122, 0, .15); } .alert-box { padding: .8rem 1.1rem; border-radius: 12px; font-size: var(--fs-xs); margin-bottom: 1.2rem; display: none; line-height: 1.5; } .alert-box.on { display: block; } .alert-box--error { background: rgba(240, 68, 82, .12); border: 1px solid rgba(240, 68, 82, .3); color: #ff6b77; } .alert-box--success { background: rgba(41, 209, 125, .12); border: 1px solid rgba(41, 209, 125, .3); color: var(--good); }