/* Teachers open this on a phone between classes and on an old school laptop. No framework, no build step — just careful defaults. The 2 Sep 2026 redesign kept that constraint and changed three things: a warmer paper ground, a serif for headings, and a wider column. The old 760px cap was what made the site read as a form rather than a product. Every class name the templates already used is still styled here — the redesign restyles the vocabulary rather than replacing it, so login, signup, verify, history, subscribe and paper pages pick it up untouched. */ /* The webfonts are linked from , not imported here. An @import at the top of a stylesheet is fetched only after this file has been downloaded and parsed, so the fonts arrived a full round trip late and the first paint waited on both in series — expensive on the phone connections this is actually opened on. */ :root { --bg: #fbfaf9; --bg-sunk: #f6f5f2; --card: #ffffff; --ink: #14202e; --ink-soft: #55616f; --dim: #8a95a3; --line: #e6e3dd; --line-soft: #f1efeb; --accent: #1b4f8f; --accent-dark: #143c6d; --accent-soft: #eef3fa; --accent-grad: linear-gradient(180deg, #22588f 0%, #1b4f8f 55%, #184679 100%); --amber: #b4741f; --amber-ink: #8a5a17; --amber-soft: #fdf3e3; --amber-line: #f0dfc0; --ok: #12704a; --ok-bg: #e6f5ee; --warn: #9c3220; --warn-bg: #fdeeeb; /* Layered and softer than a single drop shadow — a card should look lifted off the paper, not outlined against it. */ --shadow: 0 1px 2px rgba(20, 33, 48, .04), 0 2px 6px rgba(20, 33, 48, .04), 0 8px 24px rgba(20, 33, 48, .05); --shadow-lift: 0 18px 48px rgba(20, 33, 48, .13); --radius: 14px; --radius-sm: 10px; --ease: cubic-bezier(.4, 0, .2, 1); --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --serif: Newsreader, Georgia, "Times New Roman", serif; } * { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a, button, .primary, .ghost, .chip, .choice, .card, summary, input, select, .klass, .scope, .stat, .hbar-fill { transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease); } /* An element with [hidden] must stay hidden even when a class sets display. Without this the "my own pattern" mark boxes showed alongside the board pattern, because `.marks { display: flex }` outranks the attribute. */ [hidden] { display: none !important; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-dark); text-decoration: underline; } h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.012em; margin: 0; } /* ----------------------------------------------------------------- top bar */ .topbar { background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); padding: 0 26px; display: flex; align-items: center; gap: 22px; height: 62px; position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.3px; color: var(--ink); } .brand:hover { text-decoration: none; color: var(--ink); } .mark { border-radius: 7px; display: block; } .mark.big { border-radius: 12px; } .topbar nav { display: flex; gap: 4px; } .topbar nav a { padding: 8px 13px; border-radius: 8px; color: var(--ink-soft); font-size: 14.5px; } .topbar nav a:hover { background: var(--bg-sunk); text-decoration: none; } .topbar nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .topbar .who { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--dim); } .topbar .who .name { font-weight: 600; color: var(--ink); font-size: 13.5px; } .topbar .out button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--dim); } .topbar .out button:hover { color: var(--ink); text-decoration: underline; } /* The class + subject the whole app is scoped to. One pair at a time, so adding Class IX or Science changes what this control offers and nothing else in the layout. */ .scope { display: flex; align-items: center; gap: 9px; background: var(--bg-sunk); border: 1px solid var(--line); border-radius: 10px; padding: 7px 13px; color: var(--ink); } .scope:hover { text-decoration: none; border-color: #d8d4cc; } .scope .cls { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--accent); line-height: 1; } .scope .sep { width: 1px; height: 15px; background: #ddd9d2; } .scope .sub { font-size: 14px; font-weight: 600; } .scope svg { color: var(--dim); margin-left: 2px; } /* A
menu rather than JavaScript: it opens on click, closes on Esc, and works with the keyboard without a line of script. */ .scope-menu { position: relative; } .scope-menu > summary { list-style: none; cursor: pointer; } .scope-menu > summary::-webkit-details-marker { display: none; } .scope-menu[open] > summary { border-color: var(--accent); background: #fff; } .scope-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 290px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: var(--shadow-lift); } .scope-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; color: var(--ink); } .scope-item + .scope-item { margin-top: 2px; } a.scope-item:hover { background: var(--bg-sunk); text-decoration: none; color: var(--ink); } .scope-item.on { background: var(--accent-soft); } .scope-item .cls { font-family: var(--serif); font-size: 18px; color: var(--accent); width: 26px; text-align: center; line-height: 1; } .scope-item b { display: block; font-size: 14px; } .scope-item .detail { display: block; font-size: 12.5px; color: var(--dim); } .scope-item > span:nth-child(2) { flex-grow: 1; } /* Not selectable, and it has to look it — a greyed row a teacher can click is worse than one they cannot. */ .scope-item.off { cursor: default; } .scope-item.off .cls, .scope-item.off b { color: var(--dim); } .scope-ask { display: block; padding: 10px; margin-top: 4px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-soft); } .scope-ask:hover { color: var(--accent); text-decoration: none; } /* ------------------------------------------------------------------ layout */ .wrap { max-width: 1080px; margin: 0 auto; padding: 30px 26px 72px; } .wrap.narrow { max-width: 420px; padding-top: 6vh; } .wrap.landing { max-width: 1180px; padding-top: 0; } h1 { font-size: 30px; line-height: 1.2; margin: 0 0 6px; } h2 { font-size: 22px; margin: 38px 0 14px; } h2.mid { margin-top: 46px; } h3 { font-size: 17px; margin: 0 0 6px; } .lede { color: var(--ink-soft); font-size: 16.5px; margin: 0 0 22px; line-height: 1.6; } .dim { color: var(--dim); } .hint { color: var(--dim); font-size: 14px; margin: 8px 0 0; line-height: 1.5; } .right { text-align: right; } /* ------------------------------------------------------------------- cards */ .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); } /* ------------------------------------------------------------------- forms */ .lbl { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; } input[type=text], input[type=email], input[type=password], input[type=number], select { display: block; width: 100%; padding: 11px 13px; font: inherit; font-size: 15px; color: var(--ink); border: 1px solid #d9d5cd; border-radius: 9px; background: #fff; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(27, 79, 143, .12); } .row { display: flex; gap: 14px; margin-bottom: 16px; } .row .grow { flex-grow: 1; } .row .fixed { width: 150px; } label.grow, label.fixed { display: block; } .group { border-top: 1px solid var(--line-soft); padding-top: 20px; margin-top: 6px; } .group-title { font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; } .locked { background: var(--bg-sunk); border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; margin-bottom: 18px; } .locked strong { display: block; font-size: 15.5px; margin: 2px 0 4px; } .choice { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; background: #fff; } .choice:hover { border-color: #cfd6e0; } .choice:has(input:checked) { border-color: var(--accent); border-width: 1.5px; background: #f8fbff; } .choice input { margin-top: 3px; accent-color: var(--accent); } .choice b { display: block; font-size: 15px; margin-bottom: 2px; } .choice span.desc { font-size: 14px; color: var(--ink-soft); } .panel { margin: 0 0 12px 30px; } .marks { display: flex; gap: 10px; } .marks label { flex: 1; } .marks input { text-align: center; padding: 9px 6px; } .chapters { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 22px; padding: 7px 14px 7px 11px; font-size: 13.5px; color: var(--ink); background: #fff; cursor: pointer; } .chip:hover { border-color: #cfd6e0; } .chip input { accent-color: var(--accent); margin: 0; } .chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } /* ----------------------------------------------------------------- buttons */ button, .primary, .ghost { font: inherit; font-weight: 600; padding: 11px 20px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; display: inline-block; text-align: center; } .ghost:hover { background: var(--bg-sunk); text-decoration: none; color: var(--ink); border-color: #d8d4cc; } .primary { background: var(--accent); background-image: var(--accent-grad); border-color: var(--accent-dark); color: #fff; box-shadow: 0 1px 2px rgba(20, 33, 48, .12), inset 0 1px 0 rgba(255, 255, 255, .12); } .primary:hover { background-image: linear-gradient(180deg, #26608f, #163f6b); color: #fff; text-decoration: none; box-shadow: 0 6px 18px rgba(27, 79, 143, .28); transform: translateY(-1px); } .primary:active { transform: translateY(0); } .primary[disabled], .primary[disabled]:hover { background: #b9c3d0; background-image: none; border-color: #b9c3d0; cursor: not-allowed; box-shadow: none; transform: none; } .big { padding: 14px 30px; font-size: 16px; width: 100%; } .cta { display: flex; gap: 12px; flex-wrap: wrap; } .cta .big { width: auto; } /* ------------------------------------------------------------------ notices */ .alert, .trial, .note { border-radius: 11px; padding: 13px 16px; margin-bottom: 18px; font-size: 15px; } .alert { background: var(--warn-bg); border: 1px solid #f3cdc4; color: var(--warn); } .trial { background: var(--accent-soft); border: 1px solid #d3e2f5; color: var(--ink); } .trial.done { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber-ink); } .note { background: var(--amber-soft); border: 1px solid var(--amber-line); margin-top: 20px; color: var(--amber-ink); } .note ul { margin: 7px 0 0 18px; padding: 0; } /* ------------------------------------------------------------------- lists */ table.list { width: 100%; border-collapse: collapse; font-size: 15px; } table.list th { text-align: left; font-size: 11.5px; color: var(--dim); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding: 8px 10px; } table.list td { padding: 12px 10px; border-bottom: 1px solid var(--line-soft); } table.list tr:last-child td { border-bottom: 0; } table.list a { font-weight: 600; } .status { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 20px; letter-spacing: .03em; text-transform: uppercase; background: var(--bg-sunk); color: var(--ink-soft); } .status.ready { background: var(--ok-bg); color: var(--ok); } .status.failed { background: var(--warn-bg); color: var(--warn); } .bar { height: 6px; background: #eeece7; border-radius: 4px; overflow: hidden; } .bar .fill { height: 100%; background: var(--accent); border-radius: 4px; } /* ------------------------------------------------------------------- login */ .login-head { text-align: center; margin-bottom: 22px; } .login-head h1 { font-size: 24px; margin-bottom: 4px; } .login-head p { margin: 0; color: var(--dim); font-size: 14.5px; } .code { letter-spacing: .35em; text-align: center; font-size: 21px; font-weight: 600; } /* ------------------------------------------------------------------ landing */ .hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 64px 0 56px; position: relative; } /* A soft wash behind the hero so the fold has some depth without a heavy banner. Sits under the content and never intercepts a click. */ .hero::before { content: ""; position: absolute; inset: -40px -50vw 0; background: radial-gradient(60% 70% at 78% 8%, rgba(27, 79, 143, .07), transparent 70%), radial-gradient(50% 60% at 5% 90%, rgba(180, 116, 31, .06), transparent 70%); z-index: -1; pointer-events: none; } /* `balance` rather than a hard
: the headline is long enough to orphan a word at some widths, and a fixed break just moves the orphan around. */ .hero h1 { font-size: 52px; line-height: 1.08; letter-spacing: -.022em; margin-bottom: 18px; text-wrap: balance; } .hero .lede { font-size: 18px; max-width: 480px; margin-bottom: 24px; } .hero .cta { margin-bottom: 16px; } .hero-copy { display: flex; flex-direction: column; align-items: flex-start; } .tag { display: inline-flex; align-items: center; gap: 8px; background: var(--amber-soft); border: 1px solid var(--amber-line); color: var(--amber-ink); font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 20px; margin-bottom: 20px; } .tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); } .shot { display: flex; justify-content: center; } .shot img { width: 100%; max-width: 380px; height: auto; display: block; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-lift); transform: rotate(-1.2deg); } /* the class grid — Class 10 Maths today, the rest marked and votable */ .classes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .klass { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 12px; color: var(--ink); } .klass:hover { text-decoration: none; color: var(--ink); } .klass .head { display: flex; align-items: center; justify-content: space-between; } .klass .num { font-family: var(--serif); font-size: 27px; color: var(--dim); line-height: 1; } /* The card is an , so its children are spans — they have to be told to be blocks or the subject and the detail run together on one line. */ .klass > span { display: block; } .klass .subject { display: block; font-size: 16px; font-weight: 600; color: var(--ink-soft); } .klass .detail { display: block; font-size: 14px; color: var(--dim); margin-top: 3px; } .klass .go { display: block; font-size: 14px; color: var(--dim); margin-top: auto; } .klass.live { border: 1.5px solid var(--accent); box-shadow: 0 6px 20px rgba(27, 79, 143, .10); } .klass.live .num { color: var(--accent); } .klass.live .subject { color: var(--ink); } .klass.live .go { color: var(--accent); font-weight: 600; } .klass:hover.live { box-shadow: 0 8px 26px rgba(27, 79, 143, .16); } .pill { font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 4px 9px; border-radius: 20px; background: var(--bg-sunk); color: var(--dim); } .pill.on { background: var(--ok-bg); color: var(--ok); } .points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .point { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; gap: 16px; } .point .ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; } .point p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; } .sample { text-align: center; } .preview { display: block; margin: 18px auto; max-width: 560px; } .preview img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-lift); } .price { background: var(--ink); border-radius: 18px; padding: 44px 48px; margin-top: 46px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; } .price h2 { color: #fff; margin: 0 0 12px; font-size: 30px; } .price p { color: #a9b4c2; font-size: 16px; line-height: 1.65; margin: 0; } .price ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 10px; } .price li { color: #dfe5ec; font-size: 15px; display: flex; align-items: center; gap: 10px; } .price .box { background: #fff; border-radius: 14px; padding: 30px; } .price .amount { font-family: var(--serif); font-size: 44px; letter-spacing: -.02em; line-height: 1; } .price .was { text-decoration: line-through; color: var(--dim); } /* ------------------------------------------------------------- dashboard */ .deck { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; align-items: start; } .rail { display: flex; flex-direction: column; gap: 16px; } .rail .card { padding: 20px; } .rail h3 { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 13px; } .rail .head { display: flex; align-items: center; justify-content: space-between; } .recent { display: flex; flex-direction: column; gap: 13px; } .recent a { font-size: 14px; font-weight: 600; line-height: 1.35; display: block; } .recent .meta { font-size: 12.5px; color: var(--dim); margin-top: 3px; } .vote { background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: 14px; padding: 19px; color: var(--amber-ink); } .vote strong { display: block; font-size: 14.5px; margin-bottom: 6px; } .vote p { font-size: 13.5px; line-height: 1.55; margin: 0 0 13px; opacity: .92; } .vote .ghost { width: 100%; padding: 9px; font-size: 13.5px; border-color: #e8d5b2; color: var(--amber-ink); } /* ----------------------------------------------------------- skip to content */ /* Visible only once tabbed to. A keyboard user should not have to walk the whole top bar on every page to reach the form. */ .skip { position: absolute; left: -9999px; top: 0; z-index: 50; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font-size: 14px; font-weight: 600; } .skip:focus { left: 0; color: #fff; text-decoration: none; } /* Focus has to be visible everywhere, not only on the inputs that styled it by hand. A teacher tabbing through the chapter chips could not see where they were. */ a:focus-visible, button:focus-visible, summary:focus-visible, .chip:focus-within, .choice:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } /* --------------------------------------------------------------- proof strip */ .proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 6px 0 10px; box-shadow: var(--shadow); } .proof > div { background: #fff; padding: 22px 20px; display: flex; flex-direction: column; gap: 4px; position: relative; } .proof > div::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; background: var(--accent); border-radius: 2px; opacity: .5; } .proof b { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--accent); line-height: 1.05; letter-spacing: -.02em; } .proof span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; } /* -------------------------------------------------------------------- steps */ .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .steps li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; } .step-n { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: var(--serif); font-size: 17px; font-weight: 600; margin-bottom: 14px; } .steps p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; } /* ----------------------------------------------------------------- specimen */ .specimen { background: var(--accent-soft); border: 1px solid #d3e2f5; border-radius: 16px; padding: 34px 38px; margin-top: 46px; } .specimen h2 { margin: 0 0 10px; } .specimen .lede { max-width: 640px; margin-bottom: 20px; } .specimen .ghost { background: #fff; border-color: #cddcf0; } /* ---------------------------------------------------------------------- faq */ /*
rather than a script: it opens on click and on Enter, the browser's own find can search inside it, and it costs no JavaScript. */ .faq { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .faq details + details { border-top: 1px solid var(--line-soft); } .faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 22px; font-size: 16px; font-weight: 600; color: var(--ink); position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { background: var(--bg-sunk); } /* The chevron is drawn rather than fetched, and turns over on open. */ .faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg); transition: transform .15s ease; } .faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .faq details[open] summary { color: var(--accent); } .faq p { margin: 0; padding: 0 52px 22px 22px; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); } /* ------------------------------------------------------------------- closer */ .closer { text-align: center; padding: 54px 26px 10px; display: flex; flex-direction: column; align-items: center; } .closer h2 { font-size: 28px; margin: 0 0 8px; } .closer p { color: var(--ink-soft); margin: 0 0 22px; } .closer .big { width: auto; } /* -------------------------------------------------------------- legal pages */ .wrap.legal { max-width: 760px; } .doc h1 { font-size: 34px; margin-bottom: 10px; } .doc > .lede { font-size: 17px; margin-bottom: 4px; } .doc section { margin-top: 34px; } .doc h2 { font-size: 20px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); } .doc p { font-size: 16px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 14px; } .doc p:last-child { margin-bottom: 0; } .contact-card { margin-top: 26px; } .contact-card dl { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 12px 18px; } .contact-card dt { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); padding-top: 2px; } .contact-card dd { margin: 0; font-size: 15.5px; line-height: 1.6; } .doc-nav { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; gap: 20px; flex-wrap: wrap; font-size: 14.5px; } /* -------------------------------------------------------------- error pages */ .errbox { text-align: center; } .errbox .errcode { font-family: var(--serif); font-size: 54px; line-height: 1; color: var(--line); margin: 0 0 6px; letter-spacing: -.02em; } .errbox h1 { font-size: 24px; margin-bottom: 8px; } .errbox .cta { justify-content: center; margin-top: 20px; } /* ------------------------------------------------------------------ footer */ /* Four columns rather than one line. A stranger deciding whether to hand over 1,499 rupees looks down here for who runs the site and what the terms are; a lone mailto answered neither question. */ .sitefoot { border-top: 1px solid var(--line); background: #fff; padding: 44px 26px 26px; margin-top: 56px; font-size: 14px; color: var(--ink-soft); } .foot-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; } .foot-brand p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; max-width: 280px; } .foot-brand .brand { font-size: 17px; } .foot-links { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; } .foot-head { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); margin-bottom: 2px; } .foot-links a { color: var(--ink-soft); } .foot-links a:hover { color: var(--accent); } .foot-note { color: var(--dim); font-size: 13px; line-height: 1.5; } .foot-base { max-width: 1080px; margin: 34px auto 0; padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--dim); font-size: 13px; } /* ------------------------------------------------------------------ mobile */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 34px; padding: 34px 0 40px; } .hero h1 { font-size: 38px; } .hero .lede { font-size: 16.5px; } .classes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .points { grid-template-columns: 1fr; } .price { grid-template-columns: 1fr; gap: 30px; padding: 32px; } .deck { grid-template-columns: 1fr; } .shot img { transform: none; max-width: 320px; } } @media (max-width: 620px) { .wrap { padding: 22px 16px 56px; } /* The bar wraps to two rows rather than hiding the nav. Hiding it left a teacher on a phone with no way to reach History or Subscription at all — and a phone between classes is exactly how this gets used. */ .topbar { padding: 8px 16px; gap: 10px 12px; height: auto; flex-wrap: wrap; align-items: center; } .topbar nav { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .topbar nav a { white-space: nowrap; padding: 7px 11px; font-size: 14px; } .topbar .who { gap: 10px; } .topbar .who .name { display: none; } .scope { padding: 6px 10px; } .hero h1 { font-size: 32px; } .classes { grid-template-columns: 1fr; } .row { flex-direction: column; gap: 12px; } .row .fixed { width: 100%; } .marks { flex-wrap: wrap; } .marks label { flex: 1 1 30%; } .cta { flex-direction: column; } .cta .big, .cta .ghost { width: 100%; } .price { padding: 26px; } .price .amount { font-size: 36px; } h1 { font-size: 25px; } h2 { font-size: 20px; } } /* ========================================================================== Auth cards — sign in, forgot, reset. Same vocabulary as the rest of the site, tightened for a single short form on an otherwise empty page. ========================================================================== */ .wrap.narrow { max-width: 440px; } .authcard { padding: 30px 30px 26px; } .authcard .login-head { margin-bottom: 20px; } .authcard .login-head .mark { border-radius: 10px; } .authcard form label { display: block; margin-bottom: 14px; } .authcard .primary.big { margin-top: 4px; } .authcard .hint { text-align: center; margin-top: 16px; } .authicon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; } .authicon.warn { background: var(--amber-soft); color: var(--amber-ink); } .label-row { display: flex; justify-content: space-between; align-items: baseline; } .label-link { font-size: 12.5px; font-weight: 600; } /* ========================================================================== Admin panel ========================================================================== */ .wrap.admin { max-width: 1200px; } .admin-link.on, .topbar nav a.admin-link.on { background: var(--ink); color: #fff; } .admin-link { color: var(--dim); } .admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; } .admin-head h1 { font-size: 27px; } .admin-head .lede { margin: 4px 0 0; font-size: 15px; max-width: 640px; } .admin-nav { display: flex; gap: 6px; flex-shrink: 0; } .admin-nav a { padding: 8px 13px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-soft); background: var(--bg-sunk); border: 1px solid var(--line); } .admin-nav a:hover { text-decoration: none; color: var(--accent); border-color: #d8d4cc; } /* --- promo code create form --- */ .promo-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 6px; align-items: end; } .promo-form label { display: block; } .promo-form .promo-note { grid-column: 1 / -1; } .promo-form button { grid-column: 1 / -1; justify-self: start; } .promo-form input, .promo-form select { width: 100%; } /* --- redemption chips under a code row --- */ .promo-reds td { padding-top: 0 !important; border-bottom: 1px solid var(--line) !important; } .reds { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px; } .red-chip { font-size: 12px; color: var(--ink-soft); background: var(--bg-sunk); border: 1px solid var(--line-soft); border-radius: 7px; padding: 4px 9px; } .red-chip a { font-weight: 600; } @media (max-width: 700px) { .promo-form { grid-template-columns: 1fr; } .admin-head { flex-direction: column; align-items: flex-start; gap: 12px; } } /* --- promo box on the subscribe page --- */ .promo-box { margin-top: 22px; } .promo-row { display: flex; gap: 10px; margin-top: 8px; max-width: 420px; } .promo-row input { flex: 1; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .promo-row button { flex-shrink: 0; } .promo-msg { margin: 10px 0 0; font-size: 14px; min-height: 1.1em; } .promo-msg.ok { color: var(--ok); font-weight: 600; } .promo-msg.bad { color: var(--warn); } /* --- stat cards --- */ .stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-grid.tight { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 5px; } .stat-k { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); } .stat-v { font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); } .stat-v.small { font-size: 18px; font-family: var(--sans); font-weight: 600; } .stat-sub { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; } /* --- charts --- */ .chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } .chart-card { padding: 20px; } .chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .chart-head h3 { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0; } .chart-peak { font-size: 12px; color: var(--dim); font-weight: 600; } .chart { display: block; width: 100%; height: 130px; overflow: visible; } .chart-foot { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--dim); margin-top: 6px; } /* --- horizontal bars (papers by class) --- */ .hbars { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .hbar { display: grid; grid-template-columns: 160px 1fr 44px; align-items: center; gap: 12px; } .hbar-l { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hbar-track { background: var(--bg-sunk); border-radius: 5px; height: 10px; overflow: hidden; } .hbar-fill { display: block; height: 100%; background: var(--accent-grad); border-radius: 5px; min-width: 3px; } .hbar-n { font-size: 13px; font-weight: 600; color: var(--ink); text-align: right; } /* --- panels grid --- */ .admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 4px; } .admin-cols .card { padding: 20px; } .admin-cols .card h3, .chart-card h3 { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0; } /* --- admin tables --- */ .table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 14px; } .admin-table.wide { min-width: 560px; } .admin-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--dim); letter-spacing: .05em; text-transform: uppercase; padding: 6px 10px; border-bottom: 1px solid var(--line); } .admin-table td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .admin-table tr:last-child td { border-bottom: 0; } .admin-table td a { font-weight: 600; } .admin-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .admin-table th.num { text-align: right; } .admin-table .td-time { color: var(--dim); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; } .td-sub { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; } .admin-table tr.is-off td { opacity: .55; } /* --- filter bar --- */ .admin-filter { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .admin-filter input[type=search] { flex: 1; min-width: 200px; padding: 10px 13px; font: inherit; font-size: 14px; border: 1px solid #d9d5cd; border-radius: var(--radius-sm); background: #fff; } .admin-filter select { width: auto; padding: 10px 13px; font-size: 14px; border: 1px solid #d9d5cd; border-radius: var(--radius-sm); background: #fff; } .admin-filter input:focus, .admin-filter select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(27, 79, 143, .12); } /* --- chips & flash --- */ .tagchip { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; margin-left: 6px; vertical-align: 1px; background: var(--accent-soft); color: var(--accent); } .tagchip.off { background: var(--warn-bg); color: var(--warn); } .pill.off { background: var(--warn-bg); color: var(--warn); } .flash { background: var(--ok-bg); border: 1px solid #c6e6d6; color: var(--ok); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 18px; font-size: 14.5px; font-weight: 500; } /* --- inline action forms in the account page --- */ .inline-form { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .inline-form select, .inline-form input[type=date] { width: auto; padding: 7px 10px; font-size: 13px; border: 1px solid #d9d5cd; border-radius: 8px; background: #fff; } button.sm, .ghost.sm { padding: 7px 13px; font-size: 13px; border-radius: 8px; } .ghost.danger { color: var(--warn); border-color: #e6c4bd; } .ghost.danger:hover { background: var(--warn-bg); border-color: #d9a99f; color: var(--warn); } .danger-card { border-color: #ecd9d4; } /* --- admin responsive --- */ @media (max-width: 1000px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-grid.tight { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chart-row, .admin-cols { grid-template-columns: 1fr; } .hbar { grid-template-columns: 120px 1fr 40px; } } @media (max-width: 560px) { .stat-grid, .stat-grid.tight { grid-template-columns: 1fr; } .admin-head { align-items: flex-start; } .hbar { grid-template-columns: 92px 1fr 34px; gap: 8px; } .hbar-l { font-size: 12.5px; } } /* --- print: drop the site chrome, keep the content --- */ @media print { .topbar, .sitefoot, .skip, .rail, .admin-filter, .inline-form, .danger-card, .cta { display: none !important; } body { background: #fff; } .card { box-shadow: none; border-color: #ccc; } .wrap { max-width: none; padding: 0; } }