/* ========================================================================== 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; /* ROOT CAUSE of the header overlap: this was flex-shrink:0 while .nx-nav-actions is also flex-shrink:0. With neither side able to give way, a wordmark that outgrew the space (as "DjamgaMind" -> "DjamgaMind Kids" did) pushed straight through the controls instead of adapting. The brand now yields and truncates; the controls stay tappable. */ flex: 0 1 auto; min-width: 0; overflow: hidden; } .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; overflow: hidden; text-overflow: ellipsis; 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; /* The page uses viewport-fit=cover, so a fixed inset:0 overlay starts underneath the status bar. Without this top inset the search field sat behind the iPhone clock and Dynamic Island. The nav (.nx-nav) and the player (.nx-player) already do this; the search overlay was missed. */ padding: env(safe-area-inset-top, 0px) var(--nx-gutter) 0; 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; /* Bottom inset keeps the last row of results clear of the home indicator. */ padding: 22px 0 calc(40px + env(safe-area-inset-bottom, 0px)); 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; } /* Animated shimmer shows while a heavy artwork PNG streams in, so a card that is still loading reads as "loading" rather than empty. The image sits on top (object-fit: cover) and hides the shimmer the moment it paints. */ .nx .story-card:not(.nx-loaded) { background: linear-gradient(100deg, #1b1b22 30%, #2a2a34 50%, #1b1b22 70%); background-size: 220% 100%; animation: nx-shimmer 1.3s ease-in-out infinite; } @keyframes nx-shimmer { to { background-position: -220% 0; } } @media (prefers-reduced-motion: reduce) { .nx .story-card:not(.nx-loaded) { animation: none; } } .nx .story-card img { width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; 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)); } /* Search overlay needs the same status-bar clearance as the nav. */ .nx-search { padding-top: 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-search { padding-top: max(env(safe-area-inset-top, 0px), 48px); } /* Search moves to the bottom tab bar on phones (.nx-tabbar becomes visible at this same breakpoint), so the header icon was a duplicate that only crowded the DjamgaMind wordmark. Hidden rather than removed: the "/" keyboard shortcut and any script holding a reference still work, and it reappears on wider screens where the tab bar is gone. */ .nx-nav-actions [data-nx-action="search"] { display: none; } /* The header carried EIGHT controls on a phone: search, language, stats, bell, badges, donate, refresh and account. Measured at 393px they need 369px on their own, leaving nothing for the wordmark - which is why "DjamgaMind Kids" collided with the language button. Kept: language (content-changing), stats, notifications, account. Removed, each with a better home elsewhere: badges -> "Badges Earned" card in the stats dashboard donate -> already in the story panel CTA and the footer refresh -> the browser's own pull-to-refresh does this */ .nx-nav-actions .nx-badges, .nx-nav-actions .is-donate { display: none; } /* Refresh stays. It was removed in the header trim on the assumption that pull-to-refresh covers it — but inside the installed app and the iOS wrapper there is no pull-to-refresh and no address bar, so this button is the only way to reload. Measured at 393px the header still clears by 26px with it present. */ /* The subtitle is what actually set the brand's width (137px, wider than the wordmark itself) and it is redundant once the name says "Kids". */ .nx-brand small { display: none; } /* The translate icon carries the meaning; the menu shows the current language when opened. */ .nx-lang-code { display: none; } .nx-nav-links { display: none; } .nx-brand b { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; } .nx-brand small { display: none; } /* Let the brand yield space (truncating its text) so the action icons can never overflow off the screen edge — that overflow is what was hiding the reload button and the badge counter before. Actions themselves don't shrink. */ .nx-brand { flex-shrink: 1; min-width: 0; } .nx-nav-actions { flex-shrink: 0; } /* Keep the badge counter visible on phones — kids track it. Only stats and donate leave the header (stats is in the account menu, donate in each story's CTA). Badge pill is compacted to fit. */ .nx-nav-actions .nx-icon-btn.is-stats, .nx-nav-actions .nx-icon-btn.is-donate { display: none; } .nx-badges { height: 32px; padding: 0 9px; font-size: .8rem; gap: 4px; } .nx-badges .material-icons { font-size: 15px; } /* 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; } /* Nightly story-time reminder (native iOS app only — see notifications.js). */ .nx-reminder-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-bottom: 12px; } .nx-reminder-row .nx-reminder-time { height: 40px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--nx-line-strong); background: rgba(255,255,255,.05); color: #fff; font: inherit; font-size: .95rem; font-variant-numeric: tabular-nums; } .nx-reminder-row .nx-reminder-time:focus { outline: none; border-color: var(--nx-accent); } .nx-reminder-row button { height: 40px; padding: 0 14px; border: 0; border-radius: 9px; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .nx-reminder-row .nx-reminder-save { background: linear-gradient(135deg, var(--nx-accent-2), var(--nx-accent)); color: #16110a; } .nx-reminder-row .nx-reminder-off { background: rgba(255,255,255,.08); color: var(--nx-text-2); } .nx-reminder-row .nx-reminder-off:hover { background: rgba(255,255,255,.16); color: var(--nx-text); } .nx-reminder-row .nx-reminder-off[hidden] { display: none; } @media (max-width: 768px) { .nx-notify-banner { right: 10px; left: 10px; bottom: calc(var(--nx-tab-h) + 10px); width: auto; } } /* ========================================================================== Home-page star banner — proud, kid-facing badge display ========================================================================== */ .nx-star-banner { display: flex; align-items: center; gap: 16px; margin: 4px var(--nx-gutter) 8px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255,193,7,.35); background: radial-gradient(120% 160% at 0% 0%, rgba(255,183,71,.22), transparent 60%), linear-gradient(135deg, rgba(40,32,12,.92), rgba(22,22,28,.92)); cursor: pointer; color: var(--nx-text); box-shadow: 0 6px 22px rgba(0,0,0,.35); transition: transform .2s var(--nx-ease), box-shadow .2s var(--nx-ease), border-color .2s var(--nx-ease); -webkit-tap-highlight-color: transparent; } .nx-star-banner:hover { transform: translateY(-2px); border-color: rgba(255,193,7,.6); box-shadow: 0 12px 30px rgba(255,152,0,.22); } .nx-star-banner.celebrate { animation: nx-star-pop .6s var(--nx-ease); } @keyframes nx-star-pop { 0% { transform: scale(1); } 40% { transform: scale(1.03); box-shadow: 0 0 34px rgba(255,201,60,.6); } 100% { transform: scale(1); } } .nx-star-orb { position: relative; flex-shrink: 0; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd977, #ff9800 70%); box-shadow: 0 4px 16px rgba(255,152,0,.5), inset 0 0 0 2px rgba(255,255,255,.25); } .nx-star-emoji { position: absolute; top: -6px; right: -6px; font-size: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); } .nx-star-count { font-size: 1.7rem; font-weight: 900; color: #16110a; line-height: 1; } .nx-star-body { flex: 1 1 auto; min-width: 0; } .nx-star-title { display: block; font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; } .nx-star-track { height: 8px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; margin-bottom: 7px; } .nx-star-fill { height: 100%; width: 0%; border-radius: 6px; background: linear-gradient(90deg, #ffb547, #ff9800); transition: width .5s var(--nx-ease); } .nx-star-sub { font-size: .84rem; color: var(--nx-text-2); } .nx-star-chev { color: var(--nx-text-3); flex-shrink: 0; } /* Before the first star, keep it inviting rather than progress-y. */ .nx-star-banner.is-empty .nx-star-track { display: none; } .nx-star-banner.is-empty .nx-star-orb { background: radial-gradient(circle at 35% 30%, #3a3a44, #22222a 70%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); } .nx-star-banner.is-empty .nx-star-count { color: var(--nx-text-3); } @media (max-width: 768px) { .nx-star-banner { margin: 2px 12px 6px; padding: 13px 14px; gap: 12px; border-radius: 15px; } .nx-star-orb { width: 50px; height: 50px; } .nx-star-count { font-size: 1.4rem; } .nx-star-title { font-size: .98rem; } .nx-star-sub { font-size: .8rem; } } @media (prefers-reduced-motion: reduce) { .nx-star-banner.celebrate { animation: none; } } /* ========================================================================== Gamification — bedtime streak + story passport (gamification.js) ========================================================================== */ /* ---- streak banner ---- */ .dm-streak { display: flex; align-items: center; gap: 13px; margin: 0 var(--nx-gutter) 10px; padding: 12px 16px; border-radius: 15px; border: 1px solid rgba(255,255,255,.10); background: linear-gradient(135deg, rgba(30,30,38,.95), rgba(20,20,26,.95)); color: var(--nx-text); } .dm-streak.is-lit { border-color: rgba(255,138,60,.42); background: radial-gradient(120% 160% at 0% 0%, rgba(255,120,40,.22), transparent 60%), linear-gradient(135deg, rgba(40,26,16,.95), rgba(20,20,26,.95)); } .dm-streak-flame { font-size: 1.9rem; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 2px 5px rgba(255,120,40,.4)); } .dm-streak.is-lit .dm-streak-flame { animation: dm-flicker 1.8s ease-in-out infinite; } @keyframes dm-flicker { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.12) rotate(2deg); } } .dm-streak-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .dm-streak-text b { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; } .dm-streak-text small { font-size: .82rem; color: var(--nx-text-2); } .dm-streak-best { flex-shrink: 0; font-size: .78rem; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: rgba(255,183,71,.16); color: var(--nx-accent-2); border: 1px solid rgba(255,183,71,.3); } .dm-streak.dm-pop { animation: nx-star-pop .6s var(--nx-ease); } /* ---- passport strip ---- */ .dm-passport { margin-top: 4px; } .dm-passport > h2 { display: flex; align-items: center; gap: 10px; 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; } .dm-pass-progress { font-size: .8rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--nx-text-2); } .dm-pass-all { margin-left: auto; font: inherit; font-size: .82rem; font-weight: 700; color: var(--nx-accent-2); background: none; border: 0; cursor: pointer; padding: 4px 6px; } .dm-pass-all:hover { text-decoration: underline; } .dm-pass-strip { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 4px var(--nx-gutter) 12px; scroll-snap-type: x proximity; } .dm-pass-strip::-webkit-scrollbar { display: none; } .dm-stamp { flex: 0 0 auto; width: 104px; height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: relative; border-radius: var(--nx-radius-lg); border: 1.5px dashed rgba(255,255,255,.16); background: rgba(255,255,255,.03); color: var(--nx-text-2); cursor: pointer; scroll-snap-align: start; transition: transform .2s var(--nx-ease), border-color .2s var(--nx-ease), background .2s var(--nx-ease); -webkit-tap-highlight-color: transparent; } .dm-stamp:hover { transform: translateY(-3px); } .dm-stamp-emoji { font-size: 2.3rem; line-height: 1; filter: grayscale(1) opacity(.45); transition: filter .3s var(--nx-ease); } .dm-stamp-name { font-size: .8rem; font-weight: 700; text-align: center; padding: 0 6px; } .dm-stamp-lock { font-size: 16px !important; color: var(--nx-text-3); } .dm-stamp-count { position: absolute; top: 8px; right: 8px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; font-size: .72rem; font-weight: 900; background: var(--nx-accent); color: #16110a; } .dm-stamp.is-got { border-style: solid; border-color: rgba(255,183,71,.5); background: radial-gradient(120% 120% at 50% 0%, rgba(255,152,0,.16), transparent 65%), rgba(255,255,255,.05); color: var(--nx-text); } .dm-stamp.is-got .dm-stamp-emoji { filter: none; } /* ---- passport modal ---- */ body.dm-modal-open { overflow: hidden; } .dm-modal-back { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); animation: dm-fade .2s var(--nx-ease); } @keyframes dm-fade { from { opacity: 0; } to { opacity: 1; } } .dm-modal { position: relative; width: min(680px, 100%); max-height: 88vh; overflow-y: auto; padding: 26px 22px 22px; border-radius: var(--nx-radius-lg); border: 1px solid var(--nx-line-strong); background: linear-gradient(160deg, #1c1c24, #141419); box-shadow: var(--nx-shadow); } .dm-modal-x { position: absolute; top: 14px; right: 14px; border: 0; background: rgba(255,255,255,.08); color: var(--nx-text); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; } .dm-modal-x:hover { background: rgba(255,255,255,.16); } .dm-modal h3 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 800; } .dm-modal-stats { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 18px; color: var(--nx-text-2); font-size: .9rem; } .dm-modal-stats b { color: var(--nx-accent-2); font-size: 1.05rem; } .dm-modal-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .dm-modal-grid .dm-stamp { width: 100%; height: 116px; cursor: default; } .dm-modal-grid .dm-stamp:hover { transform: none; } .dm-modal-tip { margin: 16px 0 0; font-size: .82rem; color: var(--nx-text-3); text-align: center; } @media (max-width: 768px) { .dm-streak { margin: 0 12px 8px; padding: 11px 13px; } .dm-streak-flame { font-size: 1.6rem; } .dm-streak-text b { font-size: .96rem; } .dm-stamp { width: 92px; height: 108px; } .dm-stamp-emoji { font-size: 2rem; } } @media (prefers-reduced-motion: reduce) { .dm-streak.is-lit .dm-streak-flame { animation: none; } .dm-streak.dm-pop { animation: none; } } /* ========================================================================== Submit a Story — in-app modal (submit_story.js) ========================================================================== */ body.ss-open { overflow: hidden; } .ss-modal-back { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); animation: dm-fade .2s var(--nx-ease); } .ss-modal-back[hidden] { display: none; } .ss-modal { position: relative; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; padding: 26px 24px 22px; border-radius: var(--nx-radius-lg); border: 1px solid var(--nx-line-strong); background: linear-gradient(160deg, #1c1c24, #141419); box-shadow: var(--nx-shadow); } .ss-x { position: absolute; top: 14px; right: 14px; border: 0; background: rgba(255,255,255,.08); color: var(--nx-text); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; } .ss-x:hover { background: rgba(255,255,255,.16); } .ss-modal h3 { margin: 0 6px 6px 0; font-size: 1.35rem; font-weight: 800; } .ss-sub { margin: 0 0 18px; color: var(--nx-text-2); font-size: .92rem; line-height: 1.5; } .ss-form label { display: block; margin-bottom: 14px; font-size: .82rem; font-weight: 700; color: var(--nx-text-2); } .ss-req { color: var(--nx-accent-2); } .ss-opt { color: var(--nx-text-3); font-weight: 600; } .ss-form input, .ss-form textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; font: inherit; font-size: .95rem; font-weight: 500; color: var(--nx-text); background: rgba(255,255,255,.05); border: 1px solid var(--nx-line); border-radius: 10px; box-sizing: border-box; transition: border-color .18s var(--nx-ease), background .18s var(--nx-ease); } .ss-form textarea { resize: vertical; min-height: 84px; } .ss-form input::placeholder, .ss-form textarea::placeholder { color: var(--nx-text-3); } .ss-form input:focus, .ss-form textarea:focus { outline: none; border-color: var(--nx-accent); background: rgba(255,255,255,.08); } .ss-row { display: flex; gap: 14px; } .ss-row label { flex: 1 1 0; min-width: 0; } .ss-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; } .ss-cancel, .ss-submit { font: inherit; font-weight: 800; font-size: .92rem; padding: 11px 20px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; transition: transform .15s var(--nx-ease), background .15s var(--nx-ease), opacity .15s var(--nx-ease); } .ss-cancel { background: rgba(255,255,255,.07); border-color: var(--nx-line); color: var(--nx-text); } .ss-cancel:hover { background: rgba(255,255,255,.13); } .ss-submit { background: linear-gradient(135deg, var(--nx-accent-2), var(--nx-accent)); color: #101014; } .ss-submit:hover { transform: translateY(-1px); } .ss-submit:disabled { opacity: .6; cursor: default; transform: none; } @media (max-width: 768px) { .ss-modal { padding: 22px 18px 18px; } .ss-row { flex-direction: column; gap: 0; } } /* ========================================================================== Star in Your Own Story — personalized generation (personalize_story.js) ========================================================================== */ /* ---- home entry CTA ---- */ .ps-cta { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; margin: 6px var(--nx-gutter) 14px; padding: 16px 18px; border-radius: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; border: 1px solid rgba(157,120,255,.4); background: radial-gradient(130% 180% at 100% 0%, rgba(157,120,255,.28), transparent 55%), radial-gradient(130% 180% at 0% 100%, rgba(255,152,0,.22), transparent 55%), linear-gradient(135deg, #201b34, #15131d); transition: transform .2s var(--nx-ease), box-shadow .2s var(--nx-ease), border-color .2s var(--nx-ease); } .ps-cta:hover { transform: translateY(-2px); border-color: rgba(157,120,255,.7); box-shadow: 0 14px 34px rgba(120,80,220,.28); } .ps-cta-glow { position: absolute; inset: -40% -10% auto auto; width: 240px; height: 240px; background: radial-gradient(circle, rgba(157,120,255,.35), transparent 60%); filter: blur(10px); pointer-events: none; animation: ps-float 6s ease-in-out infinite; } @keyframes ps-float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-14px, 12px); } } .ps-cta-emoji { font-size: 2rem; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(157,120,255,.5)); z-index: 1; } .ps-cta-body { flex: 1 1 auto; min-width: 0; z-index: 1; display: flex; flex-direction: column; } .ps-cta-body strong { font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em; } .ps-cta-body span { font-size: .86rem; color: var(--nx-text-2); } .ps-cta-btn { z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .9rem; color: #16110a; padding: 10px 16px; border-radius: 999px; background: linear-gradient(135deg, #c9abff, #9d78ff); box-shadow: 0 6px 18px rgba(120,80,220,.4); } .ps-cta-btn .material-icons { font-size: 18px; } /* ---- shared modal shell ---- */ body.ps-open { overflow: hidden; } .ps-back { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.74); backdrop-filter: blur(5px); animation: dm-fade .2s var(--nx-ease); } .ps-modal { position: relative; width: min(620px, 100%); max-height: 90vh; overflow-y: auto; padding: 26px 24px 22px; border-radius: var(--nx-radius-lg); border: 1px solid rgba(157,120,255,.3); background: linear-gradient(165deg, #1d1a29, #131119); box-shadow: var(--nx-shadow); } .ps-x { position: absolute; top: 14px; right: 14px; z-index: 3; border: 0; background: rgba(255,255,255,.08); color: var(--nx-text); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; } .ps-x:hover { background: rgba(255,255,255,.16); } .ps-badge { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; background: rgba(157,120,255,.18); color: #c9abff; border: 1px solid rgba(157,120,255,.35); } /* ---- form ---- */ .ps-head h3 { margin: 0 0 6px; font-size: 1.4rem; font-weight: 800; } .ps-head p { margin: 0 0 18px; color: var(--nx-text-2); font-size: .92rem; line-height: 1.5; } .ps-form label { display: block; margin-bottom: 14px; font-size: .82rem; font-weight: 700; color: var(--nx-text-2); } .ps-req { color: #c9abff; } .ps-grid { display: flex; gap: 14px; } .ps-grid label { flex: 1 1 0; min-width: 0; } .ps-form input, .ps-form select { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; font: inherit; font-size: .95rem; font-weight: 500; color: var(--nx-text); background: rgba(255,255,255,.05); border: 1px solid var(--nx-line); border-radius: 10px; box-sizing: border-box; transition: border-color .18s var(--nx-ease), background .18s var(--nx-ease); } .ps-form input::placeholder { color: var(--nx-text-3); } .ps-form input:focus, .ps-form select:focus { outline: none; border-color: #9d78ff; background: rgba(255,255,255,.08); } .ps-go { width: 100%; margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-weight: 800; font-size: 1rem; color: #16110a; cursor: pointer; padding: 13px 20px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #c9abff, #9d78ff); box-shadow: 0 8px 22px rgba(120,80,220,.4); transition: transform .15s var(--nx-ease); } .ps-go:hover { transform: translateY(-1px); } .ps-go .material-icons { font-size: 19px; } /* ---- loading ---- */ .ps-loading { text-align: center; padding: 22px 6px 12px; } .ps-loading h3 { margin: 6px 0 8px; font-size: 1.25rem; font-weight: 800; } .ps-loading p { margin: 0 0 22px; color: var(--nx-text-2); font-size: .9rem; } .ps-stars { font-size: 2.2rem; display: flex; justify-content: center; gap: 14px; } .ps-stars span { display: inline-block; animation: ps-twinkle 1.4s ease-in-out infinite; } .ps-stars span:nth-child(2) { animation-delay: .25s; } .ps-stars span:nth-child(3) { animation-delay: .5s; } @keyframes ps-twinkle { 0%,100% { transform: translateY(0) scale(1); opacity: .8; } 50% { transform: translateY(-8px) scale(1.15); opacity: 1; } } .ps-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; } .ps-bar i { display: block; height: 100%; width: 40%; border-radius: 6px; background: linear-gradient(90deg, #c9abff, #9d78ff); animation: ps-slide 1.3s var(--nx-ease) infinite; } @keyframes ps-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } /* ---- passwordless PIN sign-in ---- */ .dm-auth-modal { width: min(440px, 100%); } .dm-auth-form label { display: block; margin-bottom: 14px; font-size: .82rem; font-weight: 700; color: var(--nx-text-2); } .dm-auth-form label b { color: var(--nx-text); } .dm-auth-form input { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: inherit; font-size: 1rem; font-weight: 600; color: var(--nx-text); background: rgba(255,255,255,.05); border: 1px solid var(--nx-line); border-radius: 10px; box-sizing: border-box; transition: border-color .18s var(--nx-ease), background .18s var(--nx-ease); } .dm-code-form input[name="pin"] { letter-spacing: .4em; text-align: center; font-size: 1.4rem; font-weight: 800; } .dm-auth-form input::placeholder { color: var(--nx-text-3); letter-spacing: normal; } .dm-auth-form input:focus { outline: none; border-color: #9d78ff; background: rgba(255,255,255,.08); } .dm-auth-resend { display: block; margin: 12px auto 0; padding: 6px 10px; font: inherit; font-size: .84rem; font-weight: 700; color: var(--nx-accent-2); background: none; border: 0; cursor: pointer; } .dm-auth-resend:hover { text-decoration: underline; } /* ---- "Stories You Created" rail ---- */ .ps-rail { margin: 4px 0 8px; } .ps-rail > h2 { display: flex; align-items: center; gap: 8px; 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; } .ps-rail-strip { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 4px var(--nx-gutter) 12px; scroll-snap-type: x proximity; } .ps-rail-strip::-webkit-scrollbar { display: none; } .ps-rail-card { scroll-snap-align: start; border: 1px solid rgba(157,120,255,.35); } .ps-rail-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.4rem; background: radial-gradient(120% 120% at 50% 0%, rgba(157,120,255,.25), transparent 65%), #201b34; } .ps-rail-voice { position: absolute; top: 8px; left: 8px; z-index: 3; font-size: 18px !important; color: #16110a; background: linear-gradient(135deg, #c9abff, #9d78ff); border-radius: 50%; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.4); } /* ---- error ---- */ .ps-error { text-align: center; padding: 16px 6px 8px; } .ps-error-emoji { font-size: 2.6rem; margin-bottom: 6px; } .ps-error h3 { margin: 4px 0 8px; font-size: 1.2rem; font-weight: 800; } .ps-error p { margin: 0 0 20px; color: var(--nx-text-2); font-size: .92rem; } .ps-error .ps-story-actions { justify-content: center; } /* ---- reader ---- */ .ps-story-hero { height: 168px; margin: -26px -24px 16px; border-radius: 0; background-size: cover; background-position: center top; position: relative; } .ps-story-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, #16131f); } .ps-story-top { margin-bottom: 16px; } .ps-story-top h2 { margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; } .ps-story-body { max-height: 52vh; overflow-y: auto; padding-right: 6px; } .ps-story-body p { margin: 0 0 15px; font-size: 1.04rem; line-height: 1.7; color: #eceaf2; } .ps-story-body p:first-child::first-letter { font-size: 2.6em; font-weight: 800; float: left; line-height: .8; padding: 4px 10px 0 0; color: #c9abff; } .ps-story-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .ps-read, .ps-again { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; padding: 11px 18px; border-radius: 999px; border: 1px solid transparent; transition: transform .15s var(--nx-ease), background .15s var(--nx-ease); } .ps-read { background: linear-gradient(135deg, #c9abff, #9d78ff); color: #16110a; } .ps-again { background: rgba(255,255,255,.07); border-color: var(--nx-line); color: var(--nx-text); } .ps-read:hover, .ps-again:hover { transform: translateY(-1px); } .ps-read .material-icons, .ps-again .material-icons { font-size: 18px; } @media (max-width: 768px) { .ps-cta { margin: 4px 12px 12px; padding: 13px 14px; gap: 12px; } .ps-cta-body span { display: none; } .ps-modal { padding: 22px 18px 18px; } .ps-grid { flex-direction: column; gap: 0; } .ps-story-top h2 { font-size: 1.35rem; } } @media (prefers-reduced-motion: reduce) { .ps-cta-glow, .ps-stars span, .ps-bar i { animation: none; } } /* ========================================================================== ✨ WHAT'S NEW The first row under the billboard. Freshly published stories land here automatically (live Firestore listener) and wear a NEW ribbon for two weeks, so a returning child can always see what changed since last night. ========================================================================== */ /* Row heading gets a soft aurora sweep to separate it from the rows below. */ .nx .carousel-row.is-whats-new > h2 { background: linear-gradient(96deg, #fff 12%, var(--nx-accent-2) 55%, #7fd1ff 96%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* The icon sits outside the gradient text so it keeps its own colour. */ .nx .carousel-row.is-whats-new > h2 .material-icons { -webkit-text-fill-color: var(--nx-accent-2); color: var(--nx-accent-2); } .nx .carousel-row.is-whats-new > h2 .nx-row-more { -webkit-text-fill-color: var(--nx-text-2); color: var(--nx-text-2); } /* --- NEW ribbon ------------------------------------------------------- */ .nx .story-card .nx-new-ribbon { position: absolute; top: 8px; left: 8px; z-index: 3; padding: 3px 8px; border-radius: 999px; font-size: clamp(9px, 1vw, 11px); font-weight: 800; letter-spacing: .09em; line-height: 1; color: #1a1206; background: linear-gradient(135deg, var(--nx-accent-2), var(--nx-accent)); box-shadow: 0 2px 8px rgba(255,152,0,.45), 0 0 0 1px rgba(255,255,255,.28) inset; pointer-events: none; text-shadow: none; } /* A slow breathing glow — noticeable on a dark bedtime screen without being the kind of hard flash that keeps a child awake. */ @keyframes nxNewPulse { 0%, 100% { box-shadow: 0 2px 8px rgba(255,152,0,.40), 0 0 0 1px rgba(255,255,255,.28) inset; } 50% { box-shadow: 0 2px 16px rgba(255,181,71,.85), 0 0 0 1px rgba(255,255,255,.42) inset; } } .nx .story-card.is-new .nx-new-ribbon { animation: nxNewPulse 3.4s ease-in-out infinite; } /* --- arrival flourish -------------------------------------------------- */ /* Applied for ~2.6s when the live listener folds in a brand-new story, so the row visibly acknowledges the change instead of silently mutating. */ @keyframes nxRowRefreshed { 0% { box-shadow: 0 0 0 0 rgba(255,181,71,.00); } 18% { box-shadow: 0 0 0 3px rgba(255,181,71,.38); } 100% { box-shadow: 0 0 0 0 rgba(255,181,71,.00); } } .nx .carousel-row.nx-row-refreshed { border-radius: var(--nx-radius-lg); animation: nxRowRefreshed 2.6s var(--nx-ease) 1; } @media (prefers-reduced-motion: reduce) { .nx .story-card.is-new .nx-new-ribbon, .nx .carousel-row.nx-row-refreshed { animation: none; } } /* ========================================================================== BACKGROUND MUSIC CONTROLS — touch targets The mute control is a 24px Material icon glyph. Apple's guidance is a 44pt minimum hit area, and a bare glyph is roughly half that, so on a phone the tap frequently lands beside it and nothing happens. Padding would shift the dock layout, so the hit area is extended with a transparent ::after overlay that grows the touchable region without changing the visual size. ========================================================================== */ .nx #bg-music-icon { position: relative; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; /* removes the 300ms iOS click delay */ transition: color .2s var(--nx-ease), transform .15s var(--nx-ease); } .nx #bg-music-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .nx #bg-music-icon:active { transform: scale(.88); } .nx #bg-music-icon:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 3px; border-radius: 4px; } /* A 74px-wide range input with a small thumb is hard to hit accurately while holding a phone one-handed. Widen the thumb and the track on touch devices. */ @media (pointer: coarse) { .nx .bg-volume-slider { width: 96px; height: 28px; /* taller invisible hit area */ background: transparent; touch-action: manipulation; } .nx .bg-volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--nx-accent); border: 2px solid rgba(255,255,255,.85); box-shadow: 0 1px 4px rgba(0,0,0,.5); } .nx .bg-volume-slider::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,.28); } } /* ========================================================================== iOS "Add to Home Screen" explainer Shown when the bell is tapped on an iPhone in a Safari tab, where Apple exposes no Push API at all and no permission dialog can ever appear. ========================================================================== */ .nx .nx-ios-steps { margin: 10px 0 14px; padding-left: 20px; display: grid; gap: 9px; font-size: .92rem; line-height: 1.45; color: var(--nx-text-2); } .nx .nx-ios-steps li { padding-left: 2px; } .nx .nx-ios-steps strong { color: var(--nx-text); font-weight: 700; } .nx .nx-ios-steps .material-icons { font-size: 1.05em; vertical-align: -3px; color: var(--nx-accent-2); } /* ========================================================================== HERO — swipe affordances The billboard auto-advances every 9s. Swiping lets a child move on sooner without hunting for the small dots. ========================================================================== */ .nx .nx-hero { /* Vertical panning stays with the browser (the hero sits at the top of the page, where everyone scrolls); horizontal gestures are ours to interpret. */ touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .nx .nx-hero:focus { outline: none; } .nx .nx-hero:focus-visible { outline: 3px solid var(--nx-accent); outline-offset: -3px; } /* Dots are the fallback control, so give them a proper touch target without changing how large they look. */ @media (pointer: coarse) { .nx .nx-hero-dots button { position: relative; } .nx .nx-hero-dots button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); } } /* ========================================================================== SEO CONTENT The app itself renders from Firestore at runtime, so a crawler that does not execute JavaScript previously saw only interface labels. These two blocks put real, honest, visible copy in the HTML source. Neither is hidden text: the h1 is legible, and the intro section is genuinely useful to a first-time visitor deciding whether this is for their child. ========================================================================== */ .nx .nx-seo-h1 { margin: 0; padding: 10px var(--nx-gutter) 0; font-size: clamp(.78rem, 1.5vw, .92rem); font-weight: 600; line-height: 1.4; letter-spacing: .01em; color: var(--nx-text-3); } .nx .nx-seo-intro { max-width: 900px; margin: 44px auto 8px; padding: 30px var(--nx-gutter) 34px; border-top: 1px solid var(--nx-line); color: var(--nx-text-2); font-size: .95rem; line-height: 1.65; } .nx .nx-seo-intro h2 { margin: 0 0 16px; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 800; color: var(--nx-text); letter-spacing: -.01em; } .nx .nx-seo-intro h3 { margin: 26px 0 8px; font-size: 1.02rem; font-weight: 700; color: var(--nx-text); } .nx .nx-seo-intro p { margin: 0 0 14px; } .nx .nx-seo-intro strong { color: var(--nx-text); font-weight: 700; } .nx .nx-seo-intro em { color: var(--nx-text-2); font-style: italic; } .nx .nx-seo-intro ul { margin: 10px 0 14px; padding-left: 20px; display: grid; gap: 7px; } .nx .nx-seo-intro a { color: var(--nx-accent-2); text-decoration: underline; text-underline-offset: 2px; } .nx .nx-seo-intro a:hover { color: var(--nx-accent); } .nx .nx-seo-intro .nx-seo-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--nx-line); font-size: .9rem; color: var(--nx-text-3); } @media (max-width: 768px) { /* Clear the fixed bottom tab bar and audio dock. */ .nx .nx-seo-intro { margin-top: 30px; padding-bottom: calc(28px + var(--nx-tab-h)); font-size: .92rem; } .nx .nx-seo-h1 { padding-top: 8px; font-size: .76rem; } } /* Donate in the footer. The header icon is hidden on phones to make room, and the only other donate path is inside the story player modal — which a visitor who has not opened a story never sees. Given the app is free and donation-funded, it needs a route that does not depend on that. */ .nx .nx-footer-donate { color: var(--nx-accent-2); font-weight: 700; } .nx .nx-footer-donate:hover { color: var(--nx-accent); } /* Donate in the account menu — the one-tap replacement for the header icon that is hidden on phones. */ .nx .nx-menu-donate { color: var(--nx-accent-2); font-weight: 700; } .nx .nx-menu-donate .material-icons { color: var(--nx-accent-2); } /* ========================================================================== Subscriptions — upgrade sheet, upsell bar, profile plan controls (entitlement.js). Reuses the .ps-back / .ps-modal shell that the personalise and PIN sign-in modals already use, so there is one modal look in the app. ========================================================================== */ .dm-pay-modal { width: min(480px, 100%); } .dm-pay-list { list-style: none; margin: 4px 0 20px; padding: 0; } .dm-pay-list li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; } .dm-pay-list .material-icons { flex: 0 0 auto; font-size: 21px; margin-top: 1px; color: #c9abff; } .dm-pay-list b { display: block; font-size: .95rem; font-weight: 800; color: var(--nx-text); margin-bottom: 2px; } .dm-pay-list span:not(.material-icons) { display: block; font-size: .85rem; line-height: 1.45; color: var(--nx-text-2); } .dm-pay-price { display: flex; align-items: baseline; justify-content: center; gap: 9px; padding: 14px 0; margin-bottom: 14px; border-top: 1px solid var(--nx-line); border-bottom: 1px solid var(--nx-line); } .dm-pay-price b { font-size: 1.9rem; font-weight: 800; color: var(--nx-text); letter-spacing: -.02em; } .dm-pay-price span { font-size: .86rem; color: var(--nx-text-2); } /* Waiting on the real App Store price. Reserves the height it is about to occupy so the sheet does not jump under a thumb already reaching for the button — on the native route the button is disabled until this resolves. */ .dm-pay-price.is-loading { min-height: 62px; border-top: 1px solid var(--nx-line); border-bottom: 1px solid var(--nx-line); } .dm-pay-go[disabled] { opacity: .55; pointer-events: none; } /* ---- plan picker (Stripe route, when an annual price is configured) ---- Two tappable cards rather than a dropdown: the choice is the message, and a parent should be able to see both prices at once without an interaction. */ .dm-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 16px; } .dm-plan { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 16px 10px 13px; border: 1.5px solid var(--nx-line); border-radius: 12px; background: transparent; color: var(--nx-text); cursor: pointer; transition: border-color .16s var(--nx-ease), background .16s var(--nx-ease); } .dm-plan b { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; } .dm-plan span { font-size: .8rem; color: var(--nx-text-2); } .dm-plan:hover { border-color: var(--nx-text-3); } .dm-plan.is-picked { border-color: var(--nx-accent, #ffb547); background: rgba(255, 181, 71, .09); } .dm-plan-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; white-space: nowrap; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--nx-accent, #ffb547); color: #1a1200; } @media (prefers-reduced-motion: reduce) { .dm-plan { transition: none; } } /* The trial line. Says the price in full directly under the button, so "Start 7 days free" is never the last word a parent reads before paying. */ .dm-pay-trial { margin: -6px 0 14px; text-align: center; font-size: .82rem; color: var(--nx-text-2); } .dm-pay-restore { display: block; width: 100%; margin: 12px 0 0; padding: 8px 10px; font: inherit; font-size: .86rem; font-weight: 700; color: var(--nx-accent-2); background: none; border: 0; cursor: pointer; } .dm-pay-restore:hover { text-decoration: underline; } .dm-pay-fine { margin: 14px 0 0; font-size: .76rem; line-height: 1.5; color: var(--nx-text-3); text-align: center; } /* Apple 3.1.2(a) legal links. Quiet, but they must be legible and tappable -- a reviewer has to be able to find and follow them, and "functional link" is the exact phrase in the rejection. 44px of touch target via the padding. */ .dm-pay-legal { margin: 8px 0 0; font-size: .74rem; line-height: 1.6; text-align: center; color: var(--nx-text-3); } .dm-pay-legal a { color: var(--nx-text-2); text-decoration: underline; padding: 6px 2px; display: inline-block; } .dm-pay-legal a:hover, .dm-pay-legal a:focus-visible { color: var(--nx-text-1); } /* ---- the upsell bar ---------------------------------------------------- Shown only to a visitor who provably cannot see premium content, and dismissible for the session. It is deliberately quiet: the free catalogue is the product for most of these families, and a bar that nags at bedtime is the thing that gets a one-star review. */ .dm-upsell { display: flex; align-items: center; gap: 13px; margin: 0 0 18px; padding: 13px 16px; border: 1px solid rgba(157,120,255,.32); border-radius: 14px; background: linear-gradient(135deg, rgba(157,120,255,.14), rgba(157,120,255,.05)); } .dm-upsell[hidden] { display: none; } .dm-upsell > .material-icons { flex: 0 0 auto; color: #c9abff; font-size: 22px; } .dm-upsell p { flex: 1 1 auto; margin: 0; font-size: .88rem; line-height: 1.45; color: var(--nx-text-2); } .dm-upsell p b { color: var(--nx-text); } .dm-upsell-go { flex: 0 0 auto; font: inherit; font-size: .85rem; font-weight: 800; color: #16110a; padding: 9px 15px; border: 0; border-radius: 10px; cursor: pointer; background: linear-gradient(135deg, #c9abff, #9d78ff); } .dm-upsell-go:hover { transform: translateY(-1px); } .dm-upsell-x { flex: 0 0 auto; font-size: 18px; color: var(--nx-text-3); background: none; border: 0; cursor: pointer; padding: 4px; } .dm-upsell-x:hover { color: var(--nx-text); } @media (max-width: 640px) { .dm-upsell { flex-wrap: wrap; gap: 10px; } .dm-upsell p { flex: 1 1 100%; order: 2; } .dm-upsell-go { order: 3; width: 100%; } } /* ---- header + profile --------------------------------------------------- */ .premium-header-btn[hidden] { display: none !important; } .premium-header-btn.is-premium { color: #c9abff; } .profile-email-line { margin: 0; font-size: .9rem; font-weight: 700; color: var(--nx-text); word-break: break-all; } .profile-plan-line { margin: 0 0 4px; font-size: .84rem; line-height: 1.5; color: var(--nx-text-2); } .profile-restore-btn { background: transparent !important; border: 1px solid var(--nx-line) !important; color: var(--nx-text-2) !important; box-shadow: none !important; } /* ---- offline download button + Downloaded row -------------------------- Four states. 'failed' is the one that earns its keep: a download that goes quiet on failure is worse than no button at all, because the parent finds out at bedtime with nothing to fall back on. */ .story-download-btn[hidden] { display: none !important; } .story-download-btn { flex: 0 0 auto; transition: color .18s var(--nx-ease); } .story-download-btn[data-state="done"] { color: #7fd6a0; } .story-download-btn[data-state="failed"] { color: #ff8a80; } .story-download-btn[data-state="working"] { color: var(--nx-text-3); } .story-download-btn[data-state="working"] .material-icons { animation: dm-dl-spin 1.1s linear infinite; } @keyframes dm-dl-spin { to { transform: rotate(360deg); } } #row-downloaded h2 .material-icons { color: #7fd6a0; } /* The size figure. Secondary to the row title on purpose — it is reference information for a parent managing space, not a headline. */ .nx .carousel-row h2 .nx-row-meta { margin-left: 10px; font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--nx-text-3); vertical-align: middle; white-space: nowrap; } .nx .carousel-row h2 .nx-row-meta:empty { display: none; } /* Per-tile remove. Always visible rather than hover-only: the row is most used offline on a touch device, where there is no hover and a control that only appears on one does not exist at all. */ /* The NEW ribbon also sits top-left. In this row it is redundant — these are stories the parent chose and saved, not an arrivals feed — and two controls in one corner is how the remove button gets missed or mistapped. */ .story-card.is-downloaded .nx-new-ribbon { display: none; } .story-card.is-downloaded .dl-remove-btn { position: absolute; left: 8px; top: 8px; z-index: 6; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .58); backdrop-filter: blur(2px); transition: background .18s var(--nx-ease), color .18s var(--nx-ease), transform .18s var(--nx-ease); } .story-card.is-downloaded .dl-remove-btn .material-icons { font-size: 18px; } .story-card.is-downloaded .dl-remove-btn:hover { background: rgba(0, 0, 0, .78); } /* Armed. The colour change is not decoration — it is the only thing telling a parent that the next tap deletes rather than arms. */ .story-card.is-downloaded .dl-remove-btn[data-armed="true"] { background: #c62828; color: #fff; transform: scale(1.06); } .story-card.is-downloaded .dl-remove-btn[data-armed="working"] { background: rgba(0, 0, 0, .58); color: var(--nx-text-3); cursor: default; } .story-card.is-downloaded .dl-remove-btn:disabled { pointer-events: none; } @media (prefers-reduced-motion: reduce) { .story-card.is-downloaded .dl-remove-btn { transition: none; } .story-card.is-downloaded .dl-remove-btn[data-armed="true"] { transform: none; } }