/* ============================================================================ Study-pack selection (new checkout, impl spec §7). Scoped to .pk-screen and its partials. Tokens: §7.5. Poppins (inherited). Grid 3->2 (<1000px) ->1 (<640px). ============================================================================ */ /* The pack screens' private names are aliases of static/css/tokens.css (spec section 6). The 19 standard names come from the .qv-tokens container (templates/parent_wizard.html's #dashboard-mode and #wizard-mode), so --ink and --warn resolve to the standard here even though the parent shell's test_page.css:10/16 sets them to something else on :root. Values are what this block spelled out, except --green-tint (#e7f4ee, now the standard's #e7f5ed). */ .pk-screen{ --navy:var(--ink); --blue:var(--action); --blue-tint:var(--tint); --green:var(--go); --green-tint:var(--go-tint); --amber:var(--warn); --amber-tint:var(--warn-tint); --grey:var(--ink3); --grey-fill:#eef1f6; color:var(--navy); } /* head */ .pk-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; } .pk-title{ font-size:1.55rem; font-weight:700; color:var(--navy); margin:0 0 4px; letter-spacing:-.01em; } .pk-substudent{ font-size:.95rem; color:var(--grey); margin:0; } /* cart button */ .pk-cartbtn{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; background:var(--grey-fill); border:1px solid transparent; color:var(--navy); font-weight:600; font-size:.92rem; border-radius:10px; padding:9px 15px; cursor:pointer; transition:background .15s, border-color .15s, box-shadow .15s; } .pk-cartbtn:not(.empty){ background:var(--blue-tint); border-color:var(--blue); color:var(--blue); } .pk-cartbtn:hover{ box-shadow:0 3px 10px rgba(31,52,80,.10); } .pk-cartcount{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--blue); color:#fff; font-size:.75rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; } /* grid */ .pk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; } @media (max-width:1000px){ .pk-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .pk-grid{ grid-template-columns:1fr; } } /* card */ .pk-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--rule); border-radius:14px; padding:18px; box-shadow:0 1px 2px rgba(11,23,48,.06), 0 1px 3px rgba(11,23,48,.10); transition:transform .15s ease, box-shadow .15s ease; } .pk-card--featured{ border-color:var(--amber); box-shadow:0 8px 26px rgba(143,93,18,.12); } .pk-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:6px; } .pk-name{ font-size:1.06rem; font-weight:700; line-height:1.3; color:var(--navy); margin:0; } .pk-badge{ flex:0 0 auto; background:var(--amber-tint); color:var(--amber); font-size:.72rem; font-weight:700; letter-spacing:.02em; border-radius:999px; padding:.34em .7em; white-space:nowrap; } .pk-audience{ font-size:.845rem; color:var(--grey); margin:0 0 12px; line-height:1.45; } /* description ticks */ .pk-desc{ list-style:none; margin:0 0 14px; padding:0; } .pk-desc li{ position:relative; padding-left:24px; margin:0 0 8px; font-size:.875rem; line-height:1.5; color:#39465a; } .pk-desc li:last-child{ margin-bottom:0; } .pk-desc li::before{ content:""; position:absolute; left:2px; top:.28em; width:13px; height:8px; border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg); } /* expiry sits on the pack name's line, right-aligned under any badge (owner 2026-09-21: it must not lead the description). The practice-tournament card keeps its own line. */ .pk-expiry{ font-size:.85rem; font-weight:700; color:var(--navy); margin:0 0 10px; padding:0; border:0; } .pk-top-meta{ flex:0 1 auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; max-width:48%; text-align:right; } .pk-top-meta .pk-expiry{ margin:0; font-size:.78rem; font-weight:600; line-height:1.35; color:var(--grey); } /* owned chips */ .pk-owned{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; } /* choices */ .pk-choices{ margin-top:16px; } .pk-choices-label{ font-size:.8rem; font-weight:600; color:var(--navy); margin-bottom:8px; } .pk-chips{ display:flex; flex-wrap:wrap; gap:8px; } .pk-choice, .pk-set{ display:inline-flex; align-items:center; gap:7px; background:#fff; border:1.5px solid var(--rule2); color:var(--navy); font-size:.875rem; font-weight:500; border-radius:9px; padding:7px 12px; cursor:pointer; transition:border-color .14s, background .14s, color .14s; } .pk-choice:hover, .pk-set:hover{ border-color:var(--blue); } .pk-choice[aria-pressed="true"], .pk-set[aria-pressed="true"]{ border:2px solid var(--blue); background:var(--blue-tint); color:var(--blue); padding:6.5px 11px; } .pk-choice[disabled], .pk-set[disabled]{ background:var(--grey-fill); color:var(--grey); border-color:transparent; cursor:not-allowed; } .pk-tick{ width:13px; height:13px; border-radius:3px; border:1.5px solid var(--rule2); flex:0 0 auto; position:relative; } .pk-choice[aria-pressed="true"] .pk-tick{ border-color:var(--blue); background:var(--blue); } .pk-choice[aria-pressed="true"] .pk-tick::after{ content:""; position:absolute; left:3px; top:0px; width:5px; height:9px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(40deg); } .pk-swatch{ width:13px; height:13px; border-radius:3px; border:1px solid rgba(31,52,80,.25); flex:0 0 auto; } /* regional set rows */ /* one aligned grid per set row (owner 2026-09-17): the subject name owns a fixed column and the chips wrap inside their own, so wrapped chips line up under each other at every card width -- no ragged edge, no mobile special case. A light rule separates the rows. */ /* Parent Onboarding V2 fix (2026-09-18): name column widened 64px -> 80px. At 64px the longest subject ("Geography") overflowed its track by a few px and the trailing "y" was overpainted by the first set chip's white fill, reading as "Geograph". This clip is width-independent (fixed track), so it showed at every viewport -- most visible at 375px. 80px fits "Geography" (the longest of Geography/History/Science) while preserving the aligned-column intent; chips keep ample room and their 2-up wrap is unchanged. */ .pk-choices--sets .pk-setrow{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:6px 10px; align-items:start; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #eef1f6; } .pk-choices--sets .pk-setrow:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:0; } .pk-setrow-name{ font-size:.875rem; font-weight:600; color:var(--navy); padding-top:7px; } /* recommendation box (one style: the upgrade offer is always a saving) */ .pk-reco{ margin-top:14px; border:2px solid var(--amber); background:var(--amber-tint); color:var(--amber); border-radius:10px; padding:11px 13px; font-size:.85rem; line-height:1.45; } .pk-reco b{ display:block; margin-bottom:3px; } /* footer */ .pk-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:auto; padding-top:18px; } .pk-action{ flex:0 1 auto; background:var(--blue); border:1px solid var(--blue); color:#fff; font-weight:600; font-size:.92rem; border-radius:10px; padding:10px 18px; cursor:pointer; transition:background .15s, transform .12s; } .pk-action:hover:not([disabled]){ background:#274f8c; transform:translateY(-1px); } .pk-action[disabled]{ background:var(--grey-fill); border-color:transparent; color:var(--grey); cursor:not-allowed; } .pk-action.in-cart{ background:var(--green-tint); border-color:var(--green); color:var(--green); } .pk-price{ text-align:right; font-variant-numeric:tabular-nums; } .pk-price-amount{ display:block; font-size:1.38rem; font-weight:700; color:var(--navy); line-height:1.1; } .pk-price-unit{ display:block; font-size:.78rem; color:var(--grey); } .pk-price .pk-price-was{ display:block; font-size:.82rem; color:var(--grey); text-decoration:line-through; } /* empty states */ .pk-empty{ text-align:center; color:var(--grey); background:#fff; border:1px dashed var(--rule2); border-radius:14px; padding:26px 20px; margin-top:8px; } .pk-empty .btn{ margin-left:8px; } /* bottom bar */ .pk-bar{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:16px; background:#fff; border-top:1px solid var(--rule); box-shadow:0 -6px 20px rgba(31,52,80,.08); padding:12px 24px; } .pk-bar-sum{ font-size:.95rem; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums; } .pk-bar-continue{ min-width:150px; } /* Boards C-7/F-4.8: Back beside Continue on the configure bar. */ .pk-bar-actions{display:flex;gap:8px;align-items:center} /* hidden attribute must win over the display rules above */ .pk-cartcount[hidden], .pk-owned[hidden], .pk-reco[hidden], .pk-price[hidden], .pk-empty[hidden], .pk-bar[hidden]{ display:none !important; } /* ---- cart drawer (I-12) ---- */ .pk-drawer[hidden]{ display:none !important; } .pk-drawer{ position:fixed; inset:0; z-index:60; } .pk-drawer-scrim{ position:absolute; inset:0; background:rgba(20,32,48,.42); } .pk-drawer-panel{ position:absolute; top:0; right:0; bottom:0; width:410px; max-width:100%; background:#fff; box-shadow:-8px 0 30px rgba(20,32,48,.18); display:flex; flex-direction:column; } .pk-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--rule); } .pk-drawer-head h3{ margin:0; font-size:1.15rem; color:var(--navy); } .pk-drawer-close{ border:none; background:none; font-size:1.6rem; line-height:1; color:var(--grey); cursor:pointer; } .pk-drawer-body{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:12px 20px; } body.pk-drawer-open{ overflow:hidden; } /* M-7: the page behind the drawer does not scroll (pack_cart.js sets the class; it had no rule) */ .pk-drawer-empty{ color:var(--grey); text-align:center; margin-top:32px; } .pk-drawer-line{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--rule); } .pk-drawer-line b{ display:block; font-size:.9rem; color:var(--navy); font-weight:600; } .pk-drawer-scope{ display:block; font-size:.8rem; color:var(--grey); margin-top:2px; } .pk-drawer-right{ display:flex; align-items:center; gap:10px; white-space:nowrap; } .pk-drawer-price{ font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums; } .pk-drawer-x{ border:none; background:none; font-size:1.2rem; color:var(--grey); cursor:pointer; line-height:1; } .pk-drawer-foot{ border-top:1px solid var(--rule); padding:16px 20px; } .pk-drawer-row{ display:flex; justify-content:space-between; font-size:.9rem; color:#39465a; margin-bottom:7px; font-variant-numeric:tabular-nums; } .pk-drawer-total{ font-weight:700; color:var(--navy); font-size:1rem; border-top:1px dashed var(--rule2); padding-top:9px; margin-top:3px; } .pk-drawer-continue{ width:100%; margin-top:12px; } /* ---- owned items (I-5) ---- */ .pk-choice.owned, .pk-set.owned{ background:var(--grey-fill); color:var(--grey); border-color:transparent; cursor:not-allowed; } .pk-choice.owned .pk-tick{ background:var(--grey); border-color:var(--grey); } .pk-choice.owned .pk-tick::after{ content:""; position:absolute; left:3px; top:0; width:5px; height:9px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(40deg); } .pk-action.owned-lbl{ color:var(--grey); font-weight:600; } /* ---- review + pay (I-13) ---- */ .pk-review{ max-width:640px; margin:0 auto; } .pk-review-card,.pk-money{ background:#fff; border:1px solid var(--rule); border-radius:14px; padding:4px 18px; margin-bottom:16px; } .pk-money{ padding:16px 18px; } /* W6: "Review your cart" under the step's title -- what to DO, where the title says where you are. */ .pk-review-lead{ margin:0 0 16px; font-size:.95rem; line-height:1.5; color:var(--grey); } /* One group per kind inside a student's card. The pencil edits the STEP, not a line: the group can hold several practice tournaments and W5's ticks are the lines, so there is one way back to them and it is here. */ .pk-review-kind + .pk-review-kind{ border-top:1px solid var(--rule); } /* The same 18px column every other row in the card uses. With no horizontal padding the label hung 18px left of every other label and the button 18px right of every other control -- the only row in the card that did not line up. */ .pk-review-kindhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px 4px; } .pk-review-kindname{ font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); } /* Named for the glyph it used to hold; it is the group's "Edit" text button now. A 34px hit area, with the right padding pulled back so the LABEL lands on the 18px column rather than the padding box doing it. */ .pk-review-pencil{ -webkit-appearance:none; appearance:none; background:none; border:0; color:var(--blue); font:inherit; font-weight:600; font-size:.85rem; cursor:pointer; min-height:34px; padding:3px 7px; margin:0 -7px 0 0; border-radius:7px; line-height:1.2; transition:background .15s ease, color .15s ease; } .pk-review-pencil:hover{ background:var(--blue-tint); } .pk-review-pencil:focus{ outline:none; } .pk-review-pencil:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; } .pk-review-line{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--rule); } .pk-review-line:last-child{ border-bottom:none; } /* the name may wrap; the price never leaves the right-hand edge and never wraps mid-figure */ .pk-review-lineinfo{ min-width:0; } .pk-review-lineinfo b{ display:block; overflow-wrap:anywhere; } .pk-review-lineright{ display:flex; align-items:center; gap:8px; flex:0 0 auto; } .pk-review-lineright .pk-drawer-price{ white-space:nowrap; } .pk-fee-note{ font-size:.8rem; color:var(--grey); margin:8px 0 0; } /* the server's refusal of one line (BadOrderLineError), in its words, where the total would be */ .pk-review-refused{ margin:0; font-size:.92rem; font-weight:600; color:var(--warn); background:var(--warn-tint); border:1.5px solid var(--warn); border-radius:10px; padding:10px 14px; } .pk-terms{ margin-bottom:16px; font-size:.9rem; color:#39465a; } .pk-terms label{ display:flex; gap:9px; align-items:flex-start; } .pk-review-actions{ display:flex; justify-content:space-between; gap:12px; } .pk-pay{ min-width:220px; } /* ---- Pro coverage + upgrade reco (I-10/I-11) ---- */ .pk-choice.covered, .pk-set.covered{ background:var(--grey-fill); color:var(--grey); border-color:transparent; cursor:not-allowed; } .pk-reco-btn{ display:block; width:100%; margin-top:10px; background:var(--navy); border:1px solid var(--navy); color:#fff; font-weight:600; font-size:.88rem; border-radius:9px; padding:9px 14px; cursor:pointer; } .pk-reco-btn:hover{ background:#16263b; } .pk-reco[hidden]{ display:none !important; } /* ---- multi-student review (I-7/I-13) ---- */ .pk-review-studenthead{ font-weight:700; color:var(--navy); font-size:.95rem; padding:12px 0 4px; border-bottom:1px solid var(--rule); margin-bottom:4px; } /* Other-students ask. W6 moved it BELOW the order and tinted it: above the order it was read as part of the chrome and skipped, and by the time a parent wants a sibling in the order they have just read what it costs. It is the last thing before Pay, so it is the last thing they see. */ .pk-ask{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 18px; background:var(--blue-tint); border:1px solid var(--blue); border-radius:12px; padding:14px 16px; margin-bottom:16px; } .pk-ask[hidden]{ display:none !important; } .pk-ask-lead{ margin:0; font-size:.92rem; color:var(--navy); font-weight:600; flex:1 1 260px; } /* ---- all-set / what happens next (I-14) ---- */ /* W7: a green top edge on the card, so the outcome is legible before a word is read. The receipt row sits under the message: what was paid, split into price and card fee, and where it went. */ .pk-allset-card{ border-top:4px solid var(--go); border-radius:16px; } .pk-receipt{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 20px; max-width:560px; margin:0 auto 20px; padding:12px 16px; background:var(--go-tint); border-radius:12px; font-size:.92rem; line-height:1.5; color:var(--ink); } .pk-receipt[hidden]{ display:none !important; } .pk-receipt-part{ white-space:nowrap; } .pk-receipt-k{ color:var(--grey); } .pk-receipt-split{ color:var(--grey); font-weight:400; } /* a phone takes the two parts on a line each, rather than shrinking a figure to fit beside a label */ @media (max-width:520px){ .pk-receipt{ flex-direction:column; align-items:flex-start; text-align:left; } .pk-receipt-part{ white-space:normal; overflow-wrap:anywhere; } } .pk-allset-order{ max-width:560px; margin:0 auto 22px; text-align:left; } .pk-allset-student{ background:#fff; border:1px solid var(--rule); border-radius:12px; padding:12px 16px; margin-bottom:10px; } .pk-allset-student b{ color:var(--navy); } .pk-allset-student ul{ margin:6px 0 0; padding-left:18px; color:#39465a; font-size:.9rem; } .pk-allset-next{ max-width:560px; margin:0 auto; text-align:left; } .pk-next-row{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--rule); } .pk-next-row:last-child{ border-bottom:none; } .pk-next-when{ flex:0 0 150px; color:var(--blue); font-weight:600; font-size:.85rem; } .pk-next-body b{ display:block; color:var(--navy); font-size:.92rem; } .pk-next-body span{ color:#5b6676; font-size:.86rem; } /* Parent Onboarding V2 mobile fix (2026-09-18): scope this mobile reset to .pk-allset-next (specificity 0,2,0) so it beats the later unscoped `.pk-next-when{ flex:0 0 128px }` in UI POLISH v11 (line ~657, specificity 0,1,0, wins on source order otherwise). Without this the 128px flex-basis is read as a fixed HEIGHT under flex-direction:column, forcing a ~128px dead gap above every "what happens next" row on phones. Desktop (>560px) unchanged. */ @media (max-width:560px){ .pk-allset-next .pk-next-row{ flex-direction:column; gap:2px; } .pk-allset-next .pk-next-when{ flex:none; } } /* ---- choose-student picker (mock Step 1 / F-2) ---- */ .pk-choose{ max-width:760px; margin:0 auto; } .pk-choose-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:18px 0 24px; } @media (max-width:640px){ .pk-choose-list{ grid-template-columns:1fr; } } /* ============================================================================ UI POLISH v2 (2026-09-16) — pack wizard. • Pill stepper identical to the tests-page segmented filter (.td-filter): #eef1f6 track, sliding slate #2c3e50 indicator, coral focus. • Palette: slate-black #2c3e50 = forward CTA + stepper current; blue #2f5fa6 = in-context selection; coral #e86e6c/#df5a55 = accents/focus; green = in-cart. • Token scope fix (choose + review saw undefined vars → invisible card borders). • 3-up grid de-cramp (widen shell, 3→2→1 breakpoints, stretch, footer pinned). • Micro-interactions: card/chip/button hover + press, reduced-motion aware. ============================================================================ */ /* ---- token scope: choose + review must see the pack tokens (fixes invisible cards) ---- */ .pk-choose, .pk-review, .pk-screen{ --navy:var(--ink); --blue:var(--action); --blue-deep:var(--action-deep); --blue-tint:var(--tint); --green:var(--go); --green-tint:var(--go-tint); --amber:var(--warn); --amber-tint:var(--warn-tint); --grey:var(--ink3); --grey-fill:#eef1f6; --slate:var(--nav); --slate-deep:#24333f; --coral:var(--vidya); --coral-ring:#df5a55; } .pk-choose, .pk-review{ color:var(--navy); } /* ---- widen the shell so the 3-up grid breathes (mock parity) ---- */ .container{ max-width:1320px; } .wizard-content{ padding:40px 44px; } @media (max-width:1240px){ .wizard-content{ padding:34px 30px; } } @media (max-width:767.98px){ .wizard-content{ padding:22px 16px; } } /* ========================================================================== PILL STEPPER — look/feel/animation of the tournaments-list filter pill ========================================================================== */ .progress-bar{ background:#fff !important; border-bottom:1px solid var(--rule) !important; padding:20px 24px 18px !important; } /* Full-width strip in the IAC registration wizard's format (owner 2026-09-17): white card pill spanning the content, hexagon number badges, navy current step with a gold badge, green done steps that KEEP their number. The words stay QuizVidya's own. */ .pk-stepper{ position:relative; display:flex; gap:0; align-items:center; align-content:center; flex-wrap:nowrap; justify-content:stretch; width:100%; background:#fff; border:1px solid #E3E7EF; border-radius:999px; padding:5px; box-shadow:0 1px 2px rgba(11,23,48,.06), 0 1px 3px rgba(11,23,48,.08); } .pk-stepper .progress-line{ display:none !important; } .pk-stepper::before{ content:none !important; } /* old rail track */ .pk-stepper-pill{ position:absolute; top:0; left:0; z-index:0; width:0; height:0; margin:0; opacity:0; pointer-events:none; background:#14264A; border-radius:999px; box-shadow:0 1px 3px rgba(11,23,48,.24); transition:transform .38s cubic-bezier(.34,1.26,.44,1), width .3s cubic-bezier(.4,0,.2,1), height .3s ease, opacity .2s ease; } /* flex-basis auto (owner 2026-10-21): with four steps on the narrower Student card, equal quarters cut "QuizVidya study packs" and "Practice Tournaments" short; each step now starts from its own label */ .pk-stepper .step{ position:relative; z-index:1; flex:1 1 auto; min-width:0; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px; margin:0; padding:8px 10px; border-radius:999px; background:transparent; cursor:pointer; transition:color .26s cubic-bezier(.4,0,.2,1); } .pk-stepper .step:hover{ transform:none; } .pk-stepper .step-circle{ width:20px; height:22px; min-width:20px; border:0; margin:0; border-radius:0; clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background:#E8EDF6; color:#1D3461; font-size:12px; font-weight:700; display:grid; place-items:center; transition:background .26s ease, color .26s ease; } .pk-stepper .step-label{ margin:0; font-size:13.5px; font-weight:600; color:#4A5468; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .26s ease; } .pk-stepper .step:not(.active):not(.completed):hover, .pk-stepper .step:not(.active):not(.completed):hover .step-label{ color:#14264A; } /* current — text rides above the sliding navy pill; badge goes gold */ .pk-stepper .step.active, .pk-stepper .step.active .step-label{ color:#fff; } .pk-stepper .step.active .step-circle{ background:#E9A820; color:#0B1730; } /* done — green, the number stays visible */ .pk-stepper .step.completed .step-label{ color:#1F7A55; } .pk-stepper .step.completed .step-circle{ background:#E2F3EB; color:#1F7A55; } .pk-stepper .step:focus-visible{ outline:2px solid #E9A820; outline-offset:2px; } /* a phone shows the CURRENT step's name and only the numbers of the others (IAC pattern): the labels stay in the markup for screen readers. Measured: all three names fit from about 500px up, so the fold ends at 520 rather than 640 -- above it the pill spreads its three labels instead of floating a small cluster in a wide bar. */ @media (max-width:520px){ /* the pill takes its content's width and is centred in the parent's content box, so the space either side is equal AND belongs to the outer container -- a full-width pill around a 212px cluster reads as two uneven white areas, however exactly the cluster is centred inside it */ .pk-stepper{ width:max-content; max-width:100%; margin-inline:auto; padding:5px; gap:6px; justify-content:center; } .pk-stepper .step{ flex:0 0 auto; } .pk-stepper .step:not(.active){ gap:0; padding:8px 9px; } .pk-stepper .step:not(.active) .step-label{ font-size:0; } /* the current step is the only one that may shrink, and its name stays on one line */ .pk-stepper .step.active{ flex:0 1 auto; min-width:0; padding:8px 14px; } .pk-stepper .step.active .step-label{ white-space:nowrap; text-align:left; line-height:1.25; font-size:.82rem; } } /* Four steps (the Practice Tournaments step, owner 2026-10-21) do not fit their names below 900px: E2E at 768 cut every label ("Stude...", "Review and p..."). The phone treatment applies there too -- the current step named, the others by number -- and the steps sit closer so the current name fits at 390 in Safari as well. :has() reads whether step 5 is on the strip (parent_wizard.js updateProgress). */ @media (max-width:900px){ .pk-stepper:has(#step5:not([hidden])){ width:max-content; max-width:100%; margin-inline:auto; padding:5px; gap:4px; justify-content:center; } .pk-stepper:has(#step5:not([hidden])) .step{ flex:0 0 auto; } .pk-stepper:has(#step5:not([hidden])) .step:not(.active){ gap:0; padding:8px 7px; } .pk-stepper:has(#step5:not([hidden])) .step:not(.active) .step-label{ font-size:0; } .pk-stepper:has(#step5:not([hidden])) .step.active{ flex:0 1 auto; min-width:0; padding:8px 12px; } .pk-stepper:has(#step5:not([hidden])) .step.active .step-label{ white-space:nowrap; text-align:left; line-height:1.25; font-size:.82rem; } /* the bottom bar between phone and desktop: the buttons take their words' width, Continue on one line ("Continue: Practice Tournaments" broke over three at 768) */ #wizardBar .pk-bar-sum{ flex:1 1 0; min-width:0; } #wizardBar .pk-bar-actions{ flex:0 0 auto; } /* width:auto beats parent_wizard.css's sitewide .btn{width:100%} at 768 and below, which split the bar in two equal halves and pushed Continue off a tablet's edge (E2E, WebKit 768) */ #wizardBar .pk-bar-actions .btn{ min-width:0; width:auto; } #wizardBar .pk-bar-actions .pk-bar-continue{ white-space:nowrap; } } @media (prefers-reduced-motion:reduce){ .pk-stepper-pill{ transition:opacity .2s ease; } } /* ========================================================================== BUTTON PALETTE — beat wizard_polish's forced #007bff (loads earlier) ========================================================================== */ /* forward CTA (Continue / Pay) = slate-black, matches the tournament Buy-now CTA */ #wizard-mode .btn-primary{ background:var(--nav) !important; border:1px solid var(--nav) !important; color:#fff !important; box-shadow:0 2px 6px rgba(20,32,48,.18) !important; } #wizard-mode .btn-primary:hover:not(:disabled){ background:#24333f !important; border-color:#24333f !important; box-shadow:0 7px 18px rgba(20,32,48,.26) !important; transform:translateY(-1px); } #wizard-mode .btn-primary:active:not(:disabled){ transform:translateY(0); box-shadow:0 2px 6px rgba(20,32,48,.22) !important; } #wizard-mode .btn-primary:disabled,#wizard-mode .btn-primary[disabled]{ background:#aeb8ca !important; border-color:#aeb8ca !important; box-shadow:none !important; transform:none !important; } /* secondary / back = quiet neutral outline (was forced loud blue) */ #wizard-mode .btn-secondary{ background:#fff !important; border:1.5px solid var(--rule2) !important; color:var(--nav) !important; box-shadow:none !important; min-width:auto; } #wizard-mode .btn-secondary:hover{ background:#f4f7fb !important; border-color:var(--nav) !important; color:var(--nav) !important; box-shadow:0 3px 10px rgba(20,32,48,.10) !important; transform:translateY(-1px); } #wizard-mode .btn-secondary:active{ transform:translateY(0); box-shadow:none !important; } #wizard-mode .btn:focus-visible{ outline:2px solid #df5a55 !important; outline-offset:2px; } /* ========================================================================== CHOOSE-STUDENT (Step 1) ========================================================================== */ .pk-choose{ max-width:720px; } .pk-choose > .pk-title{ margin-bottom:22px; } .pk-choose-list{ margin:0 0 22px; gap:16px; } .pk-choose .buttons{ margin-top:4px; } /* ========================================================================== PACKS GRID (Step 2) — de-cramp + even card bottoms ========================================================================== */ .pk-grid{ gap:22px; align-items:stretch; } @media (max-width:1240px){ .pk-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:1000px){ .pk-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:700px){ .pk-grid{ grid-template-columns:1fr; } } .pk-card{ padding:18px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .pk-card:hover{ box-shadow:0 4px 10px rgba(11,23,48,.09), 0 10px 24px rgba(11,23,48,.14); transform:translateY(-2px); } .pk-card--featured:hover{ box-shadow:0 12px 30px rgba(143,93,18,.16); } .pk-card-top{ align-items:flex-start; gap:12px; margin-bottom:8px; } .pk-name{ font-size:1.08rem; line-height:1.32; } .pk-foot{ padding-top:16px; } /* selection accent = blue; in-cart = green (keep). press feedback on chips */ .pk-choice:active, .pk-set:active{ transform:scale(.97); } .pk-choice, .pk-set{ transition:border-color .14s, background .14s, color .14s, transform .1s ease; } /* regional-set rows stay inline, name top-aligned to its chip row */ .pk-choices--sets .pk-setrow{ align-items:flex-start; } .pk-setrow-name{ padding-top:7px; } /* add-to-cart micro-lift */ .pk-action:active:not([disabled]){ transform:translateY(0); } /* ========================================================================== CART BUTTON + BOTTOM BAR ========================================================================== */ .pk-cartbtn{ border-radius:999px; padding:8px 15px; } .pk-cartbtn:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(31,52,80,.12); } .pk-cartbtn:not(.empty){ background:var(--blue-tint); border-color:var(--blue); color:var(--blue); } .pk-bar{ padding:12px 24px; } .pk-bar-inner, .pk-bar > *{ } .pk-bar-sum b{ color:var(--navy); } /* ========================================================================== REVIEW & PAY (Step 3) — real card chrome (was invisible: undefined tokens) ========================================================================== */ .pk-review{ max-width:680px; margin:0 auto; } .pk-review > .pk-title{ margin-bottom:4px; } .pk-review-body{ background:#fff; border:1px solid var(--rule); border-radius:14px; padding:2px 18px; margin:14px 0 16px; box-shadow:0 2px 10px rgba(31,52,80,.05); } .pk-review-studenthead{ padding:14px 0 8px; } .pk-money{ box-shadow:0 2px 10px rgba(31,52,80,.05); } /* (v2b ask re-tint retired 2026-09-17 -- the ask is now the white initial-chip strip defined above, leading the review page) */ .pk-terms{ background:#fff; border:1px solid var(--rule); border-radius:12px; padding:14px 16px; margin-bottom:16px; box-shadow:0 2px 10px rgba(31,52,80,.05); } .pk-terms a{ color:var(--blue); font-weight:600; } /* Pay pressed with the policy box unticked (E2E 2026-10-05): the box is pointed at, and says why */ .pk-terms.is-needed{ border-color:var(--coral); outline:2px solid var(--coral); outline-offset:2px; } .pk-terms-msg{ margin:8px 0 0; color:var(--coral); font-weight:600; font-size:.92rem; } .pk-review-actions .pk-pay{ min-width:220px; } /* ============================================================================ UI POLISH v2b (2026-09-16) — override wizard_polish.css's #wizard-mode rules (they use ID + !important, so we must match specificity + !important). ============================================================================ */ /* ---- packs step needs a wide canvas; the form/welcome/review steps stay narrow ---- */ @media (min-width:1000px){ .container:has(#screen-packs.active){ max-width:1320px !important; } #wizard-mode:has(#screen-packs.active){ max-width:1240px !important; width:100% !important; } #wizard-mode:has(#screen-packs.active) .wizard-content{ padding:36px 40px 30px !important; } } /* ---- stepper: own the pill look over wizard_polish's dots+line ---- */ #wizard-mode .progress-bar{ background:#fff !important; padding:20px 24px 18px !important; } #wizard-mode .progress-steps::before{ content:none !important; } #wizard-mode .progress-line{ display:none !important; } #wizard-mode .pk-stepper{ align-items:center !important; align-content:center !important; flex-wrap:nowrap !important; } #wizard-mode .pk-stepper .step{ margin:0 !important; padding:8px 10px !important; } #wizard-mode .pk-stepper .step-circle{ width:20px !important; height:22px !important; min-width:20px; position:relative; border:0 !important; margin:0 !important; border-radius:0 !important; clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background:#E8EDF6 !important; color:#1D3461 !important; font-size:12px !important; font-weight:700 !important; box-shadow:none !important; } #wizard-mode .pk-stepper .step-label{ font-size:13.5px !important; margin:0 !important; color:#4A5468 !important; font-weight:600 !important; letter-spacing:normal; } #wizard-mode .pk-stepper .step:not(.active):not(.completed):hover, #wizard-mode .pk-stepper .step:not(.active):not(.completed):hover .step-label{ color:#14264A !important; } /* current — white text over the sliding navy pill; gold badge */ #wizard-mode .pk-stepper .step.active, #wizard-mode .pk-stepper .step.active .step-label{ color:#fff !important; } #wizard-mode .pk-stepper .step.active .step-circle{ background:#E9A820 !important; color:#0B1730 !important; transform:none !important; box-shadow:none !important; } /* done — green, and the NUMBER stays (no check glyph). Weight 600 as the IAC registration app's .step.done (owner 2026-10-20: wizard_polish.css's 500 left done steps faint); this rule outranks it. */ #wizard-mode .pk-stepper .step.completed .step-label{ color:#1F7A55 !important; font-weight:600 !important; } #wizard-mode .pk-stepper .step.completed .step-circle{ background:#E2F3EB !important; color:#1F7A55 !important; font-size:12px !important; } #wizard-mode .pk-stepper .step.completed .step-circle::after{ content:none !important; } /* the same fold as the unscoped block above, at the same 520px, restated with !important because wizard_polish.css sets the step type with !important too. Keep the two in step. */ @media (max-width:520px){ #wizard-mode .pk-stepper{ width:max-content !important; max-width:100% !important; margin-inline:auto !important; gap:6px !important; justify-content:center !important; } #wizard-mode .pk-stepper .step{ flex:0 0 auto !important; } #wizard-mode .pk-stepper .step:not(.active){ gap:0 !important; padding:8px 9px !important; } #wizard-mode .pk-stepper .step:not(.active) .step-label{ font-size:0 !important; } #wizard-mode .pk-stepper .step.active{ flex:0 1 auto !important; min-width:0; padding:8px 14px !important; } #wizard-mode .pk-stepper .step.active .step-label{ font-size:.82rem !important; white-space:nowrap; text-align:left; line-height:1.25; } } /* the four-step fold (see the unscoped block above, max-width:900px), restated with !important for the same reason. Keep the two in step. */ @media (max-width:900px){ #wizard-mode .pk-stepper:has(#step5:not([hidden])){ width:max-content !important; max-width:100% !important; margin-inline:auto !important; gap:4px !important; justify-content:center !important; } #wizard-mode .pk-stepper:has(#step5:not([hidden])) .step{ flex:0 0 auto !important; } #wizard-mode .pk-stepper:has(#step5:not([hidden])) .step:not(.active){ gap:0 !important; padding:8px 7px !important; } #wizard-mode .pk-stepper:has(#step5:not([hidden])) .step:not(.active) .step-label{ font-size:0 !important; } #wizard-mode .pk-stepper:has(#step5:not([hidden])) .step.active{ flex:0 1 auto !important; min-width:0; padding:8px 12px !important; } #wizard-mode .pk-stepper:has(#step5:not([hidden])) .step.active .step-label{ font-size:.82rem !important; white-space:nowrap; text-align:left; line-height:1.25; } } /* ---- chip compaction so subjects/sets sit inline in the 3-up grid ---- */ .pk-choice, .pk-set{ padding:6px 11px; } .pk-choice[aria-pressed="true"], .pk-set[aria-pressed="true"]{ padding:5px 10px; } .pk-setrow-name{ flex:0 0 80px; } /* inert here (grid item); kept in sync with the 80px track above */ /* ---- UI POLISH v2c retired 2026-09-17: on phones the stepper now follows the IAC pattern (current step named, others number-only) — see the 640px block. ---- */ /* ---- UI POLISH v2d: cart drawer must overlay the fixed navbar (z-index:1000) ---- */ .pk-drawer{ z-index:2000 !important; } /* ---- UI POLISH v2e: dual-flow — keep the OLD 6-step add-student stepper visually unchanged ---- */ #wizard-mode #progressStepsAdd::before{ content:'' !important; } /* restore rail (v2b killed it globally) */ #wizard-mode #progressStepsAdd .progress-line{ display:block !important; } /* restore progress fill */ #wizard-mode .progress-bar{ background:#fbfcfe !important; padding:24px 40px 18px !important; } /* restore shared bar */ /* ...and keep it responsive. wizard_polish.css narrows the stepper at 820px and 600px, but this file loads after it, so the line above was silently cancelling both: at 375px the stepper kept 40px of side padding against the content's 16px. These track .wizard-content's own gutters, so the stepper, the heading and the cards all start on one line down the page. */ @media (max-width:820px){ #wizard-mode .progress-bar{ padding:20px 28px 16px !important; } } @media (max-width:600px){ #wizard-mode .progress-bar{ padding:16px 16px 16px !important; } } /* ---- UI POLISH v2f: keep the OLD add-student wizard's buttons blue (unchanged); slate CTAs are buy-only ---- */ #wizard-mode:not(.flow-buy) .btn-primary{ background:var(--wz-blue) !important; border:1px solid var(--wz-blue) !important; color:#fff !important; box-shadow:0 1px 2px rgba(0,123,255,.18) !important; } #wizard-mode:not(.flow-buy) .btn-primary:hover:not(:disabled){ background:var(--wz-blue-deep) !important; border-color:var(--wz-blue-deep) !important; } #wizard-mode:not(.flow-buy) .btn-primary:disabled,#wizard-mode:not(.flow-buy) .btn-primary[disabled]{ background:#aeb8ca !important; border-color:#aeb8ca !important; } #wizard-mode:not(.flow-buy) .btn-secondary{ background:var(--wz-blue) !important; border:1px solid var(--wz-blue) !important; color:#fff !important; box-shadow:0 1px 2px rgba(0,123,255,.18) !important; } #wizard-mode:not(.flow-buy) .btn-secondary:hover{ background:var(--wz-blue-deep) !important; border-color:var(--wz-blue-deep) !important; color:#fff !important; } /* ============================================================================ UI POLISH v3 (2026-09-16) — Step 1 "Who are you buying for?" (choose student). Avatar anchor + status pills + chevron affordance; spacious, glanceable, palette-true. ============================================================================ */ .pk-choose{ max-width:760px; margin:0 auto; } .pk-choose > .pk-title{ text-align:center; margin:0 0 7px; font-size:1.6rem; letter-spacing:-.015em; } .pk-choose-sub{ text-align:center; color:var(--grey); font-size:.95rem; line-height:1.5; margin:0 auto 28px; max-width:44ch; } .pk-choose-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:0 0 22px; } @media (max-width:640px){ .pk-choose-list{ grid-template-columns:1fr; } } /* W15: the avatar student cards (.pk-scard*, .pk-av*) and their status pills (.pk-spill*) are gone with the markup, replaced by W2's radio cards (.pk-radio-card, further down). They were three separate blocks of rules for elements nothing renders any more. */ .pk-choose .buttons{ justify-content:center; margin-top:2px; } @media (max-width:480px){ .pk-choose > .pk-title{ font-size:1.4rem; } } /* ============================================================================ UI POLISH v4 (2026-09-16) — Step 2 packs + cart drawer. Card state edges, owned/covered chip labels, "already has" summary, animated grouped drawer. Palette-true, consistent with Step 1. ============================================================================ */ /* ---- card state edges (glanceable: in cart = green, being picked = blue) ---- */ .pk-card.pk-card--incart{ border-color:var(--green); box-shadow:0 10px 24px rgba(30,138,90,.12); } .pk-card:has(.pk-choice[aria-pressed="true"], .pk-set[aria-pressed="true"]):not(.pk-card--incart){ border-color:var(--blue); } .pk-card.pk-card--incart:hover{ box-shadow:0 14px 30px rgba(30,138,90,.16); } /* ---- owned / covered chip labels (mock M-3) ---- */ .pk-choice[data-owned]::after, .pk-set[data-owned]::after{ content:"Has it"; margin-left:3px; font-size:.66rem; font-weight:700; color:var(--green); letter-spacing:.01em; } .pk-choice[data-covered]::after, .pk-set[data-covered]::after{ content:"In Pro"; margin-left:3px; font-size:.66rem; font-weight:700; color:var(--blue); letter-spacing:.01em; } /* ---- "{Student} already has" summary (mock M-3 .has) ---- */ .pk-owned-summary{ background:#f4f7fb; border:1px solid var(--rule); border-radius:12px; padding:12px 16px; margin:0 0 18px; display:flex; flex-direction:column; gap:3px; } .pk-owned-summary-head{ color:var(--navy); font-size:.9rem; font-weight:700; margin-bottom:2px; } .pk-owned-summary-item{ color:#5b6676; font-size:.85rem; line-height:1.45; } .pk-owned-summary[hidden]{ display:none !important; } /* ---- upgrade reco / credit box refinement ---- */ .pk-reco{ line-height:1.5; } .pk-reco-btn{ transition:background .16s ease, transform .1s ease; } .pk-reco-btn:hover{ background:#16263b; transform:translateY(-1px); } .pk-reco-btn:active{ transform:translateY(0); } /* ============================================================================ CART DRAWER — slide-in, student grouping, refined lines + empty state ============================================================================ */ .pk-drawer-scrim{ opacity:0; transition:opacity .3s ease; } .pk-drawer.pk-open .pk-drawer-scrim{ opacity:1; } .pk-drawer-panel{ transform:translateX(100%); transition:transform .34s cubic-bezier(.33,1,.68,1); will-change:transform; } .pk-drawer.pk-open .pk-drawer-panel{ transform:translateX(0); } @media (prefers-reduced-motion:reduce){ .pk-drawer-panel{ transition:none; } .pk-drawer-scrim{ transition:none; } } .pk-drawer-head h3{ font-weight:700; } .pk-drawer-close{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:1.5rem; transition:background .15s ease, color .15s ease; } .pk-drawer-close:hover{ background:#eef1f6; color:var(--navy); } /* student group header */ .pk-drawer-who{ display:flex; align-items:baseline; gap:9px; padding:15px 0 7px; margin-bottom:2px; border-bottom:2px solid var(--blue-tint); } .pk-drawer-who:first-child{ padding-top:2px; } .pk-drawer-who-name{ font-weight:700; color:var(--navy); font-size:.95rem; } .pk-drawer-who-grade{ font-size:.8rem; color:var(--grey); font-weight:500; } .pk-drawer-line{ align-items:flex-start; gap:14px; padding:13px 0; } .pk-drawer-info{ min-width:0; } .pk-drawer-line b{ font-size:.92rem; line-height:1.35; } .pk-drawer-scope{ margin-top:3px; } .pk-drawer-x{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:1.15rem; transition:background .15s ease, color .15s ease; } .pk-drawer-x:hover{ background:#fdecec; color:#d4605c; } .pk-drawer-price{ font-size:.92rem; } /* empty state */ .pk-drawer-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; color:var(--grey); margin-top:52px; } .pk-drawer-empty b{ color:var(--navy); font-size:1.02rem; } .pk-drawer-empty-ic{ width:52px; height:52px; border-radius:16px; background:#eef2f8; margin-bottom:10px; position:relative; } .pk-drawer-empty-ic::after{ content:""; position:absolute; left:15px; top:16px; width:22px; height:16px; border:2px solid #b8c2d2; border-radius:0 0 5px 5px; border-top:0; box-shadow:0 -7px 0 -5px #b8c2d2; } /* continue button in the drawer foot inherits the slate CTA (flow-buy) */ .pk-drawer-continue{ margin-top:14px; } /* ---- UI POLISH v5: Free Trial Pack card (I-8, behind free_trial_enabled) ---- */ .pk-badge--free{ background:var(--green-tint); color:var(--green); } .pk-price-free{ color:var(--green); } .pk-trial-note{ margin:10px 0 0; font-size:.82rem; color:var(--amber); background:var(--amber-tint); border:1px solid #f0e0bd; border-radius:9px; padding:8px 11px; line-height:1.4; } .pk-trial-note[hidden]{ display:none !important; } /* .pk-quote-err (a failed price quote, said on the card): the trial note's own amber look; the class is pack_cart.js's hook, no rules of its own */ .pk-card--trial .pk-choices{ margin-top:14px; } /* ============================================================================ UI POLISH v6 (2026-09-16) — Step 3 Review & pay. Per-student group cards with header + subtotal + Edit, consistent chrome/palette with Steps 1-2. ============================================================================ */ .pk-review{ max-width:680px; margin:0 auto; } .pk-review > .pk-title{ text-align:center; margin:0 0 6px; font-size:1.6rem; letter-spacing:-.015em; } .pk-review-sub{ text-align:center; color:var(--grey); font-size:.95rem; margin:0 auto 24px; } /* per-student group card */ .pk-review-card{ background:#fff; border:1px solid var(--rule); border-radius:14px; overflow:hidden; margin:0 0 16px; padding:0; box-shadow:0 2px 10px rgba(31,52,80,.05); } .pk-review-grouphead{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; background:#fafbfd; border-bottom:1px solid var(--rule); } .pk-review-groupwho{ display:flex; align-items:baseline; gap:9px; min-width:0; } .pk-review-groupwho b{ color:var(--navy); font-size:1rem; font-weight:700; } .pk-review-groupwho span{ color:var(--grey); font-size:.82rem; font-weight:500; } .pk-review-line{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:13px 18px; border-top:1px solid var(--rule); } .pk-review-grouphead + .pk-review-line{ border-top:0; } .pk-review-lineinfo{ min-width:0; } .pk-review-lineinfo b{ font-size:.92rem; color:var(--navy); font-weight:600; line-height:1.35; } .pk-review-lineright{ display:flex; align-items:center; gap:10px; white-space:nowrap; } .pk-review-lineright .pk-drawer-price{ font-size:.92rem; } /* money + terms cards (refine) */ .pk-money{ box-shadow:0 2px 10px rgba(31,52,80,.05); } .pk-money .pk-drawer-total{ font-size:1.05rem; } /* The consent line is a SENTENCE, so its label is a paragraph -- not a flex row. As a flex container the label's three bare runs ("I agree to the" / the Purchase Policy link / ". All sales are final...") became three flex items with a gap between them, which wrapped at 1440 where the sentence fits one line, and stacked into min-content columns on a phone. The 2026-09-18 fix dropped flex below 560px only, on the assumption that desktop was one line; measured, it was two. One paragraph at every width, with the box in a 27px gutter so wrapped lines align under each other rather than under the checkbox. */ .pk-terms{ display:block; } .pk-terms label{ display:block; position:relative; padding-left:27px; margin:0; line-height:1.55; } .pk-terms label > input[type="checkbox"]{ position:absolute; left:0; top:.2em; float:none; margin:0; width:17px; height:17px; accent-color:var(--blue); } .pk-review-actions{ margin-top:0; } .pk-review-actions .pk-pay{ min-width:230px; } @media (max-width:520px){ .pk-review > .pk-title{ font-size:1.4rem; } .pk-review-actions{ flex-direction:column-reverse; gap:10px; } .pk-review-actions .btn{ width:100%; } } /* ---- UI POLISH v7: reserve space so the fixed bottom bar never covers the page footer ---- */ body.pk-has-bar { padding-bottom: 84px; } /* ---- UI POLISH v8: bar docks above the footer (JS-driven bottom); drop the reserved gap ---- */ body.pk-has-bar { padding-bottom: 0; } /* ---- UI POLISH v9: breathing room around the docked bar (card <-> bar <-> footer) ---- */ body.pk-has-bar #wizard-mode { margin-bottom: 112px; } /* ---- UI POLISH v10: enough room below the pack card so the docked bar floats clear (beats wizard_polish's 44px !important) ---- */ /* the spacer that keeps the last card clear of the fixed bar grows with the home indicator */ body.pk-has-bar #wizard-mode.wizard-container { margin-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; } /* ============================================================================ UI POLISH v11 (2026-09-16) — "You're all set" (step 6). Green success medallion, card chrome on the order + what-happens-next, consistent with Steps 1-3. ============================================================================ */ #wizard-mode .pk-allset .success-screen{ max-width:620px; margin:0 auto; padding:8px 0!important; } #wizard-mode .pk-allset .success-icon{ width:64px!important; height:64px!important; border-radius:50%!important; background:var(--green-tint)!important; color:var(--green)!important; display:flex!important; align-items:center; justify-content:center; box-shadow:none!important; margin:0 auto 16px!important; font-size:1.6rem!important; } #wizard-mode .pk-allset .success-icon i{ color:var(--green)!important; } #wizard-mode .pk-allset .success-title{ color:var(--navy)!important; font-size:1.6rem!important; letter-spacing:-.015em; } #wizard-mode .pk-allset .success-message{ color:var(--grey)!important; font-size:.95rem!important; margin:0 auto 26px!important; } /* order summary — bordered cards like the review groups */ .pk-allset-order{ max-width:620px; } .pk-allset-student{ box-shadow:0 2px 10px rgba(31,52,80,.05); padding:14px 16px; border-radius:14px; } .pk-allset-student b{ font-size:.98rem; } .pk-allset-student ul{ margin:7px 0 0; padding-left:18px; } /* what-happens-next — one bordered card, left-aligned heading, blue "when" labels */ .pk-allset-next{ max-width:620px; background:#fff; border:1px solid var(--rule); border-radius:14px; padding:4px 18px 8px; box-shadow:0 2px 10px rgba(31,52,80,.05); } #wizard-mode .pk-allset .pk-allset-next .summary-title{ text-align:left!important; font-size:1rem!important; font-weight:700!important; color:var(--navy)!important; margin:15px 0 2px!important; } .pk-next-row{ padding:13px 0; align-items:flex-start; } .pk-next-when{ flex:0 0 128px; color:var(--blue); font-weight:600; font-size:.84rem; } .pk-next-body b{ font-size:.93rem; } .pk-next-body span{ line-height:1.5; } /* buttons centered + consistent */ #wizard-mode .pk-allset .buttons{ max-width:620px; margin:24px auto 0!important; justify-content:center; gap:12px; } @media (max-width:560px){ #wizard-mode .pk-allset .buttons{ flex-direction:column-reverse; } #wizard-mode .pk-allset .buttons .btn{ width:100%; } } /* ---- token scope for the all-set screen (green medallion + real borders) ---- */ .pk-allset{ --navy:var(--ink); --blue:var(--action); --blue-tint:var(--tint); --green:var(--go); --green-tint:var(--go-tint); --amber:var(--warn); --amber-tint:var(--warn-tint); --grey:var(--ink3); --coral:var(--vidya); } /* Parent Onboarding V2 — S-1 catalog */ .pk-home-welcome{display:flex;justify-content:space-between;align-items:center;gap:24px;background:#fff;border:1px solid var(--rule2);border-radius:14px;padding:18px 22px;margin-bottom:16px;flex-wrap:wrap} .pk-home-title{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0} .pk-home-sub{font-size:15px;color:var(--ink2);margin:4px 0 0;max-width:720px} .pk-price-from .pk-price-amount::before{content:"From ";font-size:13px;font-weight:500;color:var(--ink3)} .pk-card--practice{border-left:4px solid var(--vidya);flex-direction:row;align-items:center;gap:24px} .pk-card--practice .pk-practice-body{flex:1;display:flex;flex-direction:column;gap:8px} @media(max-width:640px){.pk-card--practice{flex-direction:column;align-items:stretch}} /* Parent Onboarding V2 — B-1 pick line (Task 4, previously unstyled) */ .pk-pick-line{font-size:14px;color:var(--ink3);margin:0 0 12px;text-align:center} /* Parent Onboarding V2 — B-2 focus bar (pre-filtered step 2 + "Show all packs") */ .pk-focusbar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--tint);border:1.5px solid var(--action);border-radius:12px;padding:10px 16px;margin-bottom:12px} .pk-focusbar .pk-showall{background:#fff;color:var(--action);border:1.5px solid var(--rule2)} /* ============================================================================ PARENT ONBOARDING V2 -- UI POLISH PASS (2026-09-18) Catalog (S-1) + shared .pk-card/.pk-action/.video-link/.pk-showall micro- interactions. Additive + token-based (per owner: pack_select.css is shared with the regular add-student wizard, so this must read as one system there too, not a second look bolted on for onboarding only). ============================================================================ */ /* ---- 6. welcome bar: more air, real elevation (matches card system, not flat-pasted) ---- */ .pk-home-welcome{ padding:22px 26px; margin-bottom:22px; box-shadow:0 1px 2px rgba(11,23,48,.05), 0 1px 3px rgba(11,23,48,.08); } .pk-home-title{ line-height:1.25; } .pk-home-sub{ margin-top:6px; line-height:1.5; } @media (max-width:640px){ .pk-home-welcome{ flex-direction:column; align-items:flex-start; padding:18px; gap:14px; } .pk-home-welcome .video-link{ align-self:stretch; justify-content:center; } } /* ---- 4. practice-tests section: reads as a distinct section, not a continuation of the packs grid (was a bare 10px inline margin-top with no rule) ---- */ .pk-head--section{ margin-top:40px; padding-top:28px; border-top:1px solid var(--rule2); } /* ---- 2. buttons: hover lift + press + real focus-visible ring, on top of what already exists (.pk-action already darkens+lifts on hover; this fills the gaps -- min tap target, focus ring, and killing Bootstrap's default blue .btn:focus glow, which is what actually made "Get this pack" / "Start free trial" look broken: a stray blue halo fighting the slate/coral palette on every click since these buttons carry the bare .btn class with no .btn-primary/.btn-secondary variant to source Bootstrap's focus-ring color from) ---- */ .pk-action{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; } .pk-action:focus{ box-shadow:none; } .pk-action:focus-visible{ outline:2px solid var(--action); outline-offset:2px; box-shadow:none; } .pk-showall{ min-height:36px; transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } .pk-showall:hover{ background:var(--tint); border-color:var(--action); transform:translateY(-1px); } .pk-showall:active{ transform:translateY(0); } .pk-showall:focus{ box-shadow:none; } .pk-showall:focus-visible{ outline:2px solid var(--action); outline-offset:2px; } #wizard-mode .video-link{ min-height:44px !important; display:inline-flex !important; align-items:center !important; } .video-link:focus{ box-shadow:none; } #wizard-mode .video-link:focus-visible{ outline:2px solid var(--action) !important; box-shadow:none !important; } /* ---- 7. responsive: practice card's price/CTA stay full-width and legible once it stacks ---- */ @media (max-width:640px){ .pk-card--practice .pk-action{ width:100%; } .pk-card--practice .pk-price{ text-align:left; } } /* ---- respect prefers-reduced-motion: keep the state change (shadow/color), drop the motion ---- */ @media (prefers-reduced-motion:reduce){ .pk-card, .pk-card:hover, .pk-action, .pk-action:hover, .pk-action:active, .pk-showall, .pk-showall:hover, .pk-showall:active, #wizard-mode .video-link, #wizard-mode .video-link:hover, #wizard-mode .video-link:active, #wizard-mode .btn-primary:hover, #wizard-mode .btn-primary:active, #wizard-mode .btn-secondary:hover, #wizard-mode .btn-secondary:active{ transform:none !important; } } /* ============================================================================ PARENT ONBOARDING V2 -- CATALOG (S-1) WIDTH + DENSITY REFINEMENT (2026-09-18b) The first-visit catalog was rendering inside the 860px wizard shell (wizard_polish.css:22, !important), so the 3-up grid collapsed to ~241px cards: long pack names wrapped to 4-5 lines, feature lists were cramped, and the row-2 third column sat empty. Widen ONLY the catalog (scoped via :has(#screen-home.active), the catalog's old wizard-screen id) to the reference's ~1200px product-catalog width. The single-column wizard steps (add-student / review / success) keep the 860px shell, so pack_select.css still reads as one system in the regular add-student wizard. pack_select.css loads AFTER wizard_polish.css, and this selector is more specific than #wizard-mode.wizard-container, so the scoped !important wins cleanly (no global !important spam). ============================================================================ */ /* D-3 (2026-09-20): the catalog is the Study packs TAB of the dashboard (#catalog-packs inside .container), not a wizard screen, so the wizard shell needs no override any more; the rules below are scoped to #catalog-packs, the tab panel's root, instead of the retired #screen-home. */ /* ---- welcome bar: demo action stays anchored right on desktop; drop the stray 30px bottom margin the shared .video-link carries (dead space inside the bar); bring the button into the pack palette (was the brighter wizard blue with a gradient hover, which fought the restrained navy / coral system). ---- */ .pk-home-welcome{ align-items:center; } .pk-home-welcome > div{ flex:1 1 auto; min-width:0; } .pk-home-welcome .pk-home-sub{ max-width:760px; } .pk-home-welcome .video-link{ margin:0 !important; flex:0 0 auto; white-space:nowrap; color:var(--action) !important; border:1.5px solid var(--rule2) !important; font-size:14.5px; background:#fff; } .pk-home-welcome .video-link small{ color:var(--ink3); font-weight:600; margin-left:3px; } .pk-home-welcome .video-link:hover{ background:var(--tint) !important; color:var(--action) !important; border-color:var(--action) !important; box-shadow:none !important; transform:translateY(-1px); } @media (max-width:640px){ .pk-home-welcome .video-link{ white-space:normal; } } /* ---- packs section header: strong title left, supporting copy secondary and set to its right on desktop, stacked beneath it on mobile (reference S-1). ---- */ .pk-head{ flex-wrap:wrap; align-items:baseline; } .pk-head .pk-title{ flex:0 0 auto; } .pk-head .pk-substudent{ flex:1 1 340px; max-width:640px; } @media (max-width:640px){ .pk-head{ gap:4px 16px; } .pk-head .pk-substudent{ flex-basis:100%; } } /* ---- free-trial card: one restrained, semantic green accent (free / go), mirroring the featured card's single amber accent -- deliberately NOT a coloured border on every card. Price reads "Free" in green, no "From". ---- */ .pk-card--trial{ border-color:#bcdccb; } .pk-card--trial:hover{ box-shadow:0 4px 10px rgba(30,138,90,.10), 0 10px 24px rgba(30,138,90,.14); } .pk-card--trial .pk-price-free .pk-price-amount{ color:var(--green); } .pk-card--trial .pk-price-free .pk-price-amount::before{ content:none; } /* ---- card interiors at the wider width: give names a touch more size/room now that they no longer wrap to 4-5 lines, and keep the audience/expiry meta comfortable. Typography carries the hierarchy; no fixed heights. ---- */ .pk-card .pk-name{ font-size:1.12rem; line-height:1.28; } .pk-card .pk-audience{ margin-bottom:10px; } /* ---- practice-tests card: horizontal action area (features left, price + CTA grouped right) reads as one purchase area, like the reference. ---- */ .pk-card--practice{ gap:28px; padding:20px 22px; } .pk-card--practice .pk-price{ text-align:right; white-space:nowrap; } .pk-card--practice .pk-action{ flex:0 0 auto; } @media (max-width:640px){ .pk-card--practice{ gap:14px; } .pk-card--practice .pk-price{ text-align:left; } } /* ---- CATALOG grid breakpoints (scoped to S-1): hold the reference's 3-up density down to 1000px (the shared packs-step grid drops to 2-up at 1240, which left the catalog only 2-up on common laptop widths), 2-up on tablet, 1-up on phones. ---- */ #catalog-packs .pk-grid{ grid-template-columns:repeat(3,1fr); } @media (max-width:1000px){ #catalog-packs .pk-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:700px){ #catalog-packs .pk-grid{ grid-template-columns:1fr; } } /* ---- practice card: the horizontal (features left / price + CTA right) layout needs real width. Below ~860px it was squeezing the feature column to min-content and pushing "Choose a tournament" past the card's right edge (CTA overflow + clipping at 768). Stack it cleanly on tablet and phone: features, then a full-width price + CTA action row. ---- */ @media (max-width:860px){ .pk-card--practice{ flex-direction:column; align-items:stretch; gap:16px; } .pk-card--practice .pk-practice-body{ flex:1 1 auto; } .pk-card--practice .pk-price{ text-align:left; } .pk-card--practice .pk-action{ width:100%; } } /* ---- keep pack CTAs on one line so buttons read consistently across cards at every grid density (safe: at 1-up the card is wide; practice CTA stacks full- width below 860). ---- */ .pk-card .pk-action{ white-space:nowrap; } /* ============================================================================ CATALOG CTA + HEADER + WELCOME polish (owner feedback 2026-09-18) - Buttons -> app slate-black (#2c3e50 == #wizard-mode .btn-primary); text stays white on EVERY state (fixes Bootstrap .btn:hover forcing ~black text -> unreadable); smoother hover lift + press + focus ring. - Section headers: heading, then metadata on its own row below (left-aligned). - Welcome: cleaner text hierarchy + comfortable measure. Scoped to #catalog-packs so the shared add-student/review wizard is untouched. ============================================================================ */ #catalog-packs .pk-action, #catalog-packs .pk-action.btn{ background:var(--nav); border:1px solid var(--nav); color:#fff !important; font-weight:600; letter-spacing:.01em; box-shadow:0 1px 2px rgba(20,32,48,.14); transition:background .18s ease, box-shadow .18s ease, transform .12s ease; } #catalog-packs .pk-action:hover:not([disabled]){ background:#24333f; border-color:#24333f; color:#fff !important; transform:translateY(-1px); box-shadow:0 5px 14px rgba(20,32,48,.22); } #catalog-packs .pk-action:active:not([disabled]){ transform:translateY(0); box-shadow:0 2px 6px rgba(20,32,48,.20); } #catalog-packs .pk-action:focus{ box-shadow:0 1px 2px rgba(20,32,48,.14); } #catalog-packs .pk-action:focus-visible{ outline:2px solid var(--vidya); outline-offset:2px; } #catalog-packs .pk-action[disabled]{ background:#aeb8ca; border-color:transparent; color:#fff !important; box-shadow:none; } /* section headers: metadata drops to its own row under the heading */ #catalog-packs .pk-head{ display:block; margin:0 0 8px; } #catalog-packs .pk-head .pk-title{ font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.25; margin:0 0 5px; } #catalog-packs .pk-head .pk-substudent{ display:block; font-size:14.5px; line-height:1.5; color:var(--ink2); margin:0; max-width:74ch; } /* welcome: tidy hierarchy + readable measure, text vertically centred with the demo action */ #catalog-packs .pk-home-welcome{ align-items:center; } #catalog-packs .pk-home-welcome > div{ flex:1 1 auto; } #catalog-packs .pk-home-title{ font-size:24px; line-height:1.2; margin:0 0 6px; } #catalog-packs .pk-home-sub{ font-size:15px; line-height:1.55; color:var(--ink2); margin:0; max-width:62ch; } /* ---- catalog follow-up polish (owner feedback 2026-09-18 #2) ---- a) study-packs / practice helper text on ONE line at desktop (was capped at 74ch → wrapped) b) equal-height cards per row so the section divider gets a clean straight edge above it (the "Best value" card was taller → uneven gap made the rule look broken/merged at one end) c) a touch more breathing room above the practice-tests divider */ #catalog-packs .pk-head .pk-substudent{ max-width:none; } #catalog-packs #homeCatalogGrid{ align-items:stretch; } #catalog-packs #homeCatalogGrid .pk-card{ height:100%; } #catalog-packs .pk-head--section{ margin-top:44px; padding-top:30px; border-top:1px solid var(--rule2); } /* ---- pack-card internal polish (owner feedback 2026-09-18 #3): relaxed, scannable hierarchy + a CTA separator line above the price/button (matches the reference mock's .foot border-top). Scoped to #homeCatalogGrid so the practice-test card (different layout) is untouched. Content unchanged. */ #homeCatalogGrid .pk-card{ padding:22px; gap:12px; } #homeCatalogGrid .pk-card > *{ margin-top:0; margin-bottom:0; } #homeCatalogGrid .pk-name{ font-size:1.12rem; line-height:1.32; } #homeCatalogGrid .pk-audience{ line-height:1.5; } #homeCatalogGrid .pk-expiry{ line-height:1.35; } #homeCatalogGrid .pk-desc{ display:flex; flex-direction:column; gap:9px; } #homeCatalogGrid .pk-desc li{ margin:0; line-height:1.55; padding-left:26px; font-size:.9rem; } #homeCatalogGrid .pk-foot{ margin-top:auto; align-items:center; gap:12px; padding-top:15px; border-top:1px solid var(--rule); } /* ---- catalog vertical rhythm (owner feedback 2026-09-18 #4): consistent, relaxed spacing. Was: head->content only 8px (cramped) vs 22-44px elsewhere, and the two section headers had different gaps to their content. Now one scale: section break ~32-36px, heading->content 18px (both sections), card row-gap 24px. ---- */ #catalog-packs .pk-home-welcome{ margin-bottom:32px; } #catalog-packs .pk-head{ margin-bottom:18px; } #catalog-packs .pk-head--section{ margin-top:36px; margin-bottom:18px; padding-top:28px; } #catalog-packs #homeCatalogGrid{ row-gap:24px; } /* ---- readability (owner feedback 2026-09-18 #5): the audience line ("For students in grades K-8...") and the price unit ("per topic, per level") were on the faded --grey (#7a889c) -> hard to read. Move to the readable secondary slate --ink2 (#4a5d78) with a touch more size. Scoped to #catalog-packs. ---- */ #catalog-packs .pk-audience{ color:var(--ink2); font-size:.9rem; line-height:1.5; } #catalog-packs .pk-price-unit{ color:var(--ink2); font-size:.82rem; line-height:1.35; margin-top:2px; } #catalog-packs .pk-price-from .pk-price-amount::before{ color:var(--ink2); } /* ---- card elevation (owner feedback 2026-09-18 #6): white cards on the white panel had only a flat 1px shadow -> no separation. Give the welcome card, the 6 pack cards and the PT card a soft-but-visible resting shadow so they lift off the background; keep a stronger hover. Scoped to #catalog-packs (and re-scoping hover so it still beats the resting shadow). ---- */ #catalog-packs .pk-card, #catalog-packs .pk-home-welcome{ box-shadow:0 2px 4px rgba(16,35,64,.05), 0 8px 22px rgba(16,35,64,.10); } #catalog-packs .pk-card:hover{ box-shadow:0 4px 12px rgba(16,35,64,.10), 0 16px 34px rgba(16,35,64,.16); } /* ============================================================================ PARENT ONBOARDING V2 -- ADD-STUDENT (S-2) UI POLISH PASS (2026-09-18) Bring the buy-flow add-student form (#chooseAddForm, inside the student card since W3) into the SAME visual system as the just-polished catalog (S-1): slate/coral palette with no stray blue, a real form CARD carrying the catalog resting elevation, readable secondary text on --ink2 (not the faded --grey), a clean "Change pack" text button (was an unstyled raw OS