/* ========================================================================== DjamgaMind — Netflix-style UI (netflix_v1.css) Loaded AFTER ai_bedtime_stories_v5.css. Overrides layout & chrome only. Scoped to so other index_*.html pages are untouched. ========================================================================== */ .nx { --nx-bg: #0a0a0c; --nx-bg-elev: #16161c; --nx-bg-elev-2: #1f1f27; --nx-line: rgba(255,255,255,.10); --nx-line-strong: rgba(255,255,255,.22); --nx-text: #f5f5f7; --nx-text-2: #b3b3b8; --nx-text-3: #7d7d85; --nx-accent: #ff9800; --nx-accent-2: #ffb547; --nx-hot: #e50914; --nx-fav: #ff4d6d; --nx-nav-h: calc(64px + env(safe-area-inset-top, 0px)); --nx-chip-h: 50px; --nx-dock-h: 76px; --nx-tab-h: calc(58px + env(safe-area-inset-bottom, 0px)); --nx-gutter: clamp(16px, 3.6vw, 60px); --nx-radius: 10px; --nx-radius-lg: 18px; --nx-ease: cubic-bezier(.2, .7, .3, 1); --nx-shadow: 0 18px 48px rgba(0,0,0,.62); } /* ------------------------------- Reset / base ---------------------------- */ .nx, .nx body { background: var(--nx-bg); } .nx { margin: 0; color: var(--nx-text); font-family: var(--font-main, 'Nunito', system-ui, sans-serif); -webkit-font-smoothing: antialiased; } /* Horizontal clipping belongs on , not the root. Setting overflow-x on turns it into a scroll container (computed "hidden auto"), which changes scroll semantics and breaks sticky/scroll behaviour in some engines. */ .nx body { overflow-x: hidden; } .nx.nx-locked { overflow: hidden; } .nx *:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 3px; border-radius: 4px; } /* Kill the legacy blurred backdrop + legacy container chrome */ .nx .background-container { display: none !important; } .nx .app-container { display: block; max-width: none; width: 100%; margin: 0; padding: 0; gap: 0; min-height: 100dvh; } .nx .main-stage { display: block; max-width: none; margin: 0; gap: 0; } /* ============================== 1. TOP NAV =============================== */ .nx .top-bar { display: none !important; } /* legacy header retired */ .nx-nav { position: fixed; inset: 0 0 auto 0; z-index: 900; height: var(--nx-nav-h); display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); padding: env(safe-area-inset-top, 0px) var(--nx-gutter) 0; background: linear-gradient(180deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 55%, transparent 100%); transition: background .3s var(--nx-ease); } .nx-nav.is-stuck { background: rgba(10,10,12,.985); border-bottom: 1px solid var(--nx-line); } .nx-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex-shrink: 0; } .nx-brand img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 4px 14px rgba(255,152,0,.3); } .nx-brand b { font-size: 1.06rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; background: linear-gradient(92deg, #fff 20%, var(--nx-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .nx-brand small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--nx-text-3); } /* primary links */ .nx-nav-links { display: flex; align-items: center; gap: 20px; margin-inline-start: 8px; flex: 1 1 auto; min-width: 0; } .nx-nav-links a, .nx-nav-links button { background: none; border: 0; padding: 4px 0; font: inherit; font-size: .92rem; font-weight: 600; color: var(--nx-text-2); cursor: pointer; white-space: nowrap; position: relative; transition: color .2s var(--nx-ease); } .nx-nav-links a:hover, .nx-nav-links button:hover { color: #fff; } .nx-nav-links .is-active { color: #fff; } .nx-nav-links .is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--nx-accent); } /* right cluster */ .nx-nav-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex-shrink: 0; } .nx-icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--nx-text); cursor: pointer; transition: background .2s var(--nx-ease), transform .2s var(--nx-ease), color .2s var(--nx-ease); } .nx-icon-btn:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); } .nx-icon-btn .material-icons { font-size: 23px; } .nx-icon-btn.is-donate { color: var(--nx-fav); } .nx-badges { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255,193,7,.42); background: rgba(255,193,7,.13); color: #ffc93c; font-weight: 800; font-size: .84rem; cursor: pointer; transition: transform .35s var(--nx-ease), box-shadow .35s var(--nx-ease); } .nx-badges .material-icons { font-size: 17px; } .nx-badges.celebrate { transform: scale(1.22) rotate(-4deg); box-shadow: 0 0 26px rgba(255,201,60,.75); } /* Language picker. Deliberately a labelled control rather than a bare icon: this app carries 15 languages and language is a primary browsing filter, so it has to read as a filter in the header — not as a preference hidden behind the avatar. */ .nx-lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--nx-line-strong); background: rgba(255,255,255,.06); color: var(--nx-text); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .2s var(--nx-ease), border-color .2s var(--nx-ease), color .2s var(--nx-ease); } .nx-lang-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.36); } .nx-lang-btn .material-icons { font-size: 18px; color: var(--nx-accent); } .nx-lang-btn[aria-expanded="true"] { background: rgba(255,152,0,.16); border-color: var(--nx-accent); } /* Highlight when a specific language is active, so the current filter is obvious at a glance rather than needing the menu opened. */ .nx-lang-btn.is-filtered { background: rgba(255,152,0,.18); border-color: rgba(255,152,0,.55); color: var(--nx-accent-2); } .nx-lang-code { letter-spacing: .04em; } .nx-menu.is-lang { right: var(--nx-gutter); min-width: 220px; } .nx-avatar { width: 34px; height: 34px; border-radius: 8px; border: 0; cursor: pointer; display: grid; place-items: center; color: #12121a; font-weight: 900; background: linear-gradient(135deg, var(--nx-accent-2), var(--nx-accent)); transition: transform .2s var(--nx-ease), box-shadow .2s var(--nx-ease); } .nx-avatar:hover { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(255,152,0,.28); } /* dropdown menus (categories + account) */ .nx-menu { position: absolute; top: calc(var(--nx-nav-h) - 6px); min-width: 240px; max-height: min(70vh, 560px); overflow-y: auto; padding: 8px; border-radius: 14px; border: 1px solid var(--nx-line); background: rgba(18,18,22,.985); box-shadow: var(--nx-shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s var(--nx-ease), transform .2s var(--nx-ease), visibility .2s; z-index: 950; overscroll-behavior: contain; } .nx-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .nx-menu.is-right { right: var(--nx-gutter); } .nx-menu.is-cats { left: 50%; transform: translate(-50%, -8px); width: min(760px, calc(100vw - 2 * var(--nx-gutter))); } .nx-menu.is-cats.is-open { transform: translate(-50%, 0); } .nx-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px; } .nx-menu a, .nx-menu button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; border: 0; border-radius: 9px; background: transparent; color: var(--nx-text-2); font: inherit; font-size: .9rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background .16s var(--nx-ease), color .16s var(--nx-ease); } .nx-menu a:hover, .nx-menu button:hover { background: rgba(255,255,255,.09); color: #fff; } .nx-menu .material-icons { font-size: 19px; color: var(--nx-accent); } .nx-menu hr { border: 0; border-top: 1px solid var(--nx-line); margin: 7px 6px; } .nx-menu-label { padding: 8px 13px 4px; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-text-3); } /* ------------------------------ Search overlay --------------------------- */ .nx-search { position: fixed; inset: 0; z-index: 980; display: flex; flex-direction: column; padding: 0 var(--nx-gutter); background: rgba(8,8,10,.985); opacity: 0; visibility: hidden; transition: opacity .26s var(--nx-ease), visibility .26s; } /* backdrop-filter only while open. A hidden full-viewport blur still forces the compositor to filter the whole screen on every scroll frame. */ .nx-search.is-open { opacity: 1; visibility: visible; } .nx-search-bar { display: flex; align-items: center; gap: 12px; height: 84px; flex-shrink: 0; border-bottom: 1px solid var(--nx-line); } .nx-search-bar > .material-icons { color: var(--nx-text-3); font-size: 26px; } .nx-search input { flex: 1 1 auto; min-width: 0; height: 52px; border: 0; background: transparent; color: #fff; font: inherit; font-size: clamp(1.1rem, 3vw, 1.7rem); font-weight: 700; } .nx-search input::placeholder { color: var(--nx-text-3); } .nx-search input:focus { outline: none; } .nx-search-body { flex: 1 1 auto; overflow-y: auto; padding: 22px 0 40px; overscroll-behavior: contain; } .nx-search-section + .nx-search-section { margin-top: 30px; } .nx-search-section h4 { margin: 0 0 14px; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--nx-text-3); } .nx-chips { display: flex; flex-wrap: wrap; gap: 9px; } .nx-chip { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--nx-line-strong); background: rgba(255,255,255,.05); color: var(--nx-text-2); font: inherit; font-size: .85rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .18s var(--nx-ease), color .18s var(--nx-ease), border-color .18s var(--nx-ease), transform .18s var(--nx-ease); } .nx-chip:hover { background: rgba(255,255,255,.14); color: #fff; transform: translateY(-1px); } .nx-chip.is-active { background: var(--nx-accent); border-color: var(--nx-accent); color: #16110a; } .nx-search-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; } .nx-empty { padding: 60px 0; text-align: center; color: var(--nx-text-3); font-size: 1rem; } .nx-empty .material-icons { display: block; font-size: 46px; margin-bottom: 12px; opacity: .5; } /* ========================= 2. HERO / BILLBOARD =========================== */ .nx-hero { position: relative; height: clamp(440px, 78vh, 820px); margin-bottom: 0; display: flex; align-items: flex-end; isolation: isolate; contain: layout paint; } .nx-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #000; } .nx-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--nx-ease), transform 9s linear; } .nx-hero-media img.is-shown { opacity: 1; transform: scale(1.13); } .nx-hero::before, .nx-hero::after { content: ''; position: absolute; z-index: -1; pointer-events: none; } .nx-hero::before { inset: 0; background: linear-gradient(90deg, rgba(10,10,12,.96) 0%, rgba(10,10,12,.72) 34%, rgba(10,10,12,.12) 66%, transparent 100%), linear-gradient(0deg, var(--nx-bg) 2%, rgba(10,10,12,.45) 26%, transparent 62%); } .nx-hero::after { inset: auto 0 0 0; height: 22vh; background: linear-gradient(0deg, var(--nx-bg) 6%, transparent 100%); } .nx-hero-inner { position: relative; width: min(640px, 92%); padding: 0 var(--nx-gutter) clamp(90px, 14vh, 170px); } .nx-hero-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--nx-accent-2); } .nx-hero-kicker .material-icons { font-size: 18px; } .nx-hero h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 5.6vw, 4.1rem); font-weight: 800; line-height: 1.03; letter-spacing: -.03em; text-shadow: 0 4px 30px rgba(0,0,0,.7); } .nx-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; font-size: .85rem; font-weight: 700; color: var(--nx-text-2); } .nx-hero-meta .nx-tag { padding: 3px 9px; border-radius: 5px; border: 1px solid var(--nx-line-strong); font-size: .74rem; letter-spacing: .04em; } .nx-hero-meta .nx-tag.is-hot { border-color: transparent; background: var(--nx-hot); color: #fff; } .nx-hero p { margin: 0 0 26px; max-width: 54ch; font-size: clamp(.94rem, 1.35vw, 1.1rem); line-height: 1.55; color: #e2e2e6; text-shadow: 0 2px 16px rgba(0,0,0,.75); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nx-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; } .nx-btn { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 26px; border: 0; border-radius: 8px; font: inherit; font-size: 1rem; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .18s var(--nx-ease), background .18s var(--nx-ease), box-shadow .18s var(--nx-ease); } .nx-btn:hover { transform: translateY(-2px); } .nx-btn .material-icons { font-size: 24px; } .nx-btn-play { background: #fff; color: #101014; box-shadow: 0 8px 24px rgba(0,0,0,.42); } .nx-btn-play:hover { background: #e9e9ee; box-shadow: 0 12px 32px rgba(0,0,0,.55); } .nx-btn-ghost { background: rgba(109,109,120,.62); color: #fff; backdrop-filter: blur(6px); } .nx-btn-ghost:hover { background: rgba(129,129,140,.78); } .nx-hero-dots { position: absolute; right: var(--nx-gutter); bottom: clamp(96px, 15vh, 180px); display: flex; gap: 7px; } .nx-hero-dots button { width: 26px; height: 3px; padding: 0; border: 0; border-radius: 3px; background: rgba(255,255,255,.32); cursor: pointer; transition: background .25s var(--nx-ease), width .25s var(--nx-ease); } .nx-hero-dots button.is-active { background: var(--nx-accent); width: 38px; } /* ============================ 3. CATEGORY RAIL =========================== */ .nx-rail { position: sticky; top: var(--nx-nav-h); z-index: 820; display: flex; align-items: center; gap: 8px; height: var(--nx-chip-h); padding: 0 var(--nx-gutter); overflow-x: auto; scrollbar-width: none; background: linear-gradient(180deg, rgba(10,10,12,.99), rgba(12,12,15,.97)); /* No backdrop-filter: this bar is sticky and on screen for the whole scroll, so a live blur re-filters the viewport every frame. */ border-bottom: 1px solid transparent; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; opacity: 0; transition: opacity .3s var(--nx-ease), border-color .3s var(--nx-ease); } .nx-rail::-webkit-scrollbar { display: none; } .nx-rail.is-ready { opacity: 1; } .nx-rail.is-stuck { border-bottom-color: var(--nx-line); } .nx-rail .nx-chip { flex: 0 0 auto; height: 32px; font-size: .8rem; scroll-snap-align: center; } /* ============================== 4. ROWS ================================== */ .nx .netflix-rows { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(22px, 3.4vw, 46px); width: 100%; margin: 0 0 clamp(60px, 10vh, 120px); padding-top: clamp(14px, 3vw, 30px); } .nx .carousel-row { position: relative; scroll-margin-top: calc(var(--nx-nav-h) + var(--nx-chip-h) + 14px); } /* NOTE: `content-visibility: auto` was tried here and removed. Because each row's real height differs from any intrinsic-size estimate, rows entering the viewport resized the page, which changed what was visible, which re-triggered layout — a feedback loop that froze the renderer on scroll. */ .nx .carousel-row.is-empty { display: none; } .nx .carousel-row h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; padding: 0 var(--nx-gutter); font-size: clamp(1.02rem, 1.6vw, 1.42rem); font-weight: 800; letter-spacing: -.015em; color: #f0f0f3; text-shadow: none; } .nx .carousel-row h2 .material-icons { font-size: 1.15em; color: var(--nx-accent); } .nx .carousel-row h2 .nx-row-more { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; font-weight: 700; color: var(--nx-text-3); opacity: 0; transform: translateX(-8px); transition: opacity .22s var(--nx-ease), transform .22s var(--nx-ease), color .22s var(--nx-ease); } .nx .carousel-row:hover h2 .nx-row-more { opacity: 1; transform: translateX(0); } .nx .carousel-row h2 .nx-row-more .material-icons { font-size: 15px; color: inherit; } /* --- scroller --- */ .nx .carousel-container { display: flex; gap: clamp(6px, .7vw, 11px); width: 100%; max-width: none; padding: 10px var(--nx-gutter) 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: none; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-padding-inline: var(--nx-gutter); } .nx .carousel-container::-webkit-scrollbar { display: none; } .nx .carousel-container.is-dragging { scroll-behavior: auto; cursor: grabbing; } .nx .carousel-container.is-dragging .story-card { pointer-events: none; } /* --- card --- */ .nx .story-card { position: relative; flex: 0 0 auto; width: clamp(148px, 15.6vw, 268px); aspect-ratio: 16 / 9; border-radius: var(--nx-radius); overflow: hidden; background: var(--nx-bg-elev); border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.45); backdrop-filter: none; -webkit-backdrop-filter: none; cursor: pointer; scroll-snap-align: none; transform-origin: center center; transition: transform .3s var(--nx-ease), box-shadow .3s var(--nx-ease), z-index 0s .3s; contain: layout paint; -webkit-tap-highlight-color: transparent; } /* NOTE: deliberately no `will-change` here. A library this size renders 500+ cards, and promoting every one to its own compositor layer locks the tab. */ .nx .carousel-container > .story-card:first-child { transform-origin: left center; } .nx .carousel-container > .story-card:last-child { transform-origin: right center; } .nx .story-card img { width: 100%; height: 100%; object-fit: cover; display: block; background: linear-gradient(120deg, #1c1c24, #26262f); transition: transform .5s var(--nx-ease), filter .3s var(--nx-ease); } /* gradient scrim + title (always visible, Netflix-mobile style) */ .nx .story-card h3 { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; padding: 26px 11px 9px; font-size: clamp(.72rem, .82vw, .85rem); font-weight: 700; line-height: 1.25; text-align: left; color: #fff; white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; background: linear-gradient(0deg, rgba(0,0,0,.92) 8%, rgba(0,0,0,.55) 52%, transparent 100%); text-shadow: 0 1px 4px rgba(0,0,0,.8); transition: opacity .2s var(--nx-ease); } /* hover preview (desktop pointers only) */ @media (hover: hover) and (pointer: fine) { .nx .story-card:hover { transform: scale(1.14); z-index: 40; box-shadow: var(--nx-shadow); transition: transform .3s var(--nx-ease) .14s, box-shadow .3s var(--nx-ease) .14s; } .nx .story-card:hover img { transform: scale(1.04); } .nx .story-card:hover .nx-card-actions { opacity: 1; transform: translateY(0); } .nx .story-card:hover h3 { padding-bottom: 40px; } } .nx-card-actions { position: absolute; left: 9px; bottom: 9px; z-index: 4; display: flex; gap: 6px; opacity: 0; transform: translateY(6px); transition: opacity .22s var(--nx-ease) .16s, transform .22s var(--nx-ease) .16s; } .nx-card-actions button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: rgba(22,22,26,.86); color: #fff; cursor: pointer; transition: transform .16s var(--nx-ease), background .16s var(--nx-ease), border-color .16s var(--nx-ease); } .nx-card-actions button:hover { transform: scale(1.14); background: #fff; color: #101014; border-color: #fff; } .nx-card-actions .material-icons { font-size: 16px; } .nx-card-actions .is-play { background: #fff; color: #101014; border-color: #fff; } /* favourite button (legacy class, restyled) */ .nx .fav-btn { position: absolute; top: 7px; right: 7px; z-index: 5; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(10,10,14,.72); color: #fff; cursor: pointer; opacity: 0; transform: scale(.82); transition: opacity .2s var(--nx-ease), transform .2s var(--nx-ease), background .2s var(--nx-ease); } .nx .story-card:hover .fav-btn, .nx .fav-btn.favorited { opacity: 1; transform: scale(1); } .nx .fav-btn:hover { background: rgba(0,0,0,.9); transform: scale(1.12); } .nx .fav-btn.favorited { color: var(--nx-fav); } .nx .fav-btn .material-icons { font-size: 17px; } @media (hover: none) { .nx .fav-btn { opacity: 1; transform: scale(1); } } /* now-playing state */ .nx .story-card.active { transform: none; box-shadow: 0 0 0 2px var(--nx-accent), 0 10px 30px rgba(255,152,0,.28); border: 0; } .nx .story-card.active::after { content: 'NOW PLAYING'; position: absolute; top: 7px; left: 7px; z-index: 5; padding: 3px 7px; border-radius: 4px; background: var(--nx-accent); color: #16110a; font-size: .56rem; font-weight: 900; letter-spacing: .1em; } /* rank numerals for Top-10 rows */ .nx .carousel-row.is-top10 .carousel-container { gap: clamp(4px, .5vw, 8px); } /* Paint containment would clip the oversized rank numeral drawn in ::before, so these cards opt down to layout containment only. The left margin reserves dedicated space for the numeral — without it each numeral renders on top of the preceding card. */ .nx .carousel-row.is-top10 .story-card { overflow: visible; contain: layout; margin-left: clamp(42px, 4.8vw, 84px); } .nx .carousel-row.is-top10 .story-card > img { border-radius: var(--nx-radius); } .nx .carousel-row.is-top10 .story-card::before { content: attr(data-rank); position: absolute; left: -8px; bottom: -.1em; z-index: 1; transform: translateX(-100%); font-size: clamp(3.2rem, 5.6vw, 6.4rem); font-weight: 900; line-height: .78; color: #0a0a0c; -webkit-text-stroke: 3px rgba(255,255,255,.42); pointer-events: none; } /* --- row arrows --- */ .nx .carousel-nav-btn { position: absolute; top: 10px; bottom: 24px; width: calc(var(--nx-gutter) + 14px); height: auto; transform: none !important; display: flex; align-items: center; justify-content: center; z-index: 45; border: 0; border-radius: 0; color: #fff; cursor: pointer; opacity: 0; transition: opacity .22s var(--nx-ease), background .22s var(--nx-ease); } .nx .carousel-nav-btn.left { left: 0; background: linear-gradient(90deg, rgba(10,10,12,.94), rgba(10,10,12,.55) 62%, transparent); } .nx .carousel-nav-btn.right { right: 0; left: auto !important; background: linear-gradient(270deg, rgba(10,10,12,.94), rgba(10,10,12,.55) 62%, transparent); } .nx .carousel-nav-btn .material-icons { font-size: 34px; transition: transform .22s var(--nx-ease); } .nx .carousel-row:hover .carousel-nav-btn:not([hidden]) { opacity: 1; } .nx .carousel-nav-btn:hover .material-icons { transform: scale(1.28); } .nx .carousel-nav-btn[hidden] { display: none !important; } @media (hover: none), (max-width: 860px) { .nx .carousel-nav-btn { display: none !important; } } /* --- skeleton loading --- */ .nx-skeleton { flex: 0 0 auto; width: clamp(148px, 15.6vw, 268px); aspect-ratio: 16 / 9; border-radius: var(--nx-radius); background: linear-gradient(100deg, #16161c 30%, #23232c 50%, #16161c 70%); background-size: 260% 100%; animation: nx-shimmer 1.5s var(--nx-ease) infinite; } @keyframes nx-shimmer { to { background-position: -160% 0; } } @media (prefers-reduced-motion: reduce) { .nx *, .nx *::before, .nx *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================= 5. PLAYER OVERLAY ============================= */ .nx-player { position: fixed; inset: 0; z-index: 960; display: flex; align-items: flex-start; justify-content: center; padding: clamp(0px, 4vh, 44px) 0; background: rgba(4,4,6,.96); opacity: 0; visibility: hidden; transition: opacity .3s var(--nx-ease), visibility .3s; overscroll-behavior: contain; } /* No backdrop-filter here: the page behind can be 8000px of image-heavy rows, and blurring it live costs more than it's worth when it's fully covered. */ .nx-player.is-open { opacity: 1; visibility: visible; } .nx-player-shell { position: relative; width: min(1120px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; border-radius: clamp(0px, 2vw, 16px); background: #101015; box-shadow: 0 30px 90px rgba(0,0,0,.8); transform: scale(.96) translateY(18px); opacity: 0; transition: transform .34s var(--nx-ease), opacity .34s var(--nx-ease); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; } .nx-player.is-open .nx-player-shell { transform: none; opacity: 1; } .nx-player-shell::-webkit-scrollbar { width: 9px; } .nx-player-shell::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 9px; } .nx-player-close { position: absolute; top: 16px; right: 16px; z-index: 20; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(10,10,14,.82); color: #fff; cursor: pointer; transition: background .2s var(--nx-ease), transform .2s var(--nx-ease); } .nx-player-close:hover { background: #000; transform: rotate(90deg); } /* legacy player nodes re-skinned inside the overlay */ .nx .main-content-split { display: block; min-height: 0; gap: 0; width: 100%; } .nx .main-content-split > * { flex: none; } .nx .image-viewer { position: relative; top: 0; width: 100%; height: clamp(210px, 42vh, 460px); border-radius: clamp(0px, 2vw, 16px) clamp(0px, 2vw, 16px) 0 0; overflow: hidden; align-self: auto; background: #000; } .nx .image-viewer::after { content: ''; position: absolute; inset: auto 0 -1px 0; height: 46%; background: linear-gradient(0deg, #101015 4%, transparent 100%); pointer-events: none; } .nx .image-viewer img { width: 100%; height: 100%; object-fit: cover; } .nx .floating-back-btn { display: none !important; } .nx .transcript-panel { position: relative; margin-top: -60px; padding: 0 clamp(18px, 4vw, 46px) 40px; max-height: none; height: auto; overflow: visible; background: transparent; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .nx .story-header-row { display: block; margin: 0 0 16px; } .nx #back-to-carousels-btn { display: none !important; } .nx #story-title { margin: 0; font-size: clamp(1.35rem, 3.2vw, 2.35rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; text-shadow: 0 3px 20px rgba(0,0,0,.7); } .nx .story-text { max-height: none; overflow: visible; font-size: clamp(.98rem, 1.25vw, 1.1rem); line-height: 1.78; color: #d6d6dc; } .nx .story-sentence.highlighted { background: rgba(255,152,0,.2); border-radius: 4px; box-shadow: 0 0 0 3px rgba(255,152,0,.2); color: #fff; } .nx .quiz-container { margin-top: 28px; border-radius: 14px; border: 1px solid var(--nx-line); background: var(--nx-bg-elev); padding: clamp(16px, 3vw, 26px); } .nx .cta-panel { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--nx-line); } .nx .cta-panel h3 { font-size: 1.05rem; color: var(--nx-text-2); } .nx .cta-links { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; } .nx .cta-btn { font-size: .82rem; padding: 9px 14px; border-radius: 8px; } /* ===================== 6. AUDIO DOCK / MINI PLAYER ======================= */ .nx .audio-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 970; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(10px, 2vw, 28px); height: var(--nx-dock-h); padding: 0 var(--nx-gutter); background: rgba(14,14,18,.985); border-top: 1px solid var(--nx-line); border-radius: 0; box-shadow: 0 -10px 34px rgba(0,0,0,.5); /* Hidden state must not rely on translateY alone: on mobile the dock is raised above the tab bar, so 110% of its own height doesn't clear the offset and a strip stays on screen. opacity + visibility guarantee it. */ transform: translateY(110%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .34s var(--nx-ease), opacity .24s var(--nx-ease), visibility .34s var(--nx-ease), bottom .34s var(--nx-ease); } .nx .audio-dock.is-visible { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); } /* now-playing label lives in column 1 */ .nx-dock-meta { display: flex; align-items: center; gap: 11px; min-width: 0; cursor: pointer; } .nx-dock-meta img { width: 46px; height: 46px; border-radius: 7px; object-fit: cover; flex-shrink: 0; background: #1c1c24; } .nx-dock-meta div { min-width: 0; } .nx-dock-meta strong { display: block; font-size: .88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nx-dock-meta span { display: block; font-size: .72rem; color: var(--nx-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nx .audio-dock .controls { grid-column: 2; display: flex; align-items: center; gap: clamp(4px, 1vw, 12px); } .nx .btn-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--nx-text-2); cursor: pointer; transition: color .18s var(--nx-ease), background .18s var(--nx-ease), transform .18s var(--nx-ease); } .nx .btn-icon:hover { color: #fff; background: rgba(255,255,255,.1); transform: none; } .nx .btn-icon .material-icons { font-size: 24px; } .nx .btn-icon.play-btn { width: 52px; height: 52px; background: #fff; color: #101014; box-shadow: 0 4px 18px rgba(0,0,0,.4); } .nx .btn-icon.play-btn:hover { background: #e6e6ec; transform: scale(1.06); } .nx .btn-icon.play-btn .material-icons { font-size: 30px; } .nx .btn-icon.record-btn.recording { color: var(--nx-hot); } .nx .btn-icon.toggle-voice-btn.active { color: var(--nx-accent); } .nx .audio-dock .progress-container { grid-column: 3; display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .72rem; font-variant-numeric: tabular-nums; color: var(--nx-text-3); } .nx .audio-dock .progress-bar { flex: 1 1 auto; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); cursor: pointer; } .nx .audio-dock .progress-bar:hover { height: 7px; } .nx .audio-dock .progress-fill { height: 100%; border-radius: 4px; background: var(--nx-accent); } .nx .bg-music-controls { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 7px; } .nx .bg-volume-slider { width: 74px; accent-color: var(--nx-accent); } /* compact form when the overlay is closed but audio continues */ .nx .audio-dock.is-mini { grid-template-columns: minmax(0,1fr) auto; height: 64px; } .nx .audio-dock.is-mini .progress-container, .nx .audio-dock.is-mini .bg-music-controls, .nx .audio-dock.is-mini #wind-down-btn, .nx .audio-dock.is-mini #record-btn, .nx .audio-dock.is-mini #toggle-voice-btn { display: none; } .nx .audio-dock.is-mini .controls { grid-column: 2; } .nx .audio-dock.is-mini .btn-icon.play-btn { width: 44px; height: 44px; } /* ========================= 7. MOBILE TAB BAR ============================= */ .nx-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 940; display: none; height: var(--nx-tab-h); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(10,10,13,.99); border-top: 1px solid var(--nx-line); } .nx-tabbar button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--nx-text-3); font: inherit; font-size: .63rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .18s var(--nx-ease); } .nx-tabbar button .material-icons { font-size: 23px; } .nx-tabbar button.is-active { color: #fff; } .nx-tabbar button.is-active .material-icons { color: var(--nx-accent); } /* ============================== 8. FOOTER =============================== */ .nx-footer { padding: 46px var(--nx-gutter) calc(40px + var(--nx-tab-h)); border-top: 1px solid var(--nx-line); color: var(--nx-text-3); font-size: .84rem; } .nx-footer-links { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-bottom: 22px; } .nx-footer a { color: var(--nx-text-3); text-decoration: none; } .nx-footer a:hover { color: #fff; text-decoration: underline; } /* ====================== 9. MODALS (re-skin legacy) ====================== */ .nx .modal { position: fixed; inset: 0; z-index: 990; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(4,4,6,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow-y: auto; overscroll-behavior: contain; } /* Some legacy scripts toggle .show, others set inline display:block. Both must resolve to the same centred flex layout. */ .nx .modal.show, .nx .modal[style*="display: block"], .nx .modal[style*="display:block"] { display: flex !important; } .nx .modal[style*="display: none"], .nx .modal[style*="display:none"] { display: none !important; } .nx .auth-modal-content, .nx .stats-modal-content, .nx .paywall-content, .nx .constellation-content, .nx .breathing-content { margin: auto; border-radius: 18px; border: 1px solid var(--nx-line); background: linear-gradient(168deg, #1b1b23, #101015); box-shadow: var(--nx-shadow); } .nx .stats-modal-content { padding: clamp(22px, 4vw, 40px); } .nx .stats-header h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); } .nx .stats-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; } .nx .stat-card { padding: 20px; border-radius: 14px; } .nx .stat-card .material-icons { font-size: 36px; margin-bottom: 10px; } .nx .stat-card p { font-size: 1.9em; } .nx .close-modal { background: rgba(255,255,255,.08); border: 0; border-radius: 50%; width: 38px; height: 38px; color: #fff; cursor: pointer; transition: background .2s var(--nx-ease), transform .2s var(--nx-ease); } .nx .close-modal:hover { background: rgba(255,255,255,.2); transform: rotate(90deg); } /* ======================= 10. RESPONSIVE BREAKPOINTS ===================== */ /* ---- tablet ---- */ @media (max-width: 1024px) { .nx { --nx-nav-h: calc(60px + max(env(safe-area-inset-top, 0px), 30px)); } .nx-nav-links a[data-nav="favorites"], .nx-nav-links a[data-nav="new"] { display: none; } .nx .story-card { width: clamp(150px, 24vw, 220px); } .nx-skeleton { width: clamp(150px, 24vw, 220px); } } /* ---- phone ---- */ @media (max-width: 768px) { .nx { --nx-nav-h: calc(56px + max(env(safe-area-inset-top, 0px), 48px)); --nx-dock-h: 66px; } .nx-nav { padding: max(env(safe-area-inset-top, 0px), 48px) 12px 0; gap: 6px; } .nx-nav-links { display: none; } .nx-brand b { font-size: .95rem; } .nx-brand small { display: none; } /* Trim the action cluster so it can't overflow the screen edge (which was pushing the reload button and avatar off on phones). Stats stays reachable via the account menu / Profile tab; donate via each story's CTA panel. */ .nx-nav-actions .nx-badges, .nx-nav-actions .nx-icon-btn.is-stats, .nx-nav-actions .nx-icon-btn.is-donate { display: none; } /* Keep the language control, drop to just the code to save width. */ .nx-lang-btn { padding: 0 10px; gap: 4px; } .nx-lang-btn .material-icons { display: none; } .nx-lang-code { font-size: .8rem; } .nx-menu.is-lang { right: 12px; left: auto; min-width: 200px; max-width: calc(100vw - 24px); } .nx-menu.is-right { right: 12px; left: 12px; min-width: 0; } .nx-menu.is-cats { left: 12px; right: 12px; width: auto; transform: translateY(-8px); } .nx-menu.is-cats.is-open { transform: translateY(0); } .nx-menu-grid { grid-template-columns: 1fr; } .nx-hero { height: clamp(400px, 66vh, 560px); margin-bottom: 0; align-items: flex-end; } .nx-hero-media img { object-position: center 26%; } .nx-hero::before { background: linear-gradient(0deg, var(--nx-bg) 6%, rgba(10,10,12,.72) 34%, rgba(10,10,12,.18) 68%, transparent 100%), linear-gradient(90deg, rgba(10,10,12,.5), transparent 70%); } .nx-hero-inner { width: 100%; padding: 0 16px clamp(56px, 9vh, 88px); text-align: center; } .nx-hero h2 { font-size: clamp(1.7rem, 8vw, 2.5rem); } .nx-hero-meta { justify-content: center; } .nx-hero p { -webkit-line-clamp: 3; font-size: .92rem; margin-inline: auto; } .nx-hero-btns { justify-content: center; } .nx-btn { height: 46px; padding: 0 20px; font-size: .94rem; flex: 1 1 auto; justify-content: center; max-width: 220px; } .nx-hero-dots { left: 0; right: 0; bottom: 22px; justify-content: center; } .nx-rail { top: var(--nx-nav-h); height: 46px; padding-inline: 12px; } .nx .netflix-rows { gap: 20px; margin-bottom: calc(var(--nx-tab-h) + 28px); } .nx .carousel-row h2 { font-size: 1rem; padding-inline: 16px; } .nx .carousel-row h2 .nx-row-more { display: none; } .nx .carousel-container { padding: 8px 16px 14px; gap: 8px; scroll-padding-inline: 16px; } .nx .story-card { width: 42vw; max-width: 230px; } .nx-skeleton { width: 42vw; max-width: 230px; } .nx .carousel-row.is-top10 .story-card { margin-left: 40px; } .nx .carousel-row.is-top10 .story-card::before { font-size: 3rem; -webkit-text-stroke-width: 2px; } .nx-tabbar { display: flex; } .nx-player { padding: max(env(safe-area-inset-top, 0px), 48px) 0 0 0; } .nx-player-shell { border-radius: 12px 12px 0 0; width: 100%; height: 100%; max-height: 100%; } .nx .image-viewer { height: 38vh; min-height: 200px; border-radius: 0; } .nx .transcript-panel { margin-top: -48px; padding: 0 18px calc(var(--nx-dock-h) + 40px); } .nx .cta-links { justify-content: flex-start; } .nx .cta-btn { font-size: .76rem; padding: 8px 12px; } /* Mobile dock: stacked so EVERY control stays reachable. Row 1 = now-playing · Row 2 = transport + record/voice/wind-down · Row 3 = background music. Progress is the hairline across the top. (An earlier version hid record / voice / background-music here — they are core features and must not disappear on phones.) */ .nx .audio-dock { display: flex; flex-direction: column; align-items: center; gap: 6px; height: auto; padding: 12px 12px; bottom: var(--nx-tab-h); border-radius: 0; } .nx .audio-dock.is-player-open { bottom: 0; } .nx-dock-meta { max-width: 100%; } .nx-dock-meta span { display: none; } .nx-dock-meta img { width: 30px; height: 30px; } .nx .audio-dock .controls { justify-content: center; gap: 8px; flex-wrap: wrap; } .nx .audio-dock .bg-music-controls { justify-content: center; } /* undo the desktop-grid hides so all controls render again */ .nx .audio-dock .bg-music-controls, .nx .audio-dock #wind-down-btn, .nx .audio-dock #record-btn, .nx .audio-dock #toggle-voice-btn { display: flex; } .nx .audio-dock .progress-container { position: absolute; left: 0; right: 0; top: -3px; gap: 0; padding: 0; } .nx .audio-dock .progress-container span { display: none; } .nx .audio-dock .progress-bar { height: 3px; border-radius: 0; } .nx .btn-icon { width: 38px; height: 38px; } .nx .btn-icon.play-btn { width: 46px; height: 46px; } .nx .btn-icon.play-btn .material-icons { font-size: 26px; } /* Collapsed mini-dock (player closed, audio still going) stays minimal: a single row with the title + transport only. */ .nx .audio-dock.is-mini { flex-direction: row; } .nx-search { padding-inline: 16px; } .nx-search-bar { height: 68px; } .nx-search-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .nx-footer { padding-inline: 16px; } .nx-footer-links { gap: 8px 20px; font-size: .8rem; } } /* ---- small phone ---- */ @media (max-width: 400px) { .nx .story-card { width: 47vw; } .nx-skeleton { width: 47vw; } .nx-brand b { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-nav-actions .nx-icon-btn.is-donate { display: none; } } /* ---- landscape phone: shrink hero so rows are reachable ---- */ @media (max-height: 520px) and (orientation: landscape) { .nx-hero { height: 100vh; } .nx-hero-inner { padding-bottom: 40px; } .nx-hero h2 { font-size: 1.7rem; } .nx-hero p { display: none; } } /* ---- wide desktop ---- */ @media (min-width: 1800px) { .nx .story-card { width: 280px; } .nx-skeleton { width: 280px; } } /* ========================================================================== Notifications: soft-prompt banner + header bell ========================================================================== */ .nx-notify-bell.is-on .material-icons { color: var(--nx-accent); } .nx-notify-bell.is-on::after { content: ''; position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--nx-accent); box-shadow: 0 0 0 2px rgba(10,10,12,.9); } .nx-icon-btn.nx-notify-bell { position: relative; } .nx-notify-banner { position: fixed; z-index: 985; right: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px); width: min(360px, calc(100vw - 24px)); padding: 18px 18px 16px; border-radius: 16px; border: 1px solid var(--nx-line); background: linear-gradient(168deg, #1c1c24, #101015); box-shadow: var(--nx-shadow); color: var(--nx-text); opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none; transition: opacity .3s var(--nx-ease), transform .3s var(--nx-ease); } .nx-notify-banner.is-open { opacity: 1; transform: none; pointer-events: auto; } .nx-notify-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--nx-text-2); font-size: 18px; line-height: 1; cursor: pointer; transition: background .2s var(--nx-ease), color .2s var(--nx-ease); } .nx-notify-x:hover { background: rgba(255,255,255,.18); color: #fff; } .nx-notify-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; } .nx-notify-head .material-icons { color: var(--nx-accent); font-size: 22px; } .nx-notify-head strong { font-size: 1.02rem; font-weight: 800; } .nx-notify-banner p { margin: 0 0 14px; font-size: .88rem; line-height: 1.45; color: var(--nx-text-2); } .nx-notify-actions { display: flex; flex-wrap: wrap; gap: 8px; } .nx-notify-actions button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 15px; border-radius: 9px; border: 0; font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; transition: transform .18s var(--nx-ease), background .18s var(--nx-ease); } .nx-notify-actions button:hover { transform: translateY(-1px); } .nx-notify-actions .material-icons { font-size: 18px; } .nx-notify-allow { background: linear-gradient(135deg, var(--nx-accent-2), var(--nx-accent)); color: #16110a; } .nx-notify-email-toggle { background: rgba(255,255,255,.08); color: var(--nx-text); } .nx-notify-email-toggle:hover { background: rgba(255,255,255,.16); } /* [hidden] must win: an author class beats the UA [hidden] rule otherwise. */ .nx-notify-email[hidden] { display: none; } .nx-notify-email { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; } .nx-notify-email input[type="email"] { height: 40px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--nx-line-strong); background: rgba(255,255,255,.05); color: #fff; font: inherit; font-size: .9rem; } .nx-notify-email input[type="email"]:focus { outline: none; border-color: var(--nx-accent); } .nx-notify-email button[type="submit"] { width: 44px; border: 0; border-radius: 9px; background: var(--nx-accent); color: #16110a; cursor: pointer; display: grid; place-items: center; } .nx-notify-consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 7px; font-size: .74rem; line-height: 1.4; color: var(--nx-text-3); cursor: pointer; } .nx-notify-consent input { margin-top: 2px; accent-color: var(--nx-accent); flex-shrink: 0; } @media (max-width: 768px) { .nx-notify-banner { right: 10px; left: 10px; bottom: calc(var(--nx-tab-h) + 10px); width: auto; } }