/* Explainer videos: the public library of short videos at /explainers/ and the one public page per video at /explainers//. Both load this file and nothing from the root style.css, so every token is declared here with the platform's values. Layout and colours follow the approved videos mockup, sections 3 to 5, which was drawn while the section was still called "Pass it on" and is not tracked in this repository. Body text on dark is #b8b4c0. */ :root { --bg: #0a0a0b; --bg-card: #111116; --text: #f1f5f9; --silver: #e2e8f0; --muted: #b8b4c0; --meta: #8d8a99; --green: #4ade80; --green2: #22c55e; --blue: #38bdf8; --orange: #f7931a; --border: rgba(226, 232, 240, .08); --radius: 14px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; overflow-x: hidden; } a { color: inherit; } img { max-width: 100%; } /* The page column. The gutter lives here, not on : the shared public chrome is the body's first child and has to run edge to edge. */ .vp { max-width: calc(860px + 2.5rem); margin: 0 auto; padding: 2.5rem 1.25rem 3rem; } .vp.narrow { max-width: calc(620px + 2.5rem); } @media (max-width: 520px) { .vp { padding: 1.75rem 1rem 2.5rem; } } /* ── Intro ─────────────────────────────────────────────────── */ /* No .vp-label rule any more: the eyebrow above the headline was the only thing that used it, and it went with the rename to Explainers. */ .vp-title { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; color: var(--silver); line-height: 1.1; letter-spacing: -.01em; margin-bottom: .8rem; } .vp-intro { color: var(--text); font-size: 1.02rem; line-height: 1.6; } .vp-intro + .vp-intro { margin-top: .6rem; color: var(--muted); font-size: .95rem; } /* ── Shared pieces: poster, pill, meta, buttons ─────────────── */ .poster { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--border); display: block; width: 100%; padding: 0; cursor: pointer; font-family: inherit; color: inherit; text-align: left; } .poster img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The play control sits BOTTOM LEFT, not centred. Every poster frame here is a title card whose words run through the middle of the picture, so a centred button lands straight on the title. Bottom left pairs it with the length badge bottom right and leaves the title readable. */ .poster .play { position: absolute; left: 10px; bottom: 8px; display: flex; align-items: center; justify-content: center; pointer-events: none; } .poster .play span { width: 40px; height: 40px; border-radius: 50%; background: rgba(10, 10, 11, .78); border: 1px solid rgba(226, 232, 240, .35); display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 15px; padding-left: 3px; transition: background .15s, transform .15s; } .poster:hover .play span { background: rgba(10, 10, 11, .9); transform: scale(1.06); } .poster .len { position: absolute; right: 8px; bottom: 8px; font-size: 11px; font-weight: 600; background: rgba(10, 10, 11, .8); color: var(--text); padding: 2px 7px; border-radius: 6px; pointer-events: none; } .poster:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .poster iframe { display: block; width: 100%; height: 100%; border: 0; } .newpill { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(226, 232, 240, .14); color: var(--silver); padding: .12rem .5rem; border-radius: 999px; } .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .78rem; color: var(--meta); margin-top: 10px; align-items: center; } .meta .j { display: inline-flex; align-items: center; gap: 5px; } .meta .j i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .j-money i { background: var(--green2); } .j-ai i { background: var(--blue); } .j-bitcoin i { background: var(--orange); } .j-all i { background: linear-gradient(90deg, #22c55e, #38bdf8, #f7931a); } .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-weight: 700; font-size: .85rem; line-height: 1.2; padding: .55rem .95rem; border-radius: 8px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s, transform .15s; } .btn-primary { background: var(--silver); color: #0a0a0b; } .btn-primary:hover { background: #f8fafc; transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--text); border-color: rgba(226, 232, 240, .22); } .btn-ghost:hover { border-color: rgba(226, 232, 240, .5); background: rgba(226, 232, 240, .05); } .btn-ghost.done { color: var(--green2); border-color: rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .1); } .btn svg { width: 15px; height: 15px; flex-shrink: 0; } .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .btn-lg { font-size: 1rem; padding: .85rem 1.6rem; } .yt { font-size: .78rem; color: var(--meta); text-decoration: none; margin-left: 4px; } .yt:hover { color: var(--muted); } /* ── The wide card, used for the explainer and for the overview ── */ .hero { margin-top: 2.5rem; display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; background: linear-gradient(135deg, #16161f 0%, #121218 100%); border: 1px solid rgba(226, 232, 240, .3); border-radius: var(--radius); padding: 18px; align-items: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient(180deg, var(--green), var(--blue), var(--orange)); } @media (max-width: 700px) { .hero { grid-template-columns: 1fr; } } /* Inside a block the section header already carries the space above the card. */ .grp > .hero { margin-top: 0; } /* The overview at the foot of the page: the same shape, on the quieter card surface, so the explainer at the top stays the one that reads as featured. */ .hero.hero-wide { background: var(--bg-card); border-color: var(--border); } .hero .newpill { margin-bottom: 8px; } .hero h2 { font-size: 1.35rem; font-weight: 700; color: var(--silver); line-height: 1.2; margin-bottom: 6px; } .hero p { color: var(--muted); font-size: .92rem; line-height: 1.5; } /* ── Groups and the card grid ──────────────────────────────── */ .grp { margin-top: 2.6rem; } /* The explainer block is the first thing on the page, so it takes the column's own top padding rather than adding to it, and the intro that follows the hero needs the same air a block would get. */ #video-lead .grp:first-child { margin-top: 0; } #video-lead:not(:empty) + .vp-title { margin-top: 2.6rem; } .grp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid #33333f; } .section-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text); } .grp-head .n { font-size: .78rem; color: var(--meta); text-align: right; } .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } /* Three across: the journey tours read as one row of three under the wide whole-platform card. They drop to two across before the cards get too narrow to read, then to one. */ .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } /* A wide card with a row under it inside one block, which is the platform block since 2026-09-14. The grid carries no margin of its own, so without this the row touches the card. Matched to the row's own 14px gap, so the space above the first card equals the space between the cards. */ .hero + .grid { margin-top: 14px; } @media (max-width: 820px) { .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid.three { grid-template-columns: 1fr; } } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } } .vc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 12px 14px; position: relative; overflow: hidden; transition: border-color .15s, background .15s; min-width: 0; } .vc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .vc.money::before { background: var(--green2); } .vc.ai::before { background: var(--blue); } .vc.bitcoin::before { background: var(--orange); } .vc.all::before { background: linear-gradient(90deg, #22c55e, #38bdf8, #f7931a); } .vc:hover { border-color: rgba(226, 232, 240, .3); background: #16161e; } .vc h3 { font-size: 1rem; font-weight: 700; color: var(--silver); margin: 12px 0 4px; line-height: 1.25; } .vc p { font-size: .86rem; color: var(--muted); line-height: 1.5; } .vc .acts { margin-top: 10px; } .vc .btn { font-size: .78rem; padding: .42rem .75rem; } .vc .newpill { position: absolute; top: 20px; left: 20px; z-index: 1; background: rgba(10, 10, 11, .85); border: 1px solid rgba(226, 232, 240, .3); } /* ── The single video page ─────────────────────────────────── */ .pub h1 { font-size: clamp(1.35rem, 3.5vw, 1.7rem); font-weight: 700; color: var(--silver); margin: 16px 0 6px; line-height: 1.2; letter-spacing: -.01em; } .pub .line { color: var(--muted); font-size: .95rem; line-height: 1.55; } .pub .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; justify-content: space-between; } .pub .note { font-size: .8rem; color: var(--meta); } .pub .more { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); } .pub .more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .pub .more-head .section-label { color: var(--muted); } .pub .all { font-size: .8rem; color: var(--muted); text-decoration: none; white-space: nowrap; } .pub .all:hover { color: var(--text); } .pub .mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } @media (max-width: 480px) { .pub .mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pub .mini a { text-decoration: none; display: block; min-width: 0; } .pub .mini .poster { border-radius: 8px; cursor: pointer; } .pub .mini .poster .play { left: 6px; bottom: 6px; } .pub .mini .poster .play span { width: 28px; height: 28px; font-size: 11px; padding-left: 2px; } .pub .mini .t { font-size: .78rem; color: var(--silver); margin-top: 6px; font-weight: 600; line-height: 1.25; } .pub .mini a:hover .t { text-decoration: underline; text-underline-offset: 3px; } /* The lightbox on THIS page carries no call to action: see the note in index.html. The shared module always renders its anchor, so it is hidden here rather than by changing the module. */ .sp-lb-row .pio-no-cta { display: none; } /* ── Page foot: the payoff and the one primary door ────────── */ .vp-foot { margin-top: 3rem; text-align: center; } .vp-foot .btn-primary { margin-top: .25rem; } /* The payoff line, rendered by /_shared/payoff.js. These rules mirror .payoff in the root style.css, which this page does not load; keep them in step. */ .payoff { font-weight: 800; text-align: center; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--text); max-width: 52rem; margin: 0 auto 1.75rem; text-wrap: balance; } .payoff-money { color: var(--green2); } .payoff-ai { color: var(--blue); } .payoff-bitcoin { color: var(--orange); } .pub .payoff { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; } /* ── Toast for "Copy link" ─────────────────────────────────── */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: 60; display: inline-flex; align-items: center; gap: 10px; background: #18181b; border: 1px solid rgba(226, 232, 240, .25); border-radius: 10px; padding: 10px 14px; font-size: .86rem; color: var(--silver); box-shadow: 0 8px 32px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; max-width: calc(100vw - 32px); } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast .ok { width: 18px; height: 18px; border-radius: 50%; background: var(--green2); color: #0a0a0b; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; } /* Empty state while videos.json loads or if it fails. */ .vp-empty { margin-top: 2.5rem; color: var(--muted); font-size: .95rem; }