/* Achievers Revision Planner - "Precision Light" Matches the iAchievers student-web design system: Trust Blue, white surfaces, hairline borders, three elevation levels, motion 150-350ms. Mobile-first. */ /* ---------- tokens ---------- */ :root { --primary: #2563EB; --primary-600: #1D4ED8; --primary-soft: #EFF6FF; --primary-ring: rgba(37, 99, 235, .32); --brand: #2290E7; --cta: #F97316; --cta-soft: #FFF7ED; --bg: #F8FAFC; --surface: #FFFFFF; --surface-2: #F8FAFC; --fg: #0F172A; --fg-muted: #64748B; --fg-subtle: #94A3B8; --border: #E2E8F0; --border-strong: #CBD5E1; --success: #059669; --success-soft: #ECFDF5; --warning: #D97706; --warning-soft: #FFFBEB; --danger: #DC2626; --danger-soft: #FEF2F2; --info: #0284C7; --radius: 12px; --radius-sm: 9px; --radius-lg: 16px; --radius-pill: 999px; --shadow-rest: 0 1px 2px rgb(15 23 42 / .05); --shadow-raised: 0 4px 16px -4px rgb(15 23 42 / .10); --shadow-overlay: 0 24px 48px -12px rgb(15 23 42 / .18); --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Frequency tiers are ordinal, so they get a single-hue sequential ramp (validated: CVD separation 17.9, normal-vision 20.0, lightness monotonic). The pale Low step sits under 3:1, so every segment is directly labelled. */ --tier-high: #1E40AF; --tier-medium: #3B82F6; --tier-low: #93C5FD; --cta-ink: #C2410C; /* One colour per preparation status, green through red in the order the options are listed. These are label inks, not the semantic tokens: the semantic greens/ambers are tuned for larger type and fall under 4.5:1 at the 12.5px this control uses. All eight pairs validated. */ --mark-both-ink: #047857; --mark-both-bg: #ECFDF5; --mark-class-ink: #1D4ED8; --mark-class-bg: #EFF6FF; --mark-read-ink: #B45309; --mark-read-bg: #FFFBEB; --mark-none-ink: #B91C1C; --mark-none-bg: #FEF2F2; --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-micro: 170ms; --dur-enter: 320ms; --header-h: 60px; --footer-h: 76px; --maxw: 720px; } /* Dark is defined once, keyed on the attribute. app.js always resolves the stored preference (system/light/dark) to a concrete data-theme on , and an inline script in does it before first paint, so there is no flash and no second copy of these tokens to keep in sync. */ :root[data-theme='dark'] { color-scheme: dark; --primary: #3B82F6; --primary-600: #60A5FA; --primary-soft: #17233F; --primary-ring: rgba(59, 130, 246, .38); --cta: #FB923C; --cta-soft: #2A1C10; --bg: #0B1120; --surface: #111A2E; --surface-2: #16203A; --fg: #E9EEF8; --fg-muted: #9AA9C0; --fg-subtle: #71809A; --border: #22304C; --border-strong: #33456A; --success: #34D399; --success-soft: #0C2A22; --warning: #FBBF24; --warning-soft: #2A2110; --danger: #F87171; --danger-soft: #2C1518; --shadow-rest: 0 1px 2px rgb(0 0 0 / .4); --shadow-raised: 0 4px 16px -4px rgb(0 0 0 / .5); --shadow-overlay: 0 24px 48px -12px rgb(0 0 0 / .6); /* Dark ramp is selected, not flipped: High stays the highest-contrast step against the surface, so prominence still tracks frequency. */ --tier-high: #BFDBFE; --tier-medium: #60A5FA; --tier-low: #2E5AAC; --cta-ink: #FDBA74; --mark-both-ink: #6EE7B7; --mark-both-bg: #0C2A22; --mark-class-ink: #93C5FD; --mark-class-bg: #17233F; --mark-read-ink: #FCD34D; --mark-read-bg: #2A2110; --mark-none-ink: #FCA5A5; --mark-none-bg: #2C1518; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.02em; font-weight: 700; } p { margin: 0; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* Headings are focused programmatically on step change so screen readers announce the new screen - that move should not paint a ring. */ [tabindex='-1']:focus, [tabindex='-1']:focus-visible { outline: none; } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- app shell ---------- */ .app { min-height: 100dvh; display: flex; flex-direction: column; /* Reserve the pinned bar's measured height here, not on .main - the footnote sits outside .main and would otherwise scroll underneath it. */ padding-bottom: var(--footer-h); } .topbar { position: sticky; top: 0; z-index: 40; height: var(--header-h); display: flex; align-items: center; gap: 12px; padding: 0 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--border); } .topbar__logo { width: 34px; height: 34px; border-radius: 9px; box-shadow: var(--shadow-rest); flex: none; } .topbar__text { min-width: 0; } .topbar__title { font-size: 15px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar__sub { font-size: 12px; color: var(--fg-muted); line-height: 1.2; } .topbar__spacer { flex: 1; } .progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--border); } .progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--brand)); transition: width 420ms var(--ease-out); } .main { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 20px 16px 28px; } .main--wide { max-width: 1080px; } /* ---------- screens ---------- */ .screen { display: none; } .screen.is-active { display: block; animation: enter var(--dur-enter) var(--ease-out) both; } @keyframes enter { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } } @keyframes pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } .stagger > * { animation: enter 380ms var(--ease-out) both; } .stagger > *:nth-child(1) { animation-delay: 30ms; } .stagger > *:nth-child(2) { animation-delay: 70ms; } .stagger > *:nth-child(3) { animation-delay: 110ms; } .stagger > *:nth-child(4) { animation-delay: 150ms; } .stagger > *:nth-child(5) { animation-delay: 190ms; } .stagger > *:nth-child(6) { animation-delay: 230ms; } .stagger > *:nth-child(n+7) { animation-delay: 260ms; } /* ---------- typography blocks ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); background: var(--primary-soft); padding: 5px 10px; border-radius: var(--radius-pill); margin-bottom: 14px; } .step-title { font-size: 24px; margin-bottom: 8px; } .step-lede { color: var(--fg-muted); font-size: 15px; margin-bottom: 22px; } /* ---------- theme switcher ---------- */ .theme-toggle { display: flex; gap: 2px; flex: none; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); } .theme-toggle__opt { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; } .theme-toggle__opt input { position: absolute; opacity: 0; width: 0; height: 0; } .theme-toggle__ico { display: grid; place-items: center; width: 38px; height: 34px; color: var(--fg-subtle); border-radius: var(--radius-pill); transition: color var(--dur-micro), background var(--dur-micro), box-shadow var(--dur-micro), transform var(--dur-micro) var(--ease-out); } .theme-toggle__opt:active .theme-toggle__ico { transform: scale(.92); } .theme-toggle__opt input:focus-visible + .theme-toggle__ico { outline: 2px solid var(--primary); outline-offset: 2px; } .theme-toggle__opt input:checked + .theme-toggle__ico { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-rest); } @media (hover: hover) { .theme-toggle__opt:hover .theme-toggle__ico { color: var(--fg-muted); } .theme-toggle__opt input:checked + .theme-toggle__ico { color: var(--primary); } } /* ---------- hero ---------- */ .hero { text-align: left; } .hero__h2 { font-size: 17px; margin: 0 0 4px; } .hero__title { font-size: 32px; line-height: 1.15; letter-spacing: -.035em; margin-bottom: 14px; } .hero__title em { font-style: normal; color: var(--primary); } .hero__lede { color: var(--fg-muted); font-size: 16px; line-height: 1.6; max-width: 56ch; margin-bottom: 24px; } /* the thesis: a small share of topics carries a large share of the paper */ .thesis { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 16px; box-shadow: var(--shadow-rest); margin-bottom: 14px; } .thesis__lead { font-size: 14.5px; line-height: 1.55; margin-bottom: 16px; } .thesis__lead strong { font-weight: 700; } .thesis__lead .hl { color: var(--primary); font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; } .propbar { display: flex; gap: 2px; height: 30px; border-radius: 6px; overflow: hidden; margin-bottom: 10px; } /* Values live in the legend directly below, not inside the segments: the High band is only 15% wide, and its ink would need to flip per theme to stay readable. The legend carries identity + value in body ink instead. */ .propbar__seg { min-width: 0; transform-origin: left center; animation: grow 620ms var(--ease-out) both; } .propbar__seg--high { background: var(--tier-high); } .propbar__seg--medium { background: var(--tier-medium); } .propbar__seg--low { background: var(--tier-low); } .propbar__seg:nth-child(1) { animation-delay: 80ms; } .propbar__seg:nth-child(2) { animation-delay: 150ms; } .propbar__seg:nth-child(3) { animation-delay: 220ms; } @keyframes grow { from { transform: scaleX(0); opacity: .4; } to { transform: none; opacity: 1; } } .proplegend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; font-size: 11.5px; color: var(--fg-muted); } .proplegend div { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .proplegend i { width: 9px; height: 9px; border-radius: 2px; flex: none; transform: translateY(1px); border: 1px solid rgb(15 23 42 / .12); } :root[data-theme='dark'] .proplegend i { border-color: rgb(255 255 255 / .18); } .proplegend b { display: block; color: var(--fg); font-weight: 700; font-size: 12.5px; } .proplegend .num { color: var(--fg-muted); } /* proof numbers */ .hero__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 26px; } .fact { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 10px; text-align: center; box-shadow: var(--shadow-rest); } .fact__value { font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .fact__label { font-size: 11px; color: var(--fg-muted); line-height: 1.3; margin-top: 3px; } /* how it works */ .steps { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 2px; } .steps li { display: flex; gap: 13px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); } .steps li:last-child { border-bottom: 0; } .steps__n { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--font-mono); background: var(--primary-soft); color: var(--primary); } .steps__t { font-size: 15px; font-weight: 600; margin-bottom: 2px; } .steps__d { font-size: 13.5px; color: var(--fg-muted); line-height: 1.5; } .hero__cta-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--fg-subtle); margin-top: 12px; } .hero__cta-note svg { flex: none; } /* ---------- cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-rest); padding: 16px; } .card + .card { margin-top: 12px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 12px; } .section-head h3 { font-size: 17px; } .section-head span { font-size: 12px; color: var(--fg-muted); } /* ---------- form fields ---------- */ .field { margin-bottom: 16px; } .field__label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .field__label .req { color: var(--danger); margin-left: 2px; } .field__hint { font-size: 12.5px; color: var(--fg-muted); margin-top: 6px; } .field__error { display: none; font-size: 12.5px; color: var(--danger); margin-top: 6px; align-items: center; gap: 5px; } .field.has-error .field__error { display: flex; animation: enter 200ms var(--ease-out) both; } .field.has-error .input { border-color: var(--danger); } .input { width: 100%; height: 48px; padding: 0 14px; font-size: 16px; font-family: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color var(--dur-micro), box-shadow var(--dur-micro); appearance: none; } .input::placeholder { color: var(--fg-subtle); } .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } /* ---------- select ---------- */ /* appearance:none strips the native arrow, so one is drawn back in as a background SVG - a data URI works everywhere, unlike mask-image. The dark variant restates it because the stroke colour is baked into the URI. */ .select { width: 100%; height: 48px; padding: 0 42px 0 14px; font-size: 16px; font-family: inherit; color: var(--fg); background-color: var(--surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 18px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color var(--dur-micro), box-shadow var(--dur-micro); } .select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } .select:hover { border-color: var(--primary); } :root[data-theme='dark'] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239AA9C0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* ---------- choice cards ---------- */ .choices { display: grid; gap: 10px; } .choice { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; } .choice input { position: absolute; opacity: 0; width: 0; height: 0; } .choice__body { display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); transition: border-color var(--dur-micro), background var(--dur-micro), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro); } .choice:active .choice__body { transform: scale(.99); } .choice input:focus-visible + .choice__body { outline: 2px solid var(--primary); outline-offset: 2px; } .choice input:checked + .choice__body { border-color: var(--primary); background: var(--primary-soft); box-shadow: var(--shadow-rest); } .choice__tick { width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 2px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; transition: border-color var(--dur-micro), background var(--dur-micro); } .choice__tick svg { opacity: 0; transform: scale(.5); color: #fff; transition: all var(--dur-micro) var(--ease-out); } .choice input:checked + .choice__body .choice__tick { background: var(--primary); border-color: var(--primary); } .choice input:checked + .choice__body .choice__tick svg { opacity: 1; transform: none; } /* Both are spans inside a span, so they need to be told to stack. */ .choice__title { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; } .choice__desc { display: block; font-size: 13.5px; color: var(--fg-muted); line-height: 1.5; margin-top: 3px; } /* ---------- subject rows ---------- */ .subject-row { padding: 14px 0; border-bottom: 1px solid var(--border); } .subject-row:last-child { border-bottom: 0; padding-bottom: 2px; } .subject-row:first-child { padding-top: 2px; } .subject-row__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .subject-row__name { font-size: 15px; font-weight: 600; } .subject-row__meta { font-size: 11.5px; color: var(--fg-muted); } .seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } @media (min-width: 560px) { .seg { grid-template-columns: repeat(4, 1fr); } } .seg__opt { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; } .seg__opt input { position: absolute; opacity: 0; width: 0; height: 0; } .seg__label { display: grid; place-items: center; text-align: center; min-height: 44px; padding: 6px 4px; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--fg-muted); background: var(--surface-2); border: 1.5px solid transparent; border-radius: var(--radius-sm); transition: all var(--dur-micro) var(--ease-out); } .seg__opt:active .seg__label { transform: scale(.97); } .seg__opt input:focus-visible + .seg__label { outline: 2px solid var(--primary); outline-offset: 2px; } .seg__opt input:checked + .seg__label { font-weight: 700; } .seg__opt[data-status='both'] input:checked + .seg__label { color: var(--mark-both-ink); background: var(--mark-both-bg); border-color: var(--mark-both-ink); } .seg__opt[data-status='class'] input:checked + .seg__label { color: var(--mark-class-ink); background: var(--mark-class-bg); border-color: var(--mark-class-ink); } .seg__opt[data-status='read'] input:checked + .seg__label { color: var(--mark-read-ink); background: var(--mark-read-bg); border-color: var(--mark-read-ink); } .seg__opt[data-status='none'] input:checked + .seg__label { color: var(--mark-none-ink); background: var(--mark-none-bg); border-color: var(--mark-none-ink); } .bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; font-size: 12.5px; color: var(--fg-muted); } .bulk__btn { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all var(--dur-micro) var(--ease-out); } .bulk__btn:hover { border-color: var(--primary); color: var(--primary); } .bulk__btn:active { transform: scale(.96); } /* ---------- chips (strong subjects) ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; } .chip input { position: absolute; opacity: 0; width: 0; height: 0; } .chip__label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; font-size: 14px; font-weight: 600; background: var(--surface); color: var(--fg-muted); border: 1.5px solid var(--border); border-radius: var(--radius-pill); transition: all var(--dur-micro) var(--ease-out); } .chip:active .chip__label { transform: scale(.96); } .chip input:focus-visible + .chip__label { outline: 2px solid var(--primary); outline-offset: 2px; } .chip input:checked + .chip__label { background: var(--success-soft); color: var(--success); border-color: var(--success); } .chip__label svg { opacity: 0; width: 0; transition: all var(--dur-micro) var(--ease-out); } .chip input:checked + .chip__label svg { opacity: 1; width: 15px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform var(--dur-micro) var(--ease-out), background var(--dur-micro), box-shadow var(--dur-micro), opacity var(--dur-micro); } .btn:active { transform: scale(.98); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn--primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-rest); } .btn--primary:hover:not(:disabled) { background: var(--primary-600); box-shadow: var(--shadow-raised); } .btn--cta { background: var(--cta); color: #fff; box-shadow: var(--shadow-rest); } .btn--cta:hover:not(:disabled) { filter: brightness(.95); box-shadow: var(--shadow-raised); } .btn--ghost { background: var(--surface); color: var(--fg); border-color: var(--border-strong); } .btn--ghost:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .btn--block { width: 100%; } .btn--lg { min-height: 56px; font-size: 16.5px; } .btn__spinner { width: 17px; height: 17px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite; display: none; } .btn.is-busy .btn__spinner { display: block; } .btn.is-busy .btn__icon { display: none; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- sticky footer nav ---------- */ .navbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; flex-direction: column; gap: 8px; padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border); } .navbar.is-visible { display: flex; } .navbar__row { display: flex; gap: 10px; align-items: center; } .navbar__row .btn--primary { flex: 1; } .navbar__step { font-size: 12px; color: var(--fg-muted); white-space: nowrap; } /* The landing keeps its call to action pinned, so it is reachable without scrolling past the proof sections. Only that step carries the note. */ .navbar__note { display: none; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--fg-subtle); } .navbar__note svg { flex: none; } .navbar--solo .navbar__note { display: flex; } .navbar--solo #backBtn { display: none; } /* The finished plan runs to sixteen days, so its one action stays pinned too. Kept at the same specificity as the primary rule above, so the wide-screen override later in this file can still narrow it. */ .navbar__row .btn--cta { flex: 1; } /* ---------- plan: summary ---------- */ .plan-head { background: linear-gradient(135deg, var(--primary), var(--brand)); color: #fff; border-radius: var(--radius-lg); padding: 22px 18px; margin-bottom: 16px; box-shadow: var(--shadow-raised); } .plan-head__name { font-size: 13px; opacity: .9; font-weight: 600; } .plan-head__title { font-size: 25px; margin: 4px 0 6px; letter-spacing: -.03em; } .plan-head__sub { font-size: 14px; opacity: .92; } .plan-head__row { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; } .plan-head__stat strong { display: block; font-size: 21px; font-family: var(--font-mono); font-weight: 700; } .plan-head__stat span { font-size: 11.5px; opacity: .88; } .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 620px) { .tiles { grid-template-columns: repeat(4, 1fr); } } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px; box-shadow: var(--shadow-rest); } .tile__label { font-size: 11.5px; color: var(--fg-muted); font-weight: 600; } .tile__value { font-size: 22px; font-weight: 700; font-family: var(--font-mono); letter-spacing: -.02em; margin-top: 3px; } .tile__note { font-size: 11px; color: var(--fg-subtle); } .callout { display: flex; gap: 11px; align-items: flex-start; background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); border-radius: var(--radius); padding: 13px 14px; margin-top: 12px; font-size: 13.5px; line-height: 1.5; } .callout svg { flex: none; color: var(--warning); margin-top: 1px; } .callout--info { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, transparent); } .callout--info svg { color: var(--primary); } /* ---------- plan: subject priority list ---------- */ .subj { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .subj:last-child { border-bottom: 0; } .subj__rank { width: 26px; height: 26px; flex: none; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--font-mono); background: var(--surface-2); color: var(--fg-muted); } .subj__main { flex: 1; min-width: 0; } .subj__name { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .subj__meta { font-size: 11.5px; color: var(--fg-muted); margin-top: 1px; } .subj__hours { font-size: 15px; font-weight: 700; font-family: var(--font-mono); white-space: nowrap; } .bar { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: 6px; } .bar__fill { height: 100%; border-radius: 3px; background: var(--primary); width: 0; transition: width 700ms var(--ease-out); } .bar__fill--critical { background: var(--cta); } .bar__fill--high { background: var(--primary); } .bar__fill--standard { background: var(--border-strong); } .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; white-space: nowrap; } .badge--critical { background: var(--cta-soft); color: var(--cta-ink); } .badge--high { background: var(--primary-soft); color: var(--primary-600); } .badge--standard { background: var(--surface-2); color: var(--fg-muted); } .badge--strong { background: var(--success-soft); color: var(--success); } .badge--tier-high { background: var(--primary-soft); color: var(--tier-high); } .badge--tier-medium { background: var(--primary-soft); color: var(--tier-medium); } .badge--tier-low { background: var(--surface-2); color: var(--fg-muted); } /* ---------- plan: day timeline ---------- */ .day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-rest); margin-bottom: 10px; overflow: hidden; } .day--sweep { border-color: color-mix(in srgb, var(--cta) 45%, transparent); } .day--final { border-color: color-mix(in srgb, var(--success) 45%, transparent); } /* Days between the plan and the paper: same card, deliberately quieter. */ .day--runway { border-style: dashed; background: var(--surface-2); } .day--runway .day__head:hover { background: none; } .exam-day { display: flex; align-items: center; gap: 13px; margin-top: 12px; padding: 16px 18px; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), var(--brand)); color: #fff; box-shadow: var(--shadow-raised); } .exam-day svg { flex: none; } .exam-day__t { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; } .exam-day__d { font-size: 12.5px; opacity: .9; } .day__head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 15px; background: none; border: 0; cursor: pointer; text-align: left; transition: background var(--dur-micro); } .day__head:hover { background: var(--surface-2); } .day__date { width: 46px; flex: none; text-align: center; border-right: 1px solid var(--border); padding-right: 10px; } .day__daynum { font-size: 18px; font-weight: 700; font-family: var(--font-mono); line-height: 1.1; } .day__mon { font-size: 10.5px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .05em; } .day__info { flex: 1; min-width: 0; } .day__subjects { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .day__stats { font-size: 11.5px; color: var(--fg-muted); margin-top: 2px; } .day__chev { flex: none; color: var(--fg-subtle); transition: transform var(--dur-micro) var(--ease-out); } .day.is-open .day__chev { transform: rotate(180deg); } .day__body { display: none; padding: 0 15px 15px; } .day.is-open .day__body { display: block; animation: enter 260ms var(--ease-out) both; } .block { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; } .block:first-child { border-top: 0; margin-top: 0; } .block__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .block__name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .block__hours { font-size: 12.5px; font-weight: 700; font-family: var(--font-mono); color: var(--primary); background: var(--primary-soft); padding: 3px 8px; border-radius: 6px; white-space: nowrap; } .block__sittings { display: block; font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--fg-muted); text-align: right; margin-top: 2px; } .topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .topics li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--fg); } .topics li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; background: var(--border-strong); } .topics li[data-tier='high']::before { background: var(--tier-high); } .topics li[data-tier='medium']::before { background: var(--tier-medium); } .topics li[data-tier='low']::before { background: var(--tier-low); } .topics__n { margin-left: auto; font-size: 11px; font-family: var(--font-mono); color: var(--fg-subtle); white-space: nowrap; padding-left: 8px; } .day__aux { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); } .aux { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; } .aux svg { flex: none; margin-top: 2px; color: var(--fg-muted); } .aux strong { font-weight: 700; } .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .checklist li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; } .checklist svg { flex: none; margin-top: 2px; color: var(--success); } /* ---------- plan actions ---------- */ /* Only "start over" is left here - the download sits in the pinned bar. */ .plan-actions { display: flex; justify-content: center; margin-top: 22px; } .plan-actions .btn { min-width: 220px; } .legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--fg-muted); margin-top: 12px; } .legend span { display: inline-flex; align-items: center; gap: 5px; } .legend i { width: 8px; height: 8px; border-radius: 50%; display: block; } /* ---------- toast ---------- */ .toast { position: fixed; left: 50%; bottom: calc(var(--footer-h) + 16px); transform: translate(-50%, 16px); z-index: 60; display: flex; align-items: center; gap: 9px; max-width: min(92vw, 420px); padding: 12px 16px; border-radius: var(--radius); background: var(--fg); color: var(--bg); box-shadow: var(--shadow-overlay); font-size: 13.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity var(--dur-micro), transform var(--dur-enter) var(--ease-out); } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .toast svg { flex: none; } /* ---------- footer ---------- */ .foot { text-align: center; font-size: 11.5px; color: var(--fg-subtle); padding: 26px 16px 8px; line-height: 1.6; } /* ---------- larger screens ---------- */ @media (min-width: 768px) { :root { --header-h: 66px; } .main { padding: 32px 24px 36px; } .step-title { font-size: 28px; } .hero__title { font-size: 44px; } .hero__lede { font-size: 17px; } .thesis { padding: 24px; } .thesis__lead { font-size: 16px; } .propbar { height: 34px; } .plan-head { padding: 28px 26px; } .plan-head__title { font-size: 32px; } .card { padding: 20px; } } @media (min-width: 1024px) { .navbar__row { justify-content: center; } .navbar__row .btn--primary, .navbar__row .btn--cta { flex: 0 1 320px; } } /* ---------- motion & print ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media print { .topbar, .navbar, .plan-actions, .toast, .foot, .day__chev { display: none !important; } body { background: #fff; } .main { max-width: none; padding: 0; } .day__body { display: block !important; } .day { break-inside: avoid; box-shadow: none; } .plan-head { background: #2563EB !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }