/* dark-mode tokens: start */ /* Uses the shared palette declared in platform/styles/platform.css. */ /* Text that sits ON a saturated fill — the brand mark, primary buttons, the offer pills, the goal question. It must NOT be a surface token. The token sweep mapped these from `#fff` to `var(--p-surface)` because in light mode the surface happens to be white; in dark mode --p-surface is #131b2c, so every one of them turned near-black text on a coloured button. This stays light in both themes because the fill it sits on is dark in both themes. */ :root { --st-on-accent: #ffffff; } /* English All-in-One public entry page. Own file — style.css and platform.css are at their ceiling. */ /* ------------------------------------------------------------- bare mode What a signed-out stranger lands on: no sidebar, no app top bar, no premium strips. The page brings its own header. The site footer stays — the legal links belong on a public page. Set by the start module on the body; removed again when the screen hides. */ /* Before the first paint, not after. `n1-bare` goes on by this module's JS, and the module is a dynamically imported ES module — it lands long after the stylesheets have painted. Until it did, every refresh of the public page showed the full app shell (sidebar, app header, section bar) and then snapped to the bare page: the "old design appears for a second" flash. `n1-bare-boot` is set on by the inline script in index.html, which runs before anything is painted, so the shell is never drawn. Same rules, earlier element; it is dropped once has the real class, and by a timeout if the module never arrives — see index.html. */ html.n1-bare-boot .sidebar, html.n1-bare-boot #mainHeader, html.n1-bare-boot #platformTopNav, html.n1-bare-boot .premium-mobile-strip, html.n1-bare-boot #premiumExpiryBanner, html.n1-bare-boot #n1SectionNav, html.n1-bare-boot #bottomNav, body.n1-bare .sidebar, body.n1-bare #mainHeader, body.n1-bare #platformTopNav, body.n1-bare .premium-mobile-strip, body.n1-bare #premiumExpiryBanner, /* The IELTS section bar (Listening / Reading / Writing …) belongs inside a section. On the public page the visitor has not chosen one yet, so offering its contents is exactly the "list of eight products" this page exists to replace. */ body.n1-bare #n1SectionNav, /* The phone bottom tab bar is app navigation — a stranger has no dashboard yet. */ body.n1-bare #bottomNav { display: none !important; } /* .layout-shell reserves 260px for the fixed sidebar. */ html.n1-bare-boot .layout-shell, body.n1-bare .layout-shell { padding-left: 0; } /* The page background reaches the margins. style.css already paints a blue radial gradient on , but this rule used to fill `.main` solid white edge to edge and hid it. At 1600px that left 240px of flat white either side of the 1120px column with nothing defining the edge. Going transparent here lets the gradient through, and the column below gets its own surface so it still reads as a boundary. */ body.n1-bare .layout-main .main { padding: 0; background: transparent; } body.n1-bare .layout-main { background: transparent; } body.n1-bare { background: /* a faint grid, so the margins read as designed space rather than a gap */ linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px) 0 0 / 64px 64px, radial-gradient(1100px 620px at 50% -8%, rgba(37, 99, 235, 0.22), rgba(37, 99, 235, 0) 62%), linear-gradient(180deg, #eaf1fd 0%, #f6f9fe 44%, var(--p-surface) 100%); background-attachment: fixed; } /* The column needs its own edge now, or it dissolves into the gradient. */ body.n1-bare .platform-screen-inner.st-root { background: rgba(255, 255, 255, 0.74); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.92); border-radius: 22px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 44px -22px rgba(15, 23, 42, 0.18); padding: 26px 30px 38px; margin-block: 18px 40px; } @media (max-width: 760px) { body.n1-bare .platform-screen-inner.st-root { border-radius: 16px; padding: 16px 14px 26px; margin-block: 10px 24px; } } body.n1-bare .st-wrap { padding-left: 24px; padding-right: 24px; } /* ------------------------------------------------------------- offer strip */ /* Sits above the brand bar, full width of the page column. Amber rather than the brand blue so it reads as an offer and not as another navigation surface — and so it never competes with the blue "What is your goal?" block below. */ .st-offer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 12px 0 0; padding: 12px 18px; border: 1.5px solid #fcd34d; border-radius: 12px; background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); } .st-offer-text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .st-offer-tag { flex: none; padding: 3px 10px; border-radius: 999px; background: #b45309; color: var(--st-on-accent); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .st-offer-line { font-size: 14px; color: #78350f; } .st-offer-line strong { font-weight: 800; color: #7c2d12; } .st-offer-btn { flex: none; padding: 9px 18px; border: 0; border-radius: 999px; background: #b45309; color: var(--st-on-accent); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; } .st-offer-btn:hover { background: #92400e; } /* Earned and running. Green rather than amber so a student can tell at a glance that the discount is already theirs, not something still to be won. */ .st-offer--live { border-color: #86efac; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); } .st-offer--live .st-offer-tag, .st-offer--live .st-offer-btn { background: #15803d; } .st-offer--live .st-offer-btn:hover { background: #166534; } .st-offer--live .st-offer-line { color: #14532d; } .st-offer--live .st-offer-line strong { color: #052e16; } @media (max-width: 620px) { .st-offer { align-items: flex-start; } .st-offer-btn { width: 100%; } } /* ---------------------------------------------------------------- page bar */ /* Glass bar. The site had one before the 2026-08-06 "calm" restyle flattened it (see the note in shell-calm.css); this brings it back deliberately, now that the page behind it has a gradient for the translucency to actually show. It sticks to the top so the blur has something moving underneath. */ .st-bar { position: sticky; top: 10px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 18px; background: rgba(255, 255, 255, 0.66); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 999px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 30px -18px rgba(15, 23, 42, 0.35); margin-bottom: 22px; } /* Backdrop blur over a solid parent does nothing, so the panel behind the bar has to stay translucent for this to read as glass. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .st-bar { background: rgba(255, 255, 255, 0.92); } } @media (max-width: 760px) { .st-bar { border-radius: 18px; padding: 12px 14px; top: 6px; } } .st-bar-brand { display: flex; align-items: center; gap: 10px; } .st-bar-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--p-accent-hover); color: var(--st-on-accent); font-size: 13px; font-weight: 800; line-height: 34px; text-align: center; } .st-bar-name { display: flex; flex-direction: column; font-size: 14.5px; font-weight: 800; line-height: 1.15; color: var(--p-text); } .st-bar-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--p-muted-2); } .st-bar-auth { display: flex; align-items: center; gap: 8px; } .st-bar-btn { padding: 9px 17px; border-radius: 999px; border: 1.5px solid var(--p-border-strong); background: var(--p-surface); font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--p-text-2); cursor: pointer; } .st-bar-btn:hover { background: var(--p-bg); } .st-bar-btn--primary { border-color: var(--p-accent-hover); background: var(--p-accent-hover); color: var(--st-on-accent); } .st-bar-btn--primary:hover { background: #1e40af; } /* Identity: who is signed in, their role, and whether they hold premium. Mirrors the dashboard's #accountBadge so the two never look like different accounts. The premium chip is always rendered — "Free" is a real answer, not an empty space, otherwise a lapsed subscription is indistinguishable from a still-loading one. */ .st-who { display: flex; align-items: center; gap: 7px; margin-right: 4px; min-width: 0; } .st-who-name { font-size: 13.5px; font-weight: 700; color: var(--p-text); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-chip { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; cursor: default; } .st-chip--role { background: #dcfce7; color: #166534; } .st-chip--centre { background: #dbeafe; color: #1e40af; } .st-chip--premium { background: #fef3c7; color: #92400e; } .st-chip--free { background: var(--p-border); color: var(--p-text-3); } /* On a phone the bar wraps; keep identity on its own line, left-aligned, rather than letting the name collide with the buttons. */ @media (max-width: 620px) { .st-bar-auth { flex-wrap: wrap; justify-content: flex-start; } .st-who { flex-basis: 100%; margin: 0 0 4px; } .st-who-name { max-width: none; } } .st-wrap { max-width: 1180px; margin: 0 auto; padding: 8px 0 48px; } .st-loading { color: var(--p-muted); font-size: 14px; } .st-head { margin: 0 0 22px; } .st-h1 { margin: 0 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--p-text); } .st-sub { margin: 0; font-size: 15px; color: var(--p-muted); } /* ---------------------------------------------------------------- videos */ .st-public { border: 1.5px solid #c7d2fe; border-radius: 16px; background: #f5f7ff; padding: 20px; } .st-public-head { margin-bottom: 16px; } .st-h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #3730a3; } .st-public-note { margin: 0; font-size: 13.5px; color: var(--p-text-3); } .st-rec { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: #e0e7ff; font-size: 12px; font-weight: 600; color: #3730a3; } .st-vids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .st-vid-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; overflow: hidden; padding: 0; cursor: pointer; background: #1e293b; } .st-vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .st-vid-thumb iframe { width: 100%; height: 100%; border: 0; display: block; } .st-vid-thumb--empty { display: flex; align-items: center; justify-content: center; cursor: default; background: var(--p-border); border: 1.5px dashed var(--p-muted-2); } .st-vid-soon { font-size: 12.5px; font-weight: 600; color: var(--p-muted); } .st-vid-num { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 6px; background: rgba(15, 23, 42, 0.72); color: var(--st-on-accent); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; } .st-vid-thumb--empty .st-vid-num { background: var(--p-muted-2); } .st-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .st-play > span { width: 46px; height: 46px; border-radius: 50%; background: var(--p-surface); color: var(--p-text); font-size: 17px; line-height: 46px; text-align: center; box-shadow: 0 3px 12px rgba(15, 23, 42, 0.3); } .st-vid-thumb--playing .st-play, .st-vid-thumb--playing .st-vid-num { display: none; } .st-vid-title { margin: 10px 0 2px; font-size: 14.5px; font-weight: 700; color: var(--p-text); } .st-vid-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--p-muted); } /* ------------------------------------------------------------- the question */ /* The pivot of the page — the one question a visitor is asked. It was a near-black slab (#0f172a) with a slate-400 subline, which read as a dead footer band rather than the thing to answer. Brand blue with a soft glow makes it the loudest element on the page, and the subline moves to a light blue that stays legible instead of receding into the background. */ .st-goal { margin: 26px auto; max-width: 620px; border-radius: 16px; background: linear-gradient(135deg, var(--p-accent-hover) 0%, var(--p-accent) 55%, #3b82f6 100%); box-shadow: 0 10px 26px rgba(29, 78, 216, 0.28); padding: 22px 24px; text-align: center; } .st-goal-q { margin: 0 0 5px; font-size: 21px; font-weight: 800; color: var(--st-on-accent); } .st-goal-note { margin: 0; font-size: 13.5px; color: #dbeafe; } /* ------------------------------------------------------------ the decision */ /* Question and answers are one unit. They used to be two blocks with the video grid between them, which made the question read as a decorative banner and pushed the actual choice below the fold. */ .st-decide { margin: 26px 0 30px; } .st-decide .st-goal { margin: 0 auto 14px; } /* A short connector so the question visibly belongs to the columns beneath it rather than floating above them. */ .st-decide .st-goal::after { content: ""; display: block; width: 2px; height: 14px; margin: 14px auto -14px; border-radius: 1px; background: var(--p-accent); opacity: 0.55; } /* ----------------------------------------------------------------- paths */ .st-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .st-path { border: 1.5px solid var(--p-border); border-top: 4px solid var(--st-accent, var(--p-accent)); border-radius: 14px; background: var(--p-surface); padding: 18px; } .st-path-title { margin: 0 0 14px; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--p-text); } .st-items { display: grid; gap: 9px; } .st-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 13px; border-radius: 9px; border: 1.5px solid transparent; background: var(--p-bg); font-family: inherit; } /* The open items are anchors — strip the link chrome, keep the card look. */ a.st-item { text-decoration: none; color: inherit; } .st-item--open { cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .st-item--open:hover { border-color: var(--st-accent, var(--p-accent)); background: var(--p-surface); } .st-item--todo { background: #fef2f2; } .st-path[style*="15803d"] .st-item--todo { background: #f0fdf4; } .st-item-text { display: block; flex: 1; min-width: 0; } .st-item-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--p-text); } .st-item-note { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--p-muted); } .st-badge { flex: none; padding: 2px 9px; border-radius: 11px; font-size: 11.5px; font-weight: 700; } .st-badge--live { background: #dcfce7; color: #15803d; } .st-badge--soon { background: var(--p-border); color: var(--p-text-3); } .st-badge--planned { background: #fee2e2; color: #b91c1c; } .st-path-foot { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--p-muted-2); } /* ----------------------------------------------------------------- draft */ .st-draft { margin-top: 26px; border: 1.3px solid #f59e0b; border-radius: 12px; background: #fffbeb; padding: 14px 16px; } .st-draft-title { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #78350f; } .st-draft-body { margin: 0 0 4px; font-size: 12.5px; line-height: 1.55; color: #92400e; } /* ------------------------------------------------------------ responsive */ @media (max-width: 980px) { .st-vids { grid-template-columns: repeat(2, 1fr); } .st-paths { grid-template-columns: 1fr; } } @media (max-width: 560px) { .st-vids { grid-template-columns: 1fr; } .st-h1 { font-size: 24px; } .st-goal-q { font-size: 17px; } }