/* Starlite — product showcase (public/showcase/index.html). * * Two layers: * · the PAGE, set like a Clay case study: a warm white page, one grotesk, a * colour band for the title, short headed sections and big, quiet media; * · the PICTURES: Starlite's real screens rebuilt in HTML on artboards (.art), * drawn at design size in px and scaled to their frame by showcase.js. The * replicas mirror app/src/theme/tokens.ts and the live Expo screens (copy, * layout, colour slots), in the brand's faces: Montserrat for the interface, * Libre Baskerville for Starlo's voice, Komtties for activity titles. */ @font-face { font-family: 'Komtties'; src: url('fonts/Komtties.woff') format('woff'); font-display: swap; } :root { /* page */ --page: #FBFBF9; --text: #0A0B0F; --sub: #5C6270; --hair: #E4E6EA; --tint: #F0F4F8; --black: #07080C; --band: #001A66; --pad: clamp(20px, 5.2vw, 74.88px); --gap: clamp(10px, 1.1vw, 15.84px); --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --expo: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --ease: cubic-bezier(.2, .8, .2, 1); /* app (tokens.ts) */ --night: #001A66; --royal: #0051C2; --blue: #2551A1; --b300: #B8D4F0; --b100: #DCF0FF; --b50: #F2FBFF; --skyc: #A9D1F5; --yellow: #FFD95A; --ink: #1F2933; --ink7: #334E68; --ink5: #52606D; --ink4: #5B6B80; --ink3: #9AA5B1; --ink2: #D9E2EC; --ink1: #E4ECF3; --ink05: #EEF2F7; --cream: #FFF5DC; --cream-ink: #444444; --chat-ink: #E0E0E0; --ok-bg: #D4EDDA; --ok: #28A745; --ok-ink: #155724; --ok-shade: #1E7E34; --no-bg: #F8D7DA; --no: #DC3545; --retry-bg: #FFF3CD; --retry-ink: #856404; --teal: #286E74; --ui: 'Montserrat', system-ui, sans-serif; --voice: 'Libre Baskerville', Georgia, serif; --kid: 'Komtties', 'Comic Sans MS', cursive; --mono: ui-monospace, Menlo, Consolas, monospace; } /* Card slots (tokens.ts cardSlots): one gradient, border and accent per subject. */ .t-math { --from: #F2FBFF; --to: #DCF0FF; --line: #B8D4F0; --acc: #2551A1; } .t-ela { --from: #FFF9F3; --to: #FFDCDC; --line: #F0C8C0; --acc: #9E4C3E; } .t-sci { --from: #F5FFEF; --to: #DCFFEA; --line: #B0DFC0; --acc: #286E74; } .t-soc { --from: #FDF2FF; --to: #FFCAFC; --line: #D8B0E8; --acc: #804775; } .t-gen { --from: #FFFEF3; --to: #FFF7DC; --line: #E8D8A0; --acc: #2551A1; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--page); color: var(--text); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } ::selection { background: var(--yellow); color: var(--night); } img { display: block; max-width: 100%; } button { font: inherit; color: inherit; } figure { margin: 0; } a { color: inherit; } :focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 1rem; top: -4rem; z-index: 300; padding: .6rem 1rem; border-radius: 999px; background: var(--text); color: #fff; text-decoration: none; } .skip:focus { top: .75rem; } html.paused *, html.paused *::before, html.paused *::after { animation-play-state: paused !important; } /* Off screen, a region's looping animations hold still (showcase.js toggles .idle). */ .idle, .idle *, .idle *::before, .idle *::after { animation-play-state: paused !important; } .ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* ══ Nav ═════════════════════════════════════════════════ */ .nav { position: fixed; z-index: 100; inset: 0 0 auto; height: 72px; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 var(--pad); color: var(--text); background: rgba(251, 251, 249, .84); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 1px 0 rgba(10, 11, 15, .06); transition: transform .6s var(--expo), background-color .35s, color .35s, box-shadow .35s; } .nav.on-band { background: transparent; color: var(--blue); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .nav.tuck { transform: translateY(-100%); } .brand { justify-self: start; font-size: 19px; font-weight: 600; letter-spacing: -.035em; text-decoration: none; } .nav-r { justify-self: end; display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); } .lnk { font-size: 15px; font-weight: 500; text-decoration: none; opacity: .86; transition: opacity .2s; } .lnk:hover { opacity: 1; } .motion { width: 36px; height: 36px; padding: 0; border: 1px solid rgba(10, 11, 15, .14); border-radius: 50%; display: grid; place-items: center; background: transparent; cursor: pointer; transition: border-color .3s, background-color .3s; } .nav.on-band .motion { border-color: rgba(37, 81, 161, .3); } .motion:hover { background: rgba(127, 127, 127, .12); } .motion svg { width: 12px; height: 12px; } .motion .i-play, .motion[aria-pressed="true"] .i-pause { display: none; } .motion[aria-pressed="true"] .i-play { display: block; } .cta { display: inline-grid; place-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--text); color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color .35s, color .35s; } .nav.on-band .cta { background: var(--blue); color: #fff; } .bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--royal); transform-origin: 0 50%; transform: scaleX(0); transition: opacity .3s; } .nav.on-band .bar { opacity: 0; } @media (max-width: 760px) { .nav { height: 60px; } .lnk { display: none; } } /* ══ Title band ══════════════════════════════════════════ */ /* Math subject slot (t-math): light blue gradient, blue type. */ .band { position: relative; overflow: hidden; background: linear-gradient(170deg, #F2FBFF 0%, #DCF0FF 100%); color: var(--blue); padding: clamp(132px, 13vw, 187.2px) var(--pad) clamp(56px, 6.4vw, 92.16px); } .band h1 { margin: 0 0 0 -.045em; font-size: clamp(52px, 7vw, 100.8px); font-weight: 600; line-height: 1; letter-spacing: -.055em; } .band p { margin: clamp(16px, 1.7vw, 24.48px) 0 0; max-width: 26em; font-size: clamp(19px, 2vw, 28.8px); line-height: 1.3; letter-spacing: -.02em; color: var(--blue); text-wrap: balance; } .band .up { display: block; overflow: hidden; } .band .up > span { display: block; } /* ══ Media frames + artboards ════════════════════════════ */ .md { --aw: 1600; --ah: 1000; position: relative; overflow: hidden; aspect-ratio: var(--aw) / var(--ah); isolation: isolate; } .art { position: absolute; left: 0; top: 0; width: calc(var(--aw) * 1px); height: calc(var(--ah) * 1px); transform-origin: 0 0; } @media (max-width: 760px) { .md { aspect-ratio: var(--mw, var(--aw)) / var(--mh, var(--ah)); } .art { width: calc(var(--mw, var(--aw)) * 1px); height: calc(var(--mh, var(--ah)) * 1px); } } .one { margin: var(--gap) var(--pad) 0; } .bleed { margin: var(--gap) 0 0; } .duo, .quad { display: grid; gap: var(--gap); margin: var(--gap) var(--pad) 0; } .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--gap); margin: var(--gap) var(--pad) 0; } :is(.ch-head, .block, .cap, .jobs, .themes-row) + :is(.md, .one, .bleed, .duo, .quad, .cards, .mq, .games, .viz, .subj) { margin-top: clamp(36px, 4.4vw, 63.36px); } @media (max-width: 760px) { .duo, .quad { grid-template-columns: minmax(0, 1fr); } .cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-left: 0; margin-right: 0; padding: 0 var(--pad) 8px; scrollbar-width: none; } .cards::-webkit-scrollbar { display: none; } .cards > * { flex: 0 0 76%; scroll-snap-align: center; } } /* Panel backgrounds */ .bg-sky { background: linear-gradient(160deg, #D9E9FD 0%, #EAF3FF 48%, #F6FAFF 100%); } .bg-math { background: linear-gradient(165deg, #DCF0FF 0%, #F2FBFF 75%); } .bg-ela { background: linear-gradient(170deg, #FFF6EE 0%, #FFE2DE 100%); } .bg-sci { background: linear-gradient(170deg, #F2FEEC 0%, #D9F8E6 100%); } .bg-soc { background: linear-gradient(170deg, #FCF1FF 0%, #F8D6F6 100%); } .bg-gen { background: linear-gradient(170deg, #FFFEF3 0%, #FFF3D1 100%); } .bg-night { background: radial-gradient(70% 60% at 50% 110%, rgba(13, 95, 214, .85), rgba(0, 81, 194, 0) 70%), linear-gradient(180deg, #000F45 0%, #001A66 60%, #00227E 100%); } .bg-chat { background: linear-gradient(180deg, #0051C2 0%, #001A66 100%); } .bg-deep { background: radial-gradient(55% 60% at 50% 42%, rgba(0, 81, 194, .45), rgba(0, 81, 194, 0) 70%), #000B33; } .bg-paper { background: #F3EEE4; } .bg-mist { background: #EDF0F4; } .bg-ink { background: radial-gradient(60% 70% at 50% 40%, #16224A 0%, #0B1129 55%, #07080C 100%); } /* Reveal: text rises; media lifts. */ html.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--expo), transform 1.3s var(--expo); } html.js .rv.in { opacity: 1; transform: none; } html.js .md.rv, html.js .card.rv, html.js .duo > .rv, html.js .quad > .rv { transform: translateY(60px); } html.js .md.rv.in, html.js .card.rv.in, html.js .duo > .rv.in, html.js .quad > .rv.in { transform: none; } /* ══ Page sections ═══════════════════════════════════════ */ .wrap { padding-left: var(--pad); padding-right: var(--pad); } /* Sky + intro + facts share one dark blue wrap, white type. */ .night { padding-bottom: clamp(64px, 8vw, 115.2px); background: linear-gradient(180deg, #000F45 0%, #001A66 45%, #00227E 100%); color: #fff; } .night .facts > div { border-top-color: rgba(255, 255, 255, .22); } .night .facts span { color: rgba(255, 255, 255, .74); } .intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px; padding-top: clamp(64px, 8vw, 115.2px); } .intro-copy p { margin: 0; max-width: 30em; font-size: clamp(18px, 1.55vw, 22.32px); line-height: 1.45; letter-spacing: -.014em; text-wrap: pretty; } .intro-copy p + p { margin-top: 1em; } .svc { justify-self: end; width: min(100%, 280px); margin: 0; padding: 0; list-style: none; font-size: 16px; font-weight: 500; line-height: 2.05; } .svc a { display: inline-block; margin-top: 18px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; } .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(56px, 7vw, 100.8px); } .facts > div { padding-top: 18px; border-top: 1px solid var(--hair); } .facts b { display: block; font-size: clamp(34px, 3.7vw, 53.28px); font-weight: 600; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; } .facts span { display: block; margin-top: 12px; max-width: 14em; font-size: 15px; line-height: 1.4; color: var(--sub); } @media (max-width: 760px) { .intro { grid-template-columns: minmax(0, 1fr); row-gap: 36px; } .svc { justify-self: start; } .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } } /* Gallery: full-bleed rows of real web-app screens on the brand gradient; showcase.js drifts alternate rows left and right with the scroll. Margins stagger the rows like brickwork, and stay put when there's no motion. */ .chapter { padding-top: clamp(120px, 14vw, 201.6px); } .chapter.dark, .chapter.tint { margin-top: clamp(120px, 14vw, 201.6px); padding-top: clamp(96px, 11vw, 158.4px); padding-bottom: clamp(96px, 11vw, 158.4px); } .chapter.dark { background: var(--black); color: #F4F5F7; --sub: #9AA0AD; --hair: rgba(255, 255, 255, .12); } .chapter.tint { background: var(--tint); } .chapter.dark + .chapter.tint { margin-top: 0; } .chapter.dark + .chapter, .chapter.tint + .chapter { padding-top: clamp(96px, 11vw, 158.4px); } /* The chat chapter opens on its own band, straight under the interests demo: no white gap between. */ .iv-band + .chapter { padding-top: 0; } /* ...and its band carries the demo's background on, both running straight down, so they meet on the same blue with no edge. */ .iv-band + .chapter > .band-math { background: linear-gradient(180deg, #DCF0FF 0%, #F2FBFF 100%); } .eyebrow { display: flex; gap: 12px; margin: 0 0 20px; font-size: 15px; font-weight: 500; color: var(--sub); } .ch-head h2 { margin: 0; max-width: 13em; font-size: clamp(36px, 4.4vw, 63.36px); font-weight: 600; line-height: 1.04; letter-spacing: -.05em; text-wrap: balance; } .lede { margin: clamp(18px, 2vw, 28px) 0 0; max-width: 31em; font-size: clamp(17px, 1.55vw, 22px); line-height: 1.45; letter-spacing: -.012em; text-wrap: pretty; } .block { padding-top: clamp(96px, 11vw, 158.4px); } .block h3 { margin: 0; max-width: 16em; font-size: clamp(26px, 2.8vw, 40.32px); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; } .block p { margin: 16px 0 0; max-width: 31em; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; color: var(--sub); text-wrap: pretty; } .cap { margin: clamp(26px, 3vw, 43.2px) var(--pad) 0; max-width: 31em; font-size: clamp(15px, 1.15vw, 16.56px); line-height: 1.5; color: var(--sub); text-wrap: pretty; } .cap.r { margin-left: calc(50% + var(--gap) / 2); } /* A chapter opened as two columns: its words left, one phone right. Stacks on a narrow screen. */ .ch-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); } .ch-split .cap { margin: clamp(22px, 2.4vw, 34px) 0 0; } @media (max-width: 760px) { .ch-split { grid-template-columns: minmax(0, 1fr); } } /* A full-width band in the math light blue, its words in the app blue */ .band-math { padding-top: clamp(80px, 9vw, 129.6px); padding-bottom: clamp(80px, 9vw, 129.6px); background: linear-gradient(165deg, #DCF0FF 0%, #F2FBFF 75%); color: var(--blue); --sub: var(--blue); } #stPh { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); } /* the frame's rim only, no drop shadow */ .art.is-m #stPh { left: 40px !important; top: 28px !important; } /* The chat's drawings banner: the chat gradient, two rows (paper on top, pictures below) scrolling opposite ways (each row's halves are identical, so -50% loops) */ /* The drawings strip and its copy share the chat's blue, which runs on into the night band below. */ .band-drw { background: linear-gradient(180deg, #0051C2 0%, #001A66 100%); color: #fff; --sub: #A9D1F5; } .band-drw .block { padding-top: clamp(64px, 7vw, 100.8px); } .band-drw .drw { margin-top: clamp(16px, 2vw, 28.8px); background: none; } .drw { display: grid; gap: clamp(20px, 2.2vw, 31.68px); overflow: hidden; padding: clamp(28px, 3vw, 43.2px) 0; background: linear-gradient(180deg, #0051C2 0%, #001A66 100%); } .drw-track { display: flex; align-items: center; width: max-content; animation: drw 120s linear infinite; } .drw-track + .drw-track { animation-duration: 108s; animation-direction: reverse; } /* the pictures run left to right */ @keyframes drw { to { transform: translateX(-50%); } } .drw-i { flex: none; display: grid; gap: 12px; justify-items: start; margin: 0 clamp(20px, 2.4vw, 34.56px) 0 0; } .drw-i small { font-size: 13px; font-weight: 600; color: #A9D1F5; } /* RichText's paper block: a white notebook sheet (✏️ On paper) or a frosted picture (👀 Look) */ .dw { width: max-content; max-width: 100%; overflow: hidden; border: 1px solid; } .dw-b { display: grid; gap: 8px; } .dw svg { display: block; max-width: 100%; height: auto; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } .dw-h { padding: 6px 14px; border-bottom: 1px solid; font-size: 13px; font-weight: 700; } .dw pre { margin: 0; font: 400 17px/1.45 var(--mono); white-space: pre; } .dw.pa { border-color: #B8D4F0; border-radius: 8px; background: #fff; } .dw.pa .dw-h { border-color: #B8D4F0; background: #F2FBFF; color: #2551A1; } .dw.pa .dw-b { margin-left: 22px; padding: 14px 20px 14px 14px; border-left: 2px solid #F2A0A0; } .dw.pa pre { color: #1F2933; } .dw pre .sl { position: relative; display: inline-block; } .dw pre .sl::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; border-radius: 2px; background: var(--no); transform: rotate(-24deg); } .dw.lk { border-color: rgba(255, 255, 255, .28); border-radius: 12px; background: rgba(255, 255, 255, .08); } .dw.lk .dw-h { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .10); color: #A9D1F5; } .dw.lk .dw-b { padding: 14px 20px; } .dw.lk pre { color: #fff; } @media (prefers-reduced-motion: reduce) { .drw { overflow-x: auto; } } /* The activities band: dark blue, picking up where the drawings banner's gradient ends so the two read as one run of blue. White heading, sky-blue body copy. */ .band-night { padding-bottom: clamp(48px, 6vw, 86.4px); background: linear-gradient(180deg, #001A66 0%, #0A2E8A 100%); color: #fff; --sub: #A9D1F5; } .band-night .block { padding-top: clamp(64px, 7vw, 100.8px); } /* Activity blocks: the homepage's strip, framed full width; blocks.html reports its height */ .blk { margin-top: var(--gap); } /* No pointer events: the frame must never catch the wheel, or the page's smooth scroll stalls over it. The starting height is the strip's own at desktop widths, so nothing shifts when it reports in. */ .blk iframe { display: block; width: 100%; height: 1084px; border: 0; background: transparent; pointer-events: none; } @media (max-width: 640px) { .blk iframe { height: 680px; } } /* The phone chat header's Star Challenge ring (StarChallengeTracker, compact) */ .kh .sct-ring { display: block; width: 44px; height: 44px; } .kh .sct-ring em { font-size: 19px; } .cap b { color: var(--text); font-weight: 500; } @media (max-width: 760px) { .cap.r { margin-left: var(--pad); } } .figcap { margin-top: 16px; font-size: 15px; line-height: 1.45; color: var(--sub); } .figcap b { display: block; color: var(--text); font-weight: 500; } .figcap .k { margin-right: 8px; color: var(--sub); font-variant-numeric: tabular-nums; } /* Interest chips + segmented control, set in the page column */ .themes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .theme { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 5px; border-radius: 999px; border: 1px solid var(--hair); background: #fff; font: 500 15px/1 var(--sans); color: var(--text); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .2s var(--ease); } .theme img { width: 34px; height: 34px; padding: 3px; border-radius: 50%; object-fit: contain; background: #F4F5F7; } .theme:hover { border-color: #C6CAD2; transform: translateY(-1px); } .theme[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; } .theme[aria-pressed="true"] img { background: #fff; } /* Games list */ .games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); margin: 0 var(--pad); padding: 0; list-style: none; counter-reset: g; } .games li { counter-increment: g; display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--hair); font-size: 16px; } .games li::before { content: counter(g, decimal-leading-zero); color: var(--sub); font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .games { grid-template-columns: repeat(2, minmax(0, 1fr)); } .games li { font-size: 15px; } } /* Three jobs */ .jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: clamp(48px, 6vw, 86.4px) var(--pad) 0; padding: 0; list-style: none; } .jobs li { padding-top: 18px; border-top: 1px solid #CED5DE; } .jobs .n { display: block; font-size: 14px; color: var(--sub); font-variant-numeric: tabular-nums; } .jobs b { display: block; margin-top: 24px; font-size: clamp(20px, 1.7vw, 24.48px); font-weight: 600; letter-spacing: -.03em; } .jobs p { margin: 8px 0 0; max-width: 22em; font-size: 16px; line-height: 1.5; color: var(--sub); } @media (max-width: 760px) { .jobs { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } } /* Stats */ .stats { margin: clamp(48px, 6vw, 86.4px) var(--pad) 0; } .stat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 40px; align-items: end; padding: clamp(26px, 3.2vw, 46.08px) 0; border-top: 1px solid var(--hair); } .stat:last-child { border-bottom: 1px solid var(--hair); } .stat b { font-size: clamp(52px, 7.6vw, 109.44px); font-weight: 600; line-height: .92; letter-spacing: -.06em; white-space: nowrap; font-variant-numeric: tabular-nums; } .stat p { margin: 0; max-width: 22em; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; color: var(--sub); } .stat p strong { display: block; margin-bottom: 4px; color: var(--text); font-weight: 500; } .limits { margin: 28px var(--pad) 0; max-width: 46em; font-size: 15px; line-height: 1.5; color: var(--sub); } @media (max-width: 760px) { .stat { grid-template-columns: minmax(0, 1fr); row-gap: 16px; } } /* Footer: the case study ask, its sketches and the contact details, on one paper band that slides up over the last section */ .foot { margin-top: calc(var(--sec-r) * -1); padding: clamp(72px, 8vw, 115.2px) var(--pad) 32px; background: linear-gradient(180deg, #FFFEF3 0%, #FFF7DC 100%); color: var(--blue); --sub: var(--blue); } /* Every section opens on a rounded top, like the interests section (.hp-int), white chapters included (on the page color). One that follows a colored band slides up over it, so its corners show that band, not the page. The chat band (.band-math) is left square: it carries on the interests demo's blue with no edge. */ :root { --sec-r: 24px; } @media (max-width: 640px) { :root { --sec-r: 18px; } } .chapter { background: var(--page); } .night, .iv-band, .drw, .band-drw, .band-night, .chapter, .foot, .hp-int + .block, .band-sky + .block { position: relative; border-radius: var(--sec-r) var(--sec-r) 0 0; } .night, .iv-band, .drw, .band-drw, .band-night, .chapter.dark + .chapter.tint, .chapter.dark + .chapter, .chapter.tint + .chapter, .band-sky + .chapter, .band-night + .chapter { margin-top: calc(var(--sec-r) * -1); } /* The white run after the interests section (inside the chat chapter) starts on its first block. */ .hp-int + .block, .band-sky + .block { margin-top: calc(var(--sec-r) * -1); background: var(--page); } /* Run the week: a light blue band with blue type (like .band-math), its calendar straight on it. It follows the curriculum section, so it slides up over it on the same rounded top. */ .band-sky { position: relative; margin-top: calc(var(--sec-r) * -1); border-radius: var(--sec-r) var(--sec-r) 0 0; padding-bottom: clamp(56px, 7vw, 100.8px); background: linear-gradient(180deg, #F2FBFF 0%, #DCF0FF 100%); color: var(--blue); --sub: var(--blue); } /* Before and after: a white band between the curriculum and Run the week, on the same rounded top. */ .band-prog { position: relative; margin-top: calc(var(--sec-r) * -1); border-radius: var(--sec-r) var(--sec-r) 0 0; padding-bottom: clamp(96px, 11vw, 158.4px); background: var(--page); } .foot-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; } @media (max-width: 760px) { .foot-cta { grid-template-columns: minmax(0, 1fr); } } .foot h2 { margin: 0; font-size: clamp(44px, 5.6vw, 80.64px); font-weight: 600; line-height: 1; letter-spacing: -.055em; } .foot-sub { margin: clamp(28px, 3.5vw, 50.4px) 0 0; font-size: clamp(20px, 2.2vw, 31.68px); font-weight: 600; letter-spacing: -.03em; } .foot-mail { display: inline-block; margin-top: 8px; font-size: clamp(20px, 2.2vw, 31.68px); letter-spacing: -.03em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; } .foot-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 20px; font-size: clamp(16px, 1.3vw, 18.72px); } .foot-links a { text-decoration: none; } .foot-links a:hover { text-decoration: underline; } .foot-art { overflow: visible; } .foot-row { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: clamp(56px, 7vw, 100.8px); padding-top: 24px; border-top: 1px solid rgba(37, 81, 161, .2); font-size: 15px; color: var(--sub); } .foot-row a { text-decoration: none; color: inherit; } .foot-row a:hover { text-decoration: underline; } .foot-row .sp { flex: 1; } /* "Play" follows the pointer over the playable pictures. */ .try { position: fixed; z-index: 150; left: 0; top: 0; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: #fff; font: 500 14px/1 var(--sans); pointer-events: none; scale: 0; transition: scale .35s var(--spring); } .try.on { scale: 1; } @media (hover: none) { .try { display: none; } } /* ══ Shared replica parts ════════════════════════════════ */ .ui { font-family: var(--ui); color: var(--ink); } .ui * { font-family: inherit; } /* Phone: design 390 × 844 */ .ph { position: absolute; width: 390px; height: 844px; padding: 11px; border-radius: 62px; background: #0B0C10; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16), 0 60px 110px -50px rgba(0, 20, 70, .55), 0 26px 50px -30px rgba(0, 20, 70, .4); } .ph.bare { padding: 0; border-radius: 50px; background: none; box-shadow: 0 50px 90px -50px rgba(0, 20, 70, .5), 0 0 0 1px rgba(0, 20, 70, .06); } .scr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 52px; display: flex; flex-direction: column; background: var(--b50); } .ph.bare .scr { border-radius: 50px; } .scr::before { content: ''; position: absolute; z-index: 40; left: 50%; top: 11px; width: 116px; height: 34px; margin-left: -58px; border-radius: 20px; background: #000; } .sb { flex: none; position: relative; z-index: 5; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 4px 30px 0 42px; font: 600 16px/1 -apple-system, 'SF Pro Text', 'Inter', sans-serif; color: var(--ink); } .sb.lt { color: #fff; } .sb i { width: 72px; height: 13px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='1'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='1'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='1'/%3E%3Cpath d='M30 11.6 33 8.2a4.6 4.6 0 0 0-6 0zM24.2 5.6l1.5 1.6a6.2 6.2 0 0 1 8.6 0l1.5-1.6a8.4 8.4 0 0 0-11.6 0zM21.4 2.6 23 4.2a10.4 10.4 0 0 1 14 0l1.6-1.6a12.6 12.6 0 0 0-17.2 0z'/%3E%3Crect x='42.5' y='1' width='14' height='10' rx='3' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Crect x='44.3' y='2.8' width='10.4' height='6.4' rx='1.6'/%3E%3Crect x='57.6' y='4' width='1.6' height='4' rx='.8'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='1'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='1'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='1'/%3E%3Cpath d='M30 11.6 33 8.2a4.6 4.6 0 0 0-6 0zM24.2 5.6l1.5 1.6a6.2 6.2 0 0 1 8.6 0l1.5-1.6a8.4 8.4 0 0 0-11.6 0zM21.4 2.6 23 4.2a10.4 10.4 0 0 1 14 0l1.6-1.6a12.6 12.6 0 0 0-17.2 0z'/%3E%3Crect x='42.5' y='1' width='14' height='10' rx='3' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Crect x='44.3' y='2.8' width='10.4' height='6.4' rx='1.6'/%3E%3Crect x='57.6' y='4' width='1.6' height='4' rx='.8'/%3E%3C/svg%3E") no-repeat center / contain; } /* Chat surface (color.chat): bot text has no bubble; the kid's is cream. */ .chat { background: linear-gradient(180deg, #0051C2 0%, #001A66 100%); color: var(--chat-ink); } .log { flex: 1; min-height: 0; position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(transparent 0, #000 44px); mask-image: linear-gradient(transparent 0, #000 44px); } .col { position: absolute; left: 0; right: 0; top: 0; padding: 22px 24px 6px; transition: transform .6s var(--ease), opacity .5s; } .col.fade { opacity: 0; } .m { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; animation: mIn .5s var(--ease) both; } .m p { margin: 0; } .m p + p { margin-top: 6px; } .m b { color: #fff; font-weight: 600; } .m .lead { display: block; margin-bottom: 4px; font-family: var(--voice); font-size: 20px; font-weight: 700; line-height: 1.38; color: #fff; } .m.kid { width: max-content; max-width: 76%; margin-left: auto; padding: 9px 17px; border-radius: 14px; background: var(--cream); color: var(--cream-ink); } .m.dots { display: flex; gap: 6px; padding: 8px 0; } .m.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--b300); animation: dot 1.1s infinite; } .m.dots i:nth-child(2) { animation-delay: .15s; } .m.dots i:nth-child(3) { animation-delay: .3s; } @keyframes mIn { from { opacity: 0; transform: translateY(12px); } } @keyframes dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } } .cmp { flex: none; position: relative; display: flex; align-items: center; gap: 10px; height: 52px; margin: 8px 14px 30px; padding: 0 6px 0 16px; border-radius: 999px; background: #fff; font-size: 15px; color: var(--ink); } .cmp > .ic { width: 20px; height: 20px; color: var(--night); } .cmp .tx { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; } .cmp .ph-t { color: var(--ink4); } .caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--ink); animation: caret 1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } .send { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--night); color: #fff; transition: transform .2s var(--ease); } .send .ic { width: 18px; height: 18px; stroke-width: 2.6; } .send.tap { transform: scale(.84); } /* Phone chat header: Starlo · lesson · progress ring */ .kh { flex: none; display: flex; align-items: center; gap: 12px; padding: 4px 18px 12px; } .kh > img { width: 48px; height: auto; } .kh b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; font-weight: 700; color: #fff; text-align: center; } .ring { position: relative; flex: none; width: 54px; height: 54px; } .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ring circle { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 3.4; } .ring .v { stroke: rgba(255, 255, 255, .9); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; transition: stroke-dashoffset 1s var(--ease); } .ring em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 700; color: #fff; } /* Activity panel (ActivityPage): Komtties title, prompt, board, page nav. */ .ap { position: absolute; display: flex; flex-direction: column; overflow: hidden; border-radius: 30px; background: linear-gradient(180deg, var(--from) 0%, var(--to) 100%); color: var(--ink); box-shadow: 0 50px 100px -50px rgba(0, 30, 90, .45), 0 0 0 1px rgba(0, 30, 90, .05); } .ap-x { position: absolute; right: 22px; top: 22px; width: 24px; height: 24px; color: var(--ink3); } .ap-t { flex: none; margin: 30px 60px 0; text-align: center; font: 400 46px/1.1 var(--kid); color: var(--acc); } .ap-p { flex: none; margin: 18px auto 0; max-width: 560px; padding: 0 30px; text-align: center; font-size: 19px; line-height: 1.5; color: var(--ink5); text-wrap: balance; } .ap-b { flex: 1; min-height: 0; position: relative; } .ap-n { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 18px; } .ap-n span { font-size: 15px; font-weight: 700; color: var(--acc); font-variant-numeric: tabular-nums; } .nb { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1.5px rgba(37, 81, 161, .2); color: var(--blue); transition: background-color .35s, color .35s, box-shadow .35s, transform .15s; } .nb .ic { width: 24px; height: 24px; stroke-width: 2.4; } .nb.go { background: var(--blue); color: #fff; box-shadow: none; } .nb.off { opacity: .45; } .nb.tap { transform: scale(.9); } .note { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; font-size: 16.5px; font-weight: 600; } .note.good { background: var(--ok-bg); color: var(--ok-ink); } .note.retry { background: var(--retry-bg); color: var(--retry-ink); } .pop { opacity: 0; transform: translateY(8px) scale(.94); transition: opacity .35s, transform .5s var(--spring); } .pop.show { opacity: 1; transform: none; } /* Split It Even (CustomDistributeBlock): the sprites and the container art ARE the board. */ .sie { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; } .sie-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; min-height: 92px; margin-top: 26px; padding: 0 40px; } .slot { width: var(--tok, 76px); height: var(--tok, 76px); display: grid; place-items: center; } .tok { position: relative; width: var(--tok, 76px); height: var(--tok, 76px); padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; } .tok img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(60, 40, 20, .22)); pointer-events: none; transition: transform .3s var(--spring); } .tok::after { content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: 50%; background: rgba(255, 217, 90, .3); box-shadow: 0 0 0 3px var(--yellow); opacity: 0; transition: opacity .2s; } .tok.sel::after { opacity: 1; } .tok.sel img { transform: translateY(-6px) scale(1.06); } .sie-vs { display: flex; justify-content: center; gap: 40px; margin-top: 30px; } .vs { position: relative; width: var(--art, 230px); display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; border-radius: 22px; cursor: pointer; transition: background-color .25s; } .vs:hover { background: rgba(37, 81, 161, .05); } .vs-art { position: relative; width: var(--art, 230px); height: var(--art, 230px); pointer-events: none; } .vs-art > img { width: 100%; height: 100%; object-fit: contain; } .vs-in { position: absolute; left: 14%; right: 14%; top: 20%; bottom: 20%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2px; } .vs-in .tok { width: var(--tin, 52px); height: var(--tin, 52px); } .vs small { margin-top: 2px; font-size: 14px; color: var(--ink4); } .badge { min-width: 36px; height: 36px; margin-top: 6px; padding: 0 10px; border-radius: 99px; display: grid; place-items: center; background: var(--acc); color: #fff; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; transition: transform .3s var(--spring); } .badge.bump { transform: scale(1.25); } .sie .note { margin-top: 22px; } .wipe { position: absolute; inset: 0; z-index: 10; background: var(--acc); transform: translateX(-101%); pointer-events: none; } /* Pointer used in the scripted demos */ .cur { position: absolute; z-index: 30; left: 0; top: 0; width: 38px; height: 38px; opacity: 0; pointer-events: none; transition: transform .9s var(--ease), opacity .3s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 7.5-6.2 1.6L10 18.5z' fill='%23001A66' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / contain; filter: drop-shadow(0 4px 6px rgba(0, 20, 80, .3)); } .cur.show { opacity: 1; } .cur.down { scale: .85; } .tap-dot { position: absolute; z-index: 29; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 217, 90, .45); box-shadow: 0 0 0 3px rgba(255, 217, 90, .9); pointer-events: none; animation: tapDot .6s var(--expo) forwards; } @keyframes tapDot { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.2); opacity: 0; } } /* ══ 00 · Sky (the hero picture) ═════════════════════════ */ .sky { background: radial-gradient(closest-side at 50% 52%, rgba(13, 95, 214, .7) 0%, rgba(0, 81, 194, 0) 100%); } .sky-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .sky-lines path { fill: none; stroke: rgba(169, 209, 245, .45); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 13; animation: flow 1.8s linear infinite; transition: stroke .4s; } .sky-lines path.hot { stroke: #F2B705; stroke-width: 4; animation-duration: .5s; } @keyframes flow { to { stroke-dashoffset: -13; } } .node { position: absolute; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); } .node i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0%, var(--from) 42%, var(--to) 100%); box-shadow: inset 0 0 0 3px var(--line), 0 26px 44px -22px rgba(0, 40, 110, .4); animation: float 7s ease-in-out infinite; animation-delay: var(--dl, 0s); transition: transform .6s var(--spring); } .node img { width: 70%; height: 70%; object-fit: contain; } .node::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 3px solid var(--acc); opacity: 0; pointer-events: none; } .node.hot i { transform: scale(1.1); } .node.hot::after { animation: ringOut 1.5s var(--expo) infinite; } @keyframes ringOut { from { opacity: .7; transform: scale(.85); } to { opacity: 0; transform: scale(1.35); } } @keyframes float { 50% { translate: 0 -10px; } } .node.me { width: 230px; height: 230px; margin: -115px 0 0 -115px; } .node.me i { background: radial-gradient(closest-side, rgba(255, 217, 90, .5), rgba(255, 217, 90, .12) 55%, rgba(255, 217, 90, 0)); box-shadow: none; animation-duration: 6s; } .node.me img { width: 78%; height: auto; filter: drop-shadow(0 18px 26px rgba(160, 110, 0, .3)); } .spark { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); color: var(--c); animation: twinkle var(--t, 3s) ease-in-out infinite; animation-delay: var(--dl, 0s); } .spark svg { width: 100%; height: 100%; fill: currentColor; } @keyframes twinkle { 50% { opacity: .25; transform: scale(.6) rotate(20deg); } } .say { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 8px; width: 310px; pointer-events: none; } .say.l { align-items: flex-end; } .bub { max-width: 100%; padding: 13px 17px 14px; border-radius: 18px; background: #fff; font-size: 16px; line-height: 1.45; color: var(--ink5); box-shadow: 0 0 0 1px rgba(0, 26, 102, .06), 0 20px 44px -18px rgba(0, 26, 102, .3); opacity: 0; transform: translateY(10px) scale(.94); transition: opacity .4s, transform .6s var(--spring); } .bub.show { opacity: 1; transform: none; } .bub .lead { display: block; margin-bottom: 3px; font: 700 18px/1.35 var(--voice); color: var(--night); } .bub.kid { padding: 10px 17px; border-radius: 14px; background: var(--cream); color: var(--cream-ink); font-weight: 500; } .say.r .bub.kid { margin-left: 36px; } .say.l .bub.kid { margin-right: 0; } .art.is-m .say { left: 60px !important; right: 60px; top: auto !important; bottom: 36px; width: auto; align-items: center; } .art.is-m .bub { font-size: 29px; padding: 22px 28px; border-radius: 26px; } .art.is-m .bub .lead { font-size: 31px; } .art.is-m .bub.kid { margin: 0; } .art.is-m .node.m-off { display: none; } /* ══ 01 · Split view (student, desktop) ══════════════════ */ .cw { position: absolute; display: flex; overflow: hidden; border-radius: 28px; background: var(--night); box-shadow: 0 0 0 1px rgba(0, 30, 90, .08), 0 80px 140px -60px rgba(0, 30, 90, .55), 0 30px 60px -30px rgba(0, 30, 90, .35); } .cw-chat { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .cw-h { flex: none; position: relative; display: flex; align-items: center; gap: 14px; height: 78px; padding: 0 26px; border-bottom: 1px solid rgba(184, 212, 240, .14); white-space: nowrap; } .cw-h > b { font-size: 17px; font-weight: 700; color: #fff; } .chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .86); } .cw .log { -webkit-mask-image: linear-gradient(transparent 0, #000 60px); mask-image: linear-gradient(transparent 0, #000 60px); } .cw .col { max-width: 700px; margin: 0 auto; padding: 44px 34px 8px; } .cw .m { font-size: 17px; margin-bottom: 20px; } .cw .m .lead { font-size: 23px; } .cw .m.kid { font-size: 16.5px; padding: 10px 19px; } .cw .cmp { width: calc(100% - 52px); max-width: 640px; margin: 10px auto 26px; height: 56px; padding-left: 20px; font-size: 16px; } /* ActivitySlideOver on a split: flush top/right/bottom, rounded only on the edge facing the chat, with the chat's own gradient behind those corners (chat.tsx paints it there). */ .split-w { background: linear-gradient(180deg, #0051C2 0%, #001A66 100%); } .cw .ap { position: relative; flex: 0 0 0px; border-radius: 18px 0 0 18px; transition: flex-basis .9s var(--expo); box-shadow: 0 4px 12px rgba(0, 12, 40, .06); } .cw.open .ap { flex-basis: 600px; } .cw .ap-x { display: flex; gap: 18px; width: auto; height: auto; } .cw .ap-x .ic { width: 22px; height: 22px; } .cw-logo { display: none; } /* StudentRail: 80px brand-gradient column, Starlo (home) top, profile avatar bottom */ .srail { flex: none; width: 80px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px 0; background: linear-gradient(180deg, #0051C2 0%, #001A66 100%); border-right: 1px solid #fff; } .srail img { width: 44px; height: auto; } .srail .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #0051C2; box-shadow: inset 0 0 0 2px #fff; color: #fff; font-size: 18px; font-weight: 700; } /* Chat header (chat.tsx): class title · topic · Star Challenge tracker, three equal slots */ .cw .cw-h > b, .cw .chip-t, .cw .sct { flex: 1 1 0; min-width: 0; } .cw .cw-h > b { font: 700 18px/1.3 var(--voice); } .cw .chip-t { padding: 0; border-radius: 0; background: none; text-align: center; font-size: 13.5px; color: var(--chat-ink); } .sct { display: flex; justify-content: flex-end; --p: .08; } .sct-card { display: flex; align-items: center; gap: 10px; } .sct-th { flex: none; width: 64px; height: 36px; display: grid; place-items: center; border: 1px solid #fff; border-radius: 6px; background: rgba(0, 0, 0, .35); font-style: normal; font-size: 18px; line-height: 1; color: #fff; transition: color .4s, text-shadow .4s; } /* The white frame (cardThumb borderWidth 1) as a ring OVER the art, so it survives the artboard scale-down. */ .sct-th { position: relative; overflow: hidden; border: 0; } .sct-th::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px #fff; pointer-events: none; } .sct-th img { width: 100%; height: 100%; object-fit: cover; } .sct-ring em img { width: 69.5%; height: 69.5%; border-radius: 50%; object-fit: cover; background: rgba(0, 0, 0, .35); } .sct-b { width: 124px; display: flex; flex-direction: column; gap: 2px; } .sct-b small { display: flex; align-items: center; gap: 4px; font-size: 12px; letter-spacing: .3px; color: rgba(255, 255, 255, .8); } .sct-b small .ic { width: 11px; height: 11px; } .sct-b b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 600; color: #fff; } .sct-bar { height: 4px; margin-top: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .14); } .sct-bar i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: 2px; background: #FFE9B0; transition: width .65s var(--ease), background-color .65s; } .sct-ring { position: relative; display: none; width: 46px; height: 46px; } .sct-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .sct-ring circle { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 4; } .sct-ring .v { stroke: #FFE9B0; stroke-linecap: round; stroke-dasharray: 131.95; stroke-dashoffset: calc(131.95 * (1 - var(--p))); transition: stroke-dashoffset .65s var(--ease), stroke .65s; } .sct-ring em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 20px; line-height: 1; color: #fff; } /* An open panel halves the chat, so the tracker drops to the ring (chat.tsx `compact`). */ .cw.open .sct-card { display: none; } .cw.open .sct-ring { display: block; } .sct.lit .sct-bar i { background: #FFC14D; } .sct.lit .sct-ring .v { stroke: #FFC14D; } .cw .ap-in { position: absolute; top: 0; bottom: 0; left: 0; width: 600px; display: flex; flex-direction: column; } /* The board sits centered in the panel; the note keeps its height so nothing jumps when it appears. */ .split-w .sie { justify-content: safe center; padding-bottom: 24px; } .split-w .sie .note { min-height: 48px; } /* Page arrows sit on the composer's center line (composer: 56 tall, 26 off the bottom). */ .split-w .ap-n { padding-bottom: 30px; } /* ══ 02 · Activities beside the chat: a desktop window and a phone, three lessons each, swiping ══ Each lesson is parked off to the right; `.on` swipes it in, `.gone` out to the left. `translate` composes with the phone layout's transform: scale(2). */ .acts-s { translate: var(--off) 0; transition: translate 1.1s var(--expo); } .acts-s.on { translate: none; } .acts-s.gone { translate: calc(var(--off) * -1) 0; } .acts-s.snap { transition: none; } /* The desktop lessons swipe inside their own strip, so they never cross the phone. */ .acts-d { position: absolute; left: 0; top: 0; bottom: 0; width: 1160px; overflow: hidden; --off: 1600px; } /* A short shadow, so the strip's edge never cuts it */ .acts-d .cw { box-shadow: 0 0 0 1px rgba(0, 30, 90, .08), 0 22px 40px -24px rgba(0, 30, 90, .4); } /* With the panel open the chat is narrow, so the title and tracker take only what they need. */ .acts-d .cw.open .cw-h > b, .acts-d .cw.open .sct { flex: none; } .art.is-m .acts-d { width: 100%; } .art.is-m .acts-ph { display: none; } /* The phone as a bare screen: no frame, no shadow, no camera island */ .ph.bare.acts-ph { box-shadow: none; } /* Rounded like the desktop window beside it (.cw) */ .ph.bare.acts-ph, .ph.bare.acts-ph .scr { border-radius: 28px; } .acts-ph .scr::before { display: none; } /* Nothing paints behind the panels: a frame's own background bleeds through the anti-aliased edge where it clips a light panel, as a dark hairline along the edge. The rail, chat and panel each paint their own. */ .acts-d .cw, .acts-ph .scr { background: none; } /* The window's rounded clip can drop for a frame while the slides move (a composited child escapes it), so the panel carries the window's corners itself. */ .acts-d .cw .ap { border-radius: 18px 28px 28px 18px; } .art.is-m .acts-d .cw .ap { border-radius: inherit; } .acts-ph .acts-p { border-radius: 28px; } /* the phone's slides, likewise */ /* The phone: each lesson is a whole screen, its panel sliding over the chat from the right. */ .acts-p { position: absolute; inset: 0; overflow: hidden; --off: 100%; } .acts-pc { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 54px; } .acts-p .ap { inset: 0; z-index: 3; border-radius: 0; box-shadow: none; transform: translateX(101%); transition: transform .8s var(--expo); } .acts-p.open .ap { transform: none; }/* The panel reserves the top for the floating toggle, as ActivityPanel's topInset does. */ .acts-p .ap-in { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 112px; } .acts-p .ap-x { display: none; } .acts-p .ap-t { margin: 28px 24px 0; font-size: 40px; } /* SurfaceSwitcher, floating: a white pill with a 3px white ring, two icon segments, the live one filled in the Starlite icon blue. Up only once an activity is live; the topic yields its slot. */ .acts-sw { position: absolute; z-index: 6; left: 50%; top: 58px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 3px #fff, 0 6px 16px -6px rgba(0, 26, 102, .35); translate: -50% 0; opacity: 0; scale: .9; transition: opacity .3s, scale .45s var(--spring); pointer-events: none; } .acts-sw span { height: 36px; padding: 0 16px; border-radius: 999px; display: grid; place-items: center; color: #1872F8; transition: background-color .3s, color .3s, scale .15s; } .acts-sw span.on { background: #1872F8; color: #fff; } .acts-sw span.tap { scale: .9; } .acts-sw svg { width: 20px; height: 20px; fill: currentColor; } .acts-p.live .acts-sw { opacity: 1; scale: 1; } .acts-p.live .kh b { visibility: hidden; } /* Chat logs fade at the top only once they scroll (follow() sets .over). */ .cw .log:not(.over), .acts-p .log:not(.over) { -webkit-mask-image: none; mask-image: none; } .acts-p .ap-p { margin-top: 8px; padding: 0 22px; font-size: 15px; } /* On the phone each board is redrawn at the screen's own width (390) instead of shrinking the desktop one. */ .acts-p .ab { width: 390px; } .acts-p .grid-b { --cell: 58px !important; } .acts-p .sie { --tok: 40px !important; --art: 100px !important; --tin: 28px !important; } .acts-p .sie-vs { gap: 18px; } .acts-p .wg { transform: scale(.6); transform-origin: 50% 0; } .acts-p .ap-n { padding: 0 16px 30px; } /* The board: a 600 × 440 stage centered in the panel (scaled down with it on a phone) */ .ab { position: absolute; left: 0; top: 50%; width: 600px; height: 440px; margin-top: -220px; } .ab-b { position: absolute; inset: 0; } .ab .note { position: absolute; left: 50%; bottom: 16px; white-space: nowrap; transform: translateX(-50%) translateY(8px); } .ab .note.show { transform: translateX(-50%); } .acts .art.is-m .ab { transform: scale(.6); transform-origin: 0 50%; } /* Left off phone-width pages: "Built for Every Screen" and its demo. */ @media (max-width: 760px) { .hide-m { display: none !important; } } /* On the desktop the panel is tall: a larger title, set lower, over a taller stage. The interests band's lesson (#split2) wears the same title; a phone layout's own sizes still win there. */ .acts-d .ap-t, .split-v2 .ap-t { margin-top: 52px; font-size: 58px; } .acts-d .ap-p, .split-v2 .ap-p { margin-top: 14px; font-size: 20px; } .acts-d .ab { height: 530px; margin-top: -265px; } .ab .bb-cols { left: 28px; right: 28px; grid-template-columns: .7fr 1fr 1.5fr; } .ab .bb-ones { left: 4px; right: 4px; gap: 6px; } .ab .sie-tray { gap: 10px; margin-top: 10px; padding: 0 10px; } /* Column Math (the column-math block): the stack in the subject ink, answer boxes that turn green, a carry box that shows only when a carry is due, and the in-panel two-row keypad */ .cmb { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 28px; padding-top: 26px; } .cmb-st { display: grid; grid-template-columns: repeat(3, 84px); column-gap: 10px; row-gap: 5px; font: 700 46px/1 var(--mono); color: var(--acc); } .cmb-st > span { height: 84px; display: grid; place-items: center; border-radius: 10px; } .cmb-st > .cmb-c { height: 58px; font-size: 32px; border: 2px dashed var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); opacity: 0; transition: opacity .3s, scale .15s; } .cmb-c.due, .cmb-c.set { opacity: 1; } .cmb-c.set { border-style: solid; background: none; } .cmb-c.tap { scale: .9; } .cmb-c.sp { visibility: hidden; } .cmb-rule { grid-column: 1 / -1; height: 2px; margin: 0 0 4px; background: var(--acc); } .cmb-a { border: 1px solid #C5CED9; background: #fff; transition: border-color .25s, background-color .25s; } .cmb-a.act { border: 2px solid var(--acc); background: color-mix(in srgb, var(--acc) 8%, #fff); } .cmb-a.ok { border: 2px solid #28A745; background: var(--ok-bg); color: var(--ok-ink); } .cmb-st b { font-weight: 700; animation: cmbPop .45s var(--spring) both; } @keyframes cmbPop { from { opacity: 0; transform: scale(.5); } } .cmb-kp { display: grid; grid-template-columns: repeat(5, 74px); gap: 10px; transition: opacity .35s; } .cmb-kp span { height: 62px; display: grid; place-items: center; border-radius: 14px; border: 1px solid #C5CED9; background: #fff; font: 700 27px/1 var(--mono); color: var(--ink); transition: background-color .15s, scale .15s; } .cmb-kp span.tap { background: color-mix(in srgb, var(--acc) 14%, #fff); scale: .94; } .cmb.done .cmb-kp { opacity: 0; } /* Sort It (the sort block): a sentence's words dealt into labelled bins */ .so { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 12px; } .so-sent { margin: 0; padding: 12px 22px; border-radius: 14px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1.5px var(--line); font: 700 21px/1.4 var(--voice); color: var(--acc); } .so-tray { display: flex; gap: 12px; min-height: 48px; } .so-w { height: 46px; padding: 0 20px; border-radius: 999px; display: grid; place-items: center; border: 2px solid var(--acc); background: #fff; font-size: 18px; font-weight: 600; color: var(--acc); transition: translate .3s var(--spring), box-shadow .3s; } .so-w.sel { translate: 0 -6px; box-shadow: 0 10px 16px -8px rgba(80, 30, 20, .35); } .so-bins { display: flex; gap: 24px; } .so-bin { width: 230px; min-height: 150px; padding: 14px; border-radius: 18px; border: 2.5px dashed var(--line); background: rgba(255, 255, 255, .6); display: flex; flex-direction: column; align-items: center; gap: 12px; } .so-bin small { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); } .so-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } /* ══ 01 · Split view v2: the parent's interests step, then the lesson ══ AddStudentDialog's "What does … love?" step on ConfirmSheet's yellow sheet (general slot). The pop uses the individual scale/translate properties so it composes with the phone layout's transform: scale(2) instead of overwriting it. */ .dlg-pos { position: absolute; z-index: 5; left: 520px; top: 330px; width: 560px; pointer-events: none; } .dlg { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 20px; border: 1.5px solid #E8D8A0; background: linear-gradient(180deg, #FFFEF3 0%, #FFF7DC 100%); box-shadow: 0 6px 18px rgba(0, 26, 102, .08), 0 50px 90px -40px rgba(0, 26, 102, .45); opacity: 0; scale: .92; translate: 0 18px; transition: opacity .35s, scale .55s var(--spring), translate .55s var(--spring); } .dlg.show { opacity: 1; scale: 1; translate: none; } .dlg-t { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--blue); } .dlg-p { margin: -6px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink5); } .dlg .as-chips { min-height: 40px; margin: 0; } .dlg .as-field { margin: 0; border-color: #7B8794; } .dlg .as-field.focus { border-color: var(--blue); } .dlg-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } .dlg-btns span { height: 48px; padding: 0 24px; border-radius: 999px; display: grid; place-items: center; font-size: 16px; font-weight: 500; color: var(--blue); transition: transform .15s; } .dlg-btns .pri { background: var(--blue); color: #fff; font-weight: 700; } .dlg-btns .tap { transform: scale(.92); } /* Its own band between the intro and the gallery, on the title band's light blue, running straight into the gallery. Flat: no lift shadows on the window or the dialog. */ .iv-band { padding: clamp(56px, 8vw, 115.2px) 0; background: linear-gradient(180deg, #F2FBFF 0%, #DCF0FF 100%); } .iv-band .one { margin: 0 var(--pad); } .split-v2 .cw, .split-v2 .dlg { box-shadow: none; } /* The panel wears its slot's border, like the dialog (ConfirmSheet's slot.border). Inset, so a closed panel (flex-basis 0) leaves no sliver of border behind. */ .split-v2 .ap { border-radius: 18px 28px 28px 18px; box-shadow: inset 0 0 0 1.5px var(--line), 0 4px 12px rgba(0, 12, 40, .06); } /* Its right corners follow the window's curve, so the window shows behind them there: paint that strip the panel's own yellow (the chat column covers it while the panel is closed). */ .split-v2 .split-w { background: linear-gradient(180deg, #FFFEF3 0%, #FFF7DC 100%) right / 40px 100% no-repeat, linear-gradient(180deg, #0051C2 0%, #001A66 100%); } /* On a phone the panel IS the window, so it needs no stroke. */ .art.is-m .split-v2 .ap { box-shadow: none; } /* A spinner holds the stage until the demo's first frame (the dialog) is up, so a slow load never shows an empty band. Only with JS: without it there is no demo to wait for. */ .iv-load { display: none; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 5px solid rgba(37, 81, 161, .16); border-top-color: var(--blue); animation: ivSpin .8s linear infinite; transition: opacity .3s; } html.js .iv-load { display: block; } .split-v2.live .iv-load { opacity: 0; animation-play-state: paused; } .art.is-m .iv-load { width: 96px; height: 96px; margin: -48px 0 0 -48px; border-width: 9px; } @keyframes ivSpin { to { transform: rotate(360deg); } } .split-v2 .split-w { transition: opacity .45s, scale .6s var(--spring), translate .6s var(--spring); } .split-v2 .split-w.away { opacity: 0; scale: .95; translate: 0 24px; } .art.is-m .dlg-pos { left: 40px; top: 250px; width: 360px; transform: scale(2); transform-origin: 0 0; } .art.is-m .dlg { gap: 10px; padding: 16px; border-radius: 14px; } .art.is-m .dlg-t { font-size: 18px; } .art.is-m .dlg-p { margin-top: -4px; font-size: 13px; } .art.is-m .dlg .as-chips { min-height: 30px; gap: 6px; } .art.is-m .dlg .as-chips p { font-size: 12px; } .art.is-m .dlg .chip { height: 30px; gap: 4px; padding: 0 9px 0 12px; font-size: 12.5px; } .art.is-m .dlg .chip .ic { width: 12px; height: 12px; } .art.is-m .dlg .as-field { height: 42px; padding-left: 12px; border-radius: 9px; font-size: 13px; } .art.is-m .dlg .as-add { top: 4px; right: 4px; bottom: 4px; width: 32px; border-radius: 7px; } .art.is-m .dlg .as-add .ic { width: 16px; height: 16px; } .art.is-m .dlg-btns span { height: 38px; padding: 0 18px; font-size: 13.5px; } /* ══ 01 · Two sides ══════════════════════════════════════ */ .split-l, .split-r { position: absolute; top: 0; bottom: 0; } /* On the dark band, the student's side is yellow (the general slot) and the parent's pink. */ .split-l { left: 0; width: 800px; background: linear-gradient(180deg, #FFFEF3 0%, #FFF3D1 100%); } .split-r { left: 800px; right: 0; background: linear-gradient(180deg, #FDF2FF 0%, #F8D6F6 100%); } .who { position: absolute; top: 40px; font: 600 15px/1 var(--sans); letter-spacing: .02em; } .who.l { left: 60px; color: var(--blue); } .who.r { left: 860px; color: #804775; } .sync { position: absolute; height: 0; border-top: 3px dotted #9CC2EC; } .sync i { position: absolute; top: -9px; left: 0; width: 15px; height: 15px; margin-left: -7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255, 217, 90, .3), 0 0 18px rgba(255, 217, 90, .8); opacity: 0; } .sync.go i { animation: travel 1.1s var(--ease) forwards; } @keyframes travel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } } .art.is-m .split-l { width: 400px; } .art.is-m .split-r { left: 400px; } .art.is-m .who { display: none; } #sides2.is-m .split-l, #sides2.is-m .split-r { display: none; } /* Parent Home, phone (parent/home + OverviewCards) */ /* The tab bar's gradient under the bottom band too, so the screen's anti-aliased rounded edge blends blue into the frame instead of letting a light hairline through. The band must stay SHORTER than the bar (66) so it never peeks above it, and taller than the corner radius (52). */ .pm-scr { background: linear-gradient(90deg, #0051C2 0%, #001A66 100%) 0 100% / 100% 58px no-repeat, var(--b50); } .pm-hi { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; } .pm-hi img { width: 58px; height: auto; } .pm-hi b { font-size: 26px; font-weight: 700; color: var(--blue); } .pm-sub { margin: 10px 26px 0; text-align: center; font-size: 14.5px; line-height: 1.45; color: var(--ink5); } .sh { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 19px; font-weight: 500; color: var(--blue); } .sh .ic { width: 22px; height: 22px; } .sh.attn { color: #9E4C3E; } .pm-sec { margin: 30px 20px 0; } .tr { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin-bottom: 9px; border-radius: 13px; background: var(--from); border: 1.5px solid var(--line); transition: box-shadow .5s var(--ease); } .av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px var(--kl, #F0C8C0); color: var(--ka, #9E4C3E); font-size: 14px; font-weight: 700; } .k-emma { --kl: #F0C8C0; --ka: #9E4C3E; } .k-liam { --kl: #B0DFC0; --ka: #286E74; } .k-sofia { --kl: #B8D4F0; --ka: #2551A1; } .tr-t { flex: 1; min-width: 0; display: grid; gap: 1px; } .tr-t b { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-t small { font-size: 13px; color: var(--ink5); } .ck { flex: none; position: relative; width: 24px; height: 24px; } .ck::before { content: ''; position: absolute; inset: 1px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); transition: opacity .3s; } .ck svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--teal); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .5s var(--spring); } .tr.done .ck::before { opacity: 0; } .tr.done .ck svg { opacity: 1; transform: none; } .tr.ping { box-shadow: 0 0 0 5px rgba(40, 167, 69, .25); } .wk { display: flex; gap: 12px; padding: 13px 14px; margin-bottom: 9px; border-radius: 13px; background: var(--from); border: 1.5px solid var(--line); } .wk-t { flex: 1; min-width: 0; display: grid; gap: 8px; } .wk-top { display: flex; justify-content: space-between; font-size: 15px; font-weight: 500; color: var(--acc); } .wk-top small { font-size: 13.5px; color: var(--ink5); font-variant-numeric: tabular-nums; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chips i { padding: 4px 9px; border-radius: 8px; background: var(--from); border: 1px solid var(--line); color: var(--acc); font-style: normal; font-size: 13px; } /* ParentTabBar: gradient run across the bar, filled Starlite glyphs, white pill + light-stop glyph when active. Bar pad 8 (+ home-indicator inset), tabs share the width, pill 12×8 around a 24 glyph. */ .tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: stretch; padding: 8px 8px 14px; background: linear-gradient(90deg, #0051C2 0%, #001A66 100%); } .tabs span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; color: rgba(255, 255, 255, .65); --ko: #001A66; } .tabs .nv { box-sizing: content-box; width: 24px; height: 24px; min-width: 32px; padding: 8px 12px; border-radius: 999px; fill: currentColor; } .tabs span.on { color: #0051C2; --ko: #fff; } .tabs span.on .nv { background: #fff; } .nv .ko { fill: var(--ko, #fff); } /* Two sides, working copy (#sides2): the student's phone finishes a lesson. Three stacked layers: Home underneath, a quiz page over it, the Lesson Complete sheet on top. */ .sc-home, .sc-quiz, .sc-tro { position: absolute; inset: 0; display: flex; flex-direction: column; } .sc-home { z-index: 1; } /* Stacked layers share the screen's rounded clip, and each one's anti-aliased corner lets the layer beneath show through as a hairline. So a covered layer is hidden, and the screen behind them all is the frame's own black, which is what a real screen edge blends into. */ #sKid2 .scr { background: #0B0C10; } .sc-home.off { visibility: hidden; } .sc-home, .sc-quiz { padding-top: 54px; } /* room for the one status bar */ /* One status bar above every layer, so it never travels with a sheet. White over the dark sheet. */ .sc-sb { position: absolute; top: 0; left: 0; right: 0; z-index: 10; transition: color .3s; } .sc-quiz { z-index: 2; background: linear-gradient(180deg, var(--from), var(--to)); color: var(--ink); transition: opacity .5s var(--ease); } .sc-quiz.off { opacity: 0; visibility: hidden; transition: none; } /* QuizPanel's question page: number, question, then options dealt in on a 60ms stagger (QUESTION_ENTER_MS 260). A pick only selects; a quiz never shows right or wrong while it runs. */ .qz-pg { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 18px; padding: 26px 22px 0; } .qz-pg > * { animation: scRise .26s var(--ease) both; } .qz-n { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink5); } .qz-q { margin: 0; font-size: 19px; line-height: 1.45; color: var(--ink); } .qz-opts { display: grid; gap: 10px; animation: none; } .qz-opts > * { animation: scRise .26s var(--ease) both; } .qz-o { padding: 16px 18px; border-radius: 14px; background: #fff; border: 2px solid var(--line); font-size: 17px; font-weight: 500; color: var(--ink); transition: background-color .25s, border-color .25s, color .25s, transform .12s; } .qz-o.down { transform: scale(.97); } .qz-o.sel { border-color: var(--acc); background: #E9F2FC; color: var(--acc); font-weight: 700; } .qz-nav { flex: none; display: flex; gap: 12px; padding: 14px 20px 34px; } .qz-b { flex: 1; height: 52px; border-radius: 999px; display: grid; place-items: center; font-size: 16px; font-weight: 700; transition: opacity .25s, transform .12s; } .qz-b.sec { background: #fff; color: var(--acc); box-shadow: inset 0 0 0 2px var(--acc); } .qz-b.pri { background: var(--acc); color: #fff; } .qz-b.off { opacity: .4; } .qz-b.tap { transform: scale(.95); } /* The sheet: GateSheet's motion, driven per frame by sides2(): a straight rise, and the wave on the way out only. Rests below the screen with its wave cap (84) clear of it; art and copy arrive once it covers. */ .sc-tro { z-index: 3; transform: translateY(calc(100% + 84px)); } .sc-tro .gate > img, .sc-tro .gate > b, .sc-tro .gate > em, .sc-tro .gate > p, .sc-tro .gate > .gbtn { opacity: 0; } .sc-tro.lit .gate > img { animation: scArt .55s var(--spring) .08s both; } .sc-tro.lit .gate > b { animation: scRise .26s var(--ease) .17s both; } .sc-tro.lit .gate > em { animation: scRise .26s var(--ease) .225s both; } .sc-tro.lit .gate > p { animation: scRise .26s var(--ease) .28s both; } .sc-tro.lit .gate > .gbtn { animation: scRise .26s var(--ease) .335s both; } @keyframes scArt { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } @keyframes scRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .sc-tro .gbtn.tap { transform: scale(.94); } .sc-tro.lit .conf i { animation: fall 2.6s var(--ease) forwards; animation-delay: var(--dl); } /* WaveCap: the sheet's wavy top edge, in the gate's top color, overlapping 24 into it. Phone band 84. */ .sc-wave { position: absolute; left: 0; top: -84px; width: 100%; height: 108px; } .sc-wave path { fill: #0051C2; } .sc-hi { display: flex; align-items: center; gap: 12px; margin: 22px 24px 0; } .sc-hi img { width: 58px; height: auto; } .sc-hi b { font-size: 28px; font-weight: 700; color: var(--blue); } .sc-sec { margin: 28px 20px 0; } .sc-sec .sh .nv { width: 24px; height: 24px; fill: currentColor; --ko: var(--b50); } .sc-card { display: flex; align-items: center; gap: 12px; padding: 15px 18px; margin-bottom: 12px; border-radius: 16px; background: linear-gradient(90deg, var(--from), var(--to)); border: 1.5px solid var(--line); box-shadow: 0 4px 10px -6px rgba(0, 30, 90, .18); color: var(--acc); transition: box-shadow .5s var(--ease); } .sc-ct { flex: 1; min-width: 0; display: grid; gap: 4px; } .sc-ct small { font-size: 14px; font-weight: 500; transition: opacity .4s; } .sc-ct b { font-size: 17px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: line-through transparent; transition: color .4s, text-decoration-color .4s; } .sc-card .ic { width: 24px; height: 24px; } .sc-card .go { opacity: .5; } .sc-card .ok { display: none; color: var(--ok); } /* The finished lesson turns green with a check, then clears itself out of the list and the rest close up */ .sc-card { max-height: 90px; overflow: hidden; transition: box-shadow .5s var(--ease), background-color .4s, border-color .4s, color .4s, max-height .55s var(--expo), margin .55s var(--expo), padding .55s var(--expo), border-width .55s var(--expo), opacity .35s, transform .45s var(--expo); } .sc-card.done { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-ink); } .sc-card.done .go { display: none; } .sc-card.done .ok { display: block; animation: scPop .5s var(--spring); } .sc-card.ping { box-shadow: 0 0 0 5px rgba(40, 167, 69, .25); } .sc-card.gone { max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; transform: translateX(40px); } .sc-sec .sh { font-size: 18px; } @keyframes scPop { from { opacity: 0; transform: scale(.4); } } /* The parent's Today row: green with its check, then cleared out of the list */ .tr { max-height: 80px; transition: box-shadow .5s var(--ease), background-color .4s, border-color .4s, max-height .55s var(--expo), margin .55s var(--expo), padding .55s var(--expo), border-width .55s var(--expo), opacity .35s, transform .45s var(--expo); } #sPar2 .tr.done { background: var(--ok-bg); border-color: var(--ok); } #sPar2 .tr.done .tr-t b, #sPar2 .tr.done .tr-t small { color: var(--ok-ink); } #sPar2 .tr.done .ck svg { color: var(--ok); } .tr.gone { max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; transform: translateX(40px); overflow: hidden; } /* Emma's Portfolio on the parent's phone: the desktop page (06) folded into one column */ .pp { position: absolute; left: 0; right: 0; top: 54px; bottom: 66px; z-index: 6; padding: 10px 20px 0; overflow: hidden; background: var(--b50); transform: translateX(100%); transition: transform .55s var(--expo); } .pp.on { transform: none; }.pp .pf-back { font-size: 14px; } .pp-h { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 24px; font-weight: 700; color: #804775; } .pp-h .ic { width: 26px; height: 26px; fill: #804775; stroke: none; } .pp-sum b { display: block; margin-top: 14px; font-size: 18px; font-weight: 700; } .pp-sum small { display: block; margin-top: 4px; font-size: 13px; color: var(--ink5); } .pp-sum small em { font-style: normal; font-weight: 700; color: var(--ok-shade); } .pp-cols { position: relative; height: 80px; margin: 16px 0 20px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; border-bottom: 1px solid rgba(0, 81, 194, .12); } .pp-cols .mo small { bottom: -18px; font-size: 9.5px; } .pp-cols .mo .seg { width: 14px; transition: height .8s var(--expo); } .pp .pf-tabs { margin-top: 26px; gap: 6px; } .pp .pf-tabs span { height: 36px; padding: 0 14px; font-size: 14px; } .pp .unit { margin-top: 12px; padding: 11px 14px; gap: 6px 10px; } .pp .unit b { font-size: 15px; } .pp .unit .meta { font-size: 12.5px; } .pp .gain { gap: 6px; font-size: 13px; } .pp .gain i { padding: 2px 7px; } .pp .unit.t-math .db::before { background: rgba(47, 98, 200, .15); } .pp .unit.t-math .bar-d, .pp .unit.t-math .fin { background: #2F62C8; } .pp .unit.t-math .pre { border-color: #2F62C8; } /* LessonRow: white, subject edge, quieter than its unit */ .pp-ls { margin: 8px 0 0 14px; } .pp-l { display: flex; align-items: center; gap: 10px; max-height: 70px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1.5px solid var(--line); overflow: hidden; transition: max-height .55s var(--expo), margin .55s var(--expo), padding .55s var(--expo), border-width .55s var(--expo), opacity .4s, border-color .4s, box-shadow .5s, background-color .4s; } .pp-l .t { flex: 1; min-width: 0; display: grid; gap: 2px; } .pp-l .t b { font-size: 14px; font-weight: 600; color: var(--acc); } .pp-l .t small { font-size: 11.5px; color: var(--ink5); } .pp-l .sc { font-size: 12.5px; color: var(--ink5); white-space: nowrap; font-variant-numeric: tabular-nums; } .pp-l .sc b { color: var(--ink); } .pp-l .sc i { margin-left: 4px; padding: 2px 6px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); font-style: normal; font-weight: 700; } .pp-l.nw { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; } /* The lesson that just landed: highlighted in the subject's accent */ .pp-l.hl { border-color: var(--acc); background: #F3F8FE; box-shadow: 0 0 0 4px rgba(37, 81, 161, .16); } /* Export PDF, full width at the foot of the phone page; a spinner while it builds */ .pp-ex { position: absolute; left: 20px; right: 20px; bottom: 16px; height: 50px; border-radius: 999px; display: grid; place-items: center; background: #804775; color: #fff; font-size: 16px; font-weight: 600; box-shadow: 0 14px 28px -14px rgba(80, 30, 70, .55); transition: transform .15s; } .pp-ex .lb { display: inline-flex; align-items: center; gap: 8px; transition: opacity .16s; } .pp-ex .lb .ic { width: 18px; height: 18px; } .pp-ex .sp { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; opacity: 0; animation: spin .8s linear infinite; transition: opacity .16s; } .pp-ex.tap { transform: scale(.95); } .pp-ex.busy .lb { opacity: 0; } .pp-ex.busy .sp { opacity: 1; } /* Each phone keeps its layers (scrim, status bar, sheet) inside itself, so nothing in a phone stacks over the report */ #sKid2, #sPar2 { z-index: 1; } /* Dims the parent's whole screen while the report is open */ .pp-scrim { position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); } .pp-scrim.on { opacity: 1; } /* The exported report, scaled down beside the parent's phone; today's standard leads it */ .pp-pdfw { position: absolute; left: 1170px; top: 230px; z-index: 8; transform: scale(.85); transform-origin: 0 0; } .pp-pdfw .pdf { left: 0; top: 0; } .pp-pdfw .row.hl { margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 4px; background: #EEF4FD; } .art.is-m .pp-pdfw { left: 470px; top: 470px; transform: scale(.6); } /* ══ 01 · Five gates (GateSheet) ═════════════════════════ */ .cards.gates { --n: 5; } .card .md { border-radius: clamp(14px, 1.6vw, 23.04px); } .gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 120px 34px 0; text-align: center; background: linear-gradient(180deg, #0051C2 0%, #001A66 100%); color: var(--chat-ink); } .gate img { width: 250px; height: 250px; object-fit: contain; } .gate b { margin-top: 22px; font-size: 27px; font-weight: 700; line-height: 1.25; color: #fff; } .gate .sb b { margin: 0; font: inherit; color: inherit; } /* the status bar's time is not the gate's title */ .gate em { margin-top: 8px; font-style: normal; font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, .8); } .gate p { margin: 14px 0 0; font-size: 16px; line-height: 1.55; } .gate .gbtn { margin-top: auto; margin-bottom: 52px; width: 100%; height: 56px; border-radius: 999px; display: grid; place-items: center; background: #fff; color: var(--royal); font-size: 17px; font-weight: 700; transition: transform .2s; } .gate .gbtn.ghost { margin-top: 10px; margin-bottom: 0; height: 44px; background: none; color: #fff; } .gate .gbtn.ghost + .gbtn { display: none; } .card.gate-c { transition: transform .8s var(--expo), opacity .8s var(--expo); } .gates.live .card.gate-c:not(.on) { opacity: .5; } .gates.live .card.gate-c.on { transform: translateY(-14px); } .gates .md { box-shadow: 0 40px 70px -40px rgba(0, 26, 102, .6); } .rail-steps { position: relative; height: 3px; margin: clamp(30px, 3vw, 43.2px) var(--pad) 0; background: var(--hair); border-radius: 3px; } .rail-steps i { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 3px; background: var(--royal); transition: width 1s var(--expo); } @media (max-width: 760px) { .rail-steps { display: none; } .gates.live .card.gate-c:not(.on) { opacity: 1; } .gates.live .card.gate-c.on { transform: none; } } /* ══ 02 · Chat (desktop) + notebook ══════════════════════ */ .paper { display: block; width: max-content; margin-top: 14px; overflow: hidden; border-radius: 10px; background: #fff; border: 1.5px solid var(--b300); color: var(--ink); } .paper-h { padding: 6px 16px; border-bottom: 1.5px solid var(--b300); background: var(--b50); font-size: 14px; font-weight: 700; color: var(--blue); } .paper-b { margin-left: 20px; padding: 12px 34px 14px 20px; border-left: 2px solid #F2A0A0; } .cm { margin: 0; font: 400 21px/1.4 var(--mono); color: var(--ink); white-space: pre; } .cm .carry, .cm .ans { opacity: 0; transition: opacity .4s; } .cm .on.carry, .cm .on.ans { opacity: 1; } .cm .x { position: relative; display: inline-block; } .cm .x::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 2.5px; border-radius: 2px; background: var(--no); transform: rotate(-24deg) scaleX(0); transition: transform .35s var(--ease); } .cm .on.x::after { transform: rotate(-24deg) scaleX(1); } /* "A smaller step", at reading size */ .voice { position: absolute; left: 90px; right: 90px; bottom: 90px; } .voice .m { font-size: 27px; line-height: 1.5; margin-bottom: 30px; } .voice .m .lead { font-size: 40px; line-height: 1.2; margin-bottom: 10px; } .voice .m.kid { padding: 14px 28px; border-radius: 20px; font-size: 27px; } .voice .m.dots i { width: 12px; height: 12px; } /* Photo of the kid's paper */ .snap-paper { position: absolute; left: 150px; top: 120px; width: 500px; height: 420px; border-radius: 6px; transform: rotate(-4deg); background: repeating-linear-gradient(180deg, #FFFDF7 0 41px, #CFE0F2 41px 43px); box-shadow: 0 30px 60px -30px rgba(60, 40, 10, .45), 0 2px 0 rgba(0, 0, 0, .04); } .snap-paper::before { content: ''; position: absolute; left: 62px; top: 0; bottom: 0; width: 2.5px; background: #F2A0A0; } .snap-paper b { position: absolute; left: 150px; top: 58px; font: 400 66px/1.25 var(--kid); color: #2B3A55; white-space: pre; } .snap-paper b::after { content: ''; position: absolute; left: -16px; right: -10px; top: 166px; height: 4px; border-radius: 2px; background: #2B3A55; } .vf { position: absolute; left: 110px; top: 80px; width: 580px; height: 500px; pointer-events: none; } .vf i { position: absolute; width: 60px; height: 60px; border: 5px solid #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); transition: transform .8s var(--expo), opacity .4s; } .vf i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; } .vf i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; } .vf i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; } .vf i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; } .vf.wide i:nth-child(1) { transform: translate(-40px, -40px); } .vf.wide i:nth-child(2) { transform: translate(40px, -40px); } .vf.wide i:nth-child(3) { transform: translate(-40px, 40px); } .vf.wide i:nth-child(4) { transform: translate(40px, 40px); } .vf.gone i { opacity: 0; } .flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; } .flash.go { animation: flash .6s ease-out; } @keyframes flash { 0% { opacity: 0; } 15% { opacity: .9; } 100% { opacity: 0; } } .reply { position: absolute; left: 70px; right: 70px; bottom: 60px; padding: 26px 30px 28px; border-radius: 26px; background: linear-gradient(180deg, #0051C2 0%, #001A66 100%); color: var(--chat-ink); box-shadow: 0 40px 80px -40px rgba(0, 26, 102, .7); transform: translateY(130%); transition: transform .9s var(--expo); } .reply.show { transform: none; } .reply .ph-b { position: absolute; right: 28px; top: -46px; width: 132px; padding: 7px; border-radius: 12px; background: var(--cream); transform: rotate(3deg); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .35); } .reply .ph-b span { display: block; height: 92px; border-radius: 6px; background: repeating-linear-gradient(180deg, #FFFDF7 0 9px, #CFE0F2 9px 10px); position: relative; } .reply .ph-b span::after { content: '52\A−27\A 25'; white-space: pre; position: absolute; left: 34px; top: 8px; font: 400 17px/1.15 var(--kid); color: #2B3A55; } .reply .m { margin: 0; font-size: 22px; animation: none; } .reply .m .lead { font-size: 30px; } /* Moments marquee */ .mq { overflow: hidden; } .mq-track { display: flex; gap: var(--gap); width: max-content; padding: 0 var(--pad); animation: mq 80s linear infinite; } .mq:hover .mq-track { animation-play-state: paused; } @keyframes mq { to { transform: translateX(calc(-50% - var(--gap) / 2)); } } .mq-card { width: clamp(230px, 22vw, 316.8px); flex: none; } /* Interests: the marketing homepage's section (homepage.css ".sec", "3. Interests", the split and the section art), copied as is and scoped under .hp-int. Like there, its rounded top slides up over the dark band above it. */ /* The copy is set in this page's type (Geist, like every .block), colored like the subject bands (.band-math); only the board and the card keep the app's Montserrat. */ .hp-int { --accent: #9E4C3E; position: relative; margin-top: calc(var(--sec-r) * -1); border-radius: var(--sec-r) var(--sec-r) 0 0; padding: clamp(7rem, 12vw, 170px) 0 clamp(8rem, 13vw, 187.2px); background: linear-gradient(180deg, #FFF9F3 0%, #FFDCDC 100%); color: var(--accent); } .hp-int .stage, .hp-int .ic-card { font-family: var(--ui); color: var(--ink); } .hp-int .h2 { margin: 0; font-size: clamp(26px, 2.8vw, 40.32px); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; color: var(--accent); text-wrap: balance; } .hp-int .h2 em { display: block; font-style: normal; } .hp-int .sub { max-width: 31em; margin: 16px auto 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; color: var(--accent); text-wrap: pretty; } .hp-int .sec-head { text-align: center; max-width: 57.5rem; margin: 0 auto; padding: 0 1.5rem; } .hp-int .sec-art { display: block; width: auto; height: 6rem; max-width: 11rem; object-fit: contain; margin: 0 auto 1.75rem; filter: drop-shadow(0 .5rem .75rem rgba(0, 26, 102, .14)); } .hp-int .split { margin: 0; padding: 0 var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2.5rem, 5vw, 72px); } .hp-int .split .sec-head { text-align: left; max-width: none; margin: 0; padding: 0; } .hp-int .split .sub { margin: 16px 0 0; } .hp-int .themer { margin-top: clamp(3.5rem, 6vw, 84px); padding: 0 1rem; display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 3vw, 34px); } .hp-int .stage { --ar: 16 / 9; position: relative; flex: none; container-type: inline-size; width: min(60rem, 100%, calc((100svh - 14.375rem) * 16 / 9)); aspect-ratio: var(--ar); border-radius: 2rem; box-shadow: 0 3.125rem 5.625rem -3.125rem rgba(120, 50, 40, .5); isolation: isolate; } .hp-int .world { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; --w-ink: var(--ink); --badge: #286E74; --badge-ink: #fff; } .hp-int .w-dino { background: linear-gradient(160deg, #F5FFEF 0%, #BFE8CB 100%); box-shadow: inset 0 0 0 .09375rem #B0DFC0; } .hp-int .w-soccer { --badge: #2551A1; background: linear-gradient(160deg, #F2FBFF 0%, #C4E1F8 100%); box-shadow: inset 0 0 0 .09375rem #B8D4F0; } .hp-int .w-space { --w-ink: #fff; --badge: var(--yellow); --badge-ink: var(--night); background: radial-gradient(.1rem .1rem at 8% 14%, #fff 60%, transparent 62%), radial-gradient(.075rem .075rem at 22% 70%, #fff 60%, transparent 62%), radial-gradient(.1125rem .1125rem at 38% 30%, #FFD95A 60%, transparent 62%), radial-gradient(.075rem .075rem at 52% 88%, #fff 60%, transparent 62%), radial-gradient(.1rem .1rem at 64% 12%, #fff 60%, transparent 62%), radial-gradient(.075rem .075rem at 78% 44%, #A9D1F5 60%, transparent 62%), radial-gradient(.1125rem .1125rem at 91% 76%, #fff 60%, transparent 62%), radial-gradient(.075rem .075rem at 95% 22%, #fff 60%, transparent 62%), radial-gradient(80% 70% at 70% 0%, rgba(0, 81, 194, .8), transparent 70%), linear-gradient(160deg, #0A3FB4 0%, #001A66 100%); } .hp-int .b-prompt { position: absolute; left: 6%; right: 6%; top: 7%; margin: 0; text-align: center; font-weight: 600; font-size: 2.1cqw; line-height: 1.35; color: var(--w-ink); } .hp-int .b-vessel { position: absolute; width: 19cqw; height: 19cqw; transform: translate(-50%, -50%); } .hp-int .b-vessel img { width: 100%; height: 100%; object-fit: contain; } .hp-int .b-badge { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 35%); min-width: 4.4cqw; padding: .5cqw 1.3cqw; border-radius: 62.4375rem; background: var(--badge); color: var(--badge-ink); font-weight: 700; font-size: 1.8cqw; line-height: 1.3; text-align: center; transition: transform .3s var(--ease); } .hp-int .b-badge.bump { transform: translate(-50%, 35%) scale(1.22); } .hp-int .b-tok { position: absolute; width: 6.4cqw; height: 6.4cqw; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 .5cqw .6cqw rgba(30, 40, 20, .22)); } .hp-int .b-tok img { width: 100%; height: 100%; object-fit: contain; } .hp-int .b-note { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); margin: 0; white-space: nowrap; padding: 1cqw 1.8cqw; border-radius: 1.2cqw; background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; font-size: 1.7cqw; opacity: 0; } /* This page's own .wipe (the full-color panel wipe) is reset first. */ .hp-int .wipe { position: absolute; z-index: 5; inset: 0 auto 0 100%; width: 0; background: none; transform: none; pointer-events: none; opacity: 0; } .hp-int .wipe::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: .125rem; background: #fff; box-shadow: 0 0 1.5rem rgba(255, 255, 255, .8); } .hp-int .wipe span { position: absolute; top: 50%; left: 0; width: 2.5rem; height: 2.5rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--yellow); box-shadow: 0 .375rem 1.25rem rgba(0, 26, 102, .35); } .hp-int .wipe span::after { content: '★'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--night); font-size: 1.125rem; } .hp-int .split .themer { margin-top: 0; padding: 0; } @media (min-width: 901px) { .hp-int .stage { width: min(100%, 32.5rem, calc((100svh - 13.75rem) * .8)); } } /* Flush left at every width, like the page's other blocks. */ .hp-int .split .sec-art { margin-left: 0; } @media (max-width: 900px) { .hp-int .split { grid-template-columns: minmax(0, 1fr); } .hp-int .split .themer { margin-top: clamp(3.5rem, 6vw, 84px); } } @media (max-width: 700px), (min-width: 901px) { .hp-int .stage { --ar: 4 / 5; border-radius: 1.625rem; } .hp-int .b-prompt { font-size: 4.4cqw; left: 8%; right: 8%; top: 6%; } .hp-int .b-vessel { width: 34cqw; height: 34cqw; } .hp-int .b-badge { font-size: 3.6cqw; min-width: 8cqw; padding: .8cqw 2.4cqw; } .hp-int .b-tok { width: 11cqw; height: 11cqw; } .hp-int .b-note { font-size: 3.6cqw; padding: 2cqw 3cqw; border-radius: 2.4cqw; white-space: normal; width: 80%; text-align: center; } } @media (max-width: 700px) { .hp-int .stage { width: min(100%, calc((100svh - 16.25rem) * .8)); } } /* Not on the homepage: the interests card (AddStudentDialog's yellow slot) that pops up over the stage's lower-left corner and types each world's interest in. Sized off the stage (cqw). */ .hp-int .ic-card { position: absolute; z-index: 6; left: -6cqw; bottom: 9%; width: 36cqw; display: flex; flex-direction: column; gap: 1.1cqw; padding: 1.7cqw; border-radius: 1.6cqw; border: 1.5px solid #E8D8A0; background: linear-gradient(180deg, #FFFEF3 0%, #FFF7DC 100%); box-shadow: 0 .375rem 1.125rem rgba(0, 26, 102, .08), 0 2.5rem 4.5rem -2rem rgba(0, 26, 102, .45); font-family: var(--ui); pointer-events: none; opacity: 0; scale: .9; translate: 0 1rem; transform-origin: 0 100%; transition: opacity .3s, scale .5s var(--spring), translate .5s var(--spring); } .hp-int .ic-card.show { opacity: 1; scale: 1; translate: none; } .hp-int .ic-card b { font-size: 2cqw; font-weight: 700; line-height: 1.3; color: var(--blue); } .hp-int .ic-chips { display: flex; flex-wrap: wrap; gap: .8cqw; } .hp-int .ic-chips:empty { display: none; } .hp-int .ic-chips .chip { height: 3.8cqw; gap: .6cqw; padding: 0 1.2cqw 0 1.6cqw; font-size: 1.6cqw; } .hp-int .ic-chips .chip .ic { width: 1.5cqw; height: 1.5cqw; } .hp-int .ic-fld { position: relative; display: flex; align-items: center; height: 5.4cqw; padding: 0 6.4cqw 0 1.4cqw; border-radius: 1cqw; background: #fff; border: 1.5px solid #7B8794; font-size: 1.8cqw; white-space: nowrap; color: var(--ink); transition: border-color .2s, box-shadow .2s; } .hp-int .ic-card.focus .ic-fld { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 81, 161, .14); } .hp-int .ic-fld .ph-t { color: var(--ink4); } .hp-int .ic-add { position: absolute; right: .5cqw; top: .5cqw; bottom: .5cqw; width: 4.2cqw; border-radius: .8cqw; display: grid; place-items: center; background: var(--blue); color: #fff; opacity: .35; transition: opacity .2s, transform .15s; } .hp-int .ic-add .ic { width: 2cqw; height: 2cqw; stroke-width: 2.6; } .hp-int .ic-card.focus .ic-add, .hp-int .ic-card.ok .ic-add { opacity: 1; } .hp-int .ic-card.tap .ic-add { transform: scale(.86); } /* The tall board (desktop column and phones): twice the cqw. On a phone the card stays inside the stage. */ @media (max-width: 700px), (min-width: 901px) { .hp-int .ic-card { left: -12cqw; width: 66cqw; gap: 2cqw; padding: 3.2cqw; border-radius: 3cqw; } .hp-int .ic-card b { font-size: 3.9cqw; } .hp-int .ic-chips { gap: 1.5cqw; } .hp-int .ic-chips .chip { height: 7.4cqw; gap: 1.1cqw; padding: 0 2.2cqw 0 3cqw; font-size: 3.2cqw; } .hp-int .ic-chips .chip .ic { width: 2.9cqw; height: 2.9cqw; } .hp-int .ic-fld { height: 10.4cqw; padding: 0 12cqw 0 2.8cqw; border-radius: 2cqw; font-size: 3.5cqw; } .hp-int .ic-add { right: 1cqw; top: 1cqw; bottom: 1cqw; width: 8cqw; border-radius: 1.5cqw; } .hp-int .ic-add .ic { width: 3.8cqw; height: 3.8cqw; } } @media (max-width: 700px) { .hp-int .ic-card { left: 4cqw; } } @media (max-width: 640px) { .hp-int .sec-art { height: 4.75rem; margin-bottom: 1.25rem; } } /* Curriculum: the marketing homepage's section (homepage.css ".sec-sci", "4. Curriculum"), on the interests section's styles (it carries .hp-int too) in this page's type, flush left at --pad. It follows white content, so it sits below it instead of sliding up over it. */ /* Even top and bottom: the bottom matches .hp-int's top padding plus the next band's rounded overlap (--sec-r). */ .hp-cur { --accent: #286E74; margin-top: clamp(96px, 11vw, 158.4px); padding-bottom: calc(clamp(7rem, 12vw, 170px) + var(--sec-r)); background: linear-gradient(180deg, #F5FFEF 0%, #DCFFEA 100%); overflow: hidden; } /* Straight after the interests section, it slides up over it like the rest. */ .hp-int + .hp-cur { margin-top: calc(var(--sec-r) * -1); } .hp-cur .sec-head { text-align: left; max-width: none; margin: 0; padding: 0 var(--pad); } .hp-cur .sec-art { margin-left: 0; } .hp-int .sec-art-books { height: 7.5rem; } .hp-cur .eyebrow { color: var(--accent); } .hp-cur .sub { margin: 16px 0 0; } /* The subject slots the standards wear (homepage.css .s-math / .s-ela). */ /* Copy on the left, the curriculum widget on the right; stacked below 900px. */ .hp-cur .cur-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: center; gap: clamp(32px, 5vw, 72px); padding: 0 var(--pad); } .hp-cur .cur-top .sec-head { padding: 0; } @media (max-width: 900px) { .hp-cur .cur-top { grid-template-columns: minmax(0, 1fr); } } /* Pills popping in and out beside the copy (curPills() in showcase.js): one row each, placed somewhere along it, sized front / mid / back. */ .cur-pills { position: relative; height: 440px; } @media (max-width: 900px) { .cur-pills { height: 400px; } } .cp-row { position: absolute; left: 0; right: 0; height: 0; } .hp-cur .cp { position: absolute; top: 0; max-width: 100%; align-items: center; opacity: 0; transform: translateY(-50%) scale(.7); transition: opacity .3s, transform .5s var(--spring); } .hp-cur .cp.in { opacity: 1; transform: translateY(-50%); } .hp-cur .cp span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .hp-cur .cp.front { font-size: 17px; box-shadow: 0 1rem 1.875rem -1.375rem rgba(20, 80, 60, .5); } .hp-cur .cp.back { font-size: 13px; } .hp-cur .cp.back.in { opacity: .55; } @media (max-width: 640px) { .hp-cur .cp { font-size: 13px; } .hp-cur .cp.front { font-size: 14px; } .hp-cur .cp.back { font-size: 12px; } } .hp-cur .s-sci { --from: #F5FFEF; --to: #DCFFEA; --line: #B0DFC0; --acc: #286E74; } .hp-cur .s-soc { --from: #FDF2FF; --to: #FFCAFC; --line: #D8B0E8; --acc: #804775; } .hp-cur .s-gen { --from: #FFFEF3; --to: #FFF3D1; --line: #E8D8A0; --acc: #9A6B00; } .hp-cur .s-math { --from: #F2FBFF; --to: #DCF0FF; --line: #B8D4F0; --acc: #2551A1; } .hp-cur .s-ela { --from: #FFF9F3; --to: #FFDCDC; --line: #F0C8C0; --acc: #9E4C3E; } .hp-cur .std { display: inline-flex; align-items: baseline; gap: .625rem; flex: none; padding: .7em 1.15em; border-radius: 999px; background: linear-gradient(160deg, var(--from), var(--to)); border: 1.5px solid var(--line); font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; } .hp-cur .std b { color: var(--acc); font-weight: 700; font-size: .84em; letter-spacing: .02em; } @media (max-width: 640px) { .hp-int .sec-art-books { height: 6rem; } .hp-cur .std { font-size: 13px; } } .mq-card .md { border-radius: clamp(26px, 2.6vw, 37.44px); box-shadow: 0 30px 60px -40px rgba(0, 26, 102, .55); } /* ══ 03 · Activities ═════════════════════════════════════ */ .play .sie { justify-content: center; padding-bottom: 30px; } .play .ap { left: 330px; top: 64px; width: 940px; height: 872px; } .art.is-m .ap.big { left: 24px; top: 24px; width: 752px; height: 852px; } .art.is-m .ap.big .sie-vs { gap: 20px; } /* Teaching demos: the same board three times — watch, finish, your turn. */ .teach .scr { background: linear-gradient(180deg, var(--from), var(--to)); } .teach .ap-t { margin: 22px 30px 0; font-size: 40px; } .teach .ap-p { margin-top: 10px; font-size: 18px; padding: 0 26px; } .grid-b { position: absolute; left: 0; right: 0; top: 40px; display: grid; justify-content: center; gap: 10px; } .gb-row { display: flex; align-items: center; gap: 10px; } .gb { position: relative; width: var(--cell, 66px); height: var(--cell, 66px); border-radius: 14px; border: 2.5px dashed rgba(40, 110, 116, .4); background: rgba(255, 255, 255, .35); transition: border-color .3s, background-color .3s; } .gb img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; opacity: 0; transform: translateY(-14px) scale(.6); transition: opacity .25s, transform .45s var(--spring); filter: drop-shadow(0 3px 3px rgba(80, 60, 20, .2)); } .gb.on { border-style: solid; border-color: rgba(40, 110, 116, .3); background: rgba(255, 255, 255, .8); } .gb.on img { opacity: 1; transform: none; } .gb-n { width: 34px; text-align: center; font-size: 20px; font-weight: 700; color: var(--acc); opacity: 0; transition: opacity .3s; font-variant-numeric: tabular-nums; } .gb-n.on { opacity: 1; } .t-cap { position: absolute; left: 24px; right: 24px; top: 360px; display: grid; justify-items: center; gap: 10px; text-align: center; font-size: 17px; line-height: 1.45; color: var(--ink); } .t-cap .eq { padding: 4px 14px; border-radius: 10px; background: var(--ok-bg); color: var(--ok-ink); font-weight: 700; } .hand { position: absolute; z-index: 20; left: 0; top: 0; width: 54px; height: 54px; margin: -6px 0 0 -14px; opacity: 0; transition: transform .55s var(--ease), opacity .3s; pointer-events: none; font-size: 46px; line-height: 1; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); } .hand.show { opacity: 1; } .step-tag { position: absolute; left: 50%; top: 92px; z-index: 6; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 13.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--acc); white-space: nowrap; } .teach .scr .ap-n { position: absolute; left: 0; right: 0; bottom: 18px; } /* Features (hands-on boards) */ .fx { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; } .fx .ap-t { margin-top: 44px; font-size: 44px; } .fx .ap-p { margin-top: 8px; font-size: 19px; } .fx-b { position: relative; flex: 1; width: 100%; } .fx .note { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%) translateY(8px); white-space: nowrap; } .fx .note.show { transform: translateX(-50%); } .coin { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FFF1B0 0 18%, #FFD95A 40%, #E7B22E 100%); box-shadow: inset 0 0 0 2px #C9961F, 0 2px 3px rgba(120, 80, 0, .25); color: #A87612; font-size: 16px; } .coin::before { content: '★'; } .bb-cols { position: absolute; left: 70px; right: 70px; top: 30px; height: 300px; display: grid; grid-template-columns: .8fr 1fr 1.45fr; gap: 16px; } .bb-col { position: relative; border: 2.5px dashed rgba(37, 81, 161, .3); border-radius: 18px; background: rgba(255, 255, 255, .6); } .bb-col > small { position: absolute; left: 0; right: 0; top: 12px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink4); } .bb-col .badge { position: absolute; left: 50%; bottom: -18px; margin: 0; transform: translateX(-50%); } .bb-col .badge.bump { transform: translateX(-50%) scale(1.25); } .bb-ones { position: absolute; left: 10px; right: 10px; top: 46px; display: grid; grid-template-columns: repeat(5, 38px); justify-content: center; gap: 7px; } .bb-ones .coin { transition: transform .5s var(--ease), opacity .3s; } .bb-ones .coin.in { animation: coinIn .45s var(--spring) both; } @keyframes coinIn { from { transform: translateY(-60px); opacity: 0; } } .bb-tens { position: absolute; left: 12px; right: 12px; top: 44px; display: flex; justify-content: center; gap: 9px; } .bundle { position: relative; width: 36px; height: 180px; border-radius: 12px; background: repeating-linear-gradient(180deg, #FFD95A 0 15.6px, #E7B22E 15.6px 18px); box-shadow: inset 0 0 0 2px #C9961F, 0 2px 4px rgba(120, 80, 0, .2); } .bundle::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 10px; margin-top: -5px; border-radius: 3px; background: #9E4C3E; } .bb-flash { position: absolute; inset: 0; border-radius: 16px; background: rgba(255, 217, 90, .45); opacity: 0; transition: opacity .3s; } .bb-flash.on { opacity: 1; } .pay-tag { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2px var(--line), 0 2px 8px rgba(0, 0, 0, .05); font-size: 19px; font-weight: 600; white-space: nowrap; } .pay-tag b { font-size: 24px; color: var(--acc); font-variant-numeric: tabular-nums; } .pay-mat { position: absolute; left: 110px; right: 110px; top: 104px; height: 120px; border-radius: 18px; border: 2.5px dashed rgba(158, 76, 62, .35); background: rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center; gap: 14px; } .pay-total { position: absolute; right: 14px; top: -16px; padding: 3px 12px; border-radius: 99px; background: var(--acc); color: #fff; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } .pay-purse { position: absolute; left: 0; right: 0; top: 262px; display: flex; justify-content: center; align-items: center; gap: 16px; } .bill { width: 104px; height: 52px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(160deg, #D8EFD4, #A9D6A0); box-shadow: inset 0 0 0 2px #6FA866, 0 2px 4px rgba(0, 60, 0, .2); font-size: 20px; font-weight: 800; color: #2F6A27; } .mc { border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff 0 15%, #DDE3EA 45%, #AEB8C4 100%); box-shadow: inset 0 0 0 2px #8D99A8, 0 2px 3px rgba(0, 0, 0, .2); font-size: 13.5px; font-weight: 700; color: #4D5866; } .mc.q { width: 54px; height: 54px; } .mc.d { width: 40px; height: 40px; } .mc.n { width: 46px; height: 46px; } .pay-mat > .bill, .pay-mat > .mc { animation: dropIn .5s var(--spring) both; } @keyframes dropIn { from { transform: translateY(80px) scale(.8); opacity: 0; } } .pay-purse > .used { opacity: .22; } .wg { position: absolute; left: 50%; top: 70px; width: 420px; height: 210px; margin-left: -210px; } .wg-read { position: absolute; left: 0; right: 0; top: 18px; text-align: center; font-size: 16px; font-weight: 600; color: var(--ink5); font-variant-numeric: tabular-nums; } .wg-post { position: absolute; left: 50%; top: 6px; bottom: 18px; width: 14px; margin-left: -7px; border-radius: 7px; background: linear-gradient(90deg, #6E7B8B, #9AA5B1); } .wg-base { position: absolute; left: 50%; bottom: 0; width: 160px; height: 22px; margin-left: -80px; border-radius: 11px 11px 4px 4px; background: #6E7B8B; } .wg-beam { position: absolute; left: 10px; right: 10px; top: 0; height: 13px; border-radius: 7px; background: #52606D; transition: transform .9s var(--spring); } .wg-beam::after { content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px; border-radius: 50%; background: var(--yellow); box-shadow: inset 0 0 0 3px #C9961F; } .wg-pan { position: absolute; top: 6px; width: 146px; height: 96px; transform-origin: 50% 0; transition: transform .9s var(--spring); } .wg-pan.l { left: -73px; } .wg-pan.r { right: -73px; } .wg-pan::before, .wg-pan::after { content: ''; position: absolute; top: 0; width: 2px; height: 80px; background: #9AA5B1; } .wg-pan::before { left: 24px; transform: rotate(-14deg); transform-origin: top; } .wg-pan::after { right: 24px; transform: rotate(14deg); transform-origin: top; } .wg-dish { position: absolute; left: 0; top: 78px; width: 146px; height: 18px; border-radius: 0 0 73px 73px / 0 0 18px 18px; background: linear-gradient(180deg, #9AA5B1, #6E7B8B); } .wg-load { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; } .wg-bag { width: 86px; height: 66px; border-radius: 20px 20px 12px 12px; display: grid; place-items: center; background: linear-gradient(170deg, #E9C88F, #C9A063); box-shadow: inset 0 0 0 2px #A47C40; font-size: 17px; font-weight: 800; color: #6B4A16; } .kg { display: grid; place-items: center; border-radius: 8px 8px 6px 6px; background: linear-gradient(170deg, #B6C2CF, #7F8C9B); box-shadow: inset 0 0 0 2px #5F6B79; color: #fff; font-size: 12.5px; font-weight: 700; animation: dropIn .5s var(--spring) both; } .kg.k500 { width: 50px; height: 54px; } .kg.k250 { width: 40px; height: 40px; } .bx svg { position: absolute; left: 42%; top: 40px; width: 330px; height: 236px; transform: translateX(-50%); overflow: visible; } .bx .cube { opacity: 0; transform: translateY(-26px); transition: opacity .25s, transform .45s var(--spring); } .bx .cube.on { opacity: 1; transform: none; } .bx-count { position: absolute; right: 90px; top: 100px; display: grid; gap: 4px; text-align: right; font-size: 15px; font-weight: 600; color: var(--ink5); } .bx-count b { font-size: 40px; line-height: 1; color: var(--acc); font-variant-numeric: tabular-nums; } /* ══ 04 · Games (dark) ═══════════════════════════════════ */ .stackp .ap { left: 420px; top: 110px; width: 760px; height: 780px; } .art.is-m .stackp-ap { left: 24px !important; top: 40px !important; width: 752px !important; height: 860px !important; } .stk { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 20px; } .pips { display: flex; gap: 8px; } .pips i { width: 14px; height: 14px; border-radius: 50%; background: rgba(158, 76, 62, .2); transition: background-color .3s, transform .4s var(--spring); } .pips i.on { background: var(--acc); transform: scale(1.15); } .stk-st { margin: 0; min-height: 26px; font-size: 19px; font-weight: 700; color: var(--acc); } .stk-wait { min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; } .stk-wait small { font-size: 14px; color: var(--ink4); } .piece { flex: none; height: 56px; border-radius: 10px; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 700; background: color-mix(in srgb, var(--acc) 78%, #fff); white-space: nowrap; overflow: hidden; } .piece.lift { background: var(--acc); box-shadow: 0 12px 22px -10px rgba(120, 40, 20, .6); animation: pieceIn .45s var(--spring) both; } @keyframes pieceIn { from { transform: translateY(-24px) scale(.9); opacity: 0; } } .shelves { display: grid; gap: 12px; margin-top: 4px; } .shelf { position: relative; width: 560px; height: 60px; padding: 0; display: flex; border-radius: 12px; border: 2px dashed rgba(158, 76, 62, .55); background: rgba(158, 76, 62, .06); overflow: hidden; cursor: pointer; transition: background-color .2s, border-color .2s; } .shelf:hover:not(:disabled) { background: rgba(158, 76, 62, .12); border-color: var(--acc); } .shelf:disabled { cursor: default; } .shelf .flash-s { position: absolute; inset: 0; background: var(--acc); opacity: 0; pointer-events: none; } .shelf.lit .flash-s { animation: shelfLit .8s ease-out; } @keyframes shelfLit { 15% { opacity: 1; } } .shelf.shake { animation: shake .3s; } @keyframes shake { 20% { transform: translateX(-10px); } 50% { transform: translateX(10px); } 75% { transform: translateX(-6px); } } .shelf.hint { border-color: var(--acc); background: rgba(255, 217, 90, .28); } .stk-note { min-height: 48px; margin-top: 6px; display: flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: 12px; font-size: 16px; font-weight: 600; text-align: center; opacity: 0; transition: opacity .3s; } .stk-note.show { opacity: 1; } .stk-note.good { background: var(--ok-bg); color: var(--ok-ink); } .stk-note.retry { background: var(--retry-bg); color: var(--retry-ink); } .stk-win { display: grid; justify-items: center; gap: 4px; padding: 16px 30px; border-radius: 18px; background: rgba(158, 76, 62, .12); animation: pieceIn .5s var(--spring) both; } .stk-win span { font-size: 36px; } .stk-win b { font-size: 19px; } .reset { position: absolute; right: 20px; top: 20px; z-index: 2; padding: 9px 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--acc); font: 600 14px/1 var(--ui); cursor: pointer; } .reset:hover { background: #fff; } /* ══ 04 · Star Challenge (escape room) ═══════════════════ */ .esc-brief { position: absolute; left: 110px; top: 120px; width: 400px; height: 760px; display: flex; flex-direction: column; overflow: hidden; border-radius: 30px; background: linear-gradient(180deg, #F2FBFF, #DCF0FF); color: var(--ink); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .8); } .esc-art { height: 300px; display: grid; place-items: center; background: radial-gradient(circle at 50% 62%, #FFF6D6, #FFE9A9 55%, #F6D27A); } .esc-art img { width: 270px; height: 270px; animation: bob 4.5s ease-in-out infinite; } @keyframes bob { 50% { transform: translateY(-8px) rotate(-2deg); } } .esc-brief .ap-t { margin: 26px 26px 0; font-size: 42px; color: var(--blue); } .esc-brief p { margin: 16px 30px 0; font-size: 16px; line-height: 1.6; color: var(--ink5); } .esc-brief .ap-n { margin-top: auto; } .locks { position: absolute; left: 580px; top: 120px; width: 440px; display: grid; gap: 16px; } .lockc { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(169, 209, 245, .18); color: #fff; transition: background-color .5s, border-color .5s, transform .6s var(--expo); } .lockc .em { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); font-size: 32px; } .lockc b { display: block; font-size: 19px; font-weight: 700; } .lockc small { display: block; margin-top: 3px; font-size: 14.5px; color: var(--skyc); } .lockc .st { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .75); } .lockc.act { background: rgba(255, 255, 255, .12); border-color: rgba(255, 217, 90, .65); transform: translateX(10px); } .lockc.open { border-color: rgba(40, 167, 69, .55); } .lockc.open .st { background: var(--ok-bg); color: var(--ok-ink); } .pad { position: absolute; left: 1080px; top: 120px; width: 420px; padding: 34px 30px 30px; border-radius: 30px; background: linear-gradient(180deg, #F2FBFF, #DCF0FF); color: var(--ink); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .8); text-align: center; } .pad > p { margin: 0; font-size: 20px; color: var(--ink5); } .pad-boxes { display: flex; justify-content: center; gap: 12px; margin-top: 18px; } .pad-boxes i { width: 66px; height: 74px; border-radius: 14px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2.5px var(--ink3); font-style: normal; font-size: 34px; font-weight: 800; color: var(--ink); transition: box-shadow .3s, background-color .3s; } .pad-boxes i.f { box-shadow: inset 0 0 0 2.5px var(--blue); } .pad.ok .pad-boxes i { background: var(--ok-bg); box-shadow: inset 0 0 0 2.5px var(--ok); color: var(--ok-ink); } .pad.no .pad-boxes { animation: shake .35s; } .keys { display: grid; grid-template-columns: repeat(3, 84px); justify-content: center; gap: 10px; margin-top: 22px; } .keys span { height: 62px; border-radius: 12px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px rgba(37, 81, 161, .14), 0 2px 4px rgba(0, 0, 0, .05); font-size: 21px; font-weight: 700; transition: transform .12s, background-color .12s; } .keys span.k-del { background: rgba(255, 255, 255, .4); color: var(--ink3); } .keys span.k-ok { background: var(--b100); color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--b300); } .keys span.down { transform: scale(.9); background: var(--b100); } .tracker { position: absolute; left: 1080px; top: 770px; width: 420px; display: flex; align-items: center; justify-content: center; gap: 16px; } .tracker i { width: 58px; height: 58px; color: rgba(255, 255, 255, .18); transition: color .5s, transform .6s var(--spring), filter .5s; } .tracker i svg { width: 100%; height: 100%; fill: currentColor; } .tracker i.on { color: var(--yellow); transform: scale(1.15); filter: drop-shadow(0 0 16px rgba(255, 217, 90, .7)); } .tracker small { position: absolute; top: 76px; left: 0; right: 0; text-align: center; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .6); } .trophy { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0, 8, 40, .55); opacity: 0; pointer-events: none; transition: opacity .5s; } .trophy.show { opacity: 1; } .trophy .gatep { position: relative; width: 470px; height: 860px; border-radius: 46px; overflow: hidden; transform: translateY(110%); transition: transform 1s var(--expo); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .8); } .trophy.show .gatep { transform: none; } .trophy .gate { padding-top: 110px; } .trophy .gate img { width: 290px; height: 290px; } .conf { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .conf i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; opacity: 0; } .trophy.show .conf i { animation: fall 2.6s var(--ease) forwards; animation-delay: var(--dl); } @keyframes fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(900px) rotate(var(--r)); } } .art.is-m .esc-brief { display: none; } .art.is-m .locks { left: 50px; top: 60px; width: 700px; } .art.is-m .pad { left: 50px; top: 560px; width: 700px; padding-bottom: 36px; } .art.is-m .keys { grid-template-columns: repeat(3, 150px); } .art.is-m .tracker { left: 50px; top: 1180px; width: 700px; } /* ══ 05 · Parent desktop (DashboardShell) ════════════════ */ .pd { position: absolute; display: flex; overflow: hidden; border-radius: 22px 0 0 0; background: var(--b50); box-shadow: 0 0 0 1px rgba(0, 30, 90, .08), 0 70px 130px -60px rgba(0, 30, 90, .5); } .rail { flex: none; width: 250px; display: flex; flex-direction: column; background: linear-gradient(180deg, #0051C2 0%, #001A66 100%); color: #fff; } .rail-logo { padding: 24px 22px 22px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .rail-logo img { width: 200px; height: auto; } .rail nav { display: grid; gap: 6px; padding: 18px 10px; } .rail nav span { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 16px; border-radius: 12px; font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, .65); } .rail nav span.on { background: rgba(255, 255, 255, .18); color: #fff; } .rail nav .ic { width: 22px; height: 22px; } .pg { position: relative; flex: 1; min-width: 0; padding: 40px 48px 0; } /* Curriculum builder (class page) */ .cb-back { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 500; color: var(--blue); } .cb-back .ic { width: 20px; height: 20px; } .cb-title { margin-top: 6px; text-align: center; } .cb-title b { display: block; font-size: 30px; font-weight: 700; color: var(--blue); } .cb-title small { display: block; margin-top: 6px; font-size: 16px; color: var(--blue); opacity: .75; } .cb-save { position: absolute; right: 48px; top: 46px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--blue); } .cb-save .ic { width: 17px; height: 17px; } .cb-cols { display: flex; align-items: flex-start; gap: 24px; margin-top: 30px; } .cb-panel { padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .55); border: 1.5px solid var(--b300); } .cb-secs { flex: 0 0 360px; } .cb-pane { flex: 1; min-width: 0; } .cb-ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; color: var(--blue); } .cb-ph b { display: block; font-size: 20px; font-weight: 700; } .cb-ph small { display: block; margin-top: 3px; font-size: 14.5px; opacity: .75; } .cb-act { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1.5px var(--blue); font-size: 14.5px; font-weight: 600; transition: transform .15s; } .cb-act .ic { width: 16px; height: 16px; stroke-width: 2.4; } .cb-act.press, .cb-btn.press { transform: scale(.93); } .cb-list { display: grid; gap: 8px; } .cb-sec { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; font-size: 15.5px; font-weight: 500; color: var(--blue); } .cb-sec i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px currentColor; font-style: normal; font-size: 13px; font-weight: 700; } .cb-sec span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cb-sec small { font-size: 13.5px; opacity: .7; } .cb-sec.on { background: var(--blue); color: #fff; } .cb-t { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1.5px solid #DCE8F5; font-size: 16px; font-weight: 500; color: var(--blue); } .cb-t span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cb-t .ic { width: 19px; height: 19px; color: var(--ink3); } .cb-t.new { border-color: var(--blue); animation: rowIn .7s var(--ease) both; } @keyframes rowIn { from { opacity: 0; transform: translateY(-10px); } } .cb-new { display: none; gap: 10px; margin-top: 12px; } .cb-new.on { display: flex; animation: rowIn .5s var(--ease) both; } .cb-field { flex: 1; min-width: 0; height: 50px; display: flex; align-items: center; padding: 0 16px; border-radius: 12px; background: #fff; border: 1.5px solid var(--blue); box-shadow: 0 0 0 3px rgba(37, 81, 161, .14); font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; } .cb-field .ph-t { color: var(--ink4); } .cb-btn { flex: none; display: grid; place-items: center; height: 50px; padding: 0 20px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 600; transition: transform .15s; } .cb-btn.alt { background: none; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); } /* Add a student: interests (AddStudentDialog) */ .as { position: absolute; inset: 0; padding: 0 26px; display: flex; flex-direction: column; background: linear-gradient(180deg, #F2FBFF 0%, #E2F1FF 100%); } .as-h { margin: 46px 0 0; font-size: 27px; font-weight: 700; line-height: 1.25; color: var(--blue); } .as-p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink5); } .as-demo { margin-top: 22px; height: 170px; border-radius: 16px; overflow: hidden; background: #fff url('homepage/img/interests-demo.webp') center / cover; box-shadow: inset 0 0 0 1.5px var(--b300); } .as-chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; min-height: 92px; margin-top: 24px; } .as-chips p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink5); } .chip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .7); border: 1.5px solid var(--blue); color: var(--blue); font-size: 15px; font-weight: 500; animation: chipIn .45s var(--spring) both; } .chip .ic { width: 15px; height: 15px; stroke-width: 2.4; } @keyframes chipIn { from { transform: scale(.3); opacity: 0; } } .as-field { position: relative; display: flex; align-items: center; height: 54px; margin-top: 14px; padding: 0 60px 0 16px; border-radius: 12px; background: #fff; border: 1.5px solid rgba(0, 81, 194, .22); font-size: 15.5px; transition: border-color .2s, box-shadow .2s; } .as-field.focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 81, 161, .14); } .as-field .tx { white-space: nowrap; overflow: hidden; } .as-add { position: absolute; right: 6px; top: 6px; bottom: 6px; width: 44px; border-radius: 9px; display: grid; place-items: center; background: var(--blue); color: #fff; opacity: .35; transition: opacity .2s, transform .15s; } .as-add.on { opacity: 1; } .as-add.tap { transform: scale(.86); } .as-add .ic { width: 21px; height: 21px; stroke-width: 2.6; } .as-btns { display: flex; gap: 10px; margin: auto 0 40px; } .as-btns span { flex: 1; height: 54px; border-radius: 999px; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 16.5px; font-weight: 600; } .as-btns span.alt { background: none; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); } .flowline { position: absolute; height: 0; border-top: 3px dotted #9CC2EC; } .flowline i { position: absolute; top: -9px; width: 15px; height: 15px; margin-left: -7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255, 217, 90, .3); opacity: 0; } .flowline.go i { animation: travel 1s var(--ease) forwards; } .kid-act .scr { background: linear-gradient(180deg, var(--from), var(--to)); } .kid-act .ap-t { margin: 18px 24px 0; font-size: 38px; } .kid-act .ap-p { margin-top: 10px; font-size: 17px; padding: 0 22px; } .kid-act .sie { top: 210px; } .kid-act .sie { --tok: 44px; --art: 150px; --tin: 32px; } .kid-act .sie-tray { gap: 6px; min-height: 64px; padding: 0 18px; margin-top: 0; } .kid-act .sie-vs { gap: 6px; margin-top: 14px; } .kid-act .vs small { font-size: 12.5px; } .kid-act .note { margin: 14px 20px 0; padding: 10px 14px; font-size: 14.5px; text-align: center; } .kid-act .badge { min-width: 30px; height: 30px; font-size: 15px; } .kid-act .wipe { z-index: 30; } .kid-act .tagline { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 13.5px; font-weight: 600; color: var(--acc); white-space: nowrap; } /* Calendar (WeekGrid on the Calendar screen) */ .calv { position: absolute; font-family: var(--ui); } /* The schedule builder (GenerateScheduleCard) that comes before the calendar, after homepage.css's (.gs, .dc, .myp, .pw, .pnote), drawn at design px. Builder and calendar trade places with .away. */ /* Straight on the band, the calendar's crop softens away at the right and bottom instead of a hard edge. */ .cal-fig.cal-on { -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 99%), linear-gradient(to bottom, #000 72%, transparent 99%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 80%, transparent 99%), linear-gradient(to bottom, #000 72%, transparent 99%); mask-composite: intersect; } .cal-w, .gsb { transition: opacity .5s, translate .7s var(--expo); } .cal-w.away, .gsb.away { opacity: 0; translate: 0 24px; pointer-events: none; } .t-fri { --from: #F5F4FF; --to: #DDDAFB; --line: #C3BEEA; --acc: #4A4590; } .t-sat { --from: #FFF5F8; --to: #FFD9E4; --line: #EFBACB; --acc: #9B3D5E; } .gsb { position: absolute; left: 120px; top: 96px; width: 1360px; font-family: var(--ui); color: var(--ink); } .gsb-g { display: flex; gap: 36px; } .gsb-f { flex: none; width: 470px; display: grid; align-content: start; gap: 30px; } .gsb-sep { flex: none; width: 1px; background: rgba(0, 81, 194, .14); } .gsb-v { flex: 1; min-width: 0; display: flex; flex-direction: column; } .gsb .fl { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .gsb .eb { flex: none; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink5); } .gsb .hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; color: var(--ink4); } .gsb .days { display: flex; justify-content: space-between; } .gsb .dc { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; border: 2.5px dashed #9AA5B1; font-size: 18px; color: var(--ink4); transition: background-color .25s, border-color .25s, color .25s, transform .15s; } .gsb .dc.on { border-style: solid; border-color: var(--line); background: linear-gradient(160deg, var(--from), var(--to)); color: var(--acc); font-weight: 700; } .gsb .press { transform: scale(.9); } .gsb .myp { border-radius: 18px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1.5px rgba(0, 81, 194, .18); overflow: hidden; } .gsb .myp-y { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(0, 81, 194, .14); } .gsb .myp-y span { padding: 12px; text-align: center; font-size: 17px; font-weight: 600; color: var(--ink5); } .gsb .myp-y span.on { color: var(--blue); box-shadow: inset 0 -3px 0 var(--blue); } .gsb .myp-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; } .gsb .myp-g span { padding: 10px 0; border-radius: 10px; text-align: center; font-size: 17px; font-weight: 500; transition: background-color .25s, color .25s, transform .15s; } .gsb .myp-g span.on { background: rgba(37, 81, 161, .14); color: var(--blue); font-weight: 700; } .gsb .pbtn { display: flex; align-items: center; justify-content: center; height: 58px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 18px; font-weight: 600; transition: opacity .25s, transform .15s; } .gsb .pbtn.off { opacity: .45; } .gsb .pw { flex: 1; min-height: 230px; display: flex; border: 1px solid rgba(0, 81, 194, .18); border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .5); } .gsb .pw-c { flex: 1; min-width: 0; border-right: 1px solid rgba(0, 81, 194, .14); transition: background-color .3s; } .gsb .pw-c:last-child { border-right: 0; } .gsb .pw-c.off { background: rgba(31, 41, 51, .04); } .gsb .pw-c > b { display: block; padding: 12px 0; text-align: center; border-bottom: 1px solid rgba(0, 81, 194, .14); font-size: 16px; font-weight: 700; color: var(--ink4); transition: color .25s; } .gsb .pw-c.on > b { color: var(--acc); } .gsb .pw-bars { display: grid; gap: 6px; padding: 6px; } .gsb .pw-bars i { height: 22px; border-radius: 6px; background: var(--to); border: 1px solid var(--line); animation: chipIn .3s var(--spring) both; } .gsb .pnote { flex: none; display: grid; gap: 10px; margin-top: 16px; padding: 16px 20px; border-radius: 16px; background: rgba(0, 81, 194, .08); font-size: 16px; color: var(--ink5); } .gsb .pnote p { margin: 0; } .gsb .pn-stats { display: flex; gap: 20px; } .gsb .pn-stats > span { flex: 1; display: grid; gap: 4px; } .gsb .pn-stats > i { width: 1px; background: #9AA5B1; } .gsb .pn-stats b { font-size: 22px; font-weight: 700; color: var(--blue); white-space: nowrap; } /* Phone: the form over the preview, at the calendar's phone width. */ .art.is-m .gsb { left: 40px; top: 60px; width: 720px; } .art.is-m .gsb-g { flex-direction: column; gap: 28px; } .art.is-m .gsb-f { width: auto; } .art.is-m .gsb-sep { display: none; } .art.is-m .gsb .pw { min-height: 150px; } .cal-top { display: flex; align-items: center; justify-content: space-between; } .spick { display: inline-flex; align-items: center; gap: 16px; height: 74px; padding: 0 24px 0 18px; border-radius: 14px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 2px rgba(0, 81, 194, .2); } .spick .av { width: 46px; height: 46px; font-size: 19px; } .spick b { font-size: 22px; font-weight: 600; color: var(--ink); } .spick .ic { width: 24px; height: 24px; margin-left: 40px; color: var(--ink5); } .sset { display: inline-flex; align-items: center; gap: 10px; height: 64px; padding: 0 24px; border-radius: 14px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 2px rgba(0, 81, 194, .2); font-size: 20px; font-weight: 500; color: var(--ink); } .sset .ic { width: 22px; height: 22px; } .cal-nav { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 22px; height: 46px; } .cal-nav .arr { position: absolute; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1.5px rgba(0, 81, 194, .2); color: var(--blue); transition: transform .15s; } .cal-nav .arr .ic { width: 22px; height: 22px; stroke-width: 2.4; } .cal-nav .arr.l { left: 0; } .cal-nav .arr.r { right: 190px; } .cal-nav .arr.press { transform: scale(.88); } .cal-nav b { font-size: 20px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } .done-pill { position: absolute; right: 0; padding: 8px 16px; border-radius: 999px; background: var(--b100); color: var(--blue); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; } .cal-g { position: relative; margin-top: 14px; height: 900px; overflow: hidden; border-radius: 18px 18px 0 0; box-shadow: inset 0 0 0 1.5px rgba(0, 81, 194, .1); background: rgba(255, 255, 255, .35); } .wkg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); transition: transform .7s var(--expo), opacity .4s; } .wkg.late { transition-delay: .2s; } .wkg.out-l { transform: translateX(-10%); opacity: 0; } .wkg.out-r { transform: translateX(10%); opacity: 0; } .day { display: flex; flex-direction: column; border-right: 1.5px solid rgba(0, 81, 194, .08); } .day.off { background: rgba(31, 41, 51, .045); } .day-h { display: grid; justify-items: center; gap: 6px; height: 104px; padding-top: 22px; border-bottom: 1.5px solid rgba(0, 81, 194, .08); } .day-h span { font-size: 19px; font-weight: 600; letter-spacing: .03em; color: var(--ink5); } .day-h b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; font-weight: 700; color: var(--ink); } .day.today .day-h { background: rgba(37, 81, 161, .08); } .day.today .day-h span { color: var(--blue); } .day.today .day-h b { background: var(--blue); color: #fff; } .day-b { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 10px; } .day.empty .day-b { justify-content: center; align-items: center; padding-bottom: 200px; font-size: 18px; color: var(--ink5); } .lc { padding: 11px 13px 12px; border-radius: 10px; background: linear-gradient(180deg, var(--from), var(--to)); border: 1.5px solid var(--line); opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .6s var(--ease), background .45s, border-color .45s; } .lc.in { opacity: 1; transform: none; } .lc small { display: block; font-size: 17px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .4s; } .lc span { display: block; margin-top: 3px; font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--ink); transition: color .4s; } .lc i { display: block; margin-top: 3px; font-style: normal; font-size: 16.5px; line-height: 1.3; color: var(--ink4); } .lc em { display: none; align-items: center; gap: 5px; margin-top: 4px; font-style: normal; font-size: 16.5px; font-weight: 600; color: var(--teal); } .lc em .ic { width: 16px; height: 16px; } .lc.done { background: var(--ink05); border-color: var(--ink2); } .lc.done small, .lc.done span, .lc.done i { color: var(--ink4); } .lc.done em { display: flex; animation: chipIn .45s var(--spring) both; } /* Parent Home, desktop */ .dh { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 40px; } .dh img { width: 68px; height: auto; } .dh b { font-size: 34px; font-weight: 700; color: var(--blue); } .dh-sub { margin: 10px auto 0; text-align: center; font-size: 18px; color: var(--ink5); } .dcols { display: flex; align-items: flex-start; gap: 36px; margin-top: 64px; } .dcol-a { flex: 1.35; min-width: 0; } .dcol-b { flex: 1; min-width: 0; padding-left: 36px; border-left: 1.5px solid var(--ink1); } .dcols .sh { font-size: 21px; } .dcols .tr { padding: 14px 18px; margin-bottom: 11px; } .dcols .tr-t b { font-size: 17px; } .dcols .tr-t small { font-size: 15px; } .dcols .wk { padding: 16px 18px; margin-bottom: 11px; } .dcols .wk-top { font-size: 17px; } .dcols .chips i { font-size: 15px; padding: 5px 10px; } .attn { display: grid; grid-template-rows: 1fr; margin-bottom: 30px; transition: grid-template-rows .7s var(--expo), opacity .45s, margin-bottom .7s var(--expo); } .attn > div { min-height: 0; overflow: hidden; } .attn-c { padding: 20px 22px; border-radius: 18px; background: linear-gradient(180deg, #FFF9F3 0%, #FFDCDC 100%); border: 1.5px solid #F0C8C0; } .attn.gone { grid-template-rows: 0fr; opacity: 0; margin-bottom: 0; } .arow { display: flex; align-items: center; gap: 14px; } .sbtn { position: relative; display: inline-grid; place-items: center; height: 44px; padding: 0 22px; border-radius: 999px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1.5px var(--blue); font-size: 16px; font-weight: 600; color: var(--blue); transition: transform .15s; } .sbtn em { font-style: normal; transition: opacity .2s; } .sbtn .spin { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(37, 81, 161, .25); border-top-color: var(--blue); opacity: 0; animation: spin .8s linear infinite; } .sbtn.press { transform: scale(.93); } .sbtn.busy em { opacity: 0; } .sbtn.busy .spin { opacity: 1; } @keyframes spin { to { transform: rotate(360deg); } } .tr.new { animation: rowIn .7s var(--ease) both; } /* Portfolio */ .pf-back { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 500; color: var(--ink5); } .pf-back .ic { width: 18px; height: 18px; } .pf-h { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; } .pf-h b { display: flex; align-items: center; gap: 12px; font-size: 32px; font-weight: 700; color: #9E4C3E; } .pf-h b .ic { width: 34px; height: 34px; fill: #9E4C3E; stroke: none; } .pf-sel { display: inline-flex; align-items: center; gap: 14px; height: 60px; padding: 0 20px 0 14px; border-radius: 14px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 2px rgba(0, 81, 194, .2); font-size: 17px; font-weight: 500; } .pf-sel .ic { width: 20px; height: 20px; color: var(--blue); } .pf-sum { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 30px; } .pf-sum b { display: block; font-size: 24px; font-weight: 700; } .pf-sum small { display: block; margin-top: 6px; font-size: 18px; color: var(--ink5); } .pf-sum small em { font-style: normal; font-weight: 700; color: var(--ok-shade); } .pf-leg { display: flex; align-items: center; gap: 16px; font-size: 15px; color: var(--ink5); } .pf-leg b { font-size: 15px; display: inline; color: var(--ink); } .pf-leg i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; } .cols { position: relative; height: 230px; margin-top: 30px; display: grid; grid-template-columns: 40px repeat(12, minmax(0, 1fr)); align-items: end; } .cols .gl { position: absolute; left: 40px; right: 0; height: 1px; background: rgba(0, 81, 194, .1); } .cols .gl span { position: absolute; left: -36px; top: -8px; font-size: 12.5px; color: var(--ink4); } .mo { position: relative; display: flex; flex-direction: column-reverse; align-items: center; height: 100%; justify-content: flex-start; } .mo small { position: absolute; bottom: -28px; font-size: 13.5px; color: var(--ink4); } .mo.cur small { color: var(--blue); font-weight: 700; } .mo .seg { width: 30px; height: 0; margin-top: 2px; transition: height 1.1s var(--expo); } .mo .seg:last-child { border-radius: 4px 4px 0 0; } .pf-tabs { display: flex; gap: 10px; margin-top: 70px; } .pf-tabs span { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--line); font-size: 17px; font-weight: 600; color: var(--acc); } .pf-tabs span.on { background: linear-gradient(180deg, var(--from), var(--to)); box-shadow: inset 0 0 0 2px var(--acc); } .unit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 20px; margin-top: 12px; padding: 16px 22px; border-radius: 14px; background: var(--from); border: 1.5px solid var(--line); } .unit b { font-size: 17px; font-weight: 600; color: var(--acc); } .unit .meta { font-size: 15px; color: var(--ink5); } .db { position: relative; grid-column: 1; height: 20px; } .db::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: rgba(184, 87, 63, .15); } .db .pass { position: absolute; left: 80%; top: 3px; width: 2px; height: 14px; background: rgba(31, 41, 51, .25); } .db .bar-d { position: absolute; top: 9px; left: var(--pre); width: 0; height: 2px; background: #B8573F; transition: width 1.2s var(--expo); } .db .pre, .db .fin { position: absolute; top: 3px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; } .db .pre { left: var(--pre); border: 2px solid #B8573F; background: #fff; } .db .fin { left: var(--pre); background: #B8573F; transition: left 1.2s var(--expo); } .in .db .bar-d { width: calc(var(--fin) - var(--pre)); } .in .db .fin { left: var(--fin); } .gain { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ink5); font-variant-numeric: tabular-nums; } .gain b { color: var(--ink); } .gain i { padding: 3px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); font-style: normal; font-weight: 700; } .pdf { position: absolute; width: 470px; aspect-ratio: 8.5 / 11; padding: 34px 34px 0; overflow: hidden; border-radius: 6px; background: #fff; color: var(--ink); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 70px 110px -40px rgba(0, 30, 90, .55); transform-origin: 50% 100%; transition: transform 1.2s var(--expo), opacity .8s; } .pdf.hide { opacity: 0; transform: translateY(80px) rotate(2deg) scale(.94); } .pdf .eb { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); } .pdf h4 { margin: 6px 0 0; font-size: 32px; } .pdf .mt { margin-top: 4px; padding-bottom: 14px; border-bottom: 4px solid var(--blue); font-size: 13px; color: var(--ink5); } .pdf .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; } .pdf .tiles div { padding: 9px 10px; border: 1px solid var(--ink2); border-top: 4px solid var(--blue); border-radius: 5px; } .pdf .tiles small { display: block; min-height: 22px; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink5); } .pdf .tiles b { display: block; margin-top: 2px; font-size: 22px; } .pdf .tiles b.g { color: var(--ok-shade); } .pdf .h { margin: 24px 0 8px; padding-bottom: 5px; border-bottom: 2px solid var(--blue); font-size: 15px; font-weight: 700; color: var(--blue); } .pdf .row { display: grid; grid-template-columns: 70px 1fr 50px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--ink05); font-size: 11.5px; } .pdf .row code { font-family: var(--mono); font-weight: 700; color: var(--blue); } .pdf .row i { justify-self: end; padding: 1px 6px; border-radius: 4px; background: #E3F4E7; color: var(--ok-shade); font-style: normal; font-weight: 700; } .pdf-btn { position: absolute; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 999px; background: #9E4C3E; color: #fff; font-size: 18px; font-weight: 600; box-shadow: 0 18px 36px -16px rgba(120, 40, 20, .6); transition: transform .2s; } .pdf-btn .ic { width: 20px; height: 20px; } .pdf-btn.press { transform: scale(.93); } /* ══ 06 · Accuracy chart ═════════════════════════════════ */ /* Accuracy: a pink band (the social studies slot), plum type like the other subject bands; the chart card keeps its own neutral ink. */ #trust { padding-bottom: clamp(96px, 11vw, 158.4px); background: linear-gradient(180deg, #FDF2FF 0%, #F8D6F6 100%); color: #804775; --sub: #804775; } /* Figures (.viz): square white plates like the media frames, set as editorial figures: a numbered rule, a big title, then the data at display size. Starlo is blue, the plain models a neutral gray, and a miss is a red ring (shape and colour, so it never rests on colour alone). */ #trust .viz { color: var(--text); --sub: #5C6270; } .viz { --c: #7B8794; --miss: #DC3545; margin: 0 var(--pad); padding: clamp(24px, 4.4vw, 63.36px); background: #fff; } .viz-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 40px; } .viz-rule { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; margin-bottom: clamp(18px, 2.4vw, 34.56px); padding-bottom: 14px; border-bottom: 1px solid var(--hair); font-size: 13px; font-weight: 500; color: var(--sub); font-variant-numeric: tabular-nums; } .viz-h b { display: block; font-size: clamp(26px, 2.8vw, 40.32px); font-weight: 600; line-height: 1.06; letter-spacing: -.045em; } .viz-h p { margin: 12px 0 0; max-width: 34em; font-size: clamp(15px, 1.1vw, 15.84px); line-height: 1.5; color: var(--sub); text-wrap: pretty; } .viz-key { display: flex; gap: 20px; font-size: 14px; color: var(--sub); white-space: nowrap; } .viz-key i, .un-q i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; vertical-align: -1px; background: var(--c); } .viz-key i.no, .un-q i { background: #FDECEE; box-shadow: inset 0 0 0 2px var(--miss); } /* 2.1 · one dot per question. Every dot lands looking right; then the misses turn to red rings and the score above ticks down to what the hand check found (showcase.js). */ .units { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4.6vw, 66.24px); margin-top: clamp(40px, 5vw, 72px); } .un.s { --c: var(--blue); } .un-n { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 14px; color: var(--sub); } .un-n b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--text); } .un-v { margin: clamp(10px, 1.2vw, 17.28px) 0 0; font-size: clamp(60px, 7vw, 100.8px); font-weight: 600; line-height: .86; letter-spacing: -.065em; white-space: nowrap; font-variant-numeric: tabular-nums; } .un-v em { font-style: normal; } .un-v small { margin-left: .05em; font-size: .42em; letter-spacing: -.02em; vertical-align: .95em; } .un.s .un-v { color: var(--blue); } .un-s { margin: 14px 0 0; font-size: 15px; color: var(--sub); } /* :not(.m) keeps these off the chat typing indicator (.m.dots), which would otherwise pick up the hairline. */ .dots:not(.m) { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: clamp(3px, .3vw, 4.32px); margin-top: clamp(22px, 2.4vw, 34.56px); padding-top: clamp(22px, 2.4vw, 34.56px); border-top: 1px solid var(--hair); } .dots:not(.m) i, .mx-d i { aspect-ratio: 1; border-radius: 50%; background: var(--c); transform: scale(0); transition: transform .7s var(--spring) var(--d, 0ms), background-color .45s var(--e, 0ms), box-shadow .45s var(--e, 0ms); } .viz.in .dots:not(.m) i, .viz.in .mx-d i { transform: none; } .viz.flag .dots:not(.m) i.x, .viz.flag .mx-d i.x { background: #FDECEE; box-shadow: inset 0 0 0 2px var(--miss); } .un-q { margin: 18px 0 0; font-size: 14px; line-height: 1.45; color: var(--sub); text-wrap: pretty; } .un-q i { margin-right: 6px; } /* 2.2 · topics by tutor, ten dots a cell; Starlo's column sits in a pale blue band. */ .mx { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); margin-top: clamp(36px, 4.4vw, 63.36px); } .mx > * { padding: clamp(16px, 1.8vw, 25.92px) clamp(12px, 1.6vw, 23.04px); border-top: 1px solid var(--hair); } .mx > .mx-c { border-top: 0; } .mx > :nth-child(4n + 1) { padding-left: 0; } .mx .s { --c: var(--blue); background: rgba(37, 81, 161, .055); } .mx-c b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .mx-c em { display: block; margin-top: 8px; font-size: clamp(36px, 4vw, 57.6px); font-style: normal; font-weight: 600; line-height: .9; letter-spacing: -.06em; font-variant-numeric: tabular-nums; } .mx-c em small { margin-left: .04em; font-size: .45em; letter-spacing: -.02em; vertical-align: .85em; } .mx-c.s em { color: var(--blue); } .mx-t b { display: block; font-size: clamp(15px, 1.2vw, 17.28px); font-weight: 500; letter-spacing: -.015em; } .mx-t small { display: block; margin-top: 4px; font-size: 13.5px; color: var(--sub); } .mx-d { display: flex; flex-direction: column; justify-content: center; gap: 10px; } .mx-d span { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(3px, .4vw, 5.76px); max-width: 260px; } .mx-d small { font-size: 13.5px; color: var(--sub); font-variant-numeric: tabular-nums; } /* 2.3 · cost in blocks of $0.60, so GPT-5's bar reads as "about six Starlos". */ .cost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); align-items: end; gap: clamp(32px, 5vw, 72px); margin-top: clamp(40px, 5vw, 72px); } .cost-big { margin: 0; font-size: clamp(110px, 14vw, 201.6px); font-weight: 600; line-height: .78; letter-spacing: -.08em; font-variant-numeric: tabular-nums; } .cost-big em { font-style: normal; } .cost-x p:last-child { margin: clamp(18px, 2vw, 28px) 0 0; max-width: 17em; font-size: 15px; line-height: 1.45; color: var(--sub); } .cb { display: grid; grid-template-columns: 112px minmax(0, 1fr) 64px; align-items: center; gap: clamp(12px, 1.6vw, 23.04px); padding: clamp(14px, 1.4vw, 20px) 0; border-top: 1px solid var(--hair); } .cb:last-child { border-bottom: 1px solid var(--hair); } .cb.s { --c: var(--blue); } .cb > span { font-size: 15px; } .cb > span small { display: block; font-size: 13px; color: var(--sub); } .cb > b { text-align: right; font-size: clamp(17px, 1.5vw, 21.6px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .cb-bar { display: flex; gap: 4px; height: clamp(34px, 3.4vw, 48.96px); } .cb-bar i { position: relative; flex: none; border-radius: 4px; background: var(--c); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--expo) var(--d, 0ms); } .cb-bar i::after { content: attr(data-k); position: absolute; left: 10px; bottom: 7px; font-size: 12px; font-style: normal; font-weight: 500; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; } .viz.in .cb-bar i { transform: none; } /* 2.4 · head to head, a dark plate: Starlo's column lifted in a lighter band with a yellow cap. */ #trust .viz.dark { background: var(--night); color: #fff; --sub: rgba(255, 255, 255, .62); --hair: rgba(255, 255, 255, .14); } .vs-t { width: 100%; margin-top: clamp(32px, 4vw, 57.6px); border-collapse: separate; border-spacing: 0; table-layout: fixed; } .vs-t th, .vs-t td { padding: clamp(16px, 1.8vw, 25.92px) clamp(12px, 1.8vw, 25.92px); text-align: left; vertical-align: middle; border-top: 1px solid var(--hair); } .vs-t thead th, .vs-t thead td { border-top: 0; vertical-align: bottom; } .vs-t tr > :first-child { width: 46%; padding-left: 0; } .vs-t thead th { font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; letter-spacing: -.02em; color: var(--sub); } .vs-t thead th small, .vs-t tbody th small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; letter-spacing: 0; color: var(--sub); } .vs-t thead th.s { color: #fff; box-shadow: inset 0 3px 0 var(--yellow); } .vs-t thead th img { display: block; width: 38px; height: auto; margin-bottom: 10px; } .vs-t tbody th { font-size: clamp(15px, 1.2vw, 17.28px); font-weight: 500; } .vs-t tbody td { font-size: clamp(28px, 3.4vw, 48.96px); font-weight: 600; letter-spacing: -.05em; color: rgba(255, 255, 255, .4); font-variant-numeric: tabular-nums; } .vs-t .s { background: rgba(255, 255, 255, .07); color: #fff; } @media (max-width: 760px) { .viz-h { grid-template-columns: minmax(0, 1fr); } .units { grid-template-columns: minmax(0, 1fr); gap: 48px; } /* Topics span the row above their three cells. */ .mx { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mx > .mx-c:first-child { display: none; } .mx > * { padding: 14px 8px; } .mx > :nth-child(4n + 1) { padding-left: 8px; } .mx > .mx-t { grid-column: 1 / -1; padding: 22px 0 6px; } .mx > .mx-d { border-top: 0; } .cost { grid-template-columns: minmax(0, 1fr); } .cb { grid-template-columns: minmax(0, 1fr) auto; } .cb-bar { grid-column: 1 / -1; grid-row: 2; } .vs-t tr > :first-child { width: 42%; } .vs-t thead th img { width: 28px; } } /* ══ 07 · System ═════════════════════════════════════════ */ .subj { display: flex; gap: var(--gap); height: clamp(300px, 34vw, 489.6px); margin: 0 var(--pad); } .sj { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2vw, 28.8px); background: linear-gradient(170deg, var(--from), var(--to)); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--ui); color: var(--acc); transition: flex-grow .7s var(--expo); } .sj:hover, .sj:focus-visible { flex-grow: 2.2; } .sj-n { font-size: clamp(18px, 1.7vw, 24.48px); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; } .sj-code { font-size: 14px; font-weight: 600; opacity: .85; } .sj img { position: absolute; right: 8%; top: 18%; width: 44%; max-width: 200px; opacity: .95; transition: transform .7s var(--expo); } .sj:hover img { transform: rotate(-6deg) scale(1.06); } .sj .lc { position: relative; opacity: 1; transform: none; width: min(100%, 300px); margin-top: auto; } .sj .lc small { font-size: 13px; } .sj .lc span { font-size: 15px; } @media (max-width: 760px) { .subj { flex-direction: column; height: auto; } .sj { min-height: 150px; } .sj:hover { flex-grow: 1; } .sj img { width: 90px; top: 16px; } } .types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: var(--gap) var(--pad) 0; } .ty { position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 34.56px); container-type: inline-size; } .ty-aa { margin-bottom: auto; font-size: 38cqw; line-height: .9; color: var(--blue); } .ty-sans .ty-aa { font-family: var(--ui); font-weight: 800; letter-spacing: -.045em; } .ty-voice .ty-aa { font-family: var(--voice); font-weight: 700; color: #fff; } .ty-kid .ty-aa { font-family: var(--kid); } .ty b { font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; letter-spacing: -.02em; } .ty p { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--sub); } .ty-voice b { color: #fff; } .ty-voice p { color: rgba(255, 255, 255, .7); } @media (max-width: 760px) { .types { grid-template-columns: minmax(0, 1fr); } } .st-opts { position: absolute; left: 0; right: 0; top: 150px; display: flex; justify-content: center; gap: 22px; } .opt { min-width: 200px; height: 74px; padding: 0 28px; border-radius: 14px; display: grid; place-items: center; background: #fff; border: 2px solid #8C8C8C; color: #545454; font-size: 24px; font-weight: 600; box-shadow: 0 0 4px rgba(0, 0, 0, .14); transition: background-color .35s, border-color .35s, color .35s, transform .3s var(--spring); } .opt.sel { border-color: var(--blue); color: var(--blue); transform: translateY(-4px); } .opt.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-ink); } .opt.no { background: var(--no-bg); border-color: var(--no); color: #721C24; } .st-q { position: absolute; left: 0; right: 0; top: 64px; text-align: center; font-size: 28px; font-weight: 600; color: var(--ink); } .st-note { position: absolute; left: 50%; top: 290px; transform: translateX(-50%); } .st-note .note { font-size: 21px; padding: 16px 26px; white-space: nowrap; } .st-label { position: absolute; left: 0; right: 0; bottom: 56px; display: flex; justify-content: center; gap: 30px; font: 500 18px/1 var(--sans); color: var(--sub); } .st-label span.on { color: var(--text); } .illos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); margin: var(--gap) var(--pad) 0; } .il { aspect-ratio: 1 / 1; display: grid; place-items: center; } .il img { width: 64%; height: 64%; object-fit: contain; transition: transform .6s var(--spring); } .il:hover img { transform: scale(1.08) rotate(-4deg); } .il.wide { grid-column: span 2; grid-row: span 2; } .il.wide img { width: 52%; height: 52%; animation: bob 4.5s ease-in-out infinite; } @media (max-width: 760px) { .illos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .il.wide { grid-column: span 2; grid-row: span 1; aspect-ratio: 2 / 1; } } /* ══ Details added per picture ═══════════════════════════ */ .gate .gbtn.two { margin-bottom: 0; } .gate .gbtn.ghost { margin: 6px 0 38px; height: 46px; background: none; color: #fff; } .teach .q { margin: 8px 24px 0; text-align: center; font-size: 19px; font-weight: 600; color: var(--ink); } .teach .bd { position: relative; flex: 1; } .teach .ap-n { padding-bottom: 24px; } .m.kid.photo { padding: 7px; } .snapmini { position: relative; display: block; width: 190px; height: 138px; overflow: hidden; border-radius: 8px; background: repeating-linear-gradient(180deg, #FFFDF7 0 22px, #CFE0F2 22px 23.5px); transform: rotate(-2deg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .snapmini::before { content: ''; position: absolute; left: 26px; top: 0; bottom: 0; width: 2px; background: #F2A0A0; } .snapmini b { position: absolute; left: 62px; top: 10px; font: 400 28px/1.2 var(--kid); color: #2B3A55; white-space: pre; } .calv .cal-top, .calv .cal-nav { width: 1360px; } .cal-g { width: 1680px; } .sk { position: absolute; width: 620px; height: auto; border-radius: 6px; box-shadow: 0 40px 70px -40px rgba(60, 40, 10, .5), 0 0 0 1px rgba(0, 0, 0, .05); transition: transform .9s var(--expo); } .sk1 { left: 10px; top: 40px; transform: rotate(-4deg); } .sk2 { left: 350px; top: 320px; transform: rotate(3deg); } .foot-cta:hover .sk1 { transform: rotate(-6deg) translate(-20px, -10px); } .foot-cta:hover .sk2 { transform: rotate(5deg) translate(20px, -10px); } .art.is-m .sk { width: 560px; } .art.is-m .sk1 { left: 30px; top: 40px; } .art.is-m .sk2 { left: 210px; top: 250px; } /* Phone layouts of the wide pictures (artboard .is-m, 800 wide) */ /* Split view on a phone: a narrow window drawn at 360 and doubled, so the type stays readable; the panel slides OVER the chat, the way the app does on a narrow screen. */ .art.is-m .split-w { left: 40px !important; top: 40px !important; width: 360px !important; height: 460px !important; transform: scale(2); transform-origin: 0 0; border-radius: 20px; } /* Narrow screens (chat.tsx absorbRail): no rail; Starlo is the home button · topic · tracker ring */ .art.is-m .cw .srail, .art.is-m .cw .cw-h > b, .art.is-m .cw .sct-card { display: none; } .art.is-m .cw .cw-logo { display: block; flex: none; width: 44px; height: auto; } .art.is-m .cw .sct { flex: none; } .art.is-m .cw .sct-ring { display: block; } .art.is-m .split-w .cw-h { height: 60px; gap: 10px; padding: 0 14px; } .art.is-m .split-w .cw-logo { width: 36px; } .art.is-m .split-w .chip-t { font-size: 12.5px; } .art.is-m .split-w .sct-ring { width: 38px; height: 38px; } .art.is-m .split-w .sct-ring em { font-size: 17px; } .art.is-m .split-w .col { left: 0; right: 0; width: auto; margin-left: 0; padding: 26px 18px 6px; } .art.is-m .split-w .m { font-size: 14px; margin-bottom: 14px; } .art.is-m .split-w .m .lead { font-size: 18px; } .art.is-m .split-w .m.kid { font-size: 14px; padding: 8px 15px; } .art.is-m .split-w .cmp { width: auto; height: 44px; margin: 6px 12px 14px; padding-left: 14px; font-size: 13.5px; } .art.is-m .split-w .cmp > .ic { width: 17px; height: 17px; } .art.is-m .split-w .send { width: 34px; height: 34px; } .art.is-m .split-w .ap { position: absolute; inset: 0; z-index: 2; margin: 0; flex: none; border-radius: 0; transform: translateX(101%); transition: transform .8s var(--expo); } .art.is-m .split-w.open .ap { transform: none; } .art.is-m .split-w .ap-in { width: 100%; } .art.is-m .split-w .ap { border-radius: 0; } .art.is-m .split-w .ap-x { display: none; } .art.is-m .split-w .ap-t { margin: 26px 44px 0; font-size: 38px; } .art.is-m .split-w .ap-p { margin-top: 8px; padding: 0 22px; font-size: 14px; } .art.is-m .split-w .sie { --tok: 40px !important; --art: 108px !important; --tin: 26px !important; padding: 12px 0 4px; } .art.is-m .split-w .sie-tray { gap: 6px; min-height: 50px; margin-top: 0; padding: 0 12px; } .art.is-m .split-w .sie-vs { gap: 28px; margin-top: 12px; } .art.is-m .split-w .vs small { font-size: 12px; } .art.is-m .split-w .badge { min-width: 28px; height: 28px; font-size: 14px; } .art.is-m .split-w .sie .note { min-height: 38px; margin-top: 14px; padding: 9px 14px; font-size: 13px; } .art.is-m .split-w .ap-n { padding: 0 12px 12px; } .art.is-m .split-w .ap-n span { font-size: 13px; } .art.is-m .split-w .nb { width: 38px; height: 38px; border-radius: 10px; } .art.is-m .split-w .nb .ic { width: 19px; height: 19px; } .art.is-m #sKid2 { left: 22px !important; top: 63px !important; transform: scale(.94); transform-origin: 0 0; } /* slightly smaller, so a gap opens between the two phones */ .art.is-m #sPar2 { left: 411px !important; top: 63px !important; transform: scale(.94); transform-origin: 0 0; } .art.is-m .sync, .art.is-m .flowline { display: none; } .art.is-m .cb-w { left: -330px !important; top: 70px !important; } .art.is-m #iPar { left: 12px !important; top: 38px !important; } .art.is-m #iKid { left: 398px !important; top: 38px !important; } .art.is-m .cal-w { left: 40px !important; top: 70px !important; } .art.is-m .cal-w .cal-top, .art.is-m .cal-w .cal-nav { width: 720px; } .art.is-m .cal-w .cal-g { width: 720px; } .art.is-m .cal-w .wkg { right: auto; width: 1680px; } .art.is-m .cal-w .day:first-child { display: none; } @media (max-width: 760px) { .cal-fig.cal-on { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 99%); -webkit-mask-composite: source-over; mask-image: linear-gradient(to bottom, #000 72%, transparent 99%); mask-composite: add; } } .art.is-m .home-w { left: -270px !important; top: 70px !important; } .art.is-m .pf-w { left: -270px !important; top: 70px !important; } .art.is-m .pf-pdf { left: 300px !important; top: 330px !important; } .art.is-m .pf-btn { left: 340px !important; top: 900px !important; } /* ══ The same loop for every topic (#loop) ════════════════ */ /* 1 · The Add topic dialog (the page's .dlg, centered) */ .lq-add .as-field { padding-right: 16px; } .lq-add .ph-t { color: var(--ink4); } /* 2 · The student's phone at each step, three in a row, each scaled to fit with its label above it. They come in left to right; once the assessment is done they drop away together. On a phone they sit one artboard apart at full size, and the row slides to the live one (--at). */ .lq-row { position: absolute; inset: 0; } .lq-st { position: absolute; left: calc(167px + var(--i) * 465px); top: 150px; width: 336px; height: 726px; transition: opacity .6s var(--ease), transform .8s var(--expo); } .lq-st .ph { left: 0; top: 0; transform: scale(.86); transform-origin: 0 0; } .lq-st .scr { background: #0B0C10; } .lq-st.off { opacity: 0; transform: translateX(60px); } .lq-row .sync { opacity: 0; transition: opacity .4s; } .lq-row .sync.on { opacity: 1; } .lq-row.gone .sync { opacity: 0; } .lq-row.gone .lq-st { opacity: 0; transform: translateY(40px) scale(.96); } .lq-row.gone .lq-st:nth-child(2) { transition-delay: .08s; } .lq-row.gone .lq-st:nth-child(3) { transition-delay: .16s; } /* Each phone's step (page type, not the app's): numbered, lit while live, blue once done */ .lq-lb { position: absolute; left: 0; right: 0; top: -54px; display: flex; justify-content: center; align-items: center; gap: 10px; font: 500 18px/1 var(--sans); letter-spacing: -.01em; color: rgba(37, 81, 161, .4); transition: color .3s; } .lq-lb i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px currentColor; font-style: normal; font-size: 12px; font-weight: 600; transition: background-color .3s, color .3s; } .lq-st.on .lq-lb, .lq-st.done .lq-lb { color: var(--blue); } .lq-st.on .lq-lb { font-weight: 600; } .lq-st.on .lq-lb i { background: var(--blue); box-shadow: none; color: #fff; } .art.is-m .lq-row { transform: translateX(calc(var(--at, 0) * -800px)); transition: transform .9s var(--expo); } .art.is-m .lq-st { left: calc(107px + var(--i) * 800px); top: 120px; width: 585px; height: 1266px; } .art.is-m .lq-st .ph { transform: scale(1.5); transform-origin: 0 0; } #loop.is-m .ph { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); } /* the frame's rim only: the drop shadow gets clipped */ .art.is-m .dlg-pos.lq-add { top: 480px; } .art.is-m .lq-lb { top: -66px; gap: 14px; font-size: 30px; } .art.is-m .lq-lb i { width: 38px; height: 38px; font-size: 19px; } /* Each phone: chat underneath, a quiz page over it, the gate sheets on top. */ .lq-chat, .lq-quiz, .lq-gate { position: absolute; inset: 0; display: flex; flex-direction: column; } .lq-chat { z-index: 1; } .lq-chat .log:not(.over) { -webkit-mask-image: none; mask-image: none; } /* the top fade only once it scrolls */ .lq-chat .dw { margin-top: 10px; } .lq-chat .dw-b { padding: 10px 14px; } .lq-chat .dw pre { font-size: 15px; } .lq-quiz { z-index: 2; background: linear-gradient(180deg, var(--from), var(--to)); transition: opacity .45s var(--ease); } .lq-quiz .qz-o.sel { background: var(--from); } /* the subject's own tint, not math's blue */ .lq-quiz.off { opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; } .lq-gate { z-index: 3; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; } .lq-gate.on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); } /* GateSheet's entrance, as on the Lesson Complete sheet: art pops, then title, topic, copy and buttons rise. */ .lq-gate .gate > img { animation: scArt .55s var(--spring) .08s both; } .lq-gate .gate > b { animation: scRise .26s var(--ease) .17s both; } .lq-gate .gate > em { animation: scRise .26s var(--ease) .225s both; } .lq-gate .gate > p { animation: scRise .26s var(--ease) .28s both; } .lq-gate .gate > .gbtn { animation: scRise .26s var(--ease) .335s backwards; } /* backwards: a held fill would block the tap's scale */ .lq-gate .gbtn.tap { transform: scale(.94); } /* 3 · The Portfolio popup: the parent's page at phone size (as in #sides2) in a dialog, scaled up. Its unit's score line draws in (`grow`), then glides to the new averages when the topic lands. */ .dlg-pos.lq-pos { left: 500px; top: 230px; width: 400px; transform: scale(1.5); transform-origin: 0 0; } .art.is-m .dlg-pos.lq-pos { left: 40px; top: 360px; width: 360px; transform: scale(2); } .lq-pr { gap: 0; } .lq-pr .pp-h { margin-top: 0; } .lq-pr .unit { margin-top: 18px; padding: 11px 14px; gap: 6px 10px; } .lq-pr .unit b { font-size: 15px; } .lq-pr .unit .meta { font-size: 12.5px; } .lq-pr .gain { gap: 6px; font-size: 13px; } .lq-pr .gain i { padding: 2px 7px; } .lq-pr .db::before { background: var(--line); } .lq-pr .db .bar-d, .lq-pr .db .fin { background: var(--acc); } .lq-pr .db .pre { border-color: var(--acc); transition: left 1.2s var(--expo); } .lq-pr .db .bar-d { left: var(--pre); width: 0; transition: width 1.2s var(--expo), left 1.2s var(--expo); } .lq-pr .db .fin { left: var(--pre); } .lq-pr.grow .db .bar-d { width: calc(var(--fin) - var(--pre)); } .lq-pr.grow .db .fin { left: var(--fin); } /* Reduced motion: no entrances, no loops. */ @media (prefers-reduced-motion: reduce) { html.js .rv, html.js .md.rv, html.js .card.rv { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .mq-track { animation: none; } }