/* boonvid — YouTube Automation page (youtube-automation.html). Built on site.css (tokens, type, buttons, reveal, FAQ, closing). Everything here follows Light / Dark / Auto through the site tokens; video frames stay dark in both themes. Motion: scroll-linked parts read --t0 / --t1 (0..1, set by youtube-automation.js) and only change transform and opacity. Without .motion on (prefers-reduced-motion, or no JS) the page is a plain, static, readable layout. */ .ya { --ya-navy: #10233b; --ya-navy-2: #17314f; --ya-red: #ff0000; overflow-x: clip; } .ya-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .ya-head { max-width: 920px; margin: 0 auto clamp(40px, 6vw, 72px); } .ya-head:not(.center) { margin-inline: 0; } .ya-head .lead { margin-top: 18px; } .ya-head.center .lead { margin-inline: auto; } .ya-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; } .ya-src { margin-top: 18px; font-size: 13px; } .ya-src a { color: var(--muted); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--hair); } .ya-src a:hover { color: var(--accent); text-decoration-color: currentColor; } .ya-src a::after { content: " ↗"; } /* the logo is black artwork: inverted in dark mode like the header logo */ :root[data-theme="dark"] .ya img[src$="logo-720.png"] { filter: invert(1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ya img[src$="logo-720.png"] { filter: invert(1); } } /* shared little glyphs: a script page, a waveform, a finished video frame */ .ya-g { display: grid; place-items: center; } .ya-g-script { display: flex; flex-direction: column; justify-content: center; gap: 4px; } .ya-g-script i { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--muted); } .ya-g-script i:last-child { width: 13px; } .ya-wave { display: flex; align-items: center; gap: 2px; height: 22px; color: var(--accent); overflow: hidden; } .fv-voice .ya-wave, .fv-tr-a .ya-wave, .yed-voice .ya-wave, .ex-voice .ya-wave, .sv-voice .ya-wave { gap: 1px; } .ya-wave i { flex: 1 1 0; min-width: 0; height: var(--h, 50%); border-radius: 2px; background: currentColor; } .ya-g-voice.ya-wave { width: auto; padding: 0 12px; } .ya-g-video { position: relative; } .ya-g-video::before { content: ""; width: 24px; height: 15px; border: 2px solid var(--ink); border-radius: 4px; } .ya-g-video::after { content: ""; position: absolute; left: 50%; bottom: 13px; width: 14px; margin-left: -9px; height: 2px; border-radius: 2px; background: var(--accent); } .fv-lines { display: grid; gap: 7px; } .fv-lines i { display: block; height: 6px; border-radius: 3px; background: var(--hair); } .fv-lines i:nth-child(2) { width: 88%; } .fv-lines i:nth-child(3) { width: 94%; } .fv-lines i:nth-child(4) { width: 70%; } .fv-lines i:nth-child(5) { width: 52%; } .fv-bar { position: absolute; left: 4%; right: 4%; bottom: 6%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); } .fv-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; border-radius: 2px; background: #fff; } .ya .c.th1 { background: #33507a url(assets/yt/footage-arrow.webp) center / cover; } .ya .c.th2 { background: #1a3657 url(assets/yt/map-city.webp) center / cover; } .ya .c.th3 { background: #3b5575 url(assets/yt/photo-card.webp) center / cover; } .ya .c.th4 { background: #17314f url(assets/yt/timeline.webp) center / cover; } /* ================= 1 hero ================= */ .ya-hero { position: relative; padding: clamp(56px, 9vw, 124px) 0 clamp(56px, 8vw, 110px); background: radial-gradient(ellipse 80% 70% at 50% 0%, var(--baby-3), transparent 70%); } .ya-hero-in { display: grid; justify-items: center; gap: 24px; text-align: center; } .ya-hero-eb { margin: 0; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; } .ya-hero-t { max-width: 13em; font-family: var(--display); font-weight: 600; font-size: clamp(40px, 6.6vw, 96px); letter-spacing: -.04em; line-height: 1.05; padding-bottom: .05em; text-wrap: balance; } .ya-hero-b { margin-inline: auto; max-width: 40ch; } .ya-hero .ya-actions { margin-top: 6px; } .ya-link { --tile: 84px; --node: 48px; display: grid; grid-template-columns: var(--tile) minmax(0, 1fr) var(--tile); align-items: start; gap: 22px; max-width: 900px; margin-top: clamp(56px, 8vw, 96px); } .ya-end { display: grid; justify-items: center; gap: 12px; } .ya-end small { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; text-align: center; } .ya-play, .ya-b { position: relative; width: var(--tile); height: var(--tile); border-radius: 24px; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow); display: grid; place-items: center; overflow: hidden; } .ya-play svg { width: 46%; height: auto; } .ya-b img { position: absolute; height: 76%; width: auto; max-width: none; top: 12%; left: 20%; clip-path: inset(0 77.6% 0 0); } /* only the B of the wordmark */ .ya-rail { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: calc((var(--tile) - var(--node)) / 2); } .ya-rail-line { position: absolute; left: -14px; right: -14px; top: calc(var(--tile) / 2 - 1px); height: 2px; border-radius: 2px; background: var(--hair); overflow: hidden; } .ya-rail-line > i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--t0, 1)); } .ya-node { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; } .ya-node > .ya-g { width: var(--node); height: var(--node); border-radius: 15px; background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) calc(var(--t0, 1) * 55%), var(--hair)); box-shadow: var(--shadow); } .ya-node > .ya-g-voice { width: auto; min-width: var(--node); } .ya-node b { font-size: 13px; font-weight: 600; line-height: 1.25; } .motion .ya-node { opacity: calc(.55 + .45 * var(--t0, 1)); transform: translateY(calc((1 - var(--t0, 1)) * 8px)); } .motion .ya-link { animation: ya-rise .9s var(--ease) .5s both; } @keyframes ya-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ================= 2 what it is ================= */ .ya-what { padding-top: var(--sec); } .ya-h1 { font-size: clamp(40px, 6vw, 84px); } .ya-pipe { list-style: none; margin: 0 auto; padding: 0; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1040px; } .ya-pipe::before, .ya-pipe::after { content: ""; position: absolute; top: 31px; left: 8.3%; right: 8.3%; height: 2px; border-radius: 2px; background: var(--hair); } .ya-pipe::after { background: var(--accent); transform-origin: left; } .ya-st { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 0 4px; } .ya-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow); } .ya-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ya-st.is-bv .ya-ico { background: var(--ink); border-color: var(--ink); } .ya-st.is-bv .ya-ico svg { stroke: var(--on-ink); } .ya-st.is-aud .ya-ico { background: var(--baby-2); border-color: var(--baby); } .ya-st b { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere; } .motion .ya-pipe::after { transform: scaleX(0); transition: transform 1.6s var(--ease) .2s; } .motion .ya-pipe.in::after { transform: scaleX(1); } .motion .ya-pipe .ya-st { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .motion .ya-pipe.in .ya-st { opacity: 1; transform: none; } .motion .ya-pipe.in .ya-st:nth-child(2) { transition-delay: .22s; } .motion .ya-pipe.in .ya-st:nth-child(3) { transition-delay: .44s; } .motion .ya-pipe.in .ya-st:nth-child(4) { transition-delay: .66s; } .motion .ya-pipe.in .ya-st:nth-child(5) { transition-delay: .88s; } .motion .ya-pipe.in .ya-st:nth-child(6) { transition-delay: 1.1s; } .ya-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 32px 0 0; font-size: 13px; color: var(--muted); } .ya-keys span { display: inline-flex; align-items: center; gap: 8px; } .ya-keys span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--ink); } .ya-keys .k-bv::before { background: var(--ink); } .ya-keys .k-aud::before { background: var(--baby-2); border-color: var(--baby-deep); } .ya-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 920px; margin: 64px auto 0; } .ya-side { border-radius: var(--r); padding: clamp(26px, 3.4vw, 40px); background: var(--paper); } .ya-side-bv { background: var(--baby-2); box-shadow: inset 0 0 0 1px var(--baby); } .ya-side-t { font-size: 30px; margin-bottom: 18px; min-height: 32px; display: flex; align-items: center; } .ya-side-logo { height: 30px; width: auto; } .ya-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 18px; font-weight: 500; } .ya-checks li::before { content: "✓"; margin-right: 12px; color: var(--accent); font-weight: 700; } .ya-side-sub { margin-top: 16px; color: var(--muted); font-size: 15px; max-width: 34ch; } /* ================= scroll-linked sections (flow, hard, example) — shared ================= */ .ya-scrub { position: relative; margin-top: var(--sec); } .ya-stage-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; } .ya-says { display: grid; gap: 30px; margin-top: 4px; } .ya-say h2, .ya-say h3 { font-size: clamp(30px, 3.4vw, 50px); letter-spacing: -.035em; line-height: 1.08; } .ya-say p { margin-top: 12px; color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); max-width: 36ch; } .ya-dots { display: none; list-style: none; margin: 30px 0 0; padding: 0; gap: 8px; } .ya-dots li { width: 7px; height: 7px; border-radius: 4px; background: var(--hair); transition: width .35s var(--ease), background .35s; } .ya-vis { position: relative; container-type: size; width: 100%; min-width: 0; } /* static layout (reduced motion): the visual has its own size, all copy blocks are stacked */ .ya-fv, .ya-exv { aspect-ratio: 5 / 4; } .ya-ed { aspect-ratio: 16 / 9; margin-top: 36px; } .motion .ya-flow { height: 330vh; } .motion .ya-hard { height: 470vh; } .motion .ya-ex { height: 390vh; } .motion .ya-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding: 76px 0 24px; overflow: hidden; } .motion .ya-stage-in { height: min(100%, 720px); } .motion .ya-fv, .motion .ya-exv { aspect-ratio: auto; height: min(100%, 640px); } .motion .ya-says { display: grid; gap: 0; } .motion .ya-say { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); } .motion .ya-dots { display: flex; } .motion [data-phase="0"] .ya-say[data-k="0"], .motion [data-phase="1"] .ya-say[data-k="1"], .motion [data-phase="2"] .ya-say[data-k="2"], .motion [data-phase="3"] .ya-say[data-k="3"], .motion [data-phase="4"] .ya-say[data-k="4"], .motion [data-phase="5"] .ya-say[data-k="5"] { opacity: 1; transform: none; } .motion [data-phase="0"] .ya-dots li:nth-child(1), .motion [data-phase="1"] .ya-dots li:nth-child(2), .motion [data-phase="2"] .ya-dots li:nth-child(3), .motion [data-phase="3"] .ya-dots li:nth-child(4), .motion [data-phase="4"] .ya-dots li:nth-child(5), .motion [data-phase="5"] .ya-dots li:nth-child(6) { width: 24px; background: var(--accent); } /* ================= 3 flow visual ================= */ .ya-fv { border-radius: 28px; background: var(--paper); overflow: hidden; } .fv-card { position: absolute; left: 6cqw; width: 42cqw; padding: 2.6cqh 3cqw; border-radius: 16px; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow); display: grid; gap: 1.4cqh; } .fv-card small, .yed-doc small, .yed-voice small, .ex-card small { font-size: clamp(10px, 2.1cqw, 12px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .fv-idea { top: 7cqh; } .fv-idea b { font-size: clamp(14px, 3.3cqw, 22px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; } .fv-script { top: 34cqh; } .fv-voice { top: 62cqh; } .fv-voice .ya-wave { height: 7cqh; } .fv-bv { position: absolute; left: 54cqw; top: 8cqh; width: 40cqw; height: 22cqh; border-radius: 18px; background: var(--card); border: 1px solid var(--baby-deep); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent), var(--shadow); display: grid; place-items: center; } .fv-bv img { width: 58%; height: auto; } .fv-tl { position: absolute; left: 6cqw; width: 88cqw; top: 62cqh; height: 30cqh; padding: 2.2cqh 2cqw; border-radius: 16px; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow); display: grid; grid-template-rows: 1.5fr 1fr 1fr; gap: 1.4cqh; } .fv-tr { position: relative; display: flex; gap: 3px; min-height: 0; } .fv-tr .c { flex: 1 1 0; border-radius: 5px; background: #2d5a8e; transform-origin: left; } .fv-tr-t .c { background: var(--baby); } .fv-tr-t .c:nth-child(2) { flex-grow: 1.6; } .fv-tr-a .ya-wave { height: 100%; width: 100%; } .fv-head { position: absolute; top: 1.2cqh; bottom: 1.2cqh; left: calc(2cqw + var(--t1, 1) * 80cqw); width: 2px; background: var(--ya-red); border-radius: 1px; } .fv-video { position: absolute; left: 6cqw; top: 6cqh; width: 88cqw; aspect-ratio: 16 / 9; max-height: 52cqh; border-radius: 16px; overflow: hidden; background: var(--ya-navy); box-shadow: var(--shadow-lg); transform-origin: 80% 20%; } .fv-video img { width: 100%; height: 100%; object-fit: cover; } .fv-ready { position: absolute; left: 4%; top: 7%; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.92); color: #1d1d1f; font-size: 12px; font-weight: 600; } .fv-ready::before { content: "✓ "; color: #1f7ae0; } /* scroll-linked states (defaults = the final frame) */ .fv-idea { opacity: calc(var(--t0, 1) * (1 - var(--t1, 1))); transform: translateY(calc((1 - var(--t0, 1)) * 4cqh)) scale(calc(1 - var(--t1, 1) * .08)); } .fv-script { opacity: calc(var(--t0, 1) * (1 - var(--t1, 1) * var(--t1, 1))); transform: translate(calc(var(--t1, 1) * 47cqw), calc(var(--t1, 1) * -23cqh + (1 - var(--t0, 1)) * 4cqh)) scale(calc(1 - var(--t1, 1) * .8)); } .fv-voice { opacity: calc(var(--t0, 1) * (1 - var(--t1, 1) * var(--t1, 1))); transform: translate(calc(var(--t1, 1) * 47cqw), calc(var(--t1, 1) * -48cqh + (1 - var(--t0, 1)) * 4cqh)) scale(calc(1 - var(--t1, 1) * .8)); } .fv-bv { opacity: calc(var(--t0, 1) * (1 - var(--t1, 1))); transform: scale(calc(.9 + .1 * var(--t0, 1))); } .fv-tl { opacity: var(--t0, 1); transform: translateY(calc((1 - var(--t0, 1)) * 5cqh)); } .fv-tr .c { transform: scaleX(clamp(0, calc(var(--t1, 1) * 4.4 - var(--n, 0)), 1)); } .fv-tr .c:nth-child(2) { --n: 1; } .fv-tr .c:nth-child(3) { --n: 2; } .fv-tr .c:nth-child(4) { --n: 3; } .fv-video { opacity: var(--t0, 1); transform: scale(calc(.4 + .6 * var(--t0, 1))); } /* ================= 4 money ================= */ .ya-money { padding-top: var(--sec); } .ya-mflow { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 980px; } .ya-mflow li { position: relative; display: grid; justify-items: center; align-content: start; gap: 14px; text-align: center; padding: 0 6px; } .ya-mflow li:not(:last-child)::after { content: ""; position: absolute; top: 31px; left: calc(50% + 46px); right: calc(-50% + 46px); height: 2px; background: linear-gradient(90deg, var(--hair), var(--baby-deep)); } .ya-mflow li:not(:last-child)::before { content: ""; position: absolute; top: 27px; right: calc(-50% + 46px); width: 8px; height: 8px; border-top: 2px solid var(--baby-deep); border-right: 2px solid var(--baby-deep); transform: rotate(45deg); } .ya-mflow b { font-size: 15px; font-weight: 600; } .ya-mico { width: 64px; height: 64px; border-radius: 20px; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow); position: relative; } .ya-mico::before { content: ""; position: absolute; inset: 0; background: var(--ink); -webkit-mask: var(--m) center / 30px no-repeat; mask: var(--m) center / 30px no-repeat; } .mi-video { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='11' rx='2.5'/%3E%3Cpath d='M3 19.5h18M7 19.5h4'/%3E%3C/svg%3E"); } .mi-viewer { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 20c.9-3.6 3.6-5.5 7-5.5s6.1 1.9 7 5.5'/%3E%3C/svg%3E"); } .mi-ads { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='6.5' y='4' width='14' height='9' rx='2'/%3E%3Crect x='3.5' y='10' width='14' height='9' rx='2' fill='%23000' fill-opacity='.15'/%3E%3C/svg%3E"); } .mi-rev { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 20h16M7 16.5v-4M12 16.5V8M17 16.5V5'/%3E%3C/svg%3E"); } .ya-mflow-end .ya-mico { background: var(--baby-2); border-color: var(--baby); } .ya-mflow-end .ya-mico::before { background: var(--accent-ink); } .motion .ya-mflow li { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .motion .ya-mflow.in li { opacity: 1; transform: none; } .motion .ya-mflow.in li:nth-child(2) { transition-delay: .25s; } .motion .ya-mflow.in li:nth-child(3) { transition-delay: .5s; } .motion .ya-mflow.in li:nth-child(4) { transition-delay: .75s; } .ya-money-b { margin: 48px auto 0; max-width: 46ch; } .ya-mcards { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .ya-mcards li { padding: 24px; border-radius: var(--r-s); background: var(--paper); } .ya-mcards h3 { font-size: 18px; letter-spacing: -.015em; } .ya-mcards p { margin-top: 8px; font-size: 15px; color: var(--muted); line-height: 1.45; } .ya-lines { margin-top: clamp(90px, 10vw, 150px); display: grid; gap: 6px; text-align: center; } .ya-lines p { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 4.2vw, 58px); letter-spacing: -.035em; line-height: 1.12; } .ya-lines p:last-child { color: var(--accent); } .motion .ya-lines p { opacity: .12; transform: translateY(10px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .motion .ya-lines.go p { opacity: 1; transform: none; } .motion .ya-lines.go p:nth-child(2) { transition-delay: .6s; } .motion .ya-lines.go p:nth-child(3) { transition-delay: 1.2s; } /* ================= 5 signature: the editing timeline ================= */ .ya-stage-rows { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; } .ya-hard .ya-copy { max-width: 760px; } .ya-hard .ya-say h2 { font-size: clamp(28px, 3.2vw, 46px); } .ya-hard .ya-say p { max-width: 52ch; margin-top: 10px; } .motion .ya-hard .ya-stage-in { grid-template-rows: auto minmax(0, 1fr); height: 100%; max-height: 860px; } .motion .ya-hard .ya-dots { margin-top: 18px; } .motion .ya-ed { aspect-ratio: auto; height: 100%; margin: 0; } .yed-frame { position: absolute; inset: 0; border-radius: 18px; background: #18191d; border: 1px solid #2a2b31; overflow: hidden; box-shadow: var(--shadow-lg); color: #9a9ba3; font-size: clamp(8px, 1cqw, 12px); } .yed-top { position: absolute; left: 0; right: 0; top: 0; height: 7%; display: flex; align-items: center; gap: 1.6%; padding: 0 1.4%; border-bottom: 1px solid #2a2b31; white-space: nowrap; overflow: hidden; } .yed-top > i { width: 9px; height: 9px; border-radius: 50%; background: #3a3b42; flex: none; } .yed-top > span { flex: none; width: 3.2em; height: .55em; border-radius: 3px; background: #2e3037; } .yed-top > span:nth-of-type(2n) { width: 4.4em; } .yed-top em { margin-left: auto; font-style: normal; color: #e7e7ea; font-variant-numeric: tabular-nums; } .yed-bin { position: absolute; left: 0; top: 7%; width: 20%; height: 43%; padding: 1% 1.2%; border-right: 1px solid #2a2b31; display: grid; align-content: start; gap: 1.2cqh; overflow: hidden; } .yed-bin span { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: calc(var(--t0, 1)); } .yed-bin span i { width: 13px; height: 10px; border-radius: 2px; background: #58606e; flex: none; } .yed-bin span b, .yed-fx span b { display: block; width: var(--w, 60%); height: .6em; border-radius: 3px; background: #33353c; } .yed-mon { position: absolute; left: 21%; top: 9%; width: 50%; height: 39%; border-radius: 6px; overflow: hidden; background: #000; } .yed-mon img { width: 100%; height: 100%; object-fit: cover; } .yed-mon em { position: absolute; right: 2%; bottom: 4%; font-style: normal; color: #fff; font-variant-numeric: tabular-nums; background: rgba(0,0,0,.55); padding: 2px 6px; border-radius: 4px; } .yed-fx { position: absolute; left: 72.5%; top: 9%; width: 26%; height: 39%; display: grid; align-content: start; gap: 2.2cqh; } .yed-fx span { display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 6px; } .yed-fx span i { position: relative; height: 3px; border-radius: 2px; background: #33353c; } .yed-fx span i::after { content: ""; position: absolute; left: var(--v); top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #c9cbd1; transform: translateX(-50%); } .yed-tl { position: absolute; left: 0; right: 0; top: 50%; bottom: 0; border-top: 1px solid #2a2b31; } .yed-ruler { position: absolute; left: 6%; right: 0; top: 0; height: 7%; display: flex; justify-content: space-between; padding: 0 .5%; font-size: .85em; color: #6a6b73; overflow: hidden; } .yed-ruler i { font-style: normal; white-space: nowrap; } .yed-tracks { position: absolute; left: 0; right: 0; top: 9%; bottom: 3%; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 2px; } .yed-tr { display: grid; grid-template-columns: 6% 1fr; min-height: 0; transform-origin: 50% 100%; opacity: calc(var(--t0, 1) * (1 - var(--t1, 1))); transform: scaleY(calc(1 - var(--t1, 1) * .9)); } .yed-tr > span { display: flex; align-items: center; padding-left: 18%; background: #212227; color: #8a8b93; font-weight: 600; } .yed-tr > div { position: relative; background: #1d1e22; } .yed-tr .c { position: absolute; top: 10%; bottom: 10%; border-radius: 3px; transform-origin: left; transform: scaleX(var(--t0, 1)); } .yed-v .c { background-color: #3b67a8; } .yed-t .c { background: #b3883e; } .yed-s .c { background: #676877; } .yed-a .c { background: #2f8a60; } .yed-tr:nth-last-child(2) .c { background: #3c9e8c; } .yed-tr:last-child .c { background: #7d6bb8; } .yed-play { position: absolute; top: 0; bottom: 0; left: calc(6% + var(--t0, 1) * 70%); width: 2px; background: #ff4b4b; opacity: calc(1 - var(--t1, 1)); } .yed-doc, .yed-voice, .yed-bv { position: absolute; border-radius: 16px; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow-lg); } .yed-doc { left: 20%; top: 22%; width: 24%; height: 48%; padding: 2.4% 2.2%; display: grid; align-content: start; gap: 2cqh; } .yed-doc .fv-lines i { height: max(5px, 1.3cqh); } .yed-voice { left: 54%; top: 34%; width: 30%; height: 24%; padding: 2% 2.2%; display: grid; align-content: start; gap: 1.6cqh; } .yed-voice .ya-wave { height: 10cqh; } .yed-bv { left: 38%; top: 30%; width: 24%; height: 30%; display: grid; place-items: center; border-color: var(--baby-deep); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent), var(--shadow-lg); } .yed-bv img { width: 64%; height: auto; } .yed-out { position: absolute; left: 50%; top: 50%; width: min(68cqw, 150cqh); aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--ya-navy); box-shadow: var(--shadow-lg); } .yed-out img { width: 100%; height: 100%; object-fit: cover; } /* scroll-linked states (defaults = final frame: only the finished video) */ .yed-frame { opacity: calc(1 - var(--t0, 1)); } .yed-top { opacity: calc(1 - var(--t0, 1)); } .yed-mon { opacity: calc(1 - var(--t0, 1)); } .yed-fx { opacity: calc(1 - var(--t0, 1)); } .yed-bin { opacity: calc(1 - var(--t0, 1)); } /* the script card only appears once the timeline starts to collapse (t0 of .3–.5), never on top of the full editor */ .yed-doc { opacity: calc(var(--t0, 1) * (1 - var(--t1, 1) * var(--t1, 1))); transform: translate(calc((1 - var(--t0, 1)) * -21cqw + var(--t1, 1) * 17cqw), calc((1 - var(--t0, 1)) * -8cqh)) scale(calc((.5 + .5 * var(--t0, 1)) * (1 - .85 * var(--t1, 1)))); } .yed-voice { opacity: calc(var(--t0, 1) * (1 - var(--t1, 1) * var(--t1, 1))); transform: translate(calc(var(--t1, 1) * -19cqw), calc((1 - var(--t0, 1)) * 34cqh)) scale(calc((.9 + .1 * var(--t0, 1)) * (1 - .85 * var(--t1, 1)))); } .yed-bv { opacity: calc(var(--t0, 1) * (1 - var(--t1, 1))); transform: scale(calc((.8 + .2 * var(--t0, 1)) * (1 + .15 * var(--t1, 1)))); } .yed-out { opacity: var(--t0, 1); transform: translate(-50%, -50%) scale(calc(.3 + .7 * var(--t0, 1))); } /* reduced motion: the end state beside the still of the full timeline (script + voice -> boonvid -> finished video) */ .ya-ed-after { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin-top: 8px; } .motion .ya-ed-after { display: none; } .yea-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .yea-card { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow); font-size: 15px; font-weight: 600; } .yea-card .ya-g-script i { width: 16px; } .yea-card .ya-wave { width: 40px; height: 18px; padding: 0; } .yea-arrow { position: relative; width: 36px; height: 2px; background: var(--baby-deep); flex: none; } .yea-arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--baby-deep); border-right: 2px solid var(--baby-deep); transform: rotate(45deg); } .yea-bv { padding: 16px 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--baby-deep); box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow); } .yea-bv img { display: block; height: 26px; width: auto; } .yea-out { position: relative; width: min(280px, 100%); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--ya-navy); box-shadow: var(--shadow-lg); } .yea-out img { width: 100%; height: 100%; object-fit: cover; } .yea-out b { position: absolute; left: 10px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; } @media (max-width: 640px) { /* phones: the end still as a column, arrows point down */ .ya-ed-after { flex-direction: column; gap: 14px; } .yea-arrow { width: 2px; height: 24px; } .yea-arrow::after { right: -4px; top: auto; bottom: 0; transform: rotate(135deg); } } @container (max-width: 620px) { .yed-bin, .yed-fx, .yed-top span, .yed-ruler { display: none; } .yed-mon { left: 3%; width: 94%; } .yed-tr { grid-template-columns: 11% 1fr; } .yed-doc { left: 5%; width: 42%; top: 24%; height: 44%; transform: translate(calc((1 - var(--t0, 1)) * -3cqw + var(--t1, 1) * 24cqw), calc((1 - var(--t0, 1)) * -10cqh)) scale(calc((.5 + .5 * var(--t0, 1)) * (1 - .85 * var(--t1, 1)))); } .yed-voice { left: 53%; width: 42%; transform: translate(calc(var(--t1, 1) * -24cqw), calc((1 - var(--t0, 1)) * 34cqh)) scale(calc((.9 + .1 * var(--t0, 1)) * (1 - .85 * var(--t1, 1)))); } .yed-bv { left: 30%; width: 40%; } .yed-out { width: 92cqw; } } /* ================= 6 story: where boonvid fits ================= */ .ya-story { padding-top: var(--sec); } .ya-story-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .ya-sflow { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; } .ya-sflow > li { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .ya-sflow > li + li::before { content: ""; position: absolute; left: 50%; top: -28px; width: 2px; height: 22px; background: var(--baby-deep); border-radius: 2px; } .ya-sflow > li + li::after { content: ""; position: absolute; left: 50%; top: -12px; width: 7px; height: 7px; margin-left: -2.5px; border-right: 2px solid var(--baby-deep); border-bottom: 2px solid var(--baby-deep); transform: rotate(45deg); } .sf-in span, .sf-done { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow); font-size: 15px; font-weight: 600; } .sf-in .ya-g-script i { width: 16px; } .sf-in .ya-wave { width: 40px; height: 18px; padding: 0; } .sf-in span::after { content: "✓"; color: var(--accent); font-weight: 700; } .sf-bv { padding: 20px 34px; border-radius: 18px; background: var(--card); border: 1px solid var(--baby-deep); box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow); justify-self: center; width: max-content; margin-inline: auto; } .sf-bv img { height: 30px; width: auto; } .sf-out span { padding: 8px 14px; border-radius: 999px; background: var(--baby-2); color: var(--accent-ink); font-size: 14px; font-weight: 600; } .sf-done { margin-inline: auto; padding: 14px 20px; } .sf-done .ya-g-video::after { bottom: 3px; } .sf-done .ya-g-video::before { width: 22px; height: 14px; } .ya-ui { margin: 0; } .ya-ui img { width: 100%; height: auto; border-radius: 14px; } .ya-ui figcaption { margin-top: 14px; } /* ================= 7 tasks collapse ================= */ .ya-tasks { padding-top: var(--sec); } .ya-tk { position: relative; max-width: 880px; margin: 0 auto; } .ya-tk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .ya-tk-list li { display: grid; place-items: center; min-height: 64px; padding: 10px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow); text-align: center; font-size: 16px; font-weight: 600; letter-spacing: -.01em; } .ya-tk-bv { display: flex; justify-content: center; align-items: center; width: max-content; margin: 28px auto 0; padding: 20px 36px; border-radius: 20px; background: var(--card); border: 1px solid var(--baby-deep); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow-lg); } .ya-tk-bv img { height: 34px; width: auto; } .ya-tk-b { margin: 40px auto 0; max-width: 40ch; } .motion .ya-tk-bv { position: absolute; left: 50%; top: 50%; margin: 0; opacity: 0; transform: translate(-50%, -50%) scale(.6); } .motion .ya-tk-list li { opacity: 0; } .motion .ya-tk.go .ya-tk-list li { animation: ya-tk-in .5s var(--ease) forwards, ya-tk-out .7s var(--ease) forwards; animation-delay: calc(var(--i) * .1s), calc(1.7s + var(--i) * .04s); } .motion .ya-tk.go .ya-tk-bv { animation: ya-tk-bv .8s var(--ease) 2.2s forwards; } .ya-tk-list li:nth-child(1) { --i: 0; --x: 150%; --y: 60%; } .ya-tk-list li:nth-child(2) { --i: 1; --x: 50%; --y: 60%; } .ya-tk-list li:nth-child(3) { --i: 2; --x: -50%; --y: 60%; } .ya-tk-list li:nth-child(4) { --i: 3; --x: -150%; --y: 60%; } .ya-tk-list li:nth-child(5) { --i: 4; --x: 150%; --y: -60%; } .ya-tk-list li:nth-child(6) { --i: 5; --x: 50%; --y: -60%; } .ya-tk-list li:nth-child(7) { --i: 6; --x: -50%; --y: -60%; } .ya-tk-list li:nth-child(8) { --i: 7; --x: -150%; --y: -60%; } @keyframes ya-tk-in { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } } @keyframes ya-tk-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate(var(--x), var(--y)) scale(.35); } } @keyframes ya-tk-bv { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* ================= 8 accessible ================= */ .ya-acc { margin-top: var(--sec); padding: var(--sec) 0; background: var(--paper); } .ya-acc h2 { max-width: 18ch; margin-inline: auto; } .ya-acc-vis { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 56px); max-width: 920px; margin: clamp(48px, 6vw, 80px) auto; } .ya-acc-vis small { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; } .acc-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .acc-tools span { position: relative; padding: 26px 8px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--hair); font-size: 13px; font-weight: 600; text-align: center; color: var(--muted); overflow-wrap: anywhere; } .acc-tools span::before { content: ""; position: absolute; left: 10px; top: 10px; width: 26px; height: 6px; border-radius: 3px; background: radial-gradient(circle at 3px 3px, var(--hair) 3px, transparent 3.5px) 0 0 / 10px 6px repeat-x; } .acc-arrow { width: 44px; height: 2px; background: var(--baby-deep); position: relative; } .acc-arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--baby-deep); border-right: 2px solid var(--baby-deep); transform: rotate(45deg); } .acc-card { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--card); border: 1px solid var(--baby-deep); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow-lg); } .acc-card img { width: 46%; height: auto; } .acc-card .fv-bar { background: var(--hair); } .acc-card .fv-bar i { background: var(--accent); width: 100%; } /* scaled down / faded only while scrolling (.motion) — the still (reduced motion) shows both sides in full */ .motion .acc-old { transform: scale(calc(1 - .3 * var(--t0, 1))); opacity: calc(1 - .45 * var(--t0, 1)); } .motion .acc-new { transform: scale(calc(.86 + .14 * var(--t0, 1))); opacity: calc(.45 + .55 * var(--t0, 1)); } .ya-acc .lead { max-width: 46ch; margin-inline: auto; } .ya-acc-note { margin-top: 18px; font-weight: 600; } .ya-val { margin-top: clamp(64px, 8vw, 110px); max-width: 780px; padding: clamp(28px, 4vw, 48px); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); text-align: center; } .ya-val h3 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -.03em; } .ya-val p { margin: 16px auto 20px; color: var(--muted); max-width: 52ch; } /* ================= 9 quality comparison ================= */ .ya-qual { padding-top: var(--sec); } .ya-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .ya-cmp-col { border-radius: var(--r); padding: clamp(24px, 3vw, 36px); background: var(--paper); } .ya-cmp-bv { background: var(--baby-3); box-shadow: inset 0 0 0 1px var(--baby); } .ya-cmp-col h3 { font-size: 24px; min-height: 30px; display: flex; align-items: center; } .ya-cmp-col h3 .ya-side-logo { height: 26px; } .ya-cmp-col > p { margin-top: 10px; color: var(--muted); font-size: 16px; max-width: 40ch; min-height: 3em; } .ya-thumbs { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .ya-thumbs li { display: grid; gap: 8px; align-content: start; } .ya-thumbs small { font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.3; } .gt, .bt { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; } .gt { background: linear-gradient(135deg, #6f7581, #9aa0aa); } .gt i { position: absolute; left: 10%; height: 9%; border-radius: 2px; background: rgba(255,255,255,.85); } .gt i:nth-child(1) { top: 30%; width: 62%; } .gt i:nth-child(2) { top: 46%; width: 48%; } .gt i:nth-child(3) { top: 70%; width: 22%; height: 12%; background: #e8c547; } .bt { background: var(--ya-navy); } .bt img, .bt svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bt b { position: absolute; left: 7%; right: 7%; bottom: 7%; color: #fff; font-size: clamp(10px, 1.1vw, 13px); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; text-shadow: 0 1px 8px rgba(0,0,0,.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bt-hist img { object-position: 50% 45%; transform: scale(1.35); } .bt::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.55)); } .bt b { z-index: 1; } .motion .ya-cmp-bv .ya-thumbs li { opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); } .motion .ya-cmp-bv .ya-thumbs li:nth-child(1) { transform: translateY(14px); } .motion .ya-cmp-bv .ya-thumbs li:nth-child(2) { transform: scale(.92); } .motion .ya-cmp-bv .ya-thumbs li:nth-child(3) { transform: translateX(14px); } .motion .ya-cmp-bv.in .ya-thumbs li { opacity: 1; transform: none; } .motion .ya-cmp-bv.in .ya-thumbs li:nth-child(2) { transition-delay: .25s; } .motion .ya-cmp-bv.in .ya-thumbs li:nth-child(3) { transition-delay: .5s; } .ya-qual > .hint { margin-top: 18px; } /* ================= 10 originality + monetization ================= */ .ya-orig { padding-top: var(--sec); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .ya-orig .lead { margin-top: 22px; } .ya-orig-b2 { margin-top: 18px; font-size: 18px; font-weight: 500; max-width: 42ch; } .ya-mon { padding: clamp(26px, 3.6vw, 44px); border-radius: var(--r); background: var(--paper); } .ya-mon h2 { font-size: clamp(26px, 2.6vw, 34px); } .ya-mon-a { margin-top: 16px; font-size: 20px; font-weight: 600; letter-spacing: -.015em; } .ya-mon-a + p { margin-top: 10px; color: var(--muted); } .ya-mon h3 { margin-top: 28px; font-size: 16px; letter-spacing: -.01em; } .ya-says-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; color: var(--muted); } .ya-says-list li { position: relative; padding-left: 20px; } .ya-says-list li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .ya-nostatus { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 15px; } .ya-tone { padding-top: var(--sec); } .ya-tone p { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 4.8vw, 68px); letter-spacing: -.035em; line-height: 1.08; } /* ================= 11 more than a hobby ================= */ .ya-hobby { padding-top: var(--sec); } .ya-hobby h2 { max-width: 16ch; margin-inline: auto; } .ya-grow { list-style: none; margin: 44px auto 34px; padding: 0; display: flex; align-items: center; justify-content: center; gap: 0; } .ya-grow li { padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 16px; background: var(--paper); white-space: nowrap; } .ya-grow li:nth-child(2) { background: var(--baby-2); color: var(--accent-ink); padding: 15px 24px; font-size: 18px; } .ya-grow li:nth-child(3) { background: var(--ink); color: var(--on-ink); padding: 18px 28px; font-size: 20px; } .ya-grow li + li { margin-left: 46px; position: relative; } .ya-grow li + li::before { content: ""; position: absolute; right: calc(100% + 8px); top: 50%; width: 30px; height: 2px; background: var(--baby-deep); } .ya-hobby .lead { max-width: 48ch; margin-inline: auto; } /* ================= 12 start: five steps ================= */ .ya-start { padding-top: var(--sec); } .ya-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .ya-steps li { display: grid; grid-template-rows: auto 120px auto 1fr; gap: 14px; padding: 22px; border-radius: var(--r); background: var(--paper); } .ya-n { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .06em; } .ya-steps h3 { font-size: 19px; letter-spacing: -.015em; line-height: 1.2; } .ya-steps p { font-size: 15px; color: var(--muted); line-height: 1.45; } .ya-sv { position: relative; border-radius: 14px; background: var(--card); border: 1px solid var(--hair); overflow: hidden; display: grid; place-items: center; padding: 12px; } .sv-topics { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 5px; } .sv-topics span { padding: 4px 9px; border-radius: 999px; background: var(--baby-2); color: var(--accent-ink); font-size: 11px; font-weight: 600; } .sv-topics span:nth-child(1) { background: var(--accent); color: #fff; } .sv-page { place-items: stretch; align-content: center; padding: 18px 22px; } .sv-voice .ya-wave { width: 100%; height: 46px; } .sv-build { align-content: center; gap: 12px; } .sv-build img { height: 20px; width: auto; } .sv-build .fv-tr { display: flex; width: 100%; height: 30px; gap: 3px; } .sv-build .fv-tr .c { flex: 1 1 0; border-radius: 4px; transform: none; } .sv-up { grid-auto-flow: column; gap: 14px; } .sv-up svg { width: 44px; height: auto; } .sv-arrow { width: 26px; height: 26px; position: relative; } .sv-arrow::before { content: ""; position: absolute; left: 12px; top: 4px; width: 2px; height: 20px; background: var(--ink); } .sv-arrow::after { content: ""; position: absolute; left: 7px; top: 4px; width: 10px; height: 10px; border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(45deg); } .motion .ya-steps li:nth-child(2) { transition-delay: .08s; } .motion .ya-steps li:nth-child(3) { transition-delay: .16s; } .motion .ya-steps li:nth-child(4) { transition-delay: .24s; } .motion .ya-steps li:nth-child(5) { transition-delay: .32s; } /* ================= 13 example channel ================= */ .ya-ex-t { font-family: var(--display); font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; color: var(--muted); margin-bottom: 18px; } .ya-ex .ya-say h3 { font-size: clamp(30px, 3.4vw, 50px); } .ya-ex-note { margin-top: 18px; } .ya-exv { border-radius: 28px; background: var(--paper); overflow: hidden; } .ex-card, .ex-build, .ex-pub { position: absolute; left: 50%; top: 50%; } .ex-card { width: 78cqw; max-height: 86cqh; padding: 3.4cqh 4cqw; border-radius: 18px; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow-lg); display: grid; gap: 1.6cqh; overflow: hidden; } .ex-channel { padding: 0 0 4cqh; justify-items: center; text-align: center; } .ex-banner { display: block; width: 100%; height: 22cqh; background: linear-gradient(120deg, #10233b, #2d5a8e 60%, #9ecbff); } .ex-av { display: grid; place-items: center; width: 13cqh; height: 13cqh; margin-top: -7cqh; border-radius: 50%; background: #0f4f9a; color: #fff; font-weight: 700; font-size: 4.2cqh; border: 3px solid var(--card); } .ex-channel b { font-size: clamp(16px, 4cqw, 26px); letter-spacing: -.02em; } .ex-topic b { font-family: var(--display); font-size: clamp(20px, 5.2cqw, 40px); line-height: 1.1; letter-spacing: -.03em; } .ex-page { width: 64cqw; } .ex-page p { font-size: clamp(12px, 2.6cqw, 17px); line-height: 1.45; color: var(--ink); } .ex-voice .ya-wave { height: 16cqh; } .ex-build { width: 86cqw; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; } .exb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--ya-navy); box-shadow: var(--shadow); } .exb svg, .exb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .exb-title { display: grid; place-content: center; text-align: center; color: #fff; background: linear-gradient(160deg, #17314f, #10233b); } .exb-title b { font-family: var(--display); font-size: clamp(12px, 3.4cqw, 26px); letter-spacing: .02em; } .exb-title small { font-size: clamp(9px, 1.8cqw, 13px); color: #9ecbff; font-weight: 600; } .ex-pub { width: 86cqw; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow-lg); } .ex-ch { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; padding: 0 4cqw 2.4cqh; } .ex-ch .ex-banner { grid-column: 1 / -1; height: 13cqh; width: auto; margin: 0 -4cqw 1.6cqh; } .ex-ch .ex-av { width: 9cqh; height: 9cqh; margin: -4.5cqh 0 0; font-size: 3cqh; } .ex-ch b { font-size: clamp(14px, 3cqw, 20px); } .ex-ch small { grid-column: 2; font-size: 12px; color: var(--muted); font-weight: 600; border-bottom: 2px solid var(--ink); justify-self: start; padding-bottom: 2px; } .ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw; padding: 0 4cqw 3cqh; } .ex-v { display: grid; gap: 6px; align-content: start; } .ex-th { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--hair); } .ex-th svg, .ex-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ex-th b { position: absolute; left: 8%; top: 12%; color: #fff; font-family: var(--display); font-size: clamp(10px, 2.6cqw, 18px); letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0,0,0,.5); } .ex-th em { position: absolute; right: 5%; bottom: 7%; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.75); color: #fff; font-style: normal; font-size: 10px; font-weight: 600; } .ex-th2 { background: linear-gradient(135deg, var(--hair), var(--paper)); } .ex-th3 { background: linear-gradient(135deg, var(--paper), var(--hair)); } .ex-v small { font-size: clamp(10px, 1.9cqw, 13px); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ex-v small i { font-style: normal; color: var(--accent); } .ex-ph { height: 1.9cqw; min-height: 9px; border-radius: 3px; background: var(--hair); width: 80%; } @container (max-width: 520px) { .ex-build { width: 62cqw; grid-template-columns: minmax(0, 1fr); gap: 2.4cqh; } .ex-card { width: 86cqw; } .ex-pub { width: 92cqw; } } .ya-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* scroll-linked states (defaults = final frame: the published channel page) */ .ex-card, .ex-build { opacity: calc(var(--t0, 1) * (1 - var(--t1, 1))); transform: translate(-50%, calc(-50% + (1 - var(--t0, 1)) * 5cqh - var(--t1, 1) * 5cqh)) scale(calc(.96 + .04 * var(--t0, 1))); } .exb { opacity: var(--t0, 1); transform: translateY(calc((1 - var(--t0, 1)) * 4cqh)); } .ex-pub { opacity: var(--t0, 1); transform: translate(-50%, calc(-50% + (1 - var(--t0, 1)) * 6cqh)) scale(calc(.94 + .06 * var(--t0, 1))); } .exb-map svg path { stroke-dasharray: 360; stroke-dashoffset: calc((1 - var(--t0, 1)) * 360); } /* ================= FAQ, more, closing, fine print ================= */ .ya-faq { padding-top: var(--sec); } .ya-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 34px; padding: 36px 0; margin-bottom: 0; border-top: 1px solid var(--hair); } .ya-more h2 { font-size: 15px; letter-spacing: 0; color: var(--muted); font-weight: 600; } .ya-more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 16px; } .ya-close .lead { margin-top: -16px; } .ya-end-logo { height: 30px; width: auto; margin-top: 18px; opacity: .9; } .ya-fine { padding: 28px 0 48px; display: grid; gap: 8px; } /* small print that carries information (trademark note, sources, example notes, languages): --muted, not the paler --faint of .hint (AA contrast: #6e6e73 on white 5.0:1, #a1a1a6 on #0b0b0d 7.9:1) */ .ya-fine .hint, .ya-qual > .hint, .hint.ya-ex-note, .ya-ui .hint { color: var(--muted); } .ya-fine a { color: var(--muted); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--hair); } .ya-fine a:hover { color: var(--accent); } /* ================= responsive ================= */ @media (max-width: 1100px) { .ya-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ya-mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .ya-story-grid, .ya-orig, .ya-cmp { grid-template-columns: minmax(0, 1fr); } .ya-sflow { max-width: 460px; margin-inline: auto; width: 100%; } } @media (max-width: 760px) { /* scroll-linked sections: copy on top, visual below, both inside one screen */ .ya-stage-in { grid-template-columns: minmax(0, 1fr); } .motion .ya-stage { padding: 70px 0 16px; } .motion .ya-stage-in { grid-template-rows: auto minmax(0, 1fr); height: 100%; gap: 16px; align-items: stretch; } .motion .ya-fv, .motion .ya-exv { height: 100%; max-height: 540px; } .ya-say h2, .ya-say h3, .ya-ex .ya-say h3 { font-size: clamp(26px, 7.4vw, 34px); } .ya-say p { margin-top: 8px; font-size: 16px; } .motion .ya-dots { margin-top: 14px; } .ya-ex-t { margin-bottom: 8px; font-size: 18px; } .ya-ex-note { display: none; } .motion .ya-ex .ya-ex-t { display: none; } .motion .ya-flow { height: 300vh; } .motion .ya-hard { height: 420vh; } .motion .ya-ex { height: 350vh; } .ya-fv, .ya-exv { aspect-ratio: 4 / 5; } .ya-ed { aspect-ratio: 4 / 5; } /* pipeline and money flow turn vertical */ .ya-pipe { grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 320px; } .ya-pipe::before, .ya-pipe::after { top: 32px; bottom: 32px; left: 31px; right: auto; width: 2px; height: auto; } .ya-pipe::after { transform-origin: top; } .motion .ya-pipe::after { transform: scaleY(0); } .motion .ya-pipe.in::after { transform: scaleY(1); } .ya-st { grid-template-columns: 64px 1fr; justify-items: start; align-items: center; text-align: left; gap: 18px; padding: 0; } .ya-split { grid-template-columns: minmax(0, 1fr); margin-top: 44px; } .ya-mflow { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 320px; } .ya-mflow li { grid-template-columns: 64px 1fr; justify-items: start; align-items: center; text-align: left; gap: 18px; padding: 0; } .ya-mflow li:not(:last-child)::after { top: auto; bottom: -22px; left: 31px; right: auto; width: 2px; height: 18px; background: var(--baby-deep); } .ya-mflow li:not(:last-child)::before { display: none; } .ya-acc-vis { grid-template-columns: minmax(0, 1fr); justify-items: center; } .acc-old, .acc-new { width: 100%; max-width: 420px; } .acc-arrow { width: 2px; height: 32px; } .acc-arrow::after { right: -4px; top: auto; bottom: 0; transform: rotate(135deg); } .ya-steps { grid-template-columns: minmax(0, 1fr); } .ya-steps li { grid-template-rows: auto 96px auto auto; gap: 10px; } .ya-steps .ya-sv { padding: 8px 12px; } .ya-steps h3 { font-size: 18px; } .sv-page { padding: 12px 22%; } .sv-voice .ya-wave { width: 70%; } .sv-build .fv-tr { width: 70%; } .ya-tk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ya-tk-list li { min-height: 54px; font-size: 15px; } .ya-tk-list li:nth-child(odd) { --x: 50%; } .ya-tk-list li:nth-child(even) { --x: -50%; } .ya-tk-list li:nth-child(1), .ya-tk-list li:nth-child(2) { --y: 160%; } .ya-tk-list li:nth-child(3), .ya-tk-list li:nth-child(4) { --y: 55%; } .ya-tk-list li:nth-child(5), .ya-tk-list li:nth-child(6) { --y: -55%; } .ya-tk-list li:nth-child(7), .ya-tk-list li:nth-child(8) { --y: -160%; } .ya-grow li + li { margin-left: 26px; } .ya-grow li + li::before { width: 14px; right: calc(100% + 6px); } .ya-grow li { padding: 10px 14px; font-size: 14px; } .ya-grow li:nth-child(2) { padding: 12px 16px; font-size: 15px; } .ya-grow li:nth-child(3) { padding: 14px 18px; font-size: 16px; } } @media (max-width: 640px) { .ya-link { --tile: 60px; --node: 42px; gap: 10px; } .ya-play, .ya-b { border-radius: 18px; } .ya-node b { font-size: 11px; } .ya-node > .ya-g-voice { padding: 0 8px; } .ya-rail-line { left: -6px; right: -6px; } .ya-side-t { font-size: 26px; } .ya-mcards { grid-template-columns: minmax(0, 1fr); } .ya-thumbs { gap: 8px; } .bt b { font-size: 10px; } .ya-more { gap: 10px 20px; } .ya-close .ya-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; } .ya-hero .ya-actions { flex-direction: column; gap: 18px; } } @media (max-width: 400px) { .ya-grow { flex-direction: column; gap: 22px; } .ya-grow li + li { margin-left: 0; } .ya-grow li + li::before { right: auto; left: 50%; top: -18px; width: 2px; height: 14px; } } /* ================= reduced motion: no scrubbing, no sticky stages, every text visible ================= */ @media (prefers-reduced-motion: reduce) { .ya-scrub { height: auto !important; } .ya-stage { position: relative !important; height: auto !important; padding: 0 !important; overflow: visible !important; } .ya-say { opacity: 1 !important; transform: none !important; } .ya-dots { display: none !important; } .ya-lines p, .ya-tk-list li, .ya-pipe .ya-st, .ya-mflow li, .ya-cmp-bv .ya-thumbs li { opacity: 1 !important; transform: none !important; animation: none !important; } .ya-tk-bv { position: static !important; opacity: 1 !important; transform: none !important; margin: 28px auto 0 !important; animation: none !important; } .ya-link { animation: none !important; } }