/* ============================================================ ScolerAI Home — deck.css The home page is a DECK: a cover, the coach (revealed only when the visitor writes), the film, the Study Studio, the ask, then a footer. Two things from home.css do the heavy lifting and are not repeated here: the `:root` token block, and `.backdrop`, which is `position: fixed` — so the slides cross the photograph rather than moving it. That is the whole reason a deck fits this page. Motion is FADE-RISE on the browser's own snap: the page scrolls natively (wheel, trackpad, keyboard, find-in-page and the scrollbar all behave) and only the content inside a slide animates as the slide settles. Nothing here intercepts a scroll event. ============================================================ */ :root { --mono-deck: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --slide-pad-top: 96px; /* clears the fixed chrome */ } /* ── Shell ───────────────────────────────────────────────────── home.css sized the page as ONE screen (html/body at 100%, body a flex column, `.stage` taking the remainder). The deck scrolls, so those three are unwound here rather than left to fight it. */ html { height: auto; scroll-behavior: smooth; } body { height: auto; display: block; min-height: 100dvh; } /* The chrome floats over the deck instead of sitting in its flow. */ .chrome { position: fixed; top: 0; left: 0; right: 0; z-index: 40; } /* ── The deck ────────────────────────────────────────────────── Snap is PROXIMITY, not mandatory: a slide is allowed to outgrow the viewport in a long locale (French runs ~65% longer than English at the 90th percentile), and mandatory snap would make the middle of such a slide unreachable. */ .deck { position: relative; z-index: 2; } .slide { position: relative; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--slide-pad-top) 24px 64px; scroll-snap-align: start; } .slide__in { width: 100%; max-width: 1000px; } /* MANDATORY, not proximity: proximity only snaps when a scroll happens to end near a snap point, which on a wheel is most often never — the deck then reads as an ordinary long page. Mandatory is only safe because of the two `width: min(...)` rules below, which keep every slide inside the viewport; a slide taller than the screen under mandatory snap has a middle you cannot rest on. Phones are excluded entirely: a deck whose slides carry their own scroller is the nested-scroll trap, and a URL bar resizes the viewport mid-gesture. */ @media (min-width: 700px) and (min-height: 780px) { html { scroll-snap-type: y mandatory; } /* A 16:9 frame plus its heading has to FIT, or the slide silently grows past the viewport — measured at 1440x900 the film ran 906px against an 813px box and the studio 989px. Bounding the WIDTH by the height left over lets the frame shrink instead of overflowing. */ .film { width: min(940px, calc((100dvh - 386px) * 1.778)); } .studio { width: min(1080px, calc((100dvh - 414px) * 1.778)); } } /* The last rest position. Without a snap point at the bottom the nearest one is the ask slide's start, so scrolling down to read the footer snaps straight back up and the footer can never be seen. `end` aligns its bottom with the scrollport's — exactly where the page already ends. */ .foot { scroll-snap-align: end; } /* ── Fade-rise ───────────────────────────────────────────────── Guarded on `.deck-js`, which deck.js puts on : with scripting off nothing is ever hidden, and the whole page reads as a long scroll. The cover is marked `is-in` in the markup, so the first frame is complete before any observer runs. */ .deck-js .slide__in { opacity: 0; transform: translateY(26px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); } .deck-js .slide.is-in .slide__in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .deck-js .slide__in { opacity: 1; transform: none; transition: none; } } /* ── Shared slide type ───────────────────────────────────────── Space Grotesk is the app speaking TO the learner, which is what an eyebrow is; Poppins carries every heading. */ .s-eyebrow { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lilac); margin: 0 0 14px; text-align: center; } .s-title { font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.14; letter-spacing: -0.022em; color: var(--on-dark); margin: 0; text-align: center; text-wrap: balance; } .s-sub { font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.55; color: var(--on-dark-muted); margin: 14px auto 0; max-width: 64ch; text-align: center; } /* ══════════════ 1 · COVER ══════════════ */ .cover { text-align: center; max-width: 860px; } .cover__slogan { font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: clamp(38px, 7.4vw, 82px); line-height: 1.02; letter-spacing: -0.03em; margin: 0; color: var(--on-dark); } /* The triad replaces a sentence: three words are the product's arc. */ .cover__triad { display: flex; justify-content: center; align-items: center; gap: clamp(12px, 2vw, 20px); font-family: 'Space Grotesk', Inter, sans-serif; font-size: clamp(12px, 1.5vw, 15px); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--on-dark-muted); margin: clamp(18px, 2.6vh, 28px) 0 0; } .cover__dot { width: 4px; height: 4px; border-radius: 999px; background: var(--lilac); display: block; } /* The composer is the page's one input, and it is Layer 3 glass — the same material the coach's own field uses, so tapping through to the conversation is a continuation and not a new surface. */ .cover__form { display: flex; align-items: center; gap: 10px; max-width: 620px; margin: clamp(28px, 4vh, 44px) auto 0; padding: 10px 10px 10px 22px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.30); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); transition: border-color 200ms var(--ease), background 200ms var(--ease); } .cover__form:focus-within { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.19); } .cover__input { flex: 1; min-width: 0; height: 48px; border: none; background: none; outline: none; font-family: inherit; font-size: 16px; color: var(--on-dark); } .cover__input::placeholder { color: rgba(255, 255, 255, 0.62); } .cover__send { flex: none; width: 48px; height: 48px; border: none; border-radius: 999px; background: var(--violet); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background 180ms var(--ease), transform 180ms var(--ease); } .cover__send:hover { background: var(--violet-light); } .cover__send:active { transform: scale(0.94); } .cover__send:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; } /* The starters are the way in — an empty box is the highest-friction hero there is. Same glass as the field, one step quieter. */ .cover__starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 660px; margin: 16px auto 0; } .cover__starter { font-family: inherit; font-size: 14px; color: var(--on-dark); background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--r-pill); padding: 10px 18px; cursor: pointer; backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease); } .cover__starter:hover { background: rgba(255, 255, 255, 0.20); border-color: rgba(255, 255, 255, 0.42); } .cover__starter:active { transform: scale(0.97); } .cover__starter:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; } .cover__scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: 'Space Grotesk', Inter, sans-serif; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); pointer-events: none; } .cover__scroll svg { animation: coverNudge 2.4s var(--ease) infinite; } @keyframes coverNudge { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(5px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cover__scroll svg { animation: none; } } /* ══════════════ 2 · COACH ══════════════ Hidden until the visitor writes on the cover. `[hidden]` is only a UA rule and `.slide` is `display: flex`, so it has to be beaten here — the same trap the meter and the action card already document. */ .slide--coach[hidden] { display: none !important; } .slide--coach .slide__in { max-width: 1000px; } /* `.coach` was sized for the old one-screen shell (flex child of the stage). Inside a slide it gets an explicit box instead. */ .slide--coach .coach { height: min(68vh, 620px); max-height: none; } /* ══════════════ 3 · FILM ══════════════ */ .film { max-width: 940px; } .film__frame { position: relative; margin-top: clamp(24px, 3.4vh, 38px); border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 9; background: #05050B; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 40px 110px rgba(0, 0, 0, 0.55); } .film__frame img, .film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .film__frame img { object-fit: cover; } /* The facade: one poster until someone actually wants the film. A YouTube iframe is over a megabyte of third-party JavaScript and it would compete with the photograph for the page's largest paint. */ .film__play { position: absolute; inset: 0; display: grid; place-items: center; border: none; background: linear-gradient(180deg, rgba(10, 10, 18, 0.18), rgba(10, 10, 18, 0.42)); cursor: pointer; transition: background 220ms var(--ease); } .film__play:hover { background: linear-gradient(180deg, rgba(10,10,18,0.10), rgba(10,10,18,0.34)); } .film__play:focus-visible { outline: 3px solid var(--lilac); outline-offset: -3px; } .film__disc { width: clamp(64px, 8vw, 86px); height: clamp(64px, 8vw, 86px); border-radius: 999px; background: rgba(255, 255, 255, 0.94); display: grid; place-items: center; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); transition: transform 220ms var(--ease); } .film__play:hover .film__disc { transform: scale(1.06); } .film__disc svg { margin-left: 4px; } .film__cc { position: absolute; right: 12px; bottom: 12px; font-family: var(--mono-deck); font-size: 11px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.78); background: rgba(10, 10, 18, 0.62); border-radius: var(--r-sm); padding: 5px 10px; pointer-events: none; } /* ══════════════ 4 · STUDIO ══════════════ */ .studio { max-width: 1080px; } .studio__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: clamp(20px, 2.8vh, 30px) 0 16px; } .studio__tab { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--on-dark-muted); background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.20); border-radius: var(--r-pill); padding: 8px 15px; cursor: pointer; transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease); } .studio__tab:hover { background: rgba(255, 255, 255, 0.20); color: var(--on-dark); } .studio__tab[aria-selected="true"] { background: var(--plane-solid); color: var(--ink); border-color: var(--plane-solid); font-weight: 600; } .studio__tab:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; } .studio__foot { text-align: center; font-size: 13px; color: var(--on-dark-muted); margin: 16px 0 0; } .studio__foot a { color: var(--on-dark); text-underline-offset: 3px; } /* ══════════════ 5 · THE ASK ══════════════ */ .ask { text-align: center; max-width: 620px; } .ask__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(24px, 3.2vh, 34px); background: var(--violet); color: #fff; font-weight: 600; font-size: 16px; border-radius: var(--r-pill); padding: 16px 30px; text-decoration: none; box-shadow: 0 16px 40px rgba(124, 58, 237, 0.45); transition: background 180ms var(--ease), transform 180ms var(--ease); } .ask__cta:hover { background: var(--violet-light); transform: translateY(-1px); } .ask__cta:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; } .ask__note { font-size: 13px; color: rgba(255, 255, 255, 0.62); margin: 14px 0 0; } .ask__alt { font-size: 13.5px; color: var(--on-dark-muted); margin: 18px 0 0; } .ask__alt button { font: inherit; color: var(--on-dark); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4); } .ask__alt button:hover { text-decoration-color: var(--on-dark); } /* ══════════════ FOOTER ══════════════ */ .foot { position: relative; z-index: 2; border-top: 1px solid var(--on-dark-edge); background: rgba(10, 10, 18, 0.62); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); padding: 40px 24px 28px; } .foot__in { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; } .foot__brand { display: flex; align-items: center; gap: 10px; } .foot__mark { width: 28px; height: 28px; border-radius: 8px; } .foot__word { font-family: Poppins, Inter, sans-serif; font-size: 16px; color: var(--on-dark); letter-spacing: -0.01em; } .foot__tour { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--on-dark); text-decoration: none; border: 1px solid var(--on-dark-edge); border-radius: var(--r-pill); padding: 9px 16px; transition: background 180ms var(--ease), border-color 180ms var(--ease); } .foot__tour:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.36); } .foot__spacer { flex: 1 1 auto; } .foot__social { display: flex; gap: 8px; } .foot__social a { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; color: var(--on-dark-muted); border: 1px solid var(--on-dark-edge); transition: color 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease); } .foot__social a:hover { color: var(--on-dark); background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.36); } .foot__social a:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; } /* The language switcher lives here now, not in the chrome. It keeps its .lang-switcher classes verbatim — i18n.js binds to those, so moving the markup needed no JavaScript change. Only the dropdown flips to open UPWARD, because there is nothing below it. */ .foot .lang-switcher__dropdown { top: auto; bottom: calc(100% + 8px); } .foot__legal { max-width: 1080px; margin: 26px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.10); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 12.5px; color: rgba(255, 255, 255, 0.52); } .foot__legal-links { margin-left: auto; display: flex; gap: 20px; } .foot__legal a { color: rgba(255, 255, 255, 0.72); text-decoration: none; } .foot__legal a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; } /* ══════════════ RESPONSIVE ══════════════ */ @media (max-width: 900px) { :root { --slide-pad-top: 84px; } /* A 26px rise reads on desktop because the slide snaps and holds still while it plays. On a phone the page is moving under the finger, so that travel is swamped by the scroll itself: more distance, less time, so the reveal lands before the content has scrolled past. */ .deck-js .slide__in { transform: translateY(44px); transition-duration: 520ms; } .slide { padding-left: 16px; padding-right: 16px; padding-bottom: 48px; } /* A snapping deck whose slides contain their own vertical scroller is the classic nested-scroll trap, and a phone's URL bar resizes the viewport mid-gesture. Phones get an ordinary page with the same fade on entry. */ .slide { min-height: auto; padding-top: 108px; padding-bottom: 72px; } .slide--cover { min-height: 100dvh; padding-top: var(--slide-pad-top); } .slide--coach .coach { height: min(78vh, 560px); } .cover__starters { flex-direction: column; align-items: stretch; } .cover__starter { text-align: left; } .foot__in { gap: 18px; } .foot__spacer { display: none; } .foot__legal-links { margin-left: 0; } } @media (max-width: 560px) { .cover__form { padding-left: 16px; } .studio__tabs { justify-content: flex-start; } } /* ════════════════════════════════════════════════════════════════ THE NINE STUDIO MOCKUPS — drawn, never screenshotted. Ported verbatim from the design study. Each is authored on a fixed 1280x720 canvas and SCALED into its frame by studio.js, exactly the fit VideoSlideHtmlService applies to a real video slide — so a long locale fills more of the line instead of reflowing the composition. A screenshot could not do this job: it is English-only, and the one slide whose whole claim is "in your language" was the one slide that could not be translated. ════════════════════════════════════════════════════════════════ */ .mock { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 24px 60px rgba(0,0,0,0.5); background: #F4F6F8; } .mk { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; transform-origin: 0 0; --ground: #F4F6F8; --panel: #FFFFFF; --ink2: #171B22; --muted: #5B6470; --line2: #D5DAE1; --accent2: #0B7A75; --accent-soft2: #DCEFEC; background: var(--ground); color: var(--ink2); font-family: Inter, sans-serif; text-align: left; } /* 1 · Video lesson — the ledger slide, inside its player */ .vl__wash { position: absolute; inset: 0; background: linear-gradient(105deg, #F4F6F8 40%, #E8F4F0 72%, #DCEFEC 100%); } .vl__art { position: absolute; right: 16px; top: 0; width: 560px; height: 720px; } .vl__left { position: absolute; left: 74px; top: 48px; width: 626px; } .vl__eyebrows { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .vl__topic { font-family: var(--mono-deck); font-size: 18px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--muted); } .vl__kicker { font-family: var(--mono-deck); font-size: 18px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent2); white-space: nowrap; } .vl__title { font-family: Poppins, sans-serif; font-weight: 600; font-size: 54px; line-height: 1.06; letter-spacing: -0.022em; margin: 24px 0 0; color: var(--ink2); } .vl__ledger { margin-top: 34px; } .vl__row { font-size: 25px; line-height: 1.3; margin: 0; padding: 17px 0; border-bottom: 1px solid var(--line2); color: var(--ink2); } .vl__row:last-child { border-bottom: none; } .vl__row--em { color: var(--accent2); font-weight: 600; } .vl__sw { display: flex; gap: 20px; margin-top: 26px; border-left: 5px solid var(--accent2); padding-left: 20px; } .vl__sw-l { font-family: var(--mono-deck); font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding-top: 6px; white-space: nowrap; } .vl__sw-b { font-family: Poppins, sans-serif; font-weight: 600; font-size: 26px; line-height: 1.28; margin: 0; color: var(--ink2); } /* player chrome */ .vp { position: absolute; inset: 0; pointer-events: none; } .vp::before { content: ''; position: absolute; inset: 0; background: rgba(14,19,27,0.16); } .vp__play { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width: 118px; height: 118px; border-radius: 999px; background: rgba(14,19,27,0.46); border: 2.5px solid rgba(255,255,255,0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; box-shadow: 0 10px 40px rgba(0,0,0,0.22); } .vp__play svg { margin-left: 6px; } .vp__bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 44px 24px; background: linear-gradient(180deg, rgba(23,27,34,0) 0%, rgba(23,27,34,0.09) 58%, rgba(23,27,34,0.19) 100%); } .vp__track { position: relative; height: 6px; border-radius: 999px; background: rgba(23,27,34,0.20); } .vp__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 33%; border-radius: 999px; background: var(--accent2); } .vp__knob { position: absolute; left: 33%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 999px; background: #FFFFFF; border: 3px solid var(--accent2); box-shadow: 0 2px 6px rgba(0,0,0,0.25); } .vp__times { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--mono-deck); font-size: 17px; color: #3E4854; } /* 2 · Podcast — the app's player card */ .mk--pd { background: #EEF1F6; display: grid; place-items: center; } .pdp { width: 1104px; border-radius: 30px; padding: 40px 44px 34px; background: linear-gradient(135deg, #4C52BC 0%, #5A60C9 55%, #4A50B8 100%); box-shadow: 0 26px 60px rgba(60,66,160,0.30); color: #fff; } .pdp__top { display: flex; gap: 26px; align-items: center; } .pdp__cover { position: relative; width: 104px; height: 104px; border-radius: 22px; flex: none; background: rgba(255,255,255,0.16); display: grid; place-items: center; } .pdp__badge { position: absolute; right: -6px; bottom: -6px; width: 34px; height: 34px; border-radius: 999px; background: #6A70D6; display: grid; place-items: center; border: 3px solid #545ABF; } .pdp__meta { min-width: 0; } .pdp__title { font-family: Poppins, sans-serif; font-weight: 600; font-size: 33px; line-height: 1.2; letter-spacing: -0.018em; margin: 0; color: #fff; } .pdp__sub { font-size: 21px; color: rgba(255,255,255,0.72); margin: 10px 0 0; } .pdp__track { position: relative; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.34); margin-top: 34px; } .pdp__knob { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 999px; background: #fff; } .pdp__times { display: flex; justify-content: space-between; margin-top: 14px; font-family: var(--mono-deck); font-size: 18px; color: rgba(255,255,255,0.78); } .pdp__ctl { display: flex; align-items: center; justify-content: center; gap: 34px; margin-top: 26px; } .pdp__stop { width: 17px; height: 17px; border-radius: 4px; background: rgba(255,255,255,0.9); } .pdp__play { width: 74px; height: 74px; border-radius: 999px; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(20,24,90,0.28); } .pdp__play svg { margin-left: 4px; } .pdp__rate { border: 2px solid rgba(255,255,255,0.5); border-radius: 999px; padding: 8px 20px; font-size: 19px; font-weight: 600; color: #fff; } /* 3 · Interactive app — the enhanced animation and its control panel */ .mk--ap { background: #F5F7F3; padding: 18px; display: flex; flex-direction: column; gap: 14px; } .ap2__head { position: relative; overflow: hidden; flex: none; border-radius: 22px; padding: 20px 26px; color: #fff; background: linear-gradient(118deg, #34795A 0%, #3F8663 46%, #5FA07E 100%); } .ap2__head::after { content: ''; position: absolute; right: -40px; top: -80px; width: 340px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,0.22), rgba(255,255,255,0)); } .ap2__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.92); margin: 0; } .ap2__eyebrow i { width: 11px; height: 11px; border-radius: 999px; background: #F2B33D; display: block; flex: none; } .ap2__title { font-family: Poppins, sans-serif; font-weight: 700; font-size: 42px; line-height: 1.04; letter-spacing: -0.03em; margin: 10px 0 0; } .ap2__desc { font-size: 17px; line-height: 1.42; color: rgba(255,255,255,0.9); margin: 9px 0 0; max-width: 920px; } .ap2__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; } .ap2__chip { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.26); border-radius: 999px; padding: 7px 15px; } .ap2__chip i { width: 9px; height: 9px; border-radius: 999px; background: #F2B33D; display: block; flex: none; } .ap2__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 434px; gap: 14px; } .ap2__stage { background: #fff; border-radius: 20px; padding: 12px; overflow: hidden; } .ap2__stage svg { width: 100%; height: 100%; display: block; border-radius: 12px; } .ap2__side { display: flex; flex-direction: column; gap: 12px; min-height: 0; } .ap2__panel { background: #fff; border-radius: 20px; padding: 15px 18px; overflow: hidden; flex: 1 1 auto; min-height: 0; } .ap2__panel--out { flex: none; } .ap2__h { font-family: Poppins, sans-serif; font-weight: 600; font-size: 21px; margin: 0; color: #14211A; } .ap2__sub { font-size: 14px; line-height: 1.4; color: #6B7A72; margin: 4px 0 0; } .ap2__btns { display: flex; gap: 9px; margin: 12px 0 0; } .ap2__btn { border-radius: 11px; padding: 10px 17px; font-size: 15px; font-weight: 600; color: #14211A; background: #fff; border: 1px solid #DFE5E0; } .ap2__btn--on { background: #1D4633; color: #fff; border-color: #1D4633; } .ap2__srow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; } .ap2__slab { font-size: 15px; font-weight: 600; color: #14211A; } .ap2__sval { font-size: 15px; font-weight: 600; color: #14211A; font-family: var(--mono-deck); } .ap2__strack { position: relative; display: block; height: 8px; border-radius: 999px; margin-top: 5px; background: linear-gradient(90deg, #3F8663 0%, #7FB98C 46%, #E9C64A 100%); } .ap2__strack b { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 17px; height: 17px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(20,33,26,0.32); display: block; } .ap2__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; } .ap2__tile { border: 1px solid #E6EBE7; border-radius: 13px; padding: 10px 12px; } .ap2__tl { display: block; font-size: 14px; font-weight: 600; color: #6B7A72; } .ap2__tv { display: block; font-family: Poppins, sans-serif; font-weight: 600; font-size: 25px; color: #14211A; margin-top: 4px; } .ap2__ts { display: block; font-size: 12px; line-height: 1.3; color: #8A968F; margin-top: 4px; } /* 4 · AI image — the visual generator's editorial diagram */ .mk--im { padding: 0; } .im__art { position: absolute; inset: 0; width: 1280px; height: 720px; } .im__chip { position: absolute; bottom: 26px; border-radius: 999px; padding: 11px 20px; font-size: 19px; background: rgba(31,41,51,0.82); color: #F6EFE0; } .im__chip--l { left: 26px; max-width: 780px; } .im__chip--r { right: 26px; font-family: var(--mono-deck); font-size: 16px; letter-spacing: 0.05em; } /* 5 · Chart — the visual generator's radar, in the app's card */ .mk--ch { background: #FFFFFF; padding: 38px 56px 24px; } .ch__title { font-family: Poppins, sans-serif; font-weight: 600; font-size: 33px; letter-spacing: -0.018em; margin: 0; } .ch__legend { display: flex; justify-content: center; gap: 30px; margin-top: 10px; } .ch__lg { display: flex; align-items: center; gap: 10px; font-size: 20px; color: #4A5560; } .ch__lg i { width: 34px; height: 16px; border-radius: 4px; border: 3px solid; display: block; } .ch__svg { width: 100%; height: 478px; display: block; margin-top: -14px; } .ch__key { display: flex; gap: 18px; align-items: flex-start; border-left: 5px solid #B45309; padding-left: 16px; } .ch__key-l { font-family: var(--mono-deck); font-size: 15px; letter-spacing: 0.15em; text-transform: uppercase; color: #B45309; padding-top: 4px; white-space: nowrap; } .ch__key-b { font-family: Poppins, sans-serif; font-weight: 600; font-size: 24px; margin: 0; line-height: 1.25; } /* 6 · Study notes — the note page, its generated cover, and the tool menu */ .mk--nt { background: #F7F9FB; } .nt2__bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 26px 12px; } .nt2__t { font-family: Poppins, sans-serif; font-weight: 600; font-size: 24px; color: #171B22; } .nt2__kebab { display: flex; flex-direction: column; gap: 4px; } .nt2__kebab i { width: 5px; height: 5px; border-radius: 999px; background: #5B6470; display: block; } .nt2__cover { position: relative; margin: 0 22px; height: 258px; border-radius: 16px; overflow: hidden; } .nt2__cover svg { width: 100%; height: 100%; display: block; } .nt2__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,22,30,0) 42%, rgba(16,22,30,0.74) 100%); } .nt2__pill { position: absolute; left: 16px; top: 16px; background: rgba(255,255,255,0.9); color: #2B3242; border-radius: 999px; padding: 8px 18px; font-size: 17px; font-weight: 500; } .nt2__ct { position: absolute; left: 26px; right: 26px; bottom: 20px; } .nt2__cth { display: block; font-family: Poppins, sans-serif; font-weight: 600; font-size: 34px; color: #fff; letter-spacing: -0.02em; } .nt2__cd { display: block; font-size: 17px; color: rgba(255,255,255,0.82); margin-top: 6px; } .nt2__body { padding: 20px 26px 0; overflow: hidden; } .nt2__h1 { display: flex; gap: 12px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 27px; line-height: 1.2; letter-spacing: -0.018em; color: #171B22; margin: 0; } .nt2__p { font-size: 18px; line-height: 1.5; color: #414B58; margin: 12px 0 0; max-width: 880px; } .nt2__h2 { display: flex; gap: 10px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 23px; margin: 15px 0 0; color: #171B22; } .nt2__ul { margin: 9px 0 0; padding-left: 26px; } .nt2__ul li { font-size: 17px; line-height: 1.5; color: #414B58; margin-bottom: 7px; max-width: 860px; } .nt2__ul li::marker { color: #2E77C4; } .nt2__ul li b { color: #171B22; font-weight: 600; } .nm { position: absolute; right: 26px; top: 58px; width: 322px; background: #EDF0F4; border-radius: 14px; padding: 8px 0; box-shadow: 0 18px 44px rgba(20,25,35,0.3); z-index: 3; } .nm__row { display: flex; align-items: center; gap: 16px; padding: 13px 20px; font-size: 19px; color: #2B3242; } .nm__row--gen { font-weight: 500; } .nm__row svg { flex: none; } .nm__sep { display: block; height: 1px; background: #DCE1E8; margin: 7px 0; } /* 7 · Courses — the generated course, as the learner opens it */ .mk--cr { background: #F1F4F8; padding: 0; display: flex; flex-direction: column; } .cs__hero { position: relative; height: 278px; flex: none; overflow: hidden; } .cs__hero svg { width: 100%; height: 100%; display: block; } .cs__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,18,26,0.34) 0%, rgba(12,18,26,0) 32%, rgba(12,18,26,0.8) 100%); } .cs__back { position: absolute; left: 22px; top: 18px; } .cs__chips { position: absolute; left: 26px; bottom: 84px; display: flex; flex-wrap: wrap; gap: 10px; } .cs__chip { display: flex; align-items: center; gap: 8px; white-space: nowrap; background: rgba(22,28,38,0.62); color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 16px; } .cs__title { position: absolute; left: 0; right: 0; bottom: 22px; padding: 0 40px; text-align: center; font-family: Poppins, sans-serif; font-weight: 600; font-size: 37px; line-height: 1.16; color: #fff; margin: 0; letter-spacing: -0.02em; } .cs__body { flex: 1; min-height: 0; padding: 18px 30px 0; overflow: hidden; } .cs__about { background: #fff; border: 1px solid #E1E7EF; border-radius: 14px; padding: 17px 22px 19px; } .cs__ah { display: flex; align-items: center; gap: 10px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 22px; margin: 0; color: #171B22; } .cs__ab { font-size: 17px; line-height: 1.5; color: #414B58; margin: 10px 0 0; } .cs__ab b { color: #171B22; font-weight: 600; } .cs__prow { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 16px; } .cs__pl { font-size: 18px; font-weight: 600; color: #171B22; } .cs__pr { font-size: 17px; color: #6B7684; white-space: nowrap; } .cs__ptrack { display: block; height: 9px; border-radius: 999px; background: #DDE3EB; margin-top: 9px; } .cs__lh { display: flex; gap: 10px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 23px; margin: 16px 0 0; color: #171B22; } .cs__lesson { background: #fff; border: 1px solid #E1E7EF; border-radius: 14px; padding: 16px 22px 18px; margin-top: 12px; } .cs__lt { font-family: Poppins, sans-serif; font-weight: 600; font-size: 23px; margin: 0; color: #171B22; } .cs__ld { font-size: 16px; line-height: 1.45; color: #8A93A1; margin: 8px 0 0; } .cs__view { display: block; width: max-content; margin: 12px auto 0; background: #EEF2F7; color: #2B3242; border-radius: 999px; padding: 12px 26px; font-size: 18px; font-weight: 600; } /* 8 · Flashcards — the study view */ .mk--fc { background: #FFFFFF; padding: 0 30px 24px; display: flex; flex-direction: column; } .fs__prog { height: 7px; background: #E6EAF0; margin: 0 -30px; } .fs__prog span { display: block; width: 7%; height: 100%; background: #2B4A7E; } .fs__count { text-align: center; font-size: 19px; color: #6B7684; margin: 16px 0 0; } .fs__card { flex: 1; margin-top: 14px; background: #F5F8FD; border: 1px solid #CFDCF0; border-radius: 16px; position: relative; display: flex; align-items: center; justify-content: center; padding: 0 70px; } .fs__pill { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); background: #DEE8F6; color: #2B4A7E; border-radius: 999px; padding: 8px 20px; font-size: 16px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .fs__q { font-size: 37px; color: #1F2933; text-align: center; margin: 0; line-height: 1.3; } .fs__flip { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 17px; color: #9AA3B0; } .fs__dots { display: flex; justify-content: center; gap: 9px; margin-top: 16px; } .fs__dots i { width: 12px; height: 12px; border-radius: 999px; background: #D5DAE1; display: block; } .fs__dots i.on { background: #2B4A7E; } .fs__dots i.ok { background: #3DA35D; } .fs__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; } .fs__btn { display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 12px; padding: 19px; font-size: 22px; font-weight: 600; } .fs__btn--still { background: #FFFFFF; border: 2px solid #E7C200; color: #C99400; } .fs__btn--got { background: #3DA35D; color: #FFFFFF; } /* 9 · Quizzes — the take view */ .mk--qz { background: #F8FAFC; padding: 0; display: flex; flex-direction: column; } .qt__top { display: flex; justify-content: space-between; padding: 20px 30px 12px; font-size: 18px; color: #6B7684; } .qt__pct { color: #2563EB; font-weight: 600; } .qt__bar { height: 6px; background: #E6EAF0; margin: 0 30px; border-radius: 999px; } .qt__scroll { flex: 1; overflow: hidden; padding: 22px 200px 0; } .qt__card { background: #EEF2F8; border-radius: 16px; padding: 22px 26px; margin-bottom: 18px; } .qt__chips { display: flex; align-items: center; gap: 12px; } .qt__q { background: #DCE8F8; color: #1D4ED8; border-radius: 8px; padding: 5px 12px; font-size: 16px; font-weight: 600; } .qt__type { display: flex; align-items: center; gap: 7px; font-size: 16px; color: #7A6B8E; } .qt__type i { width: 14px; height: 14px; border-radius: 999px; border: 3px solid #8B6FA8; display: block; } .qt__text { font-size: 24px; color: #1F2933; margin: 16px 0; } .qt__opt { display: flex; align-items: center; gap: 16px; background: #FFFFFF; border: 1px solid #E4E8EF; border-radius: 10px; padding: 15px 20px; margin-bottom: 10px; font-size: 20px; color: #2B3242; } .qt__radio { width: 22px; height: 22px; border-radius: 999px; border: 2px solid #AEB9C6; display: block; flex: none; } .qt__foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 30px; border-top: 1px solid #E6EAF0; background: #FFFFFF; font-size: 18px; color: #6B7684; } .qt__send { display: flex; align-items: center; gap: 10px; background: #1E3A5F; color: #fff; border-radius: 10px; padding: 14px 26px; font-size: 19px; font-weight: 600; } /* ── Chrome, once the deck has moved ─────────────────────────── The photograph is dark at the top, so the header reads unaided on the cover; past it the slides put light mockups behind it, and the header needs its own plate. Added by deck.js on scroll. */ .chrome--stuck { background: rgba(10, 10, 18, 0.72); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--on-dark-edge); }