/* ========================================================================== Learning material pages — sgmathtuition.com -------------------------------------------------------------------------- Loaded *in addition to* the page-type shell stylesheet (currently assets/css/tuition-subject-1.0.0.css), which supplies the header, nav, breadcrumbs, footer and the light/dark theme variables. This file adds only what a worked-example / worksheet page needs. Every class is namespaced `lm-` so nothing can collide with the shell. Theme: driven by , the site's single source of truth (set by the head preloader and toggled by tuition-js). Colours that already exist in the shell (--text, --primary, --header-bg, --bg, --bg-alt) are reused rather than redefined, so this page follows the site toggle automatically. ========================================================================== */ :root { /* Surfaces */ --lm-paper: #fffdf8; --lm-rule: rgba(68, 112, 155, 0.13); --lm-border: rgba(120, 120, 120, 0.25); --lm-pill-fill: rgba(255, 255, 255, 0.92); --lm-inset-a: #fbfdff; --lm-inset-b: #f2f7fb; --lm-chip-bg: #f7fafc; /* Ink */ --lm-muted: #5a6473; --lm-guide: rgba(23, 32, 51, 0.15); --lm-stair: rgba(23, 32, 51, 0.32); /* Prose links. Same pair the shell uses for links inside .section, so a worksheet link reads like a link anywhere else on the site. */ --lm-link: #0b5bd3; --lm-link-hover: #c00000; /* Difference-row colours: row 1 -> row 4 */ --lm-level-1: #176b7d; --lm-level-2: #8a5600; --lm-level-3: #6b4188; --lm-level-4: #98374f; /* Depth */ --lm-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); --lm-shadow-lg: 0 8px 22px rgba(0, 0, 0, 0.14); /* Georgia for mathematics: the site body font is Segoe UI, but italic variables and fractions read far better in a serif. */ --lm-math-font: Georgia, "Times New Roman", serif; --lm-radius: 14px; } :root[data-theme="dark"] { --lm-paper: #1a1e25; --lm-rule: rgba(126, 193, 255, 0.10); --lm-border: rgba(150, 158, 170, 0.24); --lm-pill-fill: rgba(24, 26, 32, 0.92); --lm-inset-a: #20242c; --lm-inset-b: #1a1e25; --lm-chip-bg: #20242c; --lm-muted: #a4aebd; --lm-guide: rgba(245, 246, 250, 0.18); --lm-stair: rgba(245, 246, 250, 0.34); --lm-link: #7ec1ff; --lm-link-hover: #ff7578; --lm-level-1: #5fd0e2; --lm-level-2: #edb457; --lm-level-3: #c9a3e8; --lm-level-4: #f4919f; --lm-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); --lm-shadow-lg: 0 8px 22px rgba(0, 0, 0, 0.45); } /* ---- Page shell ---------------------------------------------------------- */ .lm-page { max-width: 1100px; margin: 0 auto; padding: 8px 1rem 56px; text-align: left; /* Base step for the whole worksheet — everything below is relative to this, so the page can be scaled up or down from one place. */ font-size: clamp(1.08rem, 1rem + 0.35vw, 1.24rem); line-height: 1.7; } .lm-page h1, .lm-page h2, .lm-page p { margin-top: 0; } /* ---- Prose links --------------------------------------------------------- */ /* The shell only styles links inside `.section`, and a worksheet is built from `.lm-card` sections instead, so these links were falling through to the browser default blue — near enough to the body ink to be missed in light mode. Bold + a 2px underline so they carry at a glance, and both colours clear 6:1 against the card behind them in either theme. */ .lm-page a { color: var(--lm-link); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: currentColor; } .lm-page a:hover, .lm-page a:focus-visible { color: var(--lm-link-hover); } .lm-page a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; } /* ---- Hero ---------------------------------------------------------------- */ .lm-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: start; margin: 1.25rem 0 1.75rem; } .lm-eyebrow { margin: 0 0 0.45rem; color: var(--primary); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .lm-page h1 { /* Wider and a step down from a short punchy headline: this one is a full question, so it needs room to run to two or three lines without the type getting silly. */ max-width: 26ch; margin-bottom: 0.6rem; font-size: clamp(1.9rem, 1.2rem + 2.7vw, 3.1rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; } .lm-lede { max-width: 62ch; margin-bottom: 0; color: var(--text); font-size: clamp(1.15rem, 1.03rem + 0.55vw, 1.4rem); } /* ---- Print button -------------------------------------------------------- */ .lm-print { align-self: start; border: 1px solid var(--lm-border); border-radius: 999px; padding: 0.55rem 1.05rem; background: var(--header-bg); color: var(--primary); box-shadow: var(--lm-shadow); font: inherit; font-size: 1.02rem; font-weight: 600; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; } .lm-print:hover, .lm-print:focus-visible { transform: translateY(-2px); background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--lm-shadow-lg); } /* ---- Card ---------------------------------------------------------------- */ .lm-card { border: 1px solid var(--lm-border); border-radius: var(--lm-radius); background: var(--header-bg); box-shadow: var(--lm-shadow); } .lm-kicker { margin-bottom: 0.35rem; color: var(--primary); font-size: 0.88rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .lm-card h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem); line-height: 1.25; font-weight: 700; } /* ---- Mathematics --------------------------------------------------------- */ .lm-math, .lm-math-wrap { font-family: var(--lm-math-font); font-size: 1.06em; } .lm-math { white-space: nowrap; } /* ---- "How to read the diagrams" ------------------------------------------ */ .lm-howto { padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.25rem, 4vw, 2.1rem); margin-bottom: 1.75rem; } .lm-howto h2 { margin-bottom: 1rem; } .lm-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: lm-step; } .lm-steps li { position: relative; padding-left: 3.1rem; color: var(--lm-muted); font-size: 1.06rem; } .lm-steps li::before { counter-increment: lm-step; content: counter(lm-step); position: absolute; left: 0; top: 2px; display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 1.05rem; font-weight: 700; } .lm-steps strong { display: block; color: var(--text); } /* ---- Example cards ------------------------------------------------------- */ .lm-examples { display: grid; gap: 1.75rem; } .lm-example { overflow: hidden; } .lm-example-header { padding: clamp(1.25rem, 4vw, 2.1rem) clamp(1.25rem, 4vw, 2.35rem) 1.1rem; } .lm-example-header h2 { margin-bottom: 0.25rem; } .lm-example-header p { margin-bottom: 0; color: var(--lm-muted); } /* ---- Circled-number chips ------------------------------------------------ */ .lm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0 clamp(1.25rem, 4vw, 2.35rem) 1.1rem; } .lm-chips-lead { margin-right: 0.15rem; color: var(--lm-muted); font-size: 0.97rem; font-weight: 700; } .lm-chip { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--lm-border); border-radius: 999px; padding: 0.35rem 0.8rem; background: var(--lm-chip-bg); color: var(--text); font-size: 1rem; } .lm-chip b { color: var(--lm-tone, var(--text)); font-family: var(--lm-math-font); font-size: 1.2rem; } .lm-chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lm-tone, var(--text)); } .lm-chip-arrow { color: var(--lm-muted); } .lm-tone-0 { --lm-tone: var(--text); } .lm-tone-1 { --lm-tone: var(--lm-level-1); } .lm-tone-2 { --lm-tone: var(--lm-level-2); } .lm-tone-3 { --lm-tone: var(--lm-level-3); } .lm-tone-4 { --lm-tone: var(--lm-level-4); } /* ---- Diagram ------------------------------------------------------------- */ .lm-diagram { margin: 0 clamp(0.9rem, 3vw, 1.6rem); overflow-x: auto; border: 1px solid var(--lm-border); border-radius: 12px; background-color: var(--lm-paper); background-image: repeating-linear-gradient( to bottom, transparent 0, transparent 35px, var(--lm-rule) 36px, transparent 37px ); } .lm-diagram svg { display: block; min-width: 850px; width: 100%; height: auto; } .lm-scroll-hint { display: none; margin: 0.6rem clamp(0.9rem, 3vw, 1.6rem) 0; color: var(--lm-muted); font-size: 0.95rem; } /* ---- Diagram internals --------------------------------------------------- */ /* The ladder SVG is generated by the page script, which emits *classes only* — every colour, weight and size lives here so the diagram follows the site theme. Level colour is carried by the .lm-lv* classes above (they set `color`), and the SVG picks it up through `currentColor`. */ .lm-diagram .lm-guide-line { stroke: var(--lm-guide); stroke-width: 1; } .lm-diagram .lm-stair-line { fill: none; stroke: var(--lm-stair); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 8; } .lm-diagram .lm-axis-label { fill: var(--text); font-family: var(--lm-math-font); font-size: 30px; font-style: italic; } .lm-diagram .lm-axis-sub { fill: var(--lm-muted); font-size: 15px; font-weight: 700; } .lm-diagram .lm-term { fill: var(--text); font-family: var(--lm-math-font); font-size: 34px; font-weight: 500; } .lm-diagram .lm-term-first { font-weight: 700; } .lm-diagram .lm-comma { fill: var(--lm-muted); font-family: var(--lm-math-font); font-size: 25px; } .lm-diagram .lm-row-label { fill: currentColor; font-size: 17px; font-weight: 700; letter-spacing: 0.3px; } .lm-diagram .lm-arc { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; } .lm-diagram .lm-arc-final { stroke-width: 3.4; } .lm-diagram .lm-marker { fill: currentColor; } /* The circled numbers: the ones that get copied into the formula. */ .lm-diagram .lm-pill { fill: var(--lm-pill-fill); stroke: currentColor; stroke-width: 2.2; } .lm-diagram .lm-pill-term { stroke-width: 2.4; } .lm-diagram .lm-pill-final { stroke-width: 3.2; } .lm-diagram .lm-val { fill: currentColor; font-family: var(--lm-math-font); font-size: 28px; font-weight: 500; } .lm-diagram .lm-val-key { font-weight: 700; } /* Soft band behind the row that goes constant. */ .lm-diagram .lm-band { fill: currentColor; fill-opacity: 0.09; } .lm-diagram .lm-stop { fill: currentColor; font-size: 17px; font-weight: 700; letter-spacing: 1.1px; } @media (max-width: 900px) { .lm-scroll-hint { display: block; } } /* ---- Formula ------------------------------------------------------------- */ .lm-formula-panel { padding: 1.25rem clamp(1.25rem, 4vw, 2.35rem) clamp(1.5rem, 4vw, 2.2rem); } .lm-formula-label { margin-bottom: 0.55rem; color: var(--lm-muted); font-size: 0.88rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .lm-formula-wrap { overflow-x: auto; margin: 0; padding: 0; } /* One line, scrolling sideways inside .lm-formula-wrap if it has to. The type is set deliberately small relative to the rest of the worksheet so that most formulas fit without scrolling at all. */ .lm-formula { display: inline-flex; min-width: max-content; align-items: center; gap: 0.28em; padding: 0.85rem 1.1rem; border: 1px solid var(--lm-border); border-radius: 12px; background: linear-gradient(180deg, var(--lm-inset-a), var(--lm-inset-b)); color: var(--text); font-family: var(--lm-math-font); font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.22rem); line-height: 1.5; } .lm-coef { font-weight: 700; } .lm-lv0 { color: var(--text); } .lm-lv1 { color: var(--lm-level-1); } .lm-lv2 { color: var(--lm-level-2); } .lm-lv3 { color: var(--lm-level-3); } .lm-lv4 { color: var(--lm-level-4); } .lm-frac { display: inline-grid; grid-template-rows: auto auto; align-items: center; justify-items: center; vertical-align: middle; line-height: 1.05; margin: 0 0.08em; } .lm-frac .lm-num { min-width: 100%; padding: 0 0.22em 0.13em; border-bottom: 1.4px solid currentColor; text-align: center; } .lm-frac .lm-den { padding-top: 0.15em; font-size: 0.78em; text-align: center; } .lm-read-note { margin: 0.85rem 2px 0; color: var(--lm-muted); font-size: 1.05rem; } .lm-read-note b { color: var(--text); } .lm-check { margin: 0.75rem 2px 0; padding: 0.6rem 0.95rem; border-left: 3px solid var(--primary); border-radius: 0 10px 10px 0; background: var(--bg-alt); color: var(--text); font-size: 1.05rem; } /* ---- Scope note (the "this is enrichment" callout) ----------------------- */ .lm-note { padding: clamp(1.25rem, 4vw, 2.1rem); margin-bottom: 1.75rem; border-left: 4px solid var(--primary); } .lm-note p { color: var(--text); } .lm-note p:last-child { margin-bottom: 0; } /* ---- Closing panels ------------------------------------------------------ */ .lm-closing { padding: clamp(1.25rem, 4vw, 2.1rem); margin-top: 1.75rem; } .lm-closing h2 { margin-bottom: 0.5rem; } .lm-closing p { color: var(--lm-muted); } .lm-closing p:last-child { margin-bottom: 0; } .lm-closing strong { color: var(--text); } .lm-your-turn ol { margin: 0 0 0.25rem; padding-left: 1.4rem; color: var(--lm-muted); } .lm-try { display: inline-block; margin-bottom: 0.75rem; padding: 0.5rem 1rem; border: 1px dashed var(--lm-border); border-radius: 10px; background: var(--lm-paper); color: var(--text); font-family: var(--lm-math-font); font-size: 1.4rem; } .lm-answer { margin-top: 0.9rem; border: 1px solid var(--lm-border); border-radius: 12px; padding: 0.75rem 1rem; background: var(--bg-alt); } .lm-answer summary { cursor: pointer; color: var(--primary); font-weight: 600; } .lm-answer[open] summary { margin-bottom: 0.6rem; } .lm-answer p:last-child { margin-bottom: 0; } /* ---- Responsive ---------------------------------------------------------- */ @media (max-width: 720px) { .lm-hero { grid-template-columns: 1fr; gap: 1rem; } .lm-print { justify-self: start; } /* Reclaim horizontal room on a phone so fewer formulas need to scroll. */ .lm-formula { padding: 0.7rem 0.75rem; } .lm-formula-panel { padding-left: 1rem; padding-right: 1rem; } .lm-chips, .lm-example-header { padding-left: 1rem; padding-right: 1rem; } } /* ---- Print --------------------------------------------------------------- */ @media print { /* Force the light palette on paper regardless of the on-screen theme — a dark background would flood the page with ink. */ :root, :root[data-theme="dark"] { --text: #111; --primary: #0057b8; --bg: #fff; --bg-alt: #f4f6f9; --header-bg: #fff; --lm-paper: #fffdf8; --lm-rule: rgba(68, 112, 155, 0.13); --lm-border: rgba(120, 120, 120, 0.35); --lm-pill-fill: rgba(255, 255, 255, 0.92); --lm-inset-a: #fbfdff; --lm-inset-b: #f2f7fb; --lm-chip-bg: #f7fafc; --lm-muted: #47505e; --lm-guide: rgba(23, 32, 51, 0.15); --lm-stair: rgba(23, 32, 51, 0.32); --lm-link: #0b5bd3; --lm-link-hover: #0b5bd3; --lm-level-1: #176b7d; --lm-level-2: #8a5600; --lm-level-3: #6b4188; --lm-level-4: #98374f; --lm-shadow: none; --lm-shadow-lg: none; } @page { size: A4 landscape; margin: 12mm; } body { background: #fff; } .header, .mobile-menu, .overlay, .whatsapp-button, .breadcrumbs, .related-links, .footer, .lm-print, .lm-scroll-hint, .skip-link { display: none !important; } .lm-page { max-width: none; padding: 0; } .lm-card { box-shadow: none; break-inside: avoid; } /* Keep each example on one sheet — otherwise the formula and its check note get orphaned overleaf. */ .lm-example { page-break-inside: avoid; margin-bottom: 7mm; } .lm-example-header { padding: 0.85rem 1.1rem 0.5rem; } .lm-example-header h2 { font-size: 1.3rem; } .lm-example-header p { font-size: 0.85rem; } .lm-chips { padding: 0 1.1rem 0.55rem; gap: 0.35rem; } .lm-chips-lead, .lm-chip { font-size: 0.74rem; } .lm-chip { gap: 0.3rem; padding: 0.18rem 0.55rem; } .lm-diagram { overflow: visible; margin: 0 1.1rem; } .lm-diagram svg { min-width: 0; max-height: 78mm; } .lm-formula-panel { padding: 0.75rem 1.1rem 0.9rem; break-inside: avoid; } .lm-formula { padding: 0.55rem 0.85rem; font-size: 0.92rem; } .lm-read-note, .lm-check { margin-top: 0.55rem; font-size: 0.8rem; } .lm-check { padding: 0.45rem 0.75rem; } .lm-closing { margin-top: 7mm; } } /* ========================================================================== Learning-materials SECTION on the subject pages -------------------------------------------------------------------------- Used by `.section--materials` on e-maths-tuition-singapore.html and secondary-maths-tuition-singapore.html. Those pages load this stylesheet *only* for these rules — everything else there comes from the shell. The shell's .section-title (1.2rem) and .section-content (1rem) are small for a block meant to catch the eye near the top of the page, so this scales the whole section up. It reuses the shell's .explore-grid card component, so nothing here changes the cards' behaviour, only their type size. ========================================================================== */ .section--materials .section-title { font-size: clamp(1.55rem, 1.2rem + 1.35vw, 2.2rem); line-height: 1.25; margin-bottom: 0.6rem; } .section--materials .section-content { max-width: min(70ch, 90vw); font-size: clamp(1.12rem, 1.02rem + 0.5vw, 1.34rem); line-height: 1.65; } .section--materials .explore-card__link { gap: 0.5rem; padding: 1.4rem 1.55rem; } .section--materials .explore-card__title { font-size: clamp(1.3rem, 1.1rem + 0.85vw, 1.8rem); line-height: 1.25; } .section--materials .explore-card__desc { font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem); line-height: 1.6; } /* ---- Reduced motion ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .lm-print { transition: none; } .lm-print:hover, .lm-print:focus-visible { transform: none; } }