/* Wrapped polish — supplemental styles for: - Scroll progress bar at top of long pages - Floating reading-progress dot indicator - Floating TOC sidebar - Light mode (toggled via [data-theme="light"] on ) - Bento mobile carousel page indicator - Tour micro-animations */ /* ─── Scroll-progress bar ─────────────────────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--neon-dusk-accent), var(--peak-sun-bg)); z-index: 100; transition: width 0.05s linear; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .scroll-progress { transition: none; } } /* ─── Reading time chip ───────────────────────────────────────────── */ .reading-time { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--hairline); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-secondary); margin-left: 12px; vertical-align: middle; } .reading-time::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neon-dusk-accent); } /* ─── Floating TOC ─────────────────────────────────────────────────── */ .toc { position: fixed; top: 50%; right: 24px; transform: translateY(-50%); z-index: 40; padding: 16px 20px; background: rgba(20, 20, 28, 0.78); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); border: 1px solid var(--hairline); border-radius: 18px; max-width: 240px; font-size: 13px; line-height: 1.6; display: none; } @media (min-width: 1280px) { .toc { display: block; } } .toc-title { font-family: "Antonio", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-tertiary); margin-bottom: 10px; } .toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .toc a { color: var(--fg-secondary); text-decoration: none; display: block; padding-left: 10px; border-left: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .toc a:hover { color: var(--fg); border-left-color: var(--neon-dusk-accent); } .toc a.active { color: var(--fg); border-left-color: var(--neon-dusk-accent); font-weight: 600; } /* ─── Light mode toggle button ────────────────────────────────────── */ .theme-toggle { appearance: none; cursor: pointer; padding: 8px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid var(--hairline); color: var(--fg); display: grid; place-items: center; margin-left: 8px; transition: background 0.2s ease, transform 0.2s ease; } .theme-toggle:hover { background: rgba(255,255,255,0.10); transform: rotate(20deg); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-light { display: block; } .theme-toggle .icon-dark { display: none; } /* ─── LIGHT MODE ──────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #FFF7E8; --fg: #1A1745; --fg-secondary: rgba(26, 23, 69, 0.74); --fg-tertiary: rgba(26, 23, 69, 0.46); --hairline: rgba(26, 23, 69, 0.10); --hairline-soft: rgba(26, 23, 69, 0.06); } [data-theme="light"] body { background: var(--bg); color: var(--fg); } [data-theme="light"] .w-nav { background: rgba(255, 247, 232, 0.78); } [data-theme="light"] .w-nav-cta { background: var(--neon-dusk-bg); color: white; } [data-theme="light"] .w-nav-cta:hover { background: var(--neon-dusk-accent); } [data-theme="light"] .theme-toggle .icon-light { display: none; } [data-theme="light"] .theme-toggle .icon-dark { display: block; } [data-theme="light"] .toc { background: rgba(255, 247, 232, 0.92); border-color: rgba(26, 23, 69, 0.10); } /* Heroes still use their saturated palette in light mode — that's the whole point of the curated palette pairs. The body/nav/footer are what shift. */ [data-theme="light"] .w-footer { border-top-color: var(--hairline-soft); } [data-theme="light"] .w-btn--ghost { border-color: var(--hairline); color: var(--fg); } [data-theme="light"] .w-btn--ghost:hover { background: var(--neon-dusk-bg); color: white; } [data-theme="light"] .reading-time { background: rgba(26, 23, 69, 0.06); border-color: rgba(26, 23, 69, 0.10); color: var(--fg-secondary); } /* ─── Bento mobile page indicator ─────────────────────────────────── */ .bento-pages { display: none; justify-content: center; gap: 6px; padding: 16px 24px 0; } @media (max-width: 640px) { .bento-pages { display: flex; } } .bento-pages .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); transition: background 0.2s ease, transform 0.2s ease; } .bento-pages .dot.active { background: var(--neon-dusk-accent); transform: scale(1.4); } /* ─── Tour stop micro-animations ──────────────────────────────────── */ .stop-screen { transition: transform 0.5s var(--ease-out); } .stop:hover .stop-screen { transform: translateY(-6px) rotate(-1deg); } .stop:nth-child(even):hover .stop-screen { transform: translateY(-6px) rotate(1deg); } .stop-screen-eyebrow::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: currentColor; vertical-align: middle; animation: stop-pulse 1.6s ease-in-out infinite; opacity: 0.6; } @keyframes stop-pulse { 50% { opacity: 0.2; transform: scale(0.7); } } @media (prefers-reduced-motion: reduce) { .stop-screen { transition: none; } .stop:hover .stop-screen { transform: none; } .stop-screen-eyebrow::after { animation: none; } }