/* ========================================================================== NEXUS — Online Math Tutorials White pages with deep navy bands and a gold accent — the NEXUS colours (sampled from the brand assets in /assets/img) on a plain white ground, with the rounded, friendly layout of the 2026 restyle. Every colour a component uses is a token. The tokens are defined twice: once for a light surface (the default, on ) and once for a dark surface (.band--deep, .band--flat, .footer, .tile …). A component therefore needs no knowledge of which surface it sits on. ========================================================================== */ :root { /* Navy — sampled from the Math Tutor Yobhel / NEXUS brand banners */ --navy-900: #071230; --navy-800: #09193b; --navy-700: #0d2350; --navy-600: #123a72; --navy-500: #1b5492; /* Gold accent, sampled from the hero pill + button */ --gold: #e7b466; --gold-light: #f0c98a; --gold-dark: #c9924a; --gold-deep: #c98a1c; /* display-size gold text on cream */ --on-gold: #3f2c0c; /* Paper */ --cream: #ffffff; /* page ground (the name is historical) */ --paper: #f5f7fb; /* a faint navy-tinted well for alternate blocks */ --maxw: 1180px; --radius: 18px; --radius-lg: 28px; --font-display: "Poppins", "Segoe UI", "Trebuchet MS", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-script: "Caveat", "Segoe Script", "Bradley Hand", cursive; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ---- light surface (default) ---- */ --text: #0f1f42; --text-dim: #47567a; --text-dimmer: #6e7c99; --hairline: rgba(15, 31, 66, 0.12); --line-mid: rgba(15, 31, 66, 0.2); --line-strong: rgba(15, 31, 66, 0.34); --card: #ffffff; --card-hover: #fffdf7; --tint: rgba(15, 31, 66, 0.045); --tint-hover: rgba(15, 31, 66, 0.08); --well: rgba(15, 31, 66, 0.06); --gold-text: #a86f1d; --gold-text-hi: #8a5a12; --gold-ico: #c48c33; --bad: #c9473a; --bad-line: rgba(201, 71, 58, 0.5); --bad-soft: rgba(201, 71, 58, 0.1); --on-bad: #ffffff; --good: #2f9a67; --good-soft: rgba(47, 154, 103, 0.12); --on-good: #ffffff; --blue-soft: rgba(27, 84, 146, 0.1); --blue-line: rgba(27, 84, 146, 0.45); --blue-fill: rgba(27, 84, 146, 0.28); --blue-text: #1b5492; --shadow: 0 16px 40px rgba(15, 31, 66, 0.1); --shadow-lg: 0 30px 70px rgba(15, 31, 66, 0.16); --btn-bg: linear-gradient(180deg, #1a4a8c, #0d2350); --btn-fg: #ffffff; --btn-shadow: rgba(13, 35, 80, 0.25); --btn-hover-shadow: rgba(13, 35, 80, 0.36); --ghost-line: rgba(13, 35, 80, 0.35); --ghost-fg: #0d2350; --ghost-hover: rgba(231, 180, 102, 0.16); --eyebrow-bg: #ffffff; --eyebrow-line: rgba(231, 180, 102, 0.6); --nav-bg: rgba(255, 255, 255, 0.88); --nav-menu: #ffffff; --focus: #123a72; } /* ---- dark surface ---- */ .dark, .band--deep, .band--flat, .footer, .tile, .dx-fig, .diagram { --text: #f6f3e8; --text-dim: #b9c9df; --text-dimmer: #8ea4c2; --hairline: rgba(219, 232, 250, 0.14); --line-mid: rgba(219, 232, 250, 0.26); --line-strong: rgba(219, 232, 250, 0.45); --card: rgba(255, 255, 255, 0.045); --card-hover: rgba(255, 255, 255, 0.075); --tint: rgba(255, 255, 255, 0.05); --tint-hover: rgba(255, 255, 255, 0.08); --well: rgba(0, 0, 0, 0.25); --gold-text: var(--gold); --gold-text-hi: var(--gold-light); --gold-ico: var(--gold); --bad: #f08a8a; --bad-line: rgba(240, 138, 138, 0.5); --bad-soft: rgba(240, 138, 138, 0.1); --on-bad: #2b0808; --good: #58b98a; --good-soft: rgba(88, 185, 138, 0.12); --on-good: #06231a; --blue-soft: rgba(143, 188, 232, 0.16); --blue-line: rgba(143, 188, 232, 0.6); --blue-fill: rgba(143, 188, 232, 0.36); --blue-text: #a9cdf0; --shadow: 0 18px 44px rgba(3, 9, 24, 0.42); --shadow-lg: 0 28px 70px rgba(3, 9, 24, 0.55); --btn-bg: linear-gradient(180deg, var(--gold-light), var(--gold)); --btn-fg: var(--on-gold); --btn-shadow: rgba(231, 180, 102, 0.24); --btn-hover-shadow: rgba(231, 180, 102, 0.34); --ghost-line: rgba(219, 232, 250, 0.4); --ghost-fg: #f6f3e8; --ghost-hover: rgba(231, 180, 102, 0.12); --eyebrow-bg: rgba(255, 255, 255, 0.07); --eyebrow-line: rgba(231, 180, 102, 0.45); --focus: var(--gold); color: var(--text-dim); } /* --------------------------------------------------------------- base --- */ *, *::before, *::after { box-sizing: border-box; } /* The browser hides [hidden] with a UA rule that any author `display` beats — so a class like .btn, which sets display:inline-flex, would leave a hidden element on screen. This puts the attribute back in charge everywhere. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--text-dim); background: var(--cream); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--gold-text); text-decoration: none; } a:hover { color: var(--gold-text-hi); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); line-height: 1.14; letter-spacing: -0.015em; margin: 0 0 0.5em; font-weight: 700; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } .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; } .skip-link { position: absolute; left: 50%; top: -100px; transform: translateX(-50%); z-index: 200; background: var(--gold); color: var(--on-gold); padding: 0.7rem 1.3rem; border-radius: 0 0 10px 10px; font-weight: 700; transition: top 0.2s var(--ease); } .skip-link:focus { top: 0; color: var(--on-gold); } /* ------------------------------------------------------------ layout --- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2rem); } .section { position: relative; padding-block: clamp(4rem, 9vw, 7rem); } .section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); } /* Light band: a white ground with a soft gold glow in one corner and a patch of dots in the other, like the reference layout. */ .band { position: relative; isolation: isolate; background: var(--cream); } .band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 60% at 88% 8%, rgba(231, 180, 102, 0.16) 0%, rgba(231, 180, 102, 0) 70%), radial-gradient(45% 55% at 4% 96%, rgba(27, 84, 146, 0.07) 0%, rgba(27, 84, 146, 0) 70%); } .band::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(15, 31, 66, 0.16) 1.2px, transparent 1.8px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(38% 45% at 8% 18%, #000 0%, transparent 100%); mask-image: radial-gradient(38% 45% at 8% 18%, #000 0%, transparent 100%); } /* Deep navy band — the brand gradient with the constellation texture. */ .band--deep { position: relative; isolation: isolate; background: radial-gradient(100% 140% at 50% 0%, var(--navy-700) 0%, var(--navy-800) 46%, var(--navy-900) 100%); } .band--deep::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("assets/constellation.svg") center / cover no-repeat; opacity: 0.75; pointer-events: none; } /* Straight vertical gradient, so a wave divider can match its top and bottom edge exactly. */ .band--solid { background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-800) 55%, var(--navy-900) 100%); } .band--flat { background: var(--navy-900); } /* Wave dividers between a cream section and a navy one. The SVG sits on the cream and paints the navy edge, so it belongs before .band--solid (wave--in) or after it (wave--out). */ .wave { position: relative; z-index: 1; line-height: 0; background: var(--cream); } .wave svg { display: block; width: 100%; height: clamp(42px, 7vw, 96px); } .wave path { fill: var(--cream); } .wave--in { margin-bottom: -1px; background: var(--navy-700); } .wave--out { margin-top: -1px; background: var(--navy-900); } .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text); background: var(--eyebrow-bg); border: 1px solid var(--eyebrow-line); padding: 0.42rem 1rem 0.42rem 0.8rem; border-radius: 999px; margin-bottom: 1.15rem; box-shadow: 0 4px 14px rgba(15, 31, 66, 0.05); } .eyebrow::before { content: ""; width: 0.55rem; height: 0.55rem; flex: none; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(231, 180, 102, 0.3); } .section__head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); } .section__head--center { margin-inline: auto; text-align: center; } .section__title { font-size: clamp(1.95rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -0.025em; } .section__lead { font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--text-dim); } /* A handwritten line above a heading — "Not just a review." */ .script { display: block; font-family: var(--font-script); font-weight: 600; font-size: clamp(1.7rem, 3.8vw, 2.5rem); line-height: 1; color: var(--gold); margin-bottom: 0.4rem; transform: rotate(-2deg); transform-origin: left bottom; } .section__head--center .script { transform-origin: center bottom; } /* ------------------------------------------------------------ buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.005em; padding: 0.9rem 1.75rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease); } .btn svg { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* The primary action. Navy on a light surface, gold on a dark one. */ .btn--gold { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 10px 26px var(--btn-shadow); } .btn--gold:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: 0 16px 34px var(--btn-hover-shadow); } .btn--ghost { border-color: var(--ghost-line); color: var(--ghost-fg); background: transparent; } .btn--ghost:hover { color: var(--ghost-fg); border-color: var(--gold); background: var(--ghost-hover); transform: translateY(-2px); } .btn--sm { padding: 0.62rem 1.3rem; font-size: 0.86rem; } /* a state, not an action — used for classes that have already started */ .btn[disabled], .btn[disabled]:hover { cursor: not-allowed; background: var(--tint); border-color: var(--hairline); color: var(--text-dimmer); box-shadow: none; transform: none; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.9rem; } .btn-row--center { justify-content: center; } /* --------------------------------------------------------------- nav --- */ .nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); box-shadow: 0 8px 28px rgba(15, 31, 66, 0.05); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; } .brand { display: flex; align-items: center; gap: 0.7rem; } .brand:hover { color: inherit; } /* The white mark sits in a navy badge so it reads on the light header; in the navy footer the badge simply becomes a slightly lighter square. */ .brand__mark { width: 44px; height: 44px; flex: none; border-radius: 14px; object-fit: contain; padding: 7px; background: var(--navy-700); box-shadow: 0 6px 14px rgba(13, 35, 80, 0.25); } .brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; white-space: nowrap; color: var(--text); line-height: 1; } .brand__tag { display: block; white-space: nowrap; font-family: var(--font-body); font-size: 0.63rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dimmer); margin-top: 0.28rem; font-weight: 500; } .nav__links { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; } .nav__links a { color: var(--text-dim); white-space: nowrap; font-size: 0.93rem; font-weight: 500; position: relative; padding-block: 0.35rem; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--gold); transition: right 0.25s var(--ease); } .nav__links a:hover { color: var(--text); } .nav__links a:hover::after { right: 0; } .nav__cta { display: inline-flex; } /* The CTA inside the link list exists only for the collapsed mobile menu — the standalone .nav__cta covers desktop, so hide this one to avoid two. */ .nav__links .btn { display: none; } .nav__toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--hairline); border-radius: 12px; background: transparent; cursor: pointer; padding: 0; place-items: center; } .nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.22s var(--ease), opacity 0.22s var(--ease); } .nav__toggle span { position: relative; } .nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; } .nav__toggle span::before { top: -6px; } .nav__toggle span::after { top: 6px; } .nav__toggle[aria-expanded="true"] span { background: transparent; } .nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } /* -------------------------------------------------------------- hero --- */ .hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 7vw, 5.5rem); overflow: hidden; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hero__title { font-size: clamp(2.55rem, 6vw, 4.15rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin-bottom: 1.15rem; } /* The last line of the headline, in gold with a hand-drawn underline */ .hero__accent { position: relative; display: inline-block; color: var(--gold-deep); white-space: nowrap; } .hero__accent::after { content: ""; position: absolute; left: 0.02em; right: 0.02em; bottom: -0.22em; height: 0.3em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 40 6, 90 4, 197 9' fill='none' stroke='%23e7b466' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; } .hero__spark { display: inline-block; width: 0.55em; height: 0.55em; margin-left: 0.12em; vertical-align: 0.45em; fill: none; stroke: var(--gold-deep); stroke-width: 9; stroke-linecap: round; } .hero__lead { font-size: clamp(1.02rem, 1.7vw, 1.16rem); color: var(--text-dim); max-width: 33rem; } .hero__trust { display: flex; flex-wrap: wrap; gap: 0.9rem 0; list-style: none; margin: 2.3rem 0 0; padding: 0; } .hero__trust li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; font-weight: 600; color: var(--text); padding-right: 1.3rem; margin-right: 1.3rem; border-right: 1px solid var(--line-mid); } .hero__trust li:last-child { border-right: 0; margin-right: 0; padding-right: 0; } .hero__ico { width: 36px; height: 36px; flex: none; border-radius: 50%; background: rgba(231, 180, 102, 0.22); display: grid; place-items: center; } .hero__ico svg { width: 19px; height: 19px; fill: var(--gold-ico); } /* kept for the review-pack page, which lists its checks this way */ .hero__checks { display: flex; flex-wrap: wrap; gap: 0.75rem 1.85rem; list-style: none; margin: 2.4rem 0 0; padding: 0; } .hero__checks li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; font-weight: 600; color: var(--text); } .check-dot { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--gold); display: grid; place-items: center; } .check-dot svg { width: 13px; height: 13px; stroke: var(--on-gold); } /* Photo in a soft blob, with doodles around it and a floating note card */ .hero__visual { position: relative; padding: 1.5rem 0 4.75rem 1.25rem; } .hero__blob { position: relative; aspect-ratio: 1 / 0.92; border-radius: 48% 52% 46% 54% / 55% 42% 58% 45%; overflow: hidden; border: 7px solid #fff; box-shadow: var(--shadow-lg); background: var(--navy-700); } .hero__blob img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; } .hero__doodle { position: absolute; pointer-events: none; fill: none; stroke: var(--navy-600); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; } .hero__doodle--gold { stroke: var(--gold-dark); } .hero__doodle--a { width: 56px; top: 0; left: 0; } .hero__doodle--b { width: 70px; top: 6%; right: -0.5rem; } .hero__doodle--c { width: 42px; top: 46%; right: -1.6rem; } .hero__doodle--d { width: 48px; bottom: 22%; left: -0.4rem; } .hero__card { position: absolute; left: 0; bottom: 0; width: min(92%, 23rem); display: grid; grid-template-columns: 50px 1fr; gap: 0.9rem; align-items: start; padding: 1.05rem 1.2rem 1.05rem 1.05rem; background: #fff; border: 1px solid var(--hairline); border-radius: 22px; box-shadow: var(--shadow-lg); } .hero__card-ico { width: 50px; height: 50px; border-radius: 15px; background: rgba(231, 180, 102, 0.24); display: grid; place-items: center; } .hero__card-ico svg { width: 26px; height: 26px; fill: var(--gold-ico); } .hero__card b { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--text); line-height: 1.3; margin-bottom: 0.25rem; } .hero__card p { font-size: 0.84rem; line-height: 1.5; color: var(--text-dim); margin: 0; } .hero__card a { font-weight: 600; } /* --------------------------------------------------------- pillars --- */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(1.75rem, 4vw, 3rem); text-align: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); } .pillar__ico { width: 98px; height: 98px; margin: 0 auto 1.25rem; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--navy-500), var(--navy-800)); border: 3px solid rgba(231, 180, 102, 0.6); box-shadow: 0 0 0 9px rgba(231, 180, 102, 0.09), 0 18px 40px rgba(3, 9, 24, 0.5); display: grid; place-items: center; } .pillar__ico svg { width: 46px; height: 46px; fill: var(--gold); } .pillar h3 { font-size: 1.15rem; margin-bottom: 0.45rem; } .pillar p { font-size: 0.93rem; color: var(--text-dim); max-width: 22rem; margin-inline: auto; } /* ------------------------------------------------- two-column feature --- */ .feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .feature--flip > :first-child { order: 2; } .feature .section__head { margin-bottom: 1.6rem; } .feature__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; } .feature__list li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; font-size: 0.97rem; color: var(--text-dim); } .feature__list b { color: var(--text); font-weight: 600; } /* the enrolment card on the home page fills its column */ .feature .ccard { max-width: 26rem; margin-inline: auto; width: 100%; } /* ------------------------------------------------------------ levels --- */ .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); gap: clamp(1.15rem, 2.4vw, 1.75rem); } .level { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.24s var(--ease), border-color 0.24s var(--ease), background-color 0.24s var(--ease); } .level:hover { transform: translateY(-6px); border-color: rgba(231, 180, 102, 0.45); background: var(--card-hover); } .level__art { position: relative; isolation: isolate; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: clamp(1rem, 3vw, 1.6rem); border-bottom: 1px solid var(--hairline); background: radial-gradient(125% 135% at 20% 10%, var(--navy-500) 0%, #164e8b 32%, #0b1f45 74%, var(--navy-900) 100%); } .level__art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("assets/constellation.svg") center / cover no-repeat; opacity: 0.7; pointer-events: none; } .level__art svg { width: 100%; height: auto; display: block; } .level__body { padding: 1.5rem 1.5rem 1.7rem; } .level__badge { display: inline-block; font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-gold); background: linear-gradient(180deg, var(--gold-light), var(--gold)); padding: 0.32rem 0.85rem; border-radius: 999px; margin-bottom: 0.85rem; } .level__body h3 { font-size: 1.12rem; margin-bottom: 0.35rem; } .level__subjects { font-size: 0.87rem; color: var(--gold-text); font-weight: 600; margin-bottom: 0.7rem; } .level__body p { font-size: 0.93rem; color: var(--text-dim); } /* --------------------------------------------------------------- why --- */ .why__grid { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: clamp(2.25rem, 5vw, 4.5rem); align-items: start; } .why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; } .why__item { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; } .why__item h3 { font-size: 1.05rem; margin-bottom: 0.3rem; } .why__item p { font-size: 0.94rem; color: var(--text-dim); } .tick { width: 30px; height: 30px; flex: none; border-radius: 50%; background: rgba(231, 180, 102, 0.16); border: 1px solid rgba(231, 180, 102, 0.5); display: grid; place-items: center; margin-top: 0.15rem; } .tick svg { width: 15px; height: 15px; stroke: var(--gold); } /* ----------------------------------------------------------- process --- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(1.15rem, 2.4vw, 1.6rem); counter-reset: step; } .step { position: relative; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 2.4rem 1.7rem 2rem; text-align: center; transition: transform 0.24s var(--ease), border-color 0.24s var(--ease); } .step:hover { transform: translateY(-5px); border-color: rgba(231, 180, 102, 0.4); } .step__num { width: 62px; height: 62px; margin: 0 auto 1.25rem; border-radius: 50%; background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--on-gold); font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(231, 180, 102, 0.22); } .step h3 { font-size: 1.12rem; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 0.55rem; } .step p { font-size: 0.93rem; color: var(--text-dim); } /* ---------------------------------------------------------- features --- */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); gap: clamp(1.15rem, 2.4vw, 1.75rem); } .tile { position: relative; isolation: isolate; min-height: clamp(255px, 30vw, 310px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(1.5rem, 3vw, 2.1rem); border-radius: var(--radius-lg); border: 1px solid var(--hairline); overflow: hidden; box-shadow: var(--shadow); background: radial-gradient(125% 135% at 18% 8%, var(--navy-500) 0%, #164e8b 30%, #0b1f45 72%, var(--navy-900) 100%); transition: transform 0.24s var(--ease), border-color 0.24s var(--ease); } .tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("assets/constellation.svg") center / cover no-repeat; opacity: 0.7; pointer-events: none; } .tile:hover { transform: translateY(-5px); border-color: rgba(231, 180, 102, 0.4); } .tile__art { width: min(64%, 205px); margin-bottom: clamp(1rem, 2.4vw, 1.5rem); } .tile__art svg { width: 100%; height: auto; display: block; } .tile__title { font-size: clamp(1.02rem, 2.1vw, 1.28rem); text-transform: uppercase; letter-spacing: 0.035em; margin: 0 0 0.45rem; } .tile__sub { font-size: clamp(0.84rem, 1.6vw, 0.95rem); color: var(--text-dim); margin: 0; } /* ----------------------------------------------------------- lessons --- */ .lesson { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; } /* The thumbnail carries baked-in text, so it must keep its native 16:9 — filling the column height instead would crop the title off both sides. */ .lesson__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .lesson__body { padding: clamp(1.75rem, 3.5vw, 2.75rem); padding-left: 0; } /* --------------------------------------------------------- practice --- */ .pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(1.15rem, 2.4vw, 1.6rem); } .pcard { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 1.7rem 1.5rem 1.6rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; transition: transform 0.24s var(--ease), border-color 0.24s var(--ease); } .pcard:hover { transform: translateY(-5px); border-color: rgba(231, 180, 102, 0.4); } .pcard__tag { font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); } .pcard h3 { font-size: 1.12rem; margin: 0; } .pcard p { font-size: 0.88rem; color: var(--text-dim); margin: 0 0 1rem; } .pcard .btn { margin-top: auto; } .pgrid__note { text-align: center; font-size: 0.9rem; color: var(--text-dimmer); margin-top: clamp(1.8rem, 4vw, 2.5rem); } /* quick-jump chips + category sections on the practice hub */ .pchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; margin-bottom: clamp(2rem, 4.5vw, 3rem); } .pchips a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 1rem; border: 1px solid var(--hairline); border-radius: 999px; font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; color: var(--text-dim); transition: border-color 0.15s var(--ease), color 0.15s var(--ease); } .pchips a:hover { border-color: var(--gold-text); color: var(--gold-text); } .pchips a span { background: rgba(231, 180, 102, 0.16); color: var(--gold-text); border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.72rem; } .pgroup { scroll-margin-top: 90px; } .pgroup + .pgroup { margin-top: 0.85rem; } .pgroup__title { display: flex; align-items: center; gap: 0.8rem; cursor: pointer; list-style: none; padding: 1.05rem 1.3rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--card); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--text); transition: border-color 0.15s var(--ease); user-select: none; } .pgroup__title::-webkit-details-marker { display: none; } .pgroup__title:hover { border-color: rgba(231, 180, 102, 0.45); } .pgroup[open] > .pgroup__title { border-color: rgba(231, 180, 102, 0.45); } .pgroup__count { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--text-dimmer); letter-spacing: 0.02em; } .pgroup__chev { margin-left: auto; width: 10px; height: 10px; flex: none; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); transition: transform 0.2s var(--ease); } .pgroup[open] .pgroup__chev { transform: rotate(225deg); } .pgroup .pgrid { padding: 1.2rem 0.2rem 1.8rem; } .quiz { max-width: 46rem; margin-inline: auto; } .quiz__back { background: none; border: 0; padding: 0; margin-bottom: 1.4rem; color: var(--gold-text); font: inherit; font-weight: 600; cursor: pointer; } .quiz__back:hover { color: var(--gold-text-hi); } .quiz__meta { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 0.6rem; } /* level tabs + set chips inside a topic */ .quiz__pick { margin: 1.2rem 0 1.6rem; display: grid; gap: 0.8rem; } .lvl-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.3rem; border: 1px solid var(--hairline); border-radius: 14px; background: var(--well); width: fit-content; } .lvl-tabs button { font: inherit; font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; color: var(--text-dim); background: none; border: 0; border-radius: 10px; padding: 0.5rem 1rem; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .lvl-tabs button:hover { color: var(--text); } .lvl-tabs button.is-active { background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--on-gold); } .set-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; } .set-chips button { font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); background: none; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.35rem 0.95rem; cursor: pointer; transition: border-color 0.15s var(--ease), color 0.15s var(--ease); } .set-chips button:hover { border-color: var(--gold-text); color: var(--gold-text); } .set-chips button.is-active { border-color: var(--gold-text); background: rgba(231, 180, 102, 0.14); color: var(--gold-text); } .pq { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--card); padding: 1.4rem 1.5rem 1.25rem; margin: 0 0 1.15rem; } .pq__text { font-size: 1.02rem; color: var(--text); margin: 0; padding: 0 0 0.9rem; line-height: 1.5; } .pq__text b { color: var(--gold-text); margin-right: 0.35rem; } .pq__choices { display: grid; gap: 0.55rem; } .pq__choice { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.9rem; border: 1px solid var(--hairline); border-radius: 12px; cursor: pointer; font-size: 0.95rem; color: var(--text-dim); transition: border-color 0.15s var(--ease), background 0.15s var(--ease); } .pq__choice:hover { border-color: rgba(231, 180, 102, 0.45); } .pq__choice input { position: absolute; opacity: 0; pointer-events: none; } .pq__letter { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--hairline); display: grid; place-items: center; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; } .pq__choice:has(input:checked) { border-color: var(--gold-text); background: rgba(231, 180, 102, 0.09); color: var(--text); } .pq__choice:has(input:checked) .pq__letter { background: var(--gold); border-color: var(--gold-text); color: var(--on-gold); } .pq__choice.is-right { border-color: var(--good); background: var(--good-soft); color: var(--text); } .pq__choice.is-right .pq__letter { background: var(--good); border-color: var(--good); color: var(--on-good); } .pq__choice.is-wrong { border-color: var(--bad); background: var(--bad-soft); } .pq__choice.is-wrong .pq__letter { background: var(--bad); border-color: var(--bad); color: var(--on-bad); } .pq__why { margin: 1rem 0 0; padding: 0.8rem 1rem; border-left: 2px solid var(--gold); border-radius: 0 10px 10px 0; background: var(--well); font-size: 0.9rem; color: var(--text-dim); } .pq__why b { color: var(--text); } /* typeset math: stacked fractions and radicals with a vinculum */ .frac { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; line-height: 1.15; margin: 0 0.12em; font-size: 0.88em; } .frac__t { padding: 0 0.3em 0.1em; border-bottom: 1.5px solid currentColor; } .frac__b { padding: 0.1em 0.3em 0; } .rad { white-space: nowrap; } .rad__idx { font-size: 0.62em; margin-right: -0.4em; vertical-align: 0.7em; } .rad__sign { margin-right: -0.08em; } .rad__body { border-top: 1.5px solid currentColor; padding: 0.06em 0.25em 0 0.12em; display: inline-block; line-height: 1.2; } .quiz__foot { margin-top: 1.8rem; } .quiz__warn { color: var(--bad); font-weight: 600; font-size: 0.95rem; margin-bottom: 0.9rem; } .quiz__score { margin-top: 1.8rem; padding: 1.6rem; border: 1px solid rgba(231, 180, 102, 0.4); border-radius: var(--radius-lg); background: var(--card); text-align: center; } .quiz__score strong { display: block; font-family: var(--font-display); font-size: 2.4rem; color: var(--gold-text); line-height: 1.1; } .quiz__score span { color: var(--text-dim); font-size: 0.95rem; } /* Printable problem sheet — hidden on screen, the only thing in print */ #printArea { display: none; } @media print { body > *:not(#printArea) { display: none !important; } body { background: #fff; } #printArea { display: block; color: #111; font-family: Georgia, "Times New Roman", serif; font-size: 12pt; line-height: 1.5; } .print__head { border-bottom: 2px solid #111; padding-bottom: 8pt; margin-bottom: 14pt; } .print__head div { font-size: 10pt; letter-spacing: 0.06em; } .print__head h1 { font-size: 17pt; margin: 4pt 0; color: #111; } .print__head p { font-size: 11pt; margin: 0; } .print__q { break-inside: avoid; margin-bottom: 11pt; } .print__q p { margin: 0 0 3pt; } .print__q ol { margin: 0 0 0 18pt; padding: 0; } .print__q li { margin: 1pt 0; } .print__key { break-before: page; } .print__key h2 { font-size: 14pt; border-bottom: 1.5px solid #111; padding-bottom: 5pt; color: #111; } .print__key ol { margin-left: 18pt; } .print__key li { margin-bottom: 5pt; font-size: 10.5pt; } .print__foot { margin-top: 14pt; font-size: 10pt; color: #444; } #printArea .frac { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; line-height: 1.1; font-size: 0.9em; } #printArea .frac__t { border-bottom: 1pt solid #111; padding: 0 0.25em; } #printArea .frac__b { padding: 0 0.25em; } #printArea .rad__body { border-top: 1pt solid #111; padding: 1pt 0.2em 0 0.1em; display: inline-block; } #printArea .rad__idx { font-size: 0.6em; vertical-align: 0.7em; margin-right: -0.3em; } } /* ------------------------------------------------ teachers slideshow --- */ .slideshow { position: relative; max-width: 46rem; margin-inline: auto; } .slideshow__viewport { overflow: hidden; border-radius: var(--radius-lg); } .slideshow__track { display: flex; transition: transform 0.45s var(--ease); } .slideshow__track > * { flex: 0 0 100%; min-width: 0; } .slideshow__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--card); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); transition: background 0.2s var(--ease), transform 0.2s var(--ease); } .slideshow__arrow svg { width: 20px; height: 20px; stroke: var(--gold); } .slideshow__arrow--prev { left: -14px; } .slideshow__arrow--next { right: -14px; } .slideshow__arrow:hover { background: var(--gold); } .slideshow__arrow:hover svg { stroke: var(--on-gold); } .slideshow__dots { display: flex; justify-content: center; gap: 0.55rem; margin-top: 1.2rem; } .slideshow__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--line-mid); cursor: pointer; transition: background 0.2s var(--ease), transform 0.2s var(--ease); } .slideshow__dots button:hover { background: var(--line-strong); } .slideshow__dots button[aria-current="true"] { background: var(--gold); transform: scale(1.2); } /* One teacher only — hide the slideshow chrome (set from JS) */ .slideshow[data-single] .slideshow__arrow, .slideshow[data-single] .slideshow__dots { display: none; } .tcard { display: flex; align-items: center; justify-content: center; gap: clamp(1.6rem, 4vw, 3rem); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 2.75rem); } .tcard__photo { width: clamp(120px, 18vw, 168px); height: auto; aspect-ratio: 1; flex: none; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); background: radial-gradient(120% 120% at 30% 20%, var(--navy-500) 0%, var(--navy-700) 70%); box-shadow: 0 12px 30px rgba(3, 9, 24, 0.45); } .tcard__role { display: inline-block; font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 0.3rem; } .tcard__name { font-size: clamp(1.3rem, 2.6vw, 1.65rem); margin-bottom: 0.95rem; } .tcard__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .tcard__facts li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.95rem; font-weight: 600; color: var(--text); text-align: left; } @media (max-width: 560px) { .tcard { flex-direction: column; text-align: center; } .tcard__facts { justify-content: center; } .slideshow__arrow { width: 38px; height: 38px; } .slideshow__arrow--prev { left: -8px; } .slideshow__arrow--next { right: -8px; } } /* --------------------------------------------------------------- cta --- */ .cta { text-align: center; } .cta__title { font-size: clamp(1.9rem, 4.6vw, 3rem); margin-bottom: 0.7rem; } .cta__lead { font-size: clamp(1rem, 1.7vw, 1.15rem); max-width: 38rem; margin-inline: auto; } /* ------------------------------------------------------------ footer --- */ .footer { background: var(--navy-900); border-top: 1px solid var(--hairline); } .footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); padding-block: clamp(3rem, 6vw, 4.25rem); } .footer__about p { font-size: 0.93rem; max-width: 26rem; margin-top: 1.1rem; } .footer h4 { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 1.15rem; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .footer ul a, .footer address a { color: var(--text-dim); font-size: 0.93rem; } .footer ul a:hover, .footer address a:hover { color: var(--gold-text); } .footer address { font-style: normal; font-size: 0.93rem; display: grid; gap: 0.8rem; } .footer address span { display: flex; align-items: center; gap: 0.65rem; } .c-ico { width: 17px; height: 17px; flex: none; fill: var(--gold-ico); } .socials { display: flex; gap: 0.6rem; margin-top: 1.6rem; } .socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hairline); display: grid; place-items: center; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease); } .socials a:hover { background: var(--gold); border-color: var(--gold-text); transform: translateY(-2px); } .socials svg { width: 17px; height: 17px; fill: var(--text-dim); } .socials a:hover svg { fill: var(--on-gold); } .footer__bottom { border-top: 1px solid var(--hairline); padding-block: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; align-items: center; font-size: 0.86rem; color: var(--text-dimmer); } /* ===================================================== lesson pages === */ .crumb { display: flex; flex-wrap: wrap; gap: 0.45rem; font-size: 0.86rem; color: var(--text-dimmer); margin-bottom: 1.4rem; list-style: none; padding: 0; } .crumb li::after { content: "/"; margin-left: 0.45rem; color: var(--text-dimmer); } .crumb li:last-child::after { content: ""; } .crumb a { color: var(--text-dim); } .crumb a:hover { color: var(--gold-text); } /* ---- index of lessons ---- */ .lessons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(1.15rem, 2.4vw, 1.75rem); } .lcard { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.24s var(--ease), border-color 0.24s var(--ease), background-color 0.24s var(--ease); } /* Gold rule across the top stands in for the thumbnail these cards dropped. */ .lcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold) 0%, rgba(231, 180, 102, 0) 72%); transition: opacity 0.24s var(--ease); opacity: 0.75; } .lcard:hover { transform: translateY(-6px); border-color: rgba(231, 180, 102, 0.45); background: var(--card-hover); } .lcard:hover::before { opacity: 1; } .lcard__body { padding: clamp(1.6rem, 3vw, 2rem) clamp(1.4rem, 2.6vw, 1.75rem) clamp(1.7rem, 3vw, 2rem); display: flex; flex-direction: column; flex: 1; } .lcard__meta { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; margin-bottom: 0.6rem; } .lcard h3 { font-size: clamp(1.14rem, 2.2vw, 1.3rem); margin-bottom: 0.55rem; } .lcard p { font-size: 0.93rem; color: var(--text-dim); margin-bottom: 1.2rem; } .lcard__go { margin-top: auto; font-weight: 700; font-size: 0.9rem; } .lcard--soon { align-items: center; justify-content: center; text-align: center; padding: clamp(2rem, 5vw, 3rem); border-style: dashed; border-color: rgba(231, 180, 102, 0.4); min-height: 230px; } .lcard--soon:hover { transform: none; } .lcard--soon h3 { color: var(--gold-text); } /* ---- the lesson itself ---- */ .lesson-article { max-width: 62rem; margin-inline: auto; } .problem-card { border: 2px solid var(--gold); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow); padding: clamp(1.5rem, 3.5vw, 2.25rem); text-align: center; margin-top: 1.9rem; } .problem-card__label { font-family: var(--font-display); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 0.85rem; } .eq { font-family: var(--font-display); font-weight: 700; color: var(--text); line-height: 1.35; text-align: center; margin: 0; letter-spacing: -0.01em; } .eq--xl { font-size: clamp(1.85rem, 6vw, 3rem); } .eq--lg { font-size: clamp(1.45rem, 4.6vw, 2.15rem); } .eq--md { font-size: clamp(1.15rem, 3.4vw, 1.5rem); } .gold { color: var(--gold-text); } .dim { color: var(--text-dimmer); } .step-block { border-top: 1px solid var(--hairline); padding-top: clamp(2.25rem, 5vw, 3.25rem); margin-top: clamp(2.25rem, 5vw, 3.25rem); } .step-block:first-of-type { border-top: 0; margin-top: 0; } .step-head { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; margin-bottom: 1.5rem; } .step-head h2 { font-size: clamp(1.2rem, 2.8vw, 1.6rem); margin: 0; } .step-chip { width: 44px; height: 44px; flex: none; border-radius: 50%; background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--on-gold); font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; display: grid; place-items: center; } .step-note { color: var(--text-dim); text-align: center; margin-bottom: 1.5rem; } .abc-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin: 1.4rem 0; } .abc { border: 2px solid var(--gold); border-radius: 12px; padding: 0.6rem 1.15rem; font-family: var(--font-display); font-weight: 700; color: var(--gold-text); font-size: clamp(0.95rem, 2.4vw, 1.1rem); } .abc--b { border-color: var(--line-strong); color: var(--text); } .result-bar { background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--on-gold); border-radius: 14px; padding: clamp(0.9rem, 2.4vw, 1.25rem); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 3.2vw, 1.5rem); text-align: center; margin: 1.5rem auto 0; max-width: 34rem; } .callout { border: 1.5px solid var(--gold); border-radius: var(--radius); background: rgba(231, 180, 102, 0.07); padding: clamp(1.1rem, 2.6vw, 1.5rem); margin-top: 1.75rem; text-align: center; } .callout h3 { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 0.6rem; } .callout p { color: var(--text-dim); font-size: 0.96rem; } .table-wrap { overflow-x: auto; margin-top: 1.5rem; } .ftable { width: 100%; border-collapse: collapse; min-width: 27rem; } .ftable th, .ftable td { border: 1px solid var(--hairline); padding: 0.85rem 1rem; text-align: center; font-size: 0.98rem; } .ftable th { font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); background: var(--tint); } .ftable td:first-child { color: var(--gold-text); font-weight: 600; } .ftable .no { color: var(--bad); } .ftable .yes { color: var(--good); font-weight: 700; } .ftable tr.win td { background: rgba(231, 180, 102, 0.16); border-color: rgba(231, 180, 102, 0.5); } .ftable tr.win td:first-child { color: var(--gold-text-hi); } .split-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 4vw, 3rem); margin: 1.4rem 0; } .split-chip { background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--on-gold); border-radius: 12px; padding: 0.7rem 1.6rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 2.8vw, 1.25rem); } .gcf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; margin-top: 1.5rem; } .gcf { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.15rem 1.3rem; background: var(--card); text-align: center; } .gcf h4 { font-size: 0.92rem; color: var(--gold-text); margin-bottom: 0.6rem; } .gcf p { font-family: var(--font-display); font-size: 0.95rem; color: var(--text-dim); margin: 0.25rem 0; } .foil { display: grid; gap: 0.75rem; margin-top: 1.5rem; } .foil__row { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 1rem; align-items: center; background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 0.9rem 1.25rem; } .foil__label { font-weight: 600; color: var(--text); } .foil__math { font-family: var(--font-display); font-weight: 700; color: var(--gold-text); font-size: clamp(0.98rem, 2.4vw, 1.15rem); text-align: center; } .foil__note { color: var(--text-dimmer); font-size: 0.86rem; text-align: right; } /* ---- variable boxes (naming the unknown) ---- */ .varbox-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin: 1.7rem 0; } .varbox { border: 2px solid var(--line-strong); border-radius: 14px; padding: 1.1rem 1.7rem; text-align: center; min-width: 10rem; } .varbox--gold { border-color: var(--gold-text); } .varbox__label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.4rem; } .varbox__val { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 5vw, 2.15rem); color: var(--gold-text); line-height: 1.1; } .varbox__op { background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--on-gold); border-radius: 999px; padding: 0.4rem 1rem; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; white-space: nowrap; } /* ---- equation + running commentary ---- */ .solve { display: grid; gap: 1.1rem; margin-top: 1.6rem; } .solve__row { display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: center; } .solve__eq { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 3.4vw, 1.55rem); color: var(--text); text-align: right; margin: 0; } .solve__rule { background: var(--hairline); align-self: stretch; } .solve__note { color: var(--text-dimmer); font-size: 0.92rem; } /* ---- row-label tables (past/present/future, speed/time/distance) ---- */ .ftable th[scope="row"] { font-family: var(--font-body); font-size: 0.96rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--gold-text); background: transparent; } .ftable td.hl { background: rgba(231, 180, 102, 0.17); border-color: rgba(231, 180, 102, 0.5); color: var(--gold-text-hi); font-weight: 700; } .ftable td.muted { color: var(--text-dimmer); } .ftable th small { display: block; font-weight: 500; opacity: 0.75; letter-spacing: 0.06em; } /* ---- stacked fractions ---- */ .frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 0.2em; line-height: 1.2; } .eq sub, .solve__eq sub, .foil__math sub { font-size: 0.62em; } .frac__n { border-bottom: 2px solid currentColor; padding: 0 0.25em 0.06em; } .frac__d { padding: 0.06em 0.25em 0; } /* ---- multiple / factor chips ---- */ .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0.55rem 0; } .chip { border: 1px solid var(--hairline); border-radius: 11px; padding: 0.55rem 0.95rem; min-width: 3.1rem; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(0.9rem, 2.2vw, 1.05rem); color: var(--text); } .chip--label { border-color: var(--line-strong); background: var(--tint); color: var(--gold-text); } .chip--hit { background: linear-gradient(180deg, var(--gold-light), var(--gold)); border-color: var(--gold-text); color: var(--on-gold); } /* ---- small gold operator tag (× 24, × 2) ---- */ .tag { display: inline-block; background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--on-gold); border-radius: 999px; padding: 0.32rem 0.85rem; font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; white-space: nowrap; } /* ---- labelled equation rows (E1 / E2) ---- */ .eqrow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.9rem; margin: 0.7rem 0; } .eqbadge { flex: none; background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--on-gold); border-radius: 9px; padding: 0.35rem 0.8rem; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; } /* ---- column addition of two equations ---- */ .addbox { max-width: 34rem; margin: 1.5rem auto 0; } .addbox__rule { border-top: 2px solid var(--hairline); margin: 0.85rem 0; } .strike { position: relative; color: var(--text-dimmer); } .strike::after { content: ""; position: absolute; left: -12%; right: -12%; top: 50%; height: 2px; background: var(--bad); transform: rotate(-12deg); } /* ---- mixture vessels ---- */ .vessels { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem; margin: 1.7rem 0; } .vessel { border: 2px solid var(--line-strong); border-radius: 14px; padding: 1rem 1.4rem; text-align: center; min-width: 8.5rem; } .vessel--gold { border-color: var(--gold-text); } .vessel__label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); padding-bottom: 0.55rem; border-bottom: 1px solid var(--hairline); margin-bottom: 0.7rem; } .vessel__pct { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.45rem, 4vw, 1.95rem); color: var(--text); line-height: 1.1; } .vessel__vol { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text-dim); margin-top: 0.35rem; } .vessel--gold .vessel__pct, .vessel--gold .vessel__vol { color: var(--gold-text); } .vessel-op { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; color: var(--text-dim); } /* ---- pure-part layer jars ---- */ .layers { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(0.7rem, 2.4vw, 1.4rem); margin: 1.6rem 0; } .layer { width: min(100%, 11rem); } .layer__title { font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-dim); text-align: center; margin-bottom: 0.5rem; } .layer__jar { border: 2px solid var(--gold); border-radius: 10px; overflow: hidden; } .layer__water { background: var(--tint); padding: 1.5rem 0.6rem; text-align: center; color: var(--text-dim); font-size: 0.9rem; } .layer__pure { background: rgba(231, 180, 102, 0.22); border-top: 2px solid var(--gold); padding: 0.85rem 0.5rem; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(0.88rem, 2.1vw, 1rem); color: var(--gold-text-hi); } .layer__cap { text-align: center; font-size: 0.84rem; color: var(--text-dimmer); margin-top: 0.5rem; } /* ---- segmented job bars (work problems) ---- */ .slices { display: flex; border: 2px solid var(--line-strong); border-radius: 8px; overflow: hidden; } .slice { flex: 1; height: 2.7rem; border-right: 1px solid var(--line-mid); } .slice:last-child { border-right: 0; } .slice--a { background: rgba(231, 180, 102, 0.48); } .slice--b { background: var(--blue-fill); } .rate-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(0.8rem, 2.4vw, 1.4rem); align-items: center; margin: 1.2rem 0; } .rate-row__who { border: 1px solid var(--hairline); background: var(--card); border-radius: 12px; padding: 0.75rem 1.1rem; text-align: center; min-width: 7.5rem; } .rate-row__who strong { display: block; font-family: var(--font-display); font-size: 0.98rem; color: var(--text); letter-spacing: 0.04em; text-transform: uppercase; } .rate-row__who span { font-size: 0.82rem; color: var(--text-dim); } .rate-row__rate { font-family: var(--font-display); font-weight: 700; color: var(--gold-text); font-size: clamp(1rem, 2.6vw, 1.2rem); white-space: nowrap; } .slice-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center; font-size: 0.86rem; font-weight: 600; margin-top: 0.6rem; } /* ---- red warning variant of the callout ---- */ .callout--warn { border-color: var(--bad); background: var(--bad-soft); } .callout--warn h3 { color: var(--bad); } /* ---- sequence term strip ---- */ .terms { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; align-items: flex-end; margin: 1.5rem 0; } .term { text-align: center; } .term__lbl { font-family: var(--font-display); font-size: 0.76rem; color: var(--text-dim); margin-bottom: 0.35rem; } .term__box { border: 2px solid var(--line-strong); background: var(--tint); border-radius: 10px; padding: 0.65rem 0.9rem; min-width: 3rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(0.95rem, 2.5vw, 1.25rem); color: var(--text); } .term--on .term__box { border-color: var(--gold-text); background: rgba(231, 180, 102, 0.2); color: var(--gold-text-hi); } .term__jump { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; color: var(--gold-text); margin-top: 0.35rem; } /* ---- coins ---- */ .coins { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin: 1.4rem 0; } .coin { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; } .coin--a { border: 2px solid var(--gold); background: rgba(231, 180, 102, 0.2); color: var(--gold-text-hi); } .coin--b { border: 2px solid var(--blue-line); background: var(--blue-soft); color: var(--blue-text); } .coin--lg { width: 5.5rem; height: 5.5rem; font-size: 1.15rem; } /* ---- inline diagrams ---- */ /* Lesson diagrams get the same treatment as the diagnostic figures: a solid well rather than the band gradient, so the halo below can match it exactly, and every number stays readable wherever a line runs behind it. */ .diagram { margin: 1.6rem 0; } .diagram svg { width: 100%; height: auto; display: block; background: #081735; border: 1px solid var(--hairline); border-radius: 12px; padding: 0.5rem; } .diagram svg text { paint-order: stroke; stroke: #081735; stroke-width: 4px; stroke-linejoin: round; } .flow-bar { border: 1.5px solid var(--gold); background: rgba(231, 180, 102, 0.12); border-radius: var(--radius); padding: clamp(1.15rem, 2.6vw, 1.6rem); text-align: center; margin-top: 1.9rem; } .flow-bar h3 { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 0.7rem; } .flow-bar p { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: clamp(1rem, 2.8vw, 1.28rem); margin-bottom: 0.35rem; } .flow-bar small { color: var(--text-dimmer); } /* -------------------------------------------------------- responsive --- */ @media (max-width: 900px) { .hero__grid, .why__grid, .lesson { grid-template-columns: 1fr; } .lesson__body { padding: 0 clamp(1.4rem, 5vw, 2rem) clamp(1.9rem, 5vw, 2.4rem); } .footer__top { grid-template-columns: 1fr 1fr; } .footer__about { grid-column: 1 / -1; } } @media (max-width: 900px) { .nav__toggle { display: grid; } .nav__cta { display: none; } .nav__links { position: absolute; inset: 74px 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: var(--nav-menu); border-bottom: 1px solid var(--hairline); padding: 0.5rem clamp(1.15rem, 4vw, 2rem) 1.4rem; display: none; } .nav__links[data-open="true"] { display: flex; } .nav__links li { border-top: 1px solid var(--hairline); } .nav__links a { display: block; padding: 0.95rem 0; } .nav__links a::after { display: none; } .nav__links .btn { display: inline-flex; margin-top: 1rem; } } @media (max-width: 560px) { .foil__row { grid-template-columns: 1fr; gap: 0.35rem; text-align: center; } .foil__math, .foil__note { text-align: center; } .rate-row { grid-template-columns: 1fr; gap: 0.6rem; justify-items: center; } .solve__row { grid-template-columns: 1fr; gap: 0.3rem; text-align: center; } .solve__eq { text-align: center; } .solve__note { text-align: center; } .solve__rule { display: none; } .hero__checks { gap: 0.7rem 1.2rem; } .btn { width: 100%; } .btn-row { flex-direction: column; align-items: stretch; } .footer__top { grid-template-columns: 1fr; } .footer__bottom { justify-content: center; text-align: center; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ----------------------------------------------------------- classes --- */ .classes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr)); gap: clamp(1rem, 2vw, 1.35rem); } .ccard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.05rem, 2.2vw, 1.4rem); box-shadow: var(--shadow); } .ccard--open { border-color: rgba(231, 180, 102, 0.5); } .ccard__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.75rem; } .ccard__pill { border-radius: 999px; padding: 0.24rem 0.7rem; font-family: var(--font-display); font-weight: 700; font-size: 0.67rem; letter-spacing: 0.11em; text-transform: uppercase; background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--on-gold); } .ccard__pill--quiet { background: var(--tint-hover); border: 1px solid var(--hairline); color: var(--text-dim); } /* already running — join mid-course. Cool blue keeps the gold pill the loudest. */ .ccard__pill--ongoing { background: var(--blue-soft); border: 1px solid var(--blue-line); color: var(--blue-text); } .ccard h3 { font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.3rem); line-height: 1.25; color: var(--text); margin: 0 0 0.45rem; } .ccard__lead { font-size: 0.89rem; line-height: 1.55; margin: 0 0 1rem; } .ccard__facts { list-style: none; margin: 0 0 1.05rem; padding: 0.95rem 0 0; border-top: 1px solid var(--hairline); display: grid; gap: 0.62rem; } .ccard__fact { display: grid; grid-template-columns: 21px 1fr; gap: 0.6rem; align-items: start; } .ccard__fact svg { width: 17px; height: 17px; fill: var(--gold-ico); margin-top: 0.15rem; } .ccard__fact b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.93rem; color: var(--text); line-height: 1.35; } .ccard__fact span { display: block; font-size: 0.79rem; color: var(--text-dimmer); line-height: 1.45; } .ccard__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.95rem; border-top: 1px solid var(--hairline); margin-bottom: 1rem; } .ccard__price strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 1.65rem); color: var(--gold-text); line-height: 1; } .ccard__price span { font-size: 0.82rem; color: var(--text-dimmer); } .ccard__foot { margin-top: auto; } .ccard__foot .btn { width: 100%; padding: 0.78rem 1.1rem; font-size: 0.8rem; } /* already running: readable, but visibly not on offer */ .ccard--closed { background: var(--tint); box-shadow: none; } .ccard--closed h3 { color: var(--text-dim); } .ccard__closed-note { margin: 0.6rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-dimmer); text-align: center; } .ccard-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-size: 0.86rem; color: var(--text-dimmer); margin: 0 0 1.4rem; } .ccard-legend__dot { color: var(--hairline); padding: 0 0.3rem; } .ccard--soon { align-items: center; justify-content: center; text-align: center; border-style: dashed; background: none; box-shadow: none; } .ccard--soon h3 { color: var(--text-dim); } .ccard--soon p { margin: 0; font-size: 0.88rem; line-height: 1.55; } .ccard__soon-tag { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dimmer); border: 1px dashed var(--line-mid); border-radius: 999px; padding: 0.22rem 0.72rem; margin-bottom: 0.7rem; } /* the three level subgroups on the enrollment page: a .class-tab per level, and a .class-group panel per level holding its own .classes-grid of cards. Only the selected panel is shown — the rest carry `hidden`. */ .class-tabs__list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem); } .class-tab { flex: 1 1 auto; min-width: 0; display: block; text-align: left; cursor: pointer; font: inherit; color: inherit; background: var(--tint); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0.85rem clamp(0.9rem, 2vw, 1.25rem); transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .class-tab:hover { background: var(--tint-hover); border-color: var(--line-mid); } .class-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .class-tab__name { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(0.95rem, 2vw, 1.05rem); line-height: 1.25; color: var(--text-dim); } .class-tab__note { display: block; margin-top: 0.2rem; font-size: 0.75rem; color: var(--text-dimmer); } .class-tab__note--open { color: var(--gold-text); } /* the level being shown */ .class-tab[aria-selected="true"] { background: linear-gradient(180deg, rgba(231, 180, 102, 0.16), rgba(231, 180, 102, 0.06)); border-color: rgba(231, 180, 102, 0.55); } .class-tab[aria-selected="true"] .class-tab__name { color: var(--text); } .class-tab[aria-selected="true"] .class-tab__note { color: var(--gold-text); } .class-group:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .class-group { background: var(--tint); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.1rem, 2.6vw, 1.7rem); } .class-group__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 1.2rem; padding-bottom: clamp(0.9rem, 2vw, 1.15rem); margin-bottom: clamp(1rem, 2.2vw, 1.35rem); border-bottom: 1px solid var(--hairline); } .class-group__badge { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 0.5rem; } .class-group__title { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.2; color: var(--text); margin: 0 0 0.35rem; } .class-group__subjects { margin: 0; font-size: 0.86rem; color: var(--text-dimmer); } /* status of the level, sitting opposite the title */ .class-group__count { margin: 0; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.28rem 0.8rem; font-size: 0.78rem; color: var(--text-dimmer); white-space: nowrap; } .class-group__count--open { border-color: rgba(231, 180, 102, 0.5); color: var(--gold-text); } /* a level with nothing running holds one card, so let it fill the row */ .class-group .ccard--soon:only-child { padding-block: clamp(1.5rem, 3.4vw, 2.2rem); } /* three tabs wrap 2-and-1 on a narrow screen, so stack them instead */ @media (max-width: 620px) { .class-tabs__list { display: grid; gap: 0.5rem; } } @media (max-width: 560px) { .class-group__head { align-items: flex-start; } } /* ------------------------------------------------- enrollment modal --- */ .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: clamp(0.9rem, 4vw, 2rem); } .modal__backdrop { position: absolute; inset: 0; background: rgba(3, 9, 24, 0.74); backdrop-filter: blur(3px); border: 0; padding: 0; cursor: pointer; } .modal__panel { position: relative; width: min(100%, 34rem); max-height: calc(100dvh - 2rem); overflow-y: auto; background: var(--card); border: 1px solid rgba(231, 180, 102, 0.35); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(1.4rem, 4vw, 2.2rem); } .modal__x { position: absolute; top: 0.85rem; right: 0.85rem; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hairline); background: var(--tint); color: var(--text-dim); font-size: 1.25rem; line-height: 1; cursor: pointer; transition: color 0.18s var(--ease), border-color 0.18s var(--ease); } .modal__x:hover { color: var(--gold-text); border-color: var(--gold-text); } .modal__title { font-family: var(--font-display); font-size: clamp(1.4rem, 3.4vw, 1.85rem); line-height: 1.25; color: var(--text); margin: 0 0 0.4rem; padding-right: 2rem; } .modal__sub { font-size: 0.9rem; color: var(--text-dimmer); margin: 0 0 1.6rem; } .field { margin-bottom: 1.05rem; } .field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.87rem; color: var(--text); margin-bottom: 0.4rem; } .field input, .field select { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--tint); border: 1px solid var(--hairline); border-radius: 12px; padding: 0.8rem 0.95rem; } .field select { appearance: none; -webkit-appearance: none; padding-right: 2.7rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e7b466'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 22px 22px; cursor: pointer; } .field select option { color: #0b1a3a; background: var(--cream); } .field input:focus, .field select:focus { outline: none; border-color: var(--gold-text); box-shadow: 0 0 0 3px rgba(231, 180, 102, 0.18); } .field input::placeholder { color: var(--text-dimmer); } .field input:user-invalid, .field select:user-invalid { border-color: var(--bad); } /* a line under a field explaining what the answer is used for */ .field__help { margin: 0.4rem 0 0; font-size: 0.79rem; line-height: 1.5; color: var(--text-dimmer); } .form__note { font-size: 0.84rem; color: var(--text-dimmer); margin: 0.1rem 0 1.5rem; } .modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.7rem; } .modal__actions .btn { padding-left: 1.5rem; padding-right: 1.5rem; } .modal__done { text-align: center; padding: 0.5rem 0 0.2rem; } .modal__done .check-dot { width: 58px; height: 58px; margin: 0 auto 1.2rem; } .modal__done .check-dot svg { width: 27px; height: 27px; } .modal__done h2 { font-family: var(--font-display); font-size: clamp(1.35rem, 3.2vw, 1.7rem); color: var(--text); margin: 0 0 0.7rem; } .modal__done p { margin: 0 auto 1.6rem; max-width: 26rem; } body.is-locked { overflow: hidden; } /* ---------------------------------------------------- contact modal --- */ .clinks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.7rem; } .clink { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 0.95rem; padding: 0.9rem 1.1rem; border: 1px solid var(--hairline); border-radius: 14px; background: var(--tint); text-decoration: none; transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease), transform 0.18s var(--ease); } .clink:hover { border-color: var(--gold-text); background: var(--card-hover); transform: translateY(-2px); } .clink__ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(231, 180, 102, 0.16); border: 1px solid rgba(231, 180, 102, 0.45); } .clink__ico svg { width: 21px; height: 21px; fill: var(--gold-ico); } .clink__txt b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--text); line-height: 1.35; } .clink__txt span { display: block; font-size: 0.87rem; color: var(--text-dimmer); } /* --------------------------------------------------- lesson categories --- */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(1.15rem, 2.4vw, 1.7rem); } .catcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); text-decoration: none; overflow: hidden; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .catcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform 0.24s var(--ease); } .catcard:hover { transform: translateY(-4px); border-color: rgba(231, 180, 102, 0.5); background: var(--card-hover); box-shadow: var(--shadow); } .catcard:hover::before { transform: scaleY(1); } .catcard__ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(231, 180, 102, 0.16); border: 1px solid rgba(231, 180, 102, 0.45); margin-bottom: 1.1rem; } .catcard__ico svg { width: 26px; height: 26px; fill: var(--gold-ico); } .catcard h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 2.8vw, 1.5rem); line-height: 1.25; color: var(--text); margin: 0 0 0.35rem; } .catcard__count { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 0.75rem; } .catcard p { font-size: 0.96rem; margin: 0 0 1.4rem; } .catcard__go { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--gold-text); } .back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; color: var(--text-dim); text-decoration: none; margin-bottom: 1rem; transition: color 0.18s var(--ease); } .back-link:hover { color: var(--gold-text); } /* ------------------------------------------------------- grade groups --- */ .gradehead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: clamp(2.2rem, 5vw, 3rem) 0 1.3rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--hairline); } .gradehead:first-of-type { margin-top: 0; } .gradehead h3 { font-family: var(--font-display); font-size: clamp(1.2rem, 2.6vw, 1.5rem); color: var(--text); margin: 0; } .gradehead__note { font-size: 0.9rem; color: var(--text-dimmer); } .gradehead__tag { border-radius: 999px; padding: 0.24rem 0.7rem; font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(231, 180, 102, 0.16); border: 1px solid rgba(231, 180, 102, 0.45); color: var(--gold-text); } /* ---- lessons page: search + collapsible topic groups ---- */ .lesson-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-bottom: 1.4rem; } .lesson-tools[hidden] { display: none; } .lsearch { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 20rem; min-width: 0; background: var(--card); border: 1px solid var(--hairline); border-radius: 999px; padding: 0.6rem 1rem; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); } .lsearch:focus-within { border-color: rgba(231, 180, 102, 0.6); background: var(--card-hover); } .lsearch__ico { width: 1.05rem; height: 1.05rem; fill: var(--text-dimmer); flex: none; } .lsearch input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-family: var(--font-body); font-size: 0.98rem; outline: none; } .lsearch input::placeholder { color: var(--text-dimmer); } .lsearch input::-webkit-search-cancel-button { display: none; } .lsearch__clear { flex: none; border: 0; background: transparent; color: var(--text-dimmer); font-size: 1.25rem; line-height: 1; padding: 0 0.15rem; cursor: pointer; } .lsearch__clear:hover { color: var(--text); } .lsearch__clear[hidden] { display: none; } .topic-toggle { flex: none; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--text-dim); background: transparent; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.55rem 1rem; cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); } .topic-toggle:hover { border-color: rgba(231, 180, 102, 0.55); color: var(--text); } .search-count { font-size: 0.86rem; color: var(--text-dimmer); margin: -0.6rem 0 1.2rem; } .search-count b { color: var(--gold-text); font-variant-numeric: tabular-nums; } .search-count[hidden] { display: none; } .search-empty { color: var(--text-dim); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.2rem 1.3rem; margin: 0 0 1.4rem; } .search-empty strong { color: var(--gold-text); font-weight: 600; } .search-empty[hidden] { display: none; } .topic { border-bottom: 1px solid var(--hairline); } .topic[hidden] { display: none; } .topic__head { margin: 0; } .topic__btn { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.9rem; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 1.05rem 0.4rem; color: var(--text); border-radius: 10px; transition: background-color 0.2s var(--ease); } .topic__btn:hover { background: var(--card); } .topic__chev { flex: none; width: 0.52rem; height: 0.52rem; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); margin: 0 0.15rem 0 0.1rem; transition: transform 0.22s var(--ease); } .topic__btn[aria-expanded="true"] .topic__chev { transform: rotate(45deg); } .topic__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.4rem); } .topic__note { flex: 1 1 12rem; font-size: 0.88rem; color: var(--text-dimmer); } .topic__count { flex: none; font-family: var(--font-display); font-weight: 700; font-size: 0.76rem; font-variant-numeric: tabular-nums; color: var(--gold-text); background: rgba(231, 180, 102, 0.14); border: 1px solid rgba(231, 180, 102, 0.34); border-radius: 999px; padding: 0.16rem 0.62rem; } .topic__panel { padding: 0.2rem 0 1.7rem; } .topic__panel[hidden] { display: none; } @media (max-width: 640px) { .topic__note { display: none; } .topic__btn { padding: 0.95rem 0.3rem; } } @media (prefers-reduced-motion: reduce) { .topic__chev, .lsearch, .topic-toggle { transition: none; } } .lcard[hidden] { display: none; } /* ------------------------------------------- diagnostic exam page --- */ .dx-start { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: clamp(1.3rem, 3vw, 2rem); } .dx-facts { display: grid; gap: 0.9rem; } .dx-fact { border-left: 3px solid var(--gold); padding-left: 0.95rem; } .dx-fact b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--gold-text); font-variant-numeric: tabular-nums; } .dx-fact span { font-size: 0.88rem; color: var(--text-dim); } .dx-start__body h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 0.9rem; } .dx-pick__lead { margin: 0 0 1.2rem; color: var(--text-dim); font-size: 0.94rem; line-height: 1.6; } /* the four sets, one button each — the ladder from easiest to hardest */ .dx-sets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.7rem; margin-bottom: 1.9rem; } .dx-set { display: block; text-align: left; cursor: pointer; font: inherit; color: inherit; background: var(--tint); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0.95rem 1.05rem 0.85rem; transition: background 0.18s ease, border-color 0.18s ease; } .dx-set:hover { background: var(--tint-hover); border-color: rgba(231, 180, 102, 0.5); } .dx-set:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .dx-set__tag { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.65rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 0.4rem; } .dx-set__name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; line-height: 1.25; color: var(--text); margin-bottom: 0.3rem; } .dx-set__blurb { display: block; font-size: 0.81rem; line-height: 1.5; color: var(--text-dimmer); margin-bottom: 0.7rem; } .dx-set__go { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; color: var(--gold-text); } .dx-rules__h { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); margin: 0 0 0.75rem; } .dx-rules { margin: 0 0 1.6rem; padding-left: 1.1rem; color: var(--text-dim); } .dx-rules li { margin-bottom: 0.5rem; } .dx-resume { margin-top: 1.2rem; color: var(--text-dim); font-size: 0.92rem; } /* ----------------------------------------------- diagnostic figures --- */ /* Hand-written SVG, styled from here rather than inline so the drawings stay short and one edit restyles all of them at once. The ink means something and it is the same in every figure: .s the shape itself .g a measure you are given .f construction / hidden .u what you are solving for */ .dx-fig { margin: 0 0 1rem; } .dx-fig svg { width: 100%; max-width: 22rem; height: auto; display: block; /* solid, so the halo on the numbers below can match it exactly */ background: #081735; border: 1px solid var(--hairline); border-radius: 12px; } .dx-fig .s { fill: none; stroke: #dce6f5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dx-fig .f { fill: none; stroke: #4d6790; stroke-width: 1.6; stroke-linecap: round; } .dx-fig .g { fill: none; stroke: #8fbce8; stroke-width: 2.2; stroke-linecap: round; } .dx-fig .u { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; } .dx-fig .d { stroke-dasharray: 6 5; } .dx-fig .fill { fill: rgba(231, 180, 102, 0.06); } .dx-fig .dot { fill: #dce6f5; } .dx-fig .dotu { fill: var(--gold-ico); } /* Every number is knocked out of whatever sits behind it: the glyph is stroked in the well colour first and filled on top, so a line passing under a label never runs through the digits. */ .dx-fig text { font-family: var(--font-body); font-size: 14px; paint-order: stroke; stroke: #081735; stroke-width: 4px; stroke-linejoin: round; } .dx-fig .tp { fill: var(--cream); font-weight: 600; } .dx-fig .tg { fill: #8fbce8; font-weight: 600; } .dx-fig .tu { fill: var(--gold-ico); font-weight: 700; } .dx-fig .tf { fill: var(--text-dimmer); font-style: italic; } /* the review list repeats the figure, a little smaller */ .dx-rev .dx-fig svg { max-width: 17rem; } /* which set is on screen, above the first question */ .dx-setline { font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 0.4rem; } .dx-link { background: none; border: 0; padding: 0; color: var(--gold-text); font: inherit; text-decoration: underline; cursor: pointer; } /* sticky exam bar — the site nav is 74px tall and sticky above it */ .dx-bar { position: sticky; top: 73px; z-index: 90; background: rgba(9, 25, 59, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); margin-bottom: clamp(1.4rem, 4vw, 2.2rem); } .dx-bar__inner { display: flex; align-items: center; gap: clamp(0.8rem, 2.5vw, 1.6rem); padding-block: 0.7rem; } .dx-bar__side { display: flex; align-items: baseline; gap: 0.35rem; flex: none; } .dx-time { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--gold-text); font-variant-numeric: tabular-nums; } .dx-time.is-low { color: var(--bad); } .dx-time__label { font-size: 0.75rem; color: var(--text-dimmer); } .dx-bar__mid { flex: 1; min-width: 0; } .dx-progress { height: 6px; border-radius: 999px; background: var(--line-mid); overflow: hidden; } .dx-progress span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold-dark), var(--gold)); transition: width 0.25s var(--ease); } .dx-answered { margin: 0.35rem 0 0; font-size: 0.76rem; color: var(--text-dimmer); font-variant-numeric: tabular-nums; } .dx-part { display: flex; align-items: baseline; gap: 0.9rem; font-family: var(--font-display); font-size: clamp(1.15rem, 2.6vw, 1.45rem); margin: clamp(2rem, 5vw, 3rem) 0 1.2rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--hairline); } .dx-part:first-child { margin-top: 0; } .dx-part span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); } .dx-q { border: 1px solid var(--hairline); border-left: 3px solid var(--line-mid); border-radius: var(--radius); background: var(--card); padding: 1.1rem clamp(1rem, 2.5vw, 1.4rem) 1.2rem; margin: 0 0 1rem; transition: border-color 0.2s var(--ease); } .dx-q.is-answered { border-left-color: var(--gold-text); } .dx-q__text { display: flex; gap: 0.75rem; align-items: baseline; margin: 0 0 0.9rem; font-size: 1.02rem; color: var(--text); } .dx-q__num { flex: none; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--gold-text); font-variant-numeric: tabular-nums; min-width: 1.4rem; } .dx-choices { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .dx-choice { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--hairline); border-radius: 10px; padding: 0.6rem 0.85rem; cursor: pointer; transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease); } .dx-choice:hover { background: var(--card-hover); border-color: rgba(231, 180, 102, 0.45); } .dx-choice input { position: absolute; opacity: 0; width: 0; height: 0; } .dx-choice__key { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hairline); font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; color: var(--text-dim); } .dx-choice__txt { font-size: 0.94rem; color: var(--text-dim); } .dx-choice:has(input:checked) { background: rgba(231, 180, 102, 0.1); border-color: var(--gold-text); } .dx-choice:has(input:checked) .dx-choice__key { background: var(--gold); border-color: var(--gold-text); color: var(--on-gold); } .dx-choice:has(input:checked) .dx-choice__txt { color: var(--text); } .dx-choice:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; } .dx-end { margin-top: clamp(2rem, 5vw, 3rem); text-align: center; } .dx-warn { max-width: 44rem; margin: 0 auto 1.2rem; color: var(--text); background: var(--bad-soft); border: 1px solid var(--bad-line); border-radius: var(--radius); padding: 0.9rem 1.1rem; } .dx-warn[hidden] { display: none; } .dx-note { font-size: 0.85rem; color: var(--text-dimmer); margin-top: 1rem; } /* ---- results ---- */ .dx-score { text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); } .dx-score__big { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 12vw, 5.5rem); line-height: 1; color: var(--gold-text); margin: 0.4rem 0 0.2rem; font-variant-numeric: tabular-nums; } .dx-score__big small { font-size: 0.3em; color: var(--text-dimmer); margin-left: 0.4rem; } .dx-score__pct { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin: 0 0 0.6rem; } .dx-band { color: var(--text-dim); max-width: 46ch; margin: 0 auto 0.5rem; } .dx-score__time { font-size: 0.85rem; color: var(--text-dimmer); margin: 0; } .dx-h2 { font-family: var(--font-display); font-size: clamp(1.2rem, 2.6vw, 1.5rem); margin: clamp(2rem, 5vw, 2.8rem) 0 1.1rem; } .dx-review { display: grid; gap: 0.9rem; } .dx-rev { border: 1px solid var(--hairline); border-left: 3px solid var(--bad); border-radius: var(--radius); background: var(--card); padding: 1rem clamp(1rem, 2.5vw, 1.3rem); } .dx-rev--right { border-left-color: var(--gold-text); } .dx-rev[hidden] { display: none; } .dx-rev__q { display: flex; gap: 0.75rem; align-items: baseline; margin: 0 0 0.7rem; color: var(--text); } .dx-rev__line { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; margin: 0 0 0.3rem; font-size: 0.92rem; color: var(--text-dim); } .dx-rev__line span { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dimmer); min-width: 6.5rem; } .dx-rev__line strong { color: var(--gold-text); font-weight: 600; } .dx-rev__line em { color: var(--text-dimmer); } .dx-rev__link { display: inline-block; margin-top: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 0.76rem; color: var(--gold-text); } @media (max-width: 860px) { .dx-start { grid-template-columns: 1fr; } .dx-facts { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } } @media (max-width: 620px) { .dx-bar__side { flex-direction: column; align-items: flex-start; gap: 0; } .dx-time { font-size: 1.1rem; } .dx-answered { font-size: 0.72rem; } } @media (max-width: 1080px) { .nav__links { gap: 1.15rem; } } /* ========================================================================== PRINT — the diagnostic result sheet Only the results screen is meant to reach paper. The nav, the exam, the buttons and the page furniture are dropped; the score, the topic table, the advice and whatever review items are on screen are kept and recoloured for ink on white. ========================================================================== */ .print-head { display: none; } /* the print / view options, sitting above the results */ .dx-actions { display: flex; flex-direction: column; gap: 0.7rem; background: var(--tint); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(0.9rem, 2vw, 1.15rem); margin: 1.6rem 0 2rem; } /* One row on a desktop. The labels are short enough to fit; it still wraps on a narrow screen rather than overflowing. */ /* The buttons stretch to fill the row rather than bunching at the left. flex-basis is auto, so each one grows from its own label width — longer labels stay wider, and the row ends flush with the panel. */ .dx-actions .btn-row { flex-wrap: nowrap; justify-content: stretch; margin: 0; gap: 0.5rem; } .dx-actions .btn { flex: 1 1 auto; min-width: 0; padding-left: 0.75rem; padding-right: 0.75rem; letter-spacing: 0.04em; } /* Below this the labels stop fitting side by side, so let them stack. */ @media (max-width: 900px) { .dx-actions .btn-row { flex-wrap: wrap; } .dx-actions .btn { flex: 1 1 auto; } } .dx-actions__hint { margin: 0; font-size: 0.83rem; line-height: 1.55; color: var(--text-dimmer); } .dx-actions__hint b { color: var(--text-dim); font-weight: 600; } #dxShowCount { color: var(--gold-text); font-weight: 600; } @media print { @page { margin: 14mm; } html, body { background: #fff !important; color: #14213d !important; } /* everything that is not the result sheet */ .nav, .footer, .skip-link, .dx-bar, #dxIntro, #dxExam, .dx-print-hint, .crumb, noscript, .dx-sent { display: none !important; } .section, .band, .band--deep, .band--flat { background: none !important; padding: 0 !important; } .band::before { display: none !important; } .wrap { max-width: none !important; padding: 0 !important; } .print-head { display: flex !important; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 2px solid #14213d; padding-bottom: 0.5rem; margin-bottom: 1.2rem; } .print-head__brand { font-family: var(--font-display); font-weight: 700; font-size: 12pt; letter-spacing: 0.02em; } .print-head__meta { font-size: 9.5pt; color: #4a5a78; } /* the score block */ .dx-score { text-align: left; padding: 0 !important; background: none !important; border: 0 !important; } .dx-score .eyebrow { color: #8a6318 !important; font-size: 8.5pt; } .dx-score__big { font-size: 30pt !important; color: #14213d !important; margin: 0.1rem 0; } .dx-score__big small { color: #4a5a78 !important; } .dx-score__pct, .dx-band, .dx-score__time { color: #14213d !important; font-size: 10pt; } .dx-h2 { color: #14213d !important; font-size: 13pt; margin-top: 1.1rem; break-after: avoid; } /* the topic breakdown */ .table-wrap { overflow: visible !important; } .ftable { width: 100%; font-size: 9.5pt; break-inside: avoid; } .ftable th, .ftable td { color: #14213d !important; border-color: #b9c4d6 !important; background: none !important; padding: 5pt 8pt !important; } .ftable thead th { color: #4a5a78 !important; } .ftable tr.win th, .ftable tr.win td { background: #f3f0e6 !important; } .callout { border: 1px solid #b9c4d6 !important; background: none !important; color: #14213d !important; padding: 8pt 10pt !important; break-inside: avoid; } .callout h3 { color: #14213d !important; } .callout .gold, .gold { color: #8a6318 !important; } /* "Print summary only" — drop the question-by-question part, leaving the score, the topic table and the advice on a single sheet */ body.is-print-summary #dxReviewBlock { display: none !important; } /* the review list */ .dx-note { color: #4a5a78 !important; } .dx-rev { break-inside: avoid; border: 1px solid #b9c4d6 !important; background: none !important; color: #14213d !important; padding: 8pt 10pt !important; margin-bottom: 7pt; } .dx-rev--wrong { border-left: 3pt solid #a33 !important; } .dx-rev--right { border-left: 3pt solid #2a7 !important; } .dx-rev__q { color: #14213d !important; font-size: 10pt; } .dx-rev__line { color: #14213d !important; font-size: 9.5pt; } .dx-rev__line span { color: #4a5a78 !important; } .dx-rev__link { display: none !important; } .dx-q__num { background: #14213d !important; color: #fff !important; } /* figures: ink on white, and the halo turns white to match */ .dx-fig svg { background: #fff !important; border: 1px solid #b9c4d6 !important; max-width: 14rem; break-inside: avoid; } .dx-fig .s { stroke: #14213d !important; } .dx-fig .f { stroke: #94a3bd !important; } .dx-fig .g { stroke: #1f5fa8 !important; } .dx-fig .u { stroke: #9a6b10 !important; } .dx-fig .fill { fill: rgba(0, 0, 0, 0.05) !important; } .dx-fig .dot { fill: #14213d !important; } .dx-fig .dotu { fill: #9a6b10 !important; } .dx-fig text { stroke: #fff !important; } .dx-fig .tp { fill: #14213d !important; } .dx-fig .tg { fill: #1f5fa8 !important; } .dx-fig .tu { fill: #9a6b10 !important; } .dx-fig .tf { fill: #6b7a94 !important; } a[href]::after { content: "" !important; } } /* ------------------------------------------------ policy pages --- */ .policy-updated { font-size: 0.85rem; color: var(--text-dimmer); margin: 1.1rem 0 0; } .policy .step-block h2 { font-family: var(--font-display); font-size: clamp(1.2rem, 2.8vw, 1.55rem); color: var(--text); margin: 0 0 0.9rem; } .policy .step-block p { margin: 0 0 0.9rem; } .policy .step-block p:last-child { margin-bottom: 0; } .policy .dx-rules { margin-bottom: 0; } .policy .dx-rules li { margin-bottom: 0.7rem; } .policy .dx-rules b { color: var(--text); font-weight: 600; } .policy .table-wrap { margin: 1.1rem 0; } .policy .callout { margin: 1.2rem 0; } .footer__legal a { color: var(--text-dim); } .footer__legal a:hover { color: var(--gold-text); } /* A blank the owner still has to fill in. Deliberately loud: a placeholder that ships unnoticed is worse than no page at all. */ .todo { background: #ffd54a; color: #3a2a00; font-weight: 700; padding: 0.05em 0.4em; border-radius: 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .field__err { margin: 0.45rem 0 0; font-size: 0.82rem; color: var(--bad); } /* the line telling the student their result went in */ .dx-sent { display: flex; align-items: center; gap: 0.75rem; background: rgba(231, 180, 102, 0.09); border: 1px solid rgba(231, 180, 102, 0.34); border-radius: var(--radius); padding: 0.85rem 1.1rem; margin: 1.6rem 0 0; font-size: 0.92rem; } .dx-sent .check-dot { flex: none; } .dx-sent b { color: var(--text); } /* ------------------------- the schools a CET Review covers --- */ .level__schools { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--hairline); font-size: 0.85rem; line-height: 1.55; color: var(--text-dimmer); } .level__schools b { color: var(--text-dim); font-weight: 600; } .class-group__note { margin: 0 0 clamp(1rem, 2.2vw, 1.35rem); max-width: 68ch; font-size: 0.9rem; line-height: 1.6; color: var(--text-dim); } /* ===================================================================== Multiple-choice practice on the lesson pages Every problem-card is one question with four options and one answer. Options are real