/* ════════════════════════════════════════════════════════════════ store.css — design system for store.fixnet.online (the new webstore). This is NOT a fork (anchor M8 / N4). The shared family design system — tokens (colors, spacing, type scale), top bar, footer, .card, .btn, .chip, .tag, .ph — lives in the verbatim-ported `fixnet.css`, which every page links FIRST. This file links second and only ADDS the store-specific components the marketplace needs (pack card, category chip, rating row, store hero) plus the degrade-never-blank states (anchor M6). Keep it that way: extend fixnet.css here, never re-declare what it already owns. If a token changes upstream, re-port fixnet.css. ════════════════════════════════════════════════════════════════ */ :root { --star: #f5c451; /* rating stars — warm accent over the green pivot */ --maxw-store: 1180px; --warn: #f5c451; /* deprecated / "needs newer app" — amber, not alarming */ --warn-dim: rgba(245,196,81,0.14); --err: #e0666b; /* yanked / removed — red, but muted for the dark UI */ --err-dim: rgba(224,102,107,0.14); /* ── WCAG 2.1 AA contrast pass (slice 09.02) ────────────────────── The ported fixnet.css tokens are tuned for the marketing site's larger display type. The store leans on small (11–13px), weight-300 mono for secondary text and meta, where the inherited --muted/--faint sit at or below the 4.5:1 floor. We re-tune ONLY the two text tokens here — this is a contrast adjustment, not a design fork (anchor M8): every component keeps reading --muted/--faint, so the fix is centralised in one place. --muted now ≈ #9f9f9f over --bg #0f0f14 → ~7.2:1 (was ~4.6:1) --faint now ≈ #7d7d80 over --bg #0f0f14 → ~4.6:1 (was ~2.7:1, FAILED) Both clear AA for normal text and keep a visible muted→faint hierarchy. */ --muted: rgba(255,255,255,0.60); --faint: rgba(255,255,255,0.46); } /* The store uses the CSS field-tint for its dark "family" look instead of the marketing site's animated canvas, so the body never paints a flat black. */ .field-tint { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 0%, rgba(78,203,113,0.05), transparent 60%), radial-gradient(100% 80% at 50% 100%, rgba(15,15,20,0.6), transparent 70%); } /* ── Scroll reveal (degrade-never-blank, M6) ───────── Content is fully visible with JavaScript disabled. The boot script adds `js` to ; only then do we hide-then-animate. These rules come after fixnet.css, so they override its always-hidden `.reveal`. */ .reveal { opacity: 1; transform: none; } html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2,0.7,0.3,1); } html.js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } } /* ── Store hero ───────────────────────────────────── */ .store-hero { position: relative; z-index: 2; max-width: var(--maxw-store); margin: 0 auto; padding: 150px 30px 50px; text-align: center; } .store-hero h1.title { margin: 0 auto; } .store-hero .lede { margin-left: auto; margin-right: auto; } /* Search affordance on the hero — a static, styled form that GETs /search. A later island can enhance it with type-ahead; without JS it still submits. */ .hero-search { max-width: 620px; margin: 30px auto 0; display: flex; gap: 10px; } .hero-search input { flex: 1; font-family: var(--mono); font-size: 14px; color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong); border-radius: 10px; padding: 14px 18px; outline: none; } .hero-search input:focus { border-color: var(--net); } .hero-search input::placeholder { color: var(--faint); } .hero-stats { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 34px; } .hero-stat { font-family: var(--mono); font-size: 12px; color: var(--muted); } .hero-stat b { display: block; font-family: var(--sans); font-weight: 800; font-size: 26px; color: var(--text); letter-spacing: -0.02em; } /* ── Section header with an "see all" trailing link ── */ .row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .row-head a.more { font-family: var(--mono); font-size: 12px; color: var(--net); text-decoration: none; white-space: nowrap; } .row-head a.more:hover { color: var(--net-hi); } /* ── Pack card ────────────────────────────────────── */ .pack-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .pack-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .pack-grid { grid-template-columns: 1fr; } } .pack-card { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color 0.18s, transform 0.18s; } .pack-card:hover { border-color: var(--border-strong); transform: translateY(-3px); } .pack-thumb { aspect-ratio: 16 / 10; width: 100%; position: relative; overflow: hidden; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px), var(--surface-solid); display: grid; place-items: center; color: var(--faint); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; } .pack-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pack-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .pack-title { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; line-height: 1.25; } .pack-pub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); } .pack-desc { font-family: var(--mono); font-weight: 300; font-size: 12.5px; color: var(--muted); line-height: 1.6; flex: 1; } .pack-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; } /* version pill — small, immutable-version marker (anchor M7) */ .version-badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--net); border: 1px solid var(--net-dim); background: var(--net-dim); padding: 3px 8px; border-radius: 6px; } /* ── Rating row ───────────────────────────────────── */ .rating-row { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--muted); } .stars { position: relative; display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 1px; } .stars::before { content: '★★★★★'; color: var(--border-strong); } /* --pct is set inline (0–100) to clip the filled stars to the score */ .stars i { position: absolute; inset: 0; overflow: hidden; width: var(--pct, 0%); } .stars i::before { content: '★★★★★'; color: var(--star); } .rating-count { color: var(--faint); } /* ── Category chip / card ─────────────────────────── */ .cat-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } } .cat-chip { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: 13px; padding: 16px 18px; background: var(--surface); transition: border-color 0.18s, transform 0.18s; } .cat-chip:hover { border-color: var(--border-strong); transform: translateY(-2px); } .cat-chip .glyph { flex: none; } .cat-chip .cat-name { font-family: var(--sans); font-weight: 700; font-size: 14.5px; } .cat-chip .cat-count { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 2px; } /* ── Degrade-never-blank states (anchor M6) ─────────── Any island that fails its live fetch, or any pre-data placeholder, wears one of these so a pane is never silently blank. */ .is-fallback { opacity: 0.85; } .empty-state { border: 1px dashed var(--border-strong); border-radius: 14px; padding: 30px; text-align: center; font-family: var(--mono); font-size: 12.5px; color: var(--muted); line-height: 1.7; } .placeholder-tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; margin-bottom: 14px; } /* ── Pack thumbnail icon (glyph placeholder before a real image) ── A character centered inside the striped thumb area. Larger than the tile glyph from fixnet.css — this fills the 16:10 thumb region. */ .pack-icon { font-size: 32px; opacity: 0.55; pointer-events: none; user-select: none; } /* ── Pack chip (category badge inside a card's meta row) ──────── */ .pack-chip { font-family: var(--mono); font-size: 10.5px; color: var(--net); border: 1px solid var(--net-dim); background: var(--net-dim); padding: 3px 8px; border-radius: 6px; text-decoration: none; transition: border-color 0.15s; white-space: nowrap; } .pack-chip:hover { border-color: var(--net); } /* ── Category page hero ───────────────────────────── */ .cat-hero { position: relative; z-index: 2; max-width: var(--maxw-store); margin: 0 auto; padding: 120px 30px 40px; } .cat-hero .breadcrumb { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .cat-hero .breadcrumb a { color: var(--net); text-decoration: none; } .cat-hero .breadcrumb a:hover { color: var(--net-hi); } .cat-hero .cat-hero-title { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .cat-hero .glyph { font-size: 22px; } .cat-hero h1.title { display: inline; } .cat-hero .lede { margin-top: 0; } /* ── Skeleton loading states (M6 — no layout shift) ─── sk-card / sk-chip match the dimensions of the real components so the grid never reflowing when live data arrives. */ @keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .sk-line, .sk-card .pack-thumb.sk-block, .sk-chip .glyph.sk-block { background: linear-gradient( 90deg, var(--surface-solid) 25%, rgba(255,255,255,0.07) 50%, var(--surface-solid) 75% ); background-size: 200% 100%; border-radius: 4px; } html.js .sk-line, html.js .sk-card .pack-thumb.sk-block, html.js .sk-chip .glyph.sk-block { animation: sk-shimmer 1.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { html.js .sk-line, html.js .sk-card .pack-thumb.sk-block, html.js .sk-chip .glyph.sk-block { animation: none; } } .sk-line { height: 11px; margin-bottom: 9px; } .sk-line.sm { height: 9px; } .sk-line.w-35 { width: 35%; } .sk-line.w-40 { width: 40%; } .sk-line.w-55 { width: 55%; } .sk-line.w-65 { width: 65%; } .sk-line.w-75 { width: 75%; } .sk-line.w-80 { width: 80%; } .sk-card { pointer-events: none; } .sk-card .pack-thumb.sk-block { height: 100%; border-radius: 0; } .sk-chip { pointer-events: none; } .sk-chip .glyph.sk-block { border-radius: 8px; } /* ── SWR "freshened" affordance (anchors M5/M6) ─────── When an island swaps the build-time snapshot for a live read, it briefly adds .just-freshened. A pure-opacity fade signals the update WITHOUT moving layout (the cards are identical structure) — never a flash. Only animates with JS on; respects reduced-motion. */ @keyframes store-freshen { from { opacity: 0.55; } to { opacity: 1; } } html.js .just-freshened { animation: store-freshen 0.45s ease both; } @media (prefers-reduced-motion: reduce) { html.js .just-freshened { animation: none; } } /* ── Search page (slice 03.02) ─────────────────────────────────── */ .search-hero { position: relative; z-index: 2; max-width: var(--maxw-store); margin: 0 auto; padding: 100px 30px 28px; } .search-hero .breadcrumb { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .search-hero .breadcrumb a { color: var(--net); text-decoration: none; } .search-hero .breadcrumb a:hover { color: var(--net-hi); } .search-bar-row { display: flex; gap: 10px; max-width: 720px; margin-top: 24px; } .search-bar-row input[type="search"] { flex: 1; font-family: var(--mono); font-size: 15px; color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong); border-radius: 10px; padding: 14px 18px; outline: none; min-width: 0; -webkit-appearance: none; appearance: none; } .search-bar-row input[type="search"]:focus { border-color: var(--net); box-shadow: 0 0 0 2px rgba(78,203,113,0.15); } .search-bar-row input[type="search"]::placeholder { color: var(--faint); } /* Chrome hides the native ✕ clear button; keep it for usability */ .search-bar-row input[type="search"]::-webkit-search-cancel-button { opacity: 0.5; cursor: pointer; } .search-rail { max-width: var(--maxw-store); margin: 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 30px; margin-bottom: 14px; } .search-rail select { font-family: var(--mono); font-size: 12.5px; color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; cursor: pointer; outline: none; } .search-rail select:focus { border-color: var(--net); } .search-rail select option { background: #1a1a22; color: var(--text); } .filter-chips { max-width: var(--maxw-store); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 30px; margin-bottom: 14px; } .filter-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; color: var(--net); border: 1px solid var(--net-dim); background: var(--net-dim); padding: 4px 6px 4px 10px; border-radius: 6px; } .filter-chip .remove-chip { all: unset; cursor: pointer; line-height: 1; opacity: 0.65; font-size: 16px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 4px; } .filter-chip .remove-chip:hover, .filter-chip .remove-chip:focus-visible { opacity: 1; background: rgba(255,255,255,0.12); outline: 1px solid var(--net); } .search-status { max-width: var(--maxw-store); margin: 0 auto; font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 0 30px; margin-bottom: 18px; min-height: 18px; } .search-error-bar { max-width: var(--maxw-store); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px dashed var(--border-strong); border-radius: 10px; padding: 14px 18px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-bottom: 18px; } .load-more-wrap { display: flex; justify-content: center; margin-top: 32px; margin-bottom: 16px; } /* ── Pack detail page (slice 04.01) ────────────────── */ .pack-detail-hero { position: relative; z-index: 2; max-width: var(--maxw-store); margin: 0 auto; padding: 120px 30px 0; } .pack-detail-hero .breadcrumb { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 28px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pack-detail-hero .breadcrumb a { color: var(--net); text-decoration: none; } .pack-detail-hero .breadcrumb a:hover { color: var(--net-hi); } .pack-hero-head { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 18px; } .pack-hero-icon { flex: none; width: 72px; height: 72px; border-radius: 18px; background: var(--surface-solid); display: grid; place-items: center; font-size: 32px; border: 1px solid var(--border); } .pack-hero-meta { flex: 1; min-width: 0; } .pack-hero-meta h1.title { font-size: clamp(20px, 4vw, 32px); line-height: 1.15; margin: 0 0 6px; } .pack-hero-meta .pack-pub { font-family: var(--mono); font-size: 12.5px; color: var(--muted); } .pack-hero-meta .pack-pub a { color: var(--net); text-decoration: none; } .pack-hero-meta .pack-pub a:hover { color: var(--net-hi); } .pack-hero-desc { font-family: var(--mono); font-weight: 300; font-size: 14px; color: var(--muted); line-height: 1.75; max-width: 700px; margin: 20px 0 0; } /* ── Scorecard grid ───────────────────────────────── */ .scorecard { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin: 32px 0; } @media (max-width: 780px) { .scorecard { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .scorecard { grid-template-columns: repeat(2, 1fr); } } .score-cell { background: var(--surface); padding: 18px 20px; display: flex; flex-direction: column; gap: 5px; } .score-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); } .score-value { font-family: var(--sans); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--text); } .score-value.mono { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0; } .score-sub { font-family: var(--mono); font-size: 10.5px; color: var(--muted); } /* ── Install / Get CTA ────────────────────────────── */ .install-section { border: 1px solid var(--net-dim); border-radius: 16px; padding: 26px 28px; margin: 0 0 32px; background: rgba(78,203,113,0.03); } .install-section h2 { font-size: 16px; margin: 0 0 14px; } .install-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; } .deeplink-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; font-weight: 500; color: #0f0f14; background: var(--net); border: none; padding: 12px 22px; border-radius: 10px; cursor: pointer; text-decoration: none; transition: background 0.15s, transform 0.15s; white-space: nowrap; } .deeplink-btn:hover { background: var(--net-hi); transform: translateY(-1px); } .deeplink-btn:active { transform: none; } .copy-cmd-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .copy-cmd-pre { font-family: var(--mono); font-size: 12px; color: var(--muted); background: var(--surface-solid); border: 1px solid var(--border); padding: 10px 14px; border-radius: 8px; white-space: nowrap; overflow-x: auto; } .copy-btn { flex: none; font-family: var(--mono); font-size: 11px; color: var(--net); background: none; border: 1px solid var(--net-dim); padding: 9px 14px; border-radius: 8px; cursor: pointer; transition: border-color 0.15s; } .copy-btn:hover { border-color: var(--net); } .copy-btn.copied { color: var(--net-hi); border-color: var(--net); } .install-trust-note { font-family: var(--mono); font-size: 11px; color: var(--faint); line-height: 1.6; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 2px; } .install-trust-note a { color: var(--net); text-decoration: none; } .install-trust-note a:hover { color: var(--net-hi); } /* ── Tags row ─────────────────────────────────────── */ .tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .tag-item { font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid var(--border); padding: 4px 10px; border-radius: 6px; } /* ── Dependencies / compatibility ─────────────────── */ .dep-section { margin-bottom: 32px; } .dep-section > h2 { font-size: 15px; margin: 0 0 14px; } .dep-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .dep-item { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; } .dep-item a { color: var(--net); text-decoration: none; } .dep-item a:hover { color: var(--net-hi); } .dep-kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; white-space: nowrap; } .compat-bar { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; } .compat-range { color: var(--net); } /* ── Pack detail page layout ──────────────────────── */ .pack-detail-body { max-width: var(--maxw-store); margin: 0 auto; padding: 0 30px 60px; } /* ── Fallback / loading skeleton for pack detail ──── */ .pack-fallback-hero { min-height: 280px; } /* ── Share button ─────────────────────────────────── */ .share-row { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; } .share-btn { font-family: var(--mono); font-size: 11.5px; color: var(--muted); background: none; border: 1px solid var(--border); padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: border-color 0.15s; } .share-btn:hover { border-color: var(--border-strong); color: var(--text); } .share-btn.copied { color: var(--net); border-color: var(--net-dim); } /* No-JS fallback: visible without JS, hidden once html.js class is set */ .search-nojs { display: block; } html.js .search-nojs { display: none; } /* Island body: hidden without JS, shown once html.js is set */ .search-island-body { display: none; } html.js .search-island-body { display: block; } /* ── Media gallery (slice 04.02) ──────────────────────────────── */ .gallery-root-inner { margin-bottom: 40px; } .gallery-main { position: relative; border-radius: 14px; overflow: hidden; background: var(--surface-solid); border: 1px solid var(--border); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; } .gallery-main-trigger { display: block; width: 100%; height: 100%; background: none; border: none; padding: 0; cursor: pointer; position: relative; } .gallery-main-trigger:focus-visible { outline: 2px solid var(--net); outline-offset: 2px; } .gallery-main-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 13px; } .gallery-enlarge-hint { position: absolute; top: 10px; right: 10px; font-size: 16px; color: rgba(255,255,255,0.5); background: rgba(0,0,0,0.4); border-radius: 6px; padding: 2px 6px; pointer-events: none; transition: opacity 0.15s; } .gallery-main-trigger:hover .gallery-enlarge-hint { opacity: 1; color: rgba(255,255,255,0.85); } /* Thumbnail strip */ .gallery-strip { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .gallery-strip::-webkit-scrollbar { height: 4px; } .gallery-strip::-webkit-scrollbar-track { background: transparent; } .gallery-strip::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; } .gallery-thumb { flex: none; width: 120px; height: 68px; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--border); background: var(--surface-solid); padding: 0; cursor: pointer; transition: border-color 0.15s; display: grid; place-items: center; } .gallery-thumb:hover { border-color: var(--border-strong); } .gallery-thumb.active { border-color: var(--net); } .gallery-thumb:focus-visible { outline: 2px solid var(--net); outline-offset: 1px; } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-thumb-video { display: flex; align-items: center; justify-content: center; } /* Video facade */ .gallery-video-facade { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; background: var(--surface-solid); border-radius: 13px; } .gallery-video-facade:focus-visible { outline: 2px solid var(--net); outline-offset: 2px; } .gallery-video-play { flex: none; } .gallery-video-label { font-family: var(--sans); font-size: 15px; font-weight: 600; } .gallery-video-hint { font-family: var(--mono); font-size: 11px; color: var(--muted); } .gallery-video-iframe { display: block; width: 100%; height: 100%; border: none; border-radius: 13px; } /* Lightbox */ .gallery-lightbox { position: fixed; inset: 0; margin: auto; width: min(90vw, 900px); height: auto; max-height: 90vh; background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .gallery-lightbox::backdrop { background: rgba(0,0,0,0.82); } .gallery-lightbox[open] { display: flex; } .gallery-lb-close { align-self: flex-end; background: none; border: none; font-size: 22px; color: var(--muted); cursor: pointer; padding: 2px 6px; line-height: 1; border-radius: 6px; } .gallery-lb-close:hover { color: var(--text); background: rgba(255,255,255,0.06); } .gallery-lb-img { width: 100%; max-height: calc(90vh - 100px); object-fit: contain; border-radius: 10px; display: block; } .gallery-lb-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .gallery-lb-prev, .gallery-lb-next { background: none; border: 1px solid var(--border-strong); color: var(--muted); font-size: 20px; padding: 4px 14px; border-radius: 8px; cursor: pointer; transition: border-color 0.15s; } .gallery-lb-prev:hover, .gallery-lb-next:hover { border-color: var(--net); color: var(--text); } .gallery-lb-counter { font-family: var(--mono); font-size: 11px; color: var(--muted); } /* ── README / long description (slice 04.02) ──────────────────── */ .readme-section { margin-bottom: 40px; } .readme-heading { font-size: 16px; font-family: var(--sans); font-weight: 700; margin: 0 0 20px; letter-spacing: -0.01em; } .readme-body { line-height: 1.75; } /* Headings inside README */ .readme-body .readme-h { font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; margin: 28px 0 10px; color: var(--text); } .readme-body h3.readme-h { font-size: 18px; } .readme-body h4.readme-h { font-size: 16px; } .readme-body h5.readme-h, .readme-body h6.readme-h { font-size: 14px; } /* Paragraphs */ .readme-body .readme-p { font-family: var(--mono); font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,0.72); line-height: 1.8; margin: 0 0 16px; } /* Links */ .readme-body a { color: var(--net); text-decoration: underline; text-underline-offset: 2px; } .readme-body a:hover { color: var(--net-hi); } /* Inline code */ .readme-body .readme-ic { font-family: var(--mono); font-size: 12.5px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--net); } /* Code blocks */ .code-block-wrap { position: relative; margin: 16px 0; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .code-block { display: block; overflow-x: auto; padding: 18px 18px 18px 18px; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: rgba(255,255,255,0.8); tab-size: 2; scrollbar-width: thin; } .code-block::-webkit-scrollbar { height: 4px; } .code-block::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; } .code-block code { font-family: inherit; background: none; border: none; padding: 0; } .code-copy-btn { position: absolute; top: 10px; right: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); background: rgba(0,0,0,0.4); border: 1px solid var(--border); padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .code-copy-btn:hover { border-color: var(--net-dim); color: var(--net); } /* Lists */ .readme-body .readme-ul, .readme-body .readme-ol { font-family: var(--mono); font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,0.72); line-height: 1.75; margin: 0 0 16px; padding-left: 22px; } .readme-body .readme-ul li, .readme-body .readme-ol li { margin-bottom: 4px; } /* Blockquote */ .readme-body .readme-bq { border-left: 3px solid var(--net-dim); margin: 16px 0; padding: 6px 0 6px 18px; color: var(--muted); } .readme-body .readme-bq p { font-family: var(--mono); font-size: 13px; margin: 0 0 6px; } /* HR */ .readme-body .readme-hr { border: none; border-top: 1px solid var(--border); margin: 28px 0; } /* Tables */ .readme-table-wrap { overflow-x: auto; margin: 16px 0; } .readme-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; } .readme-th, .readme-td { border: 1px solid var(--border); padding: 9px 14px; text-align: left; color: rgba(255,255,255,0.8); } .readme-th { background: var(--surface-solid); font-weight: 500; color: var(--faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; } /* ── Outbound links section (slice 04.02) ─────────────────────── */ .links-section { margin-bottom: 40px; } .links-heading { font-size: 16px; font-family: var(--sans); font-weight: 700; margin: 0 0 14px; letter-spacing: -0.01em; } .links-list { display: flex; flex-wrap: wrap; gap: 10px; } .link-item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; text-decoration: none; transition: border-color 0.15s, color 0.15s; white-space: nowrap; } .link-item:hover { border-color: var(--net-dim); color: var(--net); } .link-icon { font-size: 14px; color: var(--faint); } .link-label { flex: 1; } .link-arrow { font-size: 11px; color: var(--faint); } /* ════════════════════════════════════════════════════════════════ Version selector + history (slice 05.01) — M7: immutable versions, the UI presents state (deprecated/yanked), it never edits authority. ════════════════════════════════════════════════════════════════ */ /* ── Version selector on the pack page ────────────────────────── */ .version-control { margin: 0 0 14px; } .version-picker-label { display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); margin-bottom: 8px; } .version-picker-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .version-select { font-family: var(--mono); font-size: 13px; color: var(--text); background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 34px 9px 14px; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .version-select:focus { border-color: var(--net); } .version-all-link { font-family: var(--mono); font-size: 12px; color: var(--net); text-decoration: none; white-space: nowrap; } .version-all-link:hover { color: var(--net-hi); } /* No-JS static fallback: just the "latest" summary + the history link. */ .version-static-current { font-family: var(--mono); font-size: 12.5px; color: var(--muted); } .version-static-current strong { color: var(--text); font-weight: 500; } /* The note line under the selector (state + compat + recommendation). */ .version-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-top: 12px; min-height: 1px; } .version-note:empty { margin-top: 0; } .v-note-text { color: var(--muted); } .v-rec a, .v-rec-link { color: var(--net); text-decoration: none; } .v-rec a:hover, .v-rec-link:hover { color: var(--net-hi); } /* State + compat pills (shared by the selector note and the timeline). */ .v-badge { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 6px; padding: 3px 8px; white-space: nowrap; } .v-badge.is-deprecated { color: var(--warn); border: 1px solid var(--warn); background: var(--warn-dim); } .v-badge.is-yanked { color: var(--err); border: 1px solid var(--err); background: var(--err-dim); } .v-badge.is-latest { color: var(--net); border: 1px solid var(--net-dim); background: var(--net-dim); } .v-compat { color: var(--muted); } .v-compat.ok { color: var(--net); } .v-compat.warn { color: var(--warn); } /* Immutability ledger note (linkable; present without JS). */ .immutability-note { font-family: var(--mono); font-size: 11px; color: var(--faint); line-height: 1.6; margin: 0 0 28px; } .immutability-note a { color: var(--net); text-decoration: none; } .immutability-note a:hover { color: var(--net-hi); } /* Disabled install affordance (a yanked version cannot be installed). */ .deeplink-btn.is-disabled { opacity: 0.5; pointer-events: none; } /* Per-version install note ("Installing v1.1.0" / removed notice). */ .install-note { font-family: var(--mono); font-size: 11.5px; color: var(--muted); line-height: 1.6; margin: 0 0 12px; } .install-note a { color: var(--net); text-decoration: none; } .install-note a:hover { color: var(--net-hi); } /* ── Changelog region on the pack page ────────────────────────── */ .changelog-section { margin: 0 0 32px; } .changelog-heading { font-size: 15px; font-family: var(--sans); font-weight: 700; margin: 0 0 14px; letter-spacing: -0.01em; } .changelog-body.is-empty, .vh-changelog.is-empty { font-family: var(--mono); font-size: 12px; color: var(--faint); font-style: italic; } /* ── Version-history timeline page ────────────────────────────── */ .version-history { margin: 30px 0 10px; } .vh-list { display: flex; flex-direction: column; gap: 0; } .vh-item { display: grid; grid-template-columns: 24px 1fr; gap: 16px; } .vh-rail { position: relative; display: flex; justify-content: center; } .vh-rail::before { content: ''; position: absolute; top: 6px; bottom: -2px; left: 50%; width: 1px; background: var(--border); transform: translateX(-50%); } .vh-item:last-child .vh-rail::before { bottom: auto; height: 16px; } .vh-dot { position: relative; z-index: 1; margin-top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface-solid); border: 2px solid var(--border-strong); } .vh-item.is-latest .vh-dot { border-color: var(--net); background: var(--net); } .vh-item.is-deprecated .vh-dot { border-color: var(--warn); } .vh-item.is-yanked .vh-dot { border-color: var(--err); } .vh-card { border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; background: var(--surface); } .vh-item.is-latest .vh-card { border-color: var(--net-dim); background: rgba(78,203,113,0.03); } .vh-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .vh-semver { font-size: 17px; margin: 0; font-weight: 700; color: var(--text); letter-spacing: 0; } .vh-date { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-left: auto; } .vh-meta { font-family: var(--mono); font-size: 11.5px; margin-bottom: 12px; } .vh-changelog { margin: 0 0 14px; } .vh-changelog:last-child { margin-bottom: 0; } .vh-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .vh-removed { font-family: var(--mono); font-size: 11.5px; color: var(--err); } @media (max-width: 480px) { .vh-date { margin-left: 0; width: 100%; } } /* Per-version permalink anchor (the ledger's stable #v- link). */ .vh-permalink { font-family: var(--mono); font-size: 13px; color: var(--faint); text-decoration: none; opacity: 0; transition: opacity 0.15s, color 0.15s; } .vh-item:hover .vh-permalink, .vh-permalink:focus { opacity: 1; } .vh-permalink:hover { color: var(--net); } /* ════════════════════════════════════════════════════════════════ Structured release notes (slice 05.02) — M7: categorised changelog (Added / Changed / Fixed / Breaking / …). Reflects author authority, never edits it. Unparseable notes fall back to raw .readme-body (M6). ════════════════════════════════════════════════════════════════ */ .cl-groups { display: flex; flex-direction: column; gap: 14px; } .cl-group { display: block; } .cl-cat { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .cl-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 11px; line-height: 1; border: 1px solid var(--border-strong); color: var(--muted); } .cl-label { font-weight: 500; } .cl-count { font-size: 10px; color: var(--faint); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; } .cl-list { list-style: none; margin: 0; padding: 0 0 0 2px; display: flex; flex-direction: column; gap: 4px; } .cl-item { position: relative; padding-left: 16px; font-family: var(--mono); font-weight: 300; font-size: 12.5px; color: var(--text); line-height: 1.55; } .cl-item::before { content: '–'; position: absolute; left: 0; color: var(--faint); } .cl-item a { color: var(--net); text-decoration: none; } .cl-item a:hover { color: var(--net-hi); } .cl-ver { font-size: 10.5px; color: var(--faint); margin-right: 4px; } /* Per-category accents (icon tint only — keeps the body readable). */ .cl-group.is-breaking .cl-icon { color: var(--err); border-color: var(--err); background: var(--err-dim); } .cl-group.is-breaking .cl-label { color: var(--err); } .cl-group.is-added .cl-icon, .cl-group.is-fixed .cl-icon { color: var(--net); border-color: var(--net-dim); background: var(--net-dim); } .cl-group.is-deprecated .cl-icon, .cl-group.is-removed .cl-icon, .cl-group.is-security .cl-icon { color: var(--warn); border-color: var(--warn); background: var(--warn-dim); } /* Lossless overflow (anything uncategorised) rendered after the groups. */ .cl-extra { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .cl-extra-head { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; } /* Breaking-change badge on the timeline / selector. */ .v-badge.is-breaking { color: var(--err); border: 1px solid var(--err); background: var(--err-dim); } /* ── Breaking-change banner ───────────────────────────────────── */ .breaking-banner { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--err); background: var(--err-dim); border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; } .bk-icon { font-size: 16px; line-height: 1.3; color: var(--err); } .bk-body { flex: 1; min-width: 0; } .bk-title { display: block; font-family: var(--sans); font-size: 13.5px; color: var(--err); } .bk-why { font-family: var(--mono); font-size: 11.5px; color: var(--muted); line-height: 1.6; margin: 4px 0 0; } .bk-migration { margin-top: 10px; } .bk-migration-head { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; } /* ════════════════════════════════════════════════════════════════ Version diff island (slice 05.02) — compare any two versions. A pure enhancement: hidden with <2 versions or on failure (M6). ════════════════════════════════════════════════════════════════ */ .version-diff { border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin: 0 0 28px; background: var(--surface); } .vd-heading { font-size: 14px; font-family: var(--sans); font-weight: 700; margin: 0 0 14px; letter-spacing: -0.01em; } .vd-controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .vd-field { display: flex; flex-direction: column; gap: 6px; } .vd-field-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); } .vd-arrow { font-family: var(--mono); color: var(--faint); padding-bottom: 9px; } .vd-summary { font-family: var(--mono); font-size: 12.5px; color: var(--text); line-height: 1.6; margin-bottom: 10px; } .vd-summary .mono { color: var(--net); } .vd-count { color: var(--faint); } .vd-compat { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-bottom: 12px; } .vd-compat .mono { color: var(--text); } .vd-empty { font-family: var(--mono); font-size: 12px; color: var(--faint); font-style: italic; } .vd-groups { margin-top: 4px; } /* ── Blog components (slice 06.01) ────────────────────────────── */ /* Blog index page hero */ .blog-hero { position: relative; z-index: 2; max-width: var(--maxw-store); margin: 0 auto; padding: 120px 30px 40px; } .blog-hero h1.title { margin-bottom: 12px; } .blog-hero .lede { margin-top: 0; } /* Blog post grid (3-up → 2-up → 1-up) */ .blog-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } } /* Blog card (index + tag pages) */ .blog-card { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 0; text-decoration: none; color: inherit; padding: 24px; transition: border-color 0.18s, transform 0.18s; } .blog-card:hover { border-color: var(--border-strong); transform: translateY(-3px); } .blog-card-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .blog-card-meta time { color: var(--faint); } .blog-card h3 { font-family: var(--sans); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 10px; } .blog-card p.blog-card-summary { font-family: var(--mono); font-weight: 300; font-size: 12.5px; color: var(--muted); line-height: 1.65; flex: 1; margin: 0; } .blog-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; } /* Tag chips — two variants: linked (green) and plain (muted) */ .blog-tag { font-family: var(--mono); font-size: 10.5px; color: var(--net); border: 1px solid var(--net-dim); background: var(--net-dim); padding: 3px 8px; border-radius: 6px; text-decoration: none; transition: border-color 0.15s; white-space: nowrap; } .blog-tag:hover { border-color: var(--net); } .blog-tag.plain { color: var(--muted); border-color: var(--border); background: transparent; cursor: default; } /* Individual post hero */ .blog-post-hero { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 120px 30px 32px; } .blog-post-hero .breadcrumb { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .blog-post-hero .breadcrumb a { color: var(--net); text-decoration: none; } .blog-post-hero .breadcrumb a:hover { color: var(--net-hi); } .blog-post-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; } .blog-post-meta time { color: var(--faint); } /* Post article body — readable prose width, loose line-height */ .blog-post-body { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 0 30px 64px; } .blog-post-body .readme-p { font-size: 14.5px; line-height: 1.8; margin-bottom: 18px; } .blog-post-body .readme-h { color: var(--text); margin: 38px 0 14px; } .blog-post-body .readme-ul, .blog-post-body .readme-ol { font-size: 14px; color: var(--muted); margin-bottom: 14px; } .blog-post-body .readme-bq { border-left: 3px solid var(--net); padding: 14px 20px; margin: 22px 0; background: var(--net-dim); border-radius: 0 10px 10px 0; } .blog-post-body .readme-bq p { margin: 0; color: var(--text); } /* Related packs / versions within a post */ .blog-related { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--border); } .blog-related h2 { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin: 0 0 18px; } .blog-related-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); } @media (max-width: 560px) { .blog-related-grid { grid-template-columns: 1fr; } } .blog-related-card { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--border); border-radius: 13px; padding: 16px 18px; background: var(--surface); text-decoration: none; color: inherit; transition: border-color 0.18s, transform 0.18s; } .blog-related-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .blog-related-card-label { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; } .blog-related-card-title { font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; } .blog-related-card-sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); } /* Share row at the bottom of a post */ .blog-post-share { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 12px; color: var(--muted); } .blog-post-share a { color: var(--net); text-decoration: none; } .blog-post-share a:hover { color: var(--net-hi); } /* "From the blog" strip on the home page (2-column) */ .blog-strip { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); } @media (max-width: 720px) { .blog-strip { grid-template-columns: 1fr; } } .blog-strip-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; background: var(--surface); text-decoration: none; color: inherit; transition: border-color 0.18s, transform 0.18s; } .blog-strip-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .blog-strip-card-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 8px; } .blog-strip-card h3 { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; line-height: 1.3; margin: 0; } .blog-strip-card p { font-family: var(--mono); font-weight: 300; font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0; } /* ════════════════════════════════════════════════════════════════ Learn hub — landing + individual tutorial pages. Follows the same patterns as the blog (M1, M8): file-based content, one design system, no third-party runtime before interaction. Video facade: poster → YouTube-nocookie iframe only on user click (M8). ════════════════════════════════════════════════════════════════ */ /* ── Learn landing hero ──────────────────────────── */ .learn-hero { padding: 60px 30px 40px; max-width: var(--maxw); margin: 0 auto; } .learn-hero h1.title { margin-bottom: 12px; } .learn-hero .lede { margin-top: 0; } /* ── Filter bar ──────────────────────────────────── */ .learn-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; } .learn-filter-bar .filter-label { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-right: 4px; } .learn-filter-btn { font-family: var(--mono); font-size: 11.5px; color: var(--muted); background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 12px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .learn-filter-btn:hover, .learn-filter-btn.active { border-color: var(--net); color: var(--net); } /* ── Tutorial card grid ──────────────────────────── */ .learn-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 980px) { .learn-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .learn-grid { grid-template-columns: 1fr; } } .learn-card { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; background: var(--surface); text-decoration: none; color: inherit; transition: border-color 0.18s, transform 0.18s; } .learn-card:hover { border-color: var(--border-strong); transform: translateY(-3px); } .learn-card[hidden] { display: none; } .learn-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .learn-level { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 4px; text-transform: uppercase; } .learn-level.beginner { background: rgba(78,203,113,0.12); color: #4ecb71; } .learn-level.intermediate { background: rgba(245,167,66,0.12); color: #f5a742; } .learn-level.advanced { background: rgba(203,78,78,0.12); color: #cb4e4e; } .learn-duration { font-family: var(--mono); font-size: 11px; color: var(--faint); } .learn-card h3 { font-family: var(--sans); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; line-height: 1.3; margin: 0; } .learn-card p { font-family: var(--mono); font-weight: 300; font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0; flex: 1; } .learn-card-cta { font-family: var(--mono); font-size: 11.5px; color: var(--net); margin-top: 4px; } /* ── Getting-started path ────────────────────────── */ .learn-path { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); } .learn-path-step { display: flex; align-items: flex-start; gap: 20px; padding: 20px 24px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--border); transition: background 0.15s; } .learn-path-step:last-child { border-bottom: none; } .learn-path-step:hover { background: rgba(255,255,255,0.03); } .learn-path-step-num { font-family: var(--mono); font-size: 11px; color: var(--net); letter-spacing: 0.1em; min-width: 28px; padding-top: 2px; } .learn-path-step-body { flex: 1; min-width: 0; } .learn-path-step-body h3 { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin: 0 0 4px; } .learn-path-step-body p { font-family: var(--mono); font-weight: 300; font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0; } .learn-path-step-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; padding-top: 2px; } /* ── Video row on landing ────────────────────────── */ .learn-video-row { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); } @media (max-width: 720px) { .learn-video-row { grid-template-columns: 1fr; } } .learn-video-card { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); text-decoration: none; color: inherit; transition: border-color 0.18s; } .learn-video-card:hover { border-color: var(--border-strong); } /* ── Video facade (click-to-load; no iframe at page paint — M8) ── */ .learn-video-facade { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0a0a0f; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } .learn-video-facade:focus-visible { outline: 2px solid var(--net); outline-offset: 2px; } .learn-video-play { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; } .learn-video-duration { font-family: var(--mono); font-size: 11px; color: var(--muted); } .learn-video-hint { font-family: var(--mono); font-size: 11px; color: var(--faint); } .learn-video-iframe { width: 100%; aspect-ratio: 16 / 9; border: none; display: block; } .learn-video-body { padding: 16px 18px 18px; } .learn-video-body h3 { font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; margin: 0 0 4px; } .learn-video-body p { font-family: var(--mono); font-weight: 300; font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; } .learn-video-transcript-link { font-family: var(--mono); font-size: 11px; color: var(--net); text-decoration: none; display: inline-block; margin-top: 8px; } .learn-video-transcript-link:hover { color: var(--net-hi); } /* ── Tutorial page hero ──────────────────────────── */ .learn-tut-hero { padding: 56px 30px 36px; max-width: var(--maxw); margin: 0 auto; } .learn-tut-hero .breadcrumb { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 22px; } .learn-tut-hero .breadcrumb a { color: var(--net); text-decoration: none; } .learn-tut-hero .breadcrumb a:hover { color: var(--net-hi); } .learn-tut-hero .learn-tut-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 14px; } /* ── Tutorial body ───────────────────────────────── */ .learn-tut-body { max-width: var(--maxw); margin: 0 auto; padding: 0 30px 60px; } .learn-tut-body .readme-p { font-size: 14.5px; line-height: 1.8; margin-bottom: 18px; } .learn-tut-body .readme-h { color: var(--text); margin: 38px 0 14px; } .learn-tut-body .readme-ul, .learn-tut-body .readme-ol { font-size: 14px; color: var(--muted); margin-bottom: 14px; } .learn-tut-body .readme-bq { border-left: 3px solid var(--net); padding: 12px 18px; margin: 24px 0; } .learn-tut-body .readme-bq p { margin: 0; color: var(--text); } .learn-tut-body .readme-code { font-family: var(--mono); font-size: 12.5px; background: #13131a; border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin: 20px 0; overflow-x: auto; display: block; } /* ── Steps panel ─────────────────────────────────── */ .learn-steps-panel { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 20px 24px; margin-bottom: 36px; } .learn-steps-panel h2 { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 16px; } .learn-steps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .learn-steps-list li { display: flex; align-items: flex-start; gap: 14px; font-family: var(--mono); font-size: 13px; color: var(--muted); line-height: 1.55; } .learn-steps-list li .step-n { font-size: 10.5px; color: var(--net); min-width: 22px; padding-top: 1px; letter-spacing: 0.06em; } /* ── Related section (packs + posts) ─────────────── */ .learn-related { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border); } .learn-related h2 { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 16px; } .learn-related-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); } @media (max-width: 560px) { .learn-related-grid { grid-template-columns: 1fr; } } .learn-related-card { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; text-decoration: none; color: inherit; transition: border-color 0.15s; } .learn-related-card:hover { border-color: var(--net); } .learn-related-card-label { font-family: var(--mono); font-size: 10px; color: var(--net); text-transform: uppercase; letter-spacing: 0.1em; } .learn-related-card-title { font-family: var(--sans); font-weight: 700; font-size: 14px; } .learn-related-card-sub { font-family: var(--mono); font-size: 11px; color: var(--faint); } /* ── "How to use" affordance on pack pages ───────── */ .pack-learn-affordance { border: 1px solid rgba(78,203,113,0.18); border-radius: 12px; background: rgba(78,203,113,0.04); padding: 18px 20px; margin-bottom: 28px; } .pack-learn-affordance h2 { font-family: var(--mono); font-size: 11px; color: var(--net); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 12px; } .pack-learn-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .pack-learn-list li a { font-family: var(--mono); font-size: 12.5px; color: var(--net); text-decoration: none; display: flex; align-items: center; gap: 8px; } .pack-learn-list li a:hover { color: var(--net-hi); } .pack-learn-list li a .learn-tut-level { font-size: 10px; color: var(--faint); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; } .pack-learn-list li a .learn-tut-dur { color: var(--faint); } /* ── Ratings & Reviews island (slice 07.01) ────────────────────── Mounts into #ratings-root on pack detail pages. All write-path elements (form, auth modal) are gated by JS; the section is hidden until the island fires (M6 — no flash of broken UI). ── */ .ratings-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); } .ratings-heading { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: 0 0 20px; } .ratings-loading { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; } .ratings-offline-note, .ratings-no-reviews { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: 0; } /* Aggregate block */ .ratings-aggregate { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 28px; } .ratings-avg-block { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 72px; } .ratings-avg-num { font-family: var(--sans); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -0.03em; color: var(--text); } .ratings-count { font-family: var(--mono); font-size: 11px; color: var(--muted); } .ratings-dist { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 160px; } .ratings-bar-row { display: flex; align-items: center; gap: 8px; } .ratings-bar-label { font-family: var(--mono); font-size: 11px; color: var(--muted); min-width: 30px; text-align: right; } .ratings-bar-track { flex: 1; height: 6px; border-radius: 3px; background: var(--border-strong); overflow: hidden; } .ratings-bar-fill { height: 100%; border-radius: 3px; background: var(--star); transition: width 0.4s ease; } .ratings-bar-pct { font-family: var(--mono); font-size: 10px; color: var(--faint); min-width: 32px; } /* Write form */ .rate-form-area { margin-bottom: 28px; } .rate-sign-in-wrap { padding: 14px 0; } .rate-form { border: 1px solid var(--border); border-radius: 12px; padding: 20px; background: var(--surface); display: flex; flex-direction: column; gap: 14px; } .rate-form-heading { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--net); margin: 0; } .star-picker { display: flex; gap: 4px; } .star-picker-btn { background: none; border: none; cursor: pointer; padding: 4px 3px; font-size: 22px; line-height: 1; color: var(--border-strong); transition: color 0.12s, transform 0.1s; border-radius: 4px; } .star-picker-btn:hover, .star-picker-btn:focus-visible { color: var(--star); transform: scale(1.15); outline: 2px solid var(--net); outline-offset: 2px; } .star-picker-btn.is-selected, .star-picker-btn[aria-checked="true"] { color: var(--star); } .rate-textarea { width: 100%; min-height: 88px; resize: vertical; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: var(--mono); font-size: 13px; color: var(--text); line-height: 1.6; } .rate-textarea:focus { outline: none; border-color: var(--net); box-shadow: 0 0 0 2px rgba(78,203,113,0.15); } .rate-textarea::placeholder { color: var(--faint); } .rate-form-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rate-char-count { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-left: auto; } .rate-error { font-family: var(--mono); font-size: 12px; color: #f87171; border: 1px solid rgba(248,113,113,0.3); border-radius: 6px; padding: 8px 12px; } /* Review list */ .review-list { display: flex; flex-direction: column; gap: 0; } .review-item { padding: 18px 0; border-bottom: 1px solid var(--border); } .review-item:last-of-type { border-bottom: none; } .review-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .review-author-block { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .review-author { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--text); } .review-own-badge { font-family: var(--mono); font-size: 10px; color: var(--net); letter-spacing: 0.06em; border: 1px solid var(--net-dim); border-radius: 4px; padding: 1px 6px; } .review-date { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; } .review-hidden-note { font-family: var(--mono); font-size: 11px; color: var(--muted); font-style: italic; margin: 4px 0; } .review-text { font-family: var(--mono); font-size: 13px; color: var(--muted); line-height: 1.65; white-space: pre-line; } .ratings-load-more { margin-top: 16px; } /* Auth modal */ .auth-modal { position: fixed; inset: 0; margin: auto; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: 16px; padding: 32px 28px; color: var(--text); box-shadow: 0 24px 64px rgba(0,0,0,0.6); } .auth-modal::backdrop { background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); } /* Fallback for browsers without