/* ========================================================================== OpenRevise. Modern and rounded, built on a green base. Soft surfaces on a faintly green off-white, generous corner radii, pill controls, and depth that comes from light borders and low-spread shadows rather than heavy drop shadows. Each subject shifts --accent, so the chrome stays green while the content takes on the subject's colour. ========================================================================== */ :root { /* Brand green, used wherever no subject is in scope. */ --brand: #157355; --brand-dark: #45c895; --brand-soft: #e4f2ec; --accent: var(--brand); --accent-dark: var(--brand-dark); --accent-soft: var(--brand-soft); --ink: #131a17; --ink-soft: #47544e; --ink-faint: #72807a; --ink-ghost: #a3aeaa; --bg: #f4f7f5; --surface: #ffffff; --surface-2: #eef3f0; --line: #e0e8e3; --line-firm: #c9d5cf; --accent-ink: var(--accent); --accent-wash: var(--accent-soft); --ok: #157355; --warn: #9a6a12; --bad: #b3352a; --ok-soft: #e4f2ec; --bad-soft: #fbecea; --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-pill: 999px; --shadow-xs: 0 1px 2px rgba(16, 32, 26, .05); --shadow: 0 1px 2px rgba(16, 32, 26, .05), 0 10px 22px -16px rgba(16, 32, 26, .35); --shadow-md: 0 2px 4px rgba(16, 32, 26, .06), 0 18px 34px -22px rgba(16, 32, 26, .45); --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* The hardcoded logo mark: a serif R on a beige tile. It keeps its own colours in both themes — a printed label does not invert. */ --logo-bg: #ece0c8; --logo-ink: #14110d; --drawer-w: 300px; --wrap: 1120px; --text: 680px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-ink: var(--accent-dark); --accent-wash: color-mix(in srgb, var(--accent-dark) 16%, transparent); --ink: #e9efec; --ink-soft: #aab8b2; --ink-faint: #82918b; --ink-ghost: #5c6a64; --bg: #0f1512; --surface: #161e1a; --surface-2: #1d2823; --line: #26332d; --line-firm: #3a4a43; --ok: #45c895; --warn: #d9ab52; --bad: #ef8a7e; --ok-soft: color-mix(in srgb, #45c895 14%, transparent); --bad-soft: color-mix(in srgb, #ef8a7e 14%, transparent); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 22px -16px rgba(0, 0, 0, .8); --shadow-md: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 34px -22px rgba(0, 0, 0, .9); } } :root[data-theme="dark"] { --accent-ink: var(--accent-dark); --accent-wash: color-mix(in srgb, var(--accent-dark) 16%, transparent); --ink: #e9efec; --ink-soft: #aab8b2; --ink-faint: #82918b; --ink-ghost: #5c6a64; --bg: #0f1512; --surface: #161e1a; --surface-2: #1d2823; --line: #26332d; --line-firm: #3a4a43; --ok: #45c895; --warn: #d9ab52; --bad: #ef8a7e; --ok-soft: color-mix(in srgb, #45c895 14%, transparent); --bad-soft: color-mix(in srgb, #ef8a7e 14%, transparent); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 22px -16px rgba(0, 0, 0, .8); --shadow-md: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 34px -22px rgba(0, 0, 0, .9); } /* The two derived accent tokens have to be resolved on , not on :root. A subject's colours arrive as inline custom properties on , and an alias written on :root is substituted against :root's own values — so --accent-ink and --accent-wash stayed brand green on every subject page and nothing but the solid .btn ever took the subject's colour. Declaring them here, below where --accent is set, is what makes History read as History. The dark variants repeat because a value set on would otherwise beat the one :root carries. */ body { --accent-ink: var(--accent); --accent-wash: var(--accent-soft); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { --accent-ink: var(--accent-dark); --accent-wash: color-mix(in srgb, var(--accent-dark) 16%, transparent); } } :root[data-theme="dark"] body { --accent-ink: var(--accent-dark); --accent-wash: color-mix(in srgb, var(--accent-dark) 16%, transparent); } /* -- base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; letter-spacing: -.005em; display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; } main { flex: 1 0 auto; } h1, h2, h3, h4 { margin: 0 0 .45em; line-height: 1.2; letter-spacing: -.02em; font-weight: 650; color: var(--ink); } h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.7rem); } h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.55rem); } h3 { font-size: 1.06rem; } p { margin: 0 0 1em; } a { color: var(--accent-ink); text-underline-offset: 3px; } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; } mark { background: var(--accent-wash); color: inherit; padding: .05em .2em; border-radius: 4px; } ::selection { background: var(--accent-wash); } :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; } .wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; } .wrap-text { width: min(100% - 2rem, var(--text)); margin-inline: auto; } .visually-hidden { 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: -999px; } .skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--accent); color: #fff; padding: .6rem 1rem; border-radius: var(--r-pill); } .label { font-size: .7rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin: 0; } .label-accent { color: var(--accent-ink); } .lede { font-size: 1.08rem; color: var(--ink-soft); max-width: 60ch; } /* -- header --------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; gap: 1.2rem; padding: .85rem 0; } .brand { display: flex; align-items: center; gap: .55rem; min-height: 44px; font-size: 1.16rem; font-weight: 700; letter-spacing: -.025em; text-decoration: none; color: var(--ink); } .logo-mark { display: block; flex: none; border-radius: 28%; } .brand-name { line-height: 1; } .brand-tag { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line-firm); border-radius: var(--r-pill); padding: .1rem .45rem; } /* -- hamburger ------------------------------------------------------------ */ .nav-toggle { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: border-color .14s ease, color .14s ease, background .14s ease; } .nav-toggle:hover { border-color: var(--line-firm); color: var(--ink); background: var(--surface-2); } .nav-toggle-bars { display: grid; gap: 4px; width: 17px; } .nav-toggle-bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; } /* The bars fold into a cross while the menu is open. */ body.drawer-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.drawer-open .nav-toggle-bars span:nth-child(2) { opacity: 0; } body.drawer-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* The board currently filtered to, so the header still says so with the picker itself now inside the menu. */ .board-chip { margin-left: auto; flex: none; padding: .3rem .8rem; border: 1px solid var(--line-firm); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-soft); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; } .board-chip::before { content: ""; display: inline-block; vertical-align: -1px; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%; background: var(--brand); } .board-chip:hover { border-color: var(--accent); color: var(--accent-ink); } /* -- the menu ------------------------------------------------------------- */ .drawer-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(10, 20, 16, .42); opacity: 0; transition: opacity .22s ease; } body.drawer-open .drawer-scrim { opacity: 1; } .drawer-scrim[hidden] { display: none; } .drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 61; width: min(var(--drawer-w), 86vw); display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); box-shadow: var(--shadow-md); transform: translateX(-100%); /* visibility is discrete, so it flips only once the slide-out has finished. */ transition: transform .24s cubic-bezier(.4, 0, .2, 1), visibility .24s; overscroll-behavior: contain; } body.drawer-open .drawer { transform: translateX(0); } /* Closed means closed: nothing inside can be tabbed into or read out. */ .drawer[inert] { visibility: hidden; } body.drawer-open .drawer { visibility: visible; } .drawer-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); } .drawer-head .brand { font-size: 1.05rem; min-width: 0; } .drawer-head .brand-name { overflow: hidden; text-overflow: ellipsis; } .drawer-close { margin-left: auto; flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-faint); cursor: pointer; } .drawer-close:hover { background: var(--surface-2); color: var(--ink); } .drawer-body { flex: 1 1 auto; overflow-y: auto; padding: .9rem .7rem 1.2rem; } .drawer-search { position: relative; display: flex; align-items: center; margin: 0 .3rem .9rem; } .drawer-search .icon { position: absolute; left: .7rem; color: var(--ink-faint); pointer-events: none; } .drawer-search input { width: 100%; padding: .55rem .8rem .55rem 2.3rem; border: 1px solid var(--line-firm); border-radius: var(--r-pill); background: var(--bg); color: var(--ink); font: inherit; font-size: .88rem; } .drawer-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } .drawer-label { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin: 1.3rem 0 .4rem; padding: 0 .7rem; } .drawer-nav { display: flex; flex-direction: column; } .drawer-link { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: var(--r-sm); color: var(--ink-soft); text-decoration: none; font-size: .92rem; font-weight: 500; transition: background .14s ease, color .14s ease; } .drawer-link .icon { flex: none; color: var(--ink-faint); } .drawer-link span:not(.dot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-link:hover { background: var(--surface-2); color: var(--ink); } .drawer-link:hover .icon { color: var(--accent-ink); } .drawer-link[aria-current] { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; } .drawer-link[aria-current] .icon { color: var(--accent-ink); } .drawer-link .dot { flex: none; width: .6rem; height: .6rem; border-radius: 50%; } .drawer-count { margin-left: auto; flex: none; font-size: .74rem; font-weight: 600; color: var(--ink-faint); background: var(--surface-2); border-radius: var(--r-pill); padding: .05rem .45rem; } .drawer-boards { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .7rem; } .board-option { padding: .3rem .75rem; border-radius: var(--r-pill); border: 1px solid var(--line-firm); background: var(--surface); color: var(--ink-soft); font-size: .82rem; font-weight: 500; text-decoration: none; transition: border-color .14s ease, background .14s ease, color .14s ease; } .board-option:hover { border-color: var(--accent); color: var(--accent-ink); } .board-option[aria-current] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; } .drawer-note { margin: .5rem .7rem 0; font-size: .76rem; color: var(--ink-faint); } /* -- menu foot: legal links and the theme switch -------------------------- */ .drawer-foot { flex: none; display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem; border-top: 1px solid var(--line); background: var(--surface-2); } .drawer-legal { display: flex; flex-wrap: wrap; gap: .1rem; flex: 1 1 auto; min-width: 0; } .drawer-legal a { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .45rem; border-radius: var(--r-xs); color: var(--ink-faint); text-decoration: none; font-size: .78rem; } .drawer-legal a:hover { color: var(--ink); background: var(--surface); } .drawer-legal a[aria-current] { color: var(--accent-ink); font-weight: 600; } .drawer-legal .icon { width: 14px; height: 14px; } .theme-toggle { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-firm); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-soft); cursor: pointer; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent-ink); } .theme-toggle .icon { display: block; } /* Show the scheme you would switch *to*: a moon in light, a sun in dark. */ .theme-icon-sun { display: none; } .theme-icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-icon-sun { display: block; } :root:not([data-theme="light"]) .theme-icon-moon { display: none; } } :root[data-theme="dark"] .theme-icon-sun { display: block; } :root[data-theme="dark"] .theme-icon-moon { display: none; } :root[data-theme="light"] .theme-icon-sun { display: none; } :root[data-theme="light"] .theme-icon-moon { display: block; } /* -- breadcrumbs ---------------------------------------------------------- */ .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; padding: .9rem 0 0; font-size: .82rem; color: var(--ink-faint); } .breadcrumbs li + li::before { content: "›"; margin-right: .3rem; color: var(--ink-ghost); } .breadcrumbs a { color: var(--ink-soft); text-decoration: none; padding: .15rem .45rem; border-radius: var(--r-xs); } .breadcrumbs a:hover { background: var(--surface-2); color: var(--accent-ink); } .breadcrumbs [aria-current] { color: var(--ink); font-weight: 500; } /* -- page head ------------------------------------------------------------ */ .page-head { padding: 2.2rem 0 1.8rem; } .page-head h1 { margin-bottom: .4rem; } .page-head .label { margin-bottom: .7rem; } .page-head .lede { margin-bottom: 0; } /* -- a topic's banner ----------------------------------------------------- The uploaded picture carries no lettering: it is the background, and the h1 writes the topic's title over it as ordinary text. That keeps the words sharp at any size, spelled the way the topic is spelled, and readable when the picture has not loaded. The 3:1 box is what stops the page jumping as the picture arrives and keeps every topic's banner the same height however near the asked-for 1800x600 the file turned out to be — uploads are checked against that shape, so the crop is never more than a few per cent — and the one thing allowed to break it is a title too long to fit, which makes the frame taller rather than being cut off in it. */ .page-head.has-banner .topic-banner { margin-bottom: 1rem; } .topic-banner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 1; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: #1b2420; box-shadow: var(--shadow-xs); isolation: isolate; } /* The picture is laid under the heading rather than sat beside it, so a long title on a narrow screen makes the frame taller instead of being cropped: the ratio above is the shape it keeps whenever the words leave it free to. */ .topic-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* No aspect-ratio (an older browser): a height in the same proportion as the widest the column goes, so the frame is still a strip and not a sliver. */ @supports not (aspect-ratio: 3 / 1) { .topic-banner { min-height: 240px; } } /* The wash the title sits on. It is laid over the whole picture and is heaviest at the foot, so light type reads over a pale photograph as well as a dark one without anybody having to check. */ .topic-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(12, 14, 18, .68) 0%, rgba(12, 14, 18, .52) 32%, rgba(12, 14, 18, .18) 62%, rgba(12, 14, 18, .04) 100% ); pointer-events: none; } .topic-banner-title { position: relative; z-index: 1; padding: 1.1rem 1.3rem; color: #fff; font-size: clamp(1.35rem, 1.1rem + 2.4vw, 2.7rem); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); } @media (min-width: 700px) { .topic-banner-title { padding: 1.6rem 1.9rem; } } .meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; list-style: none; margin: 1rem 0 0; padding: 0; font-size: .82rem; color: var(--ink-faint); } .meta-line li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .2rem .7rem; } .meta-line li:has(.tags) { background: none; border: 0; padding: 0; } .section { padding: 2.4rem 0; } .section-head { margin-bottom: 1.3rem; } .section-head h2 { margin-bottom: .2rem; } .section-head p { color: var(--ink-faint); margin: 0; font-size: .92rem; } /* -- contents page (home) ------------------------------------------------- */ /* The home page: a card per subject, in the subject's colour, two across on a phone. The picture is drawn by SubjectIcons in heavy black line with a colour inside, so it stands on any card. */ .subject-grid { list-style: none; margin: clamp(1.1rem, 4vw, 2rem) 0 2.4rem; padding: 0; display: grid; gap: .85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 640px) { .subject-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } } @media (min-width: 980px) { .subject-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .subject-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1 / 1; min-height: 100%; padding: clamp(.9rem, 4vw, 1.5rem); border-radius: clamp(18px, 4vw, 26px); background: var(--card, var(--accent)); color: #fff; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 22px -12px rgba(0, 0, 0, .35); transition: transform .16s ease, box-shadow .16s ease; overflow: hidden; } .subject-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 16px 30px -14px rgba(0, 0, 0, .45); } .subject-card:active { transform: translateY(-1px); } .subject-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .subject-card.is-light { color: #141414; } .subject-card .subject-icon { width: clamp(3.4rem, 19vw, 5.6rem); height: auto; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .12)); transition: transform .2s ease; } .subject-card:hover .subject-icon { transform: rotate(-4deg) scale(1.05); } .subject-card-text { display: grid; gap: .35rem; } .subject-card-name { font-size: clamp(1.02rem, 4.4vw, 1.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; overflow-wrap: anywhere; } .subject-card-meta { font-size: clamp(.64rem, 2.6vw, .8rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.45; opacity: .82; } @media (min-width: 640px) { .subject-card-name { font-size: clamp(1.1rem, 2vw, 1.5rem); } .subject-card-meta { font-size: .78rem; } .subject-card .subject-icon { width: clamp(4rem, 7.5vw, 5.8rem); } } @media (prefers-reduced-motion: reduce) { .subject-card, .subject-card .subject-icon { transition: none; } .subject-card:hover, .subject-card:hover .subject-icon { transform: none; } } .subject-boards { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.3rem; } .subject-board { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 500; padding: .3rem .8rem; border: 1px solid var(--line-firm); border-radius: var(--r-pill); color: var(--ink-soft); text-decoration: none; transition: border-color .14s ease, color .14s ease, background .14s ease; } .subject-board:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); } .subject-board[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; } .subject-board .code { color: var(--ink-ghost); font-size: .76rem; } .subject-board[aria-current] .code { color: rgba(255, 255, 255, .75); } /* -- index list (topics, chapters, lessons) ------------------------------- */ .index-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .index-row { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: inherit; box-shadow: var(--shadow-xs); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .index-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); } .index-row .n { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 10px; background: var(--accent-wash); color: var(--accent-ink); font-size: .85rem; font-weight: 650; font-variant-numeric: tabular-nums; } .index-row .body { flex: 1; min-width: 0; } .index-row .body h3 { margin: 0 0 .2rem; font-size: 1.04rem; } .index-row:hover .body h3 { color: var(--accent-ink); } .index-row .body p { margin: 0; font-size: .91rem; color: var(--ink-soft); } .index-row .end { flex: none; text-align: right; font-size: .78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; line-height: 1.5; } .index-row.is-read .n { background: var(--ok-soft); color: var(--ok); } /* -- topic cards (a subject's topics) -------------------------------------- */ /* Each card leads with the topic's banner, cropped to its top. A banner is made with its lower half kept quiet and dark for the title the topic page writes over it; the card has no title on the picture, so that half would read as an empty band. So the picture is drawn a third wider than the 4:1 frame and pinned to its top: the frame shows the upper 56% of the banner and its middle three quarters across, which is where the prompt puts what is worth looking at. */ .topic-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 700px) { .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } } .topic-card { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-xs); transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease, border-color .18s ease; } .topic-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); } .topic-card:active { transform: none; } .topic-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .topic-card-picture { position: relative; display: block; aspect-ratio: 4 / 1; background: #1b2420; overflow: hidden; } @supports not (aspect-ratio: 4 / 1) { .topic-card-picture { height: 0; padding-bottom: 25%; } } .topic-card-picture img { position: absolute; top: 0; left: 50%; width: 134%; height: auto; max-width: none; transform: translateX(-50%); transform-origin: center top; transition: transform .4s ease; } .topic-card:hover .topic-card-picture img { transform: translateX(-50%) scale(1.03); } /* No banner: the subject's colour, with its picture off to the right. */ .topic-card-picture.is-plain { background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%), var(--accent); } .topic-card-picture .subject-icon { position: absolute; right: 6%; top: 50%; width: auto; height: 68%; transform: translateY(-50%) rotate(-6deg); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .12)); } .topic-card-n { position: absolute; left: .75rem; top: .75rem; min-width: 1.9rem; height: 1.9rem; padding: 0 .45rem; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .92); color: #141414; font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); } .topic-card-body { display: flex; flex-direction: column; gap: .3rem; flex: 1; padding: 1rem 1.2rem 1.1rem; } .topic-card-body h3 { margin: 0; font-size: 1.08rem; line-height: 1.25; } .topic-card:hover .topic-card-body h3 { color: var(--accent-ink); } .topic-card-body p { margin: 0; font-size: .91rem; color: var(--ink-soft); } .topic-card-period { font-size: .78rem; font-weight: 650; letter-spacing: .04em; color: var(--accent-ink); } .topic-card-meta { margin-top: auto; padding-top: .45rem; font-size: .78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .topic-card, .topic-card-picture img { transition: none; } .topic-card:hover { transform: none; } .topic-card:hover .topic-card-picture img { transform: translateX(-50%); } } /* -- board tags ----------------------------------------------------------- */ .tags { display: inline-flex; flex-wrap: wrap; gap: .3rem; vertical-align: middle; } .tag { font-size: .7rem; font-weight: 600; padding: .16rem .6rem; border-radius: var(--r-pill); border: 1px solid var(--line-firm); color: var(--ink-faint); white-space: nowrap; } .tag-board { border-color: transparent; background: var(--accent-wash); color: var(--accent-ink); } .tag-shared { border-style: dashed; } /* -- buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.15rem; border: 1px solid var(--accent); border-radius: var(--r-pill); background: var(--accent); color: #fff; font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-xs); transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; } .btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--shadow); } .btn:active { transform: none; } .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-firm); box-shadow: none; } .btn-ghost:hover { filter: none; border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); } /* The quiet variant. app.js swaps the "mark as revised" button between this and .btn-ghost; without it here the unrevised state fell back to the solid accent .btn, so the button shouted loudest before you had done anything. */ .btn-quiet { background: var(--surface); color: var(--ink-soft); border-color: var(--line-firm); box-shadow: none; } .btn-quiet:hover { filter: none; background: var(--surface-2); color: var(--ink); border-color: var(--line-firm); } /* A toggle that is on should look on. */ .btn[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); } .btn-row { display: flex; flex-wrap: wrap; gap: .6rem; } .empty { padding: 2.4rem 1.5rem; text-align: center; background: var(--surface); border: 1px dashed var(--line-firm); border-radius: var(--r); color: var(--ink-faint); font-size: .93rem; } /* -- student / teacher switch --------------------------------------------- */ .audience-switch { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .75rem 1rem; margin-bottom: 1rem; box-shadow: var(--shadow-xs); } .audience-switch .label { margin: 0; } .audience-options { display: inline-flex; gap: .25rem; padding: .22rem; background: var(--surface-2); border-radius: var(--r-pill); } .audience-option { display: inline-flex; align-items: center; gap: .38rem; padding: .4rem .9rem; border-radius: var(--r-pill); font-size: .85rem; font-weight: 600; color: var(--ink-faint); text-decoration: none; transition: background .12s ease, color .12s ease; } .audience-option:hover { color: var(--ink); } .audience-option[aria-current] { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-xs); } .audience-option .icon { width: 15px; height: 15px; } .audience-note { flex: 1 1 15rem; margin: 0; font-size: .82rem; color: var(--ink-faint); line-height: 1.5; } /* The teacher view is signposted by colour as well as by the switch, so a screenshot of one page cannot be mistaken for the other. */ .audience-switch[data-audience="teacher"] { border-color: var(--accent); background: var(--accent-wash); } .share-feedback { margin: .9rem 0 0; font-size: .83rem; color: var(--accent-ink); word-break: break-all; } .share-feedback[hidden] { display: none; } /* -- teacher view --------------------------------------------------------- */ .teacher-panel { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r); background: var(--surface); padding: 1.5rem 1.6rem; box-shadow: var(--shadow-xs); } .teacher-panel > h2 { margin-top: 0; } .teacher-subhead { margin: 1.8rem 0 .3rem; font-size: 1rem; padding-top: 1.3rem; border-top: 1px solid var(--line); } .tag-teacher { border-color: transparent; background: var(--accent); color: #fff; margin-left: .35rem; } .teacher-qa { display: grid; gap: .9rem; } .teacher-q { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1.2rem 1.3rem; } .teacher-q .qhead { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: .7rem; } .teacher-q .qnum { font-weight: 700; color: var(--accent-ink); } .teacher-q .qtext { font-size: 1.02rem; font-weight: 600; margin-bottom: .8rem; white-space: pre-line; } .teacher-q .label { margin: 1.1rem 0 .5rem; } .teacher-q .guidance { font-size: .89rem; color: var(--ink-soft); background: var(--surface-2); border-radius: var(--r-sm); padding: .7rem .9rem; margin-bottom: .6rem; } .teacher-why { font-size: .87rem; color: var(--ink-faint); margin: .9rem 0 0; } .teacher-options { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; } .teacher-options li { display: flex; align-items: baseline; gap: .6rem; padding: .5rem .8rem; border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--line); font-size: .91rem; } .teacher-options .key { font-weight: 700; color: var(--ink-faint); min-width: 1.1rem; font-size: .82rem; } .teacher-options .is-answer { background: var(--ok-soft); border-color: transparent; } .teacher-options .is-answer .key { color: var(--ok); } .teacher-options .answer-flag { margin-left: auto; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ok); } /* -- lesson --------------------------------------------------------------- */ /* The reading column is capped at --text, so a 1fr column left a band of dead space inside the article before the contents list even began. Sizing the column to the text and centring the pair closes it. */ .lesson-layout { display: grid; grid-template-columns: minmax(0, var(--text)) 13.5rem; justify-content: center; gap: 3rem; align-items: start; padding: 1.6rem 0 4rem; } .lesson-header { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem 1.9rem; margin-bottom: 2.2rem; box-shadow: var(--shadow-xs); } .lesson-header h1 { margin-bottom: .45rem; } .lesson-toc { position: sticky; top: 5.5rem; font-size: .86rem; max-height: calc(100vh - 7rem); overflow-y: auto; overscroll-behavior: contain; } .lesson-toc .label { margin-bottom: .7rem; } .lesson-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .lesson-toc a { display: block; padding: .32rem .7rem; border-radius: var(--r-xs); color: var(--ink-faint); text-decoration: none; } .lesson-toc a:hover { background: var(--surface-2); color: var(--ink); } .lesson-toc a.is-active { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; } .block { margin-bottom: 2.4rem; scroll-margin-top: 5.5rem; max-width: var(--text); } /* A section heading. Nothing numbers it: the heading is the label, and the contents list beside it points at the same words. */ .block-head { display: flex; align-items: baseline; gap: .6rem; position: relative; } .block > h2 { margin-bottom: .7rem; } .block > .block-intro { color: var(--ink-soft); } /* objectives */ .objectives { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .objectives li { display: flex; gap: .8rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .85rem 1rem; } .objectives .n { flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: .76rem; font-weight: 650; } /* key points */ .keypoints { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .keypoint { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-sm); padding: .95rem 1.1rem; } .keypoint strong { display: block; margin-bottom: .15rem; font-weight: 650; } .keypoint p { margin: 0; color: var(--ink-soft); font-size: .93rem; } /* timeline */ .timeline { list-style: none; margin: 0; padding: 0 0 0 1.4rem; position: relative; } .timeline::before { content: ""; position: absolute; left: 5px; top: .7rem; bottom: .7rem; width: 2px; border-radius: 2px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 15%, transparent)); } .timeline li { position: relative; padding: .5rem 0 .5rem .2rem; } .timeline li::before { content: ""; position: absolute; left: -1.4rem; top: .95rem; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); } .timeline .when { display: block; font-size: .78rem; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; } .timeline .what { color: var(--ink-soft); font-size: .94rem; } /* case study */ .casestudy { border-radius: var(--r); padding: 1.4rem 1.5rem; background: linear-gradient(150deg, var(--accent-wash), var(--surface) 75%); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); } .casestudy h3 { margin: .35rem 0 .5rem; font-size: 1.2rem; } .casestudy p { color: var(--ink-soft); } .casestudy-figures { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 1.1rem; } .casestudy-figures strong { display: block; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--accent-ink); } .casestudy-figures span { display: block; margin-top: .2rem; max-width: 20ch; font-size: .78rem; color: var(--ink-faint); } /* compare */ .compare { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); } .compare-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; } .compare-col h3 { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .8rem; } .compare-col.is-change h3 { color: var(--accent-ink); } .compare-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .compare-col li { position: relative; padding-left: 1.1rem; font-size: .92rem; color: var(--ink-soft); } .compare-col li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--line-firm); } .compare-col.is-change li::before { background: var(--accent); } /* process */ .process { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .process li { display: flex; gap: .9rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .9rem 1.1rem; } .process .n { flex: none; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 9px; background: var(--accent-wash); color: var(--accent-ink); font-size: .82rem; font-weight: 700; } .process strong { display: block; font-weight: 650; } .process p { margin: 0; font-size: .92rem; color: var(--ink-soft); } /* summary */ .summary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .summary-list li { position: relative; padding: .1rem 0 .1rem 1.7rem; color: var(--ink-soft); } .summary-list li::before { content: "✓"; position: absolute; left: 0; top: .05rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); font-size: .68rem; font-weight: 700; } /* exam focus */ .examfocus { border-radius: var(--r); padding: 1.4rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--warn); } .examfocus .question { font-size: 1.1rem; font-weight: 600; margin-bottom: .6rem; } .examfocus .marks { font-size: .76rem; font-weight: 600; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-radius: var(--r-pill); padding: .1rem .55rem; margin-left: .3rem; white-space: nowrap; } .examfocus .advice { margin: 0; color: var(--ink-soft); font-size: .93rem; } /* quote */ .pullquote { margin: 0; padding: 1.1rem 1.3rem; background: var(--surface-2); border-radius: var(--r); border-left: 3px solid var(--accent); } .pullquote p { font-size: 1.06rem; margin-bottom: .4rem; } .pullquote footer { font-size: .82rem; color: var(--ink-faint); } /* key terms */ .terms { margin: 0; display: grid; gap: .5rem; } .term { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .85rem 1.05rem; display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; } .term dt { font-weight: 650; color: var(--accent-ink); } .term dd { margin: 0; font-size: .92rem; color: var(--ink-soft); } @media (max-width: 640px) { .term { grid-template-columns: 1fr; gap: .15rem; } } /* lesson nav */ .lesson-nav { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; margin-top: 2.4rem; } .lesson-nav a { flex: 1 1 240px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1.15rem; box-shadow: var(--shadow-xs); transition: border-color .14s ease, transform .14s ease; } .lesson-nav a:hover { border-color: var(--accent); transform: translateY(-2px); } .lesson-nav .label { margin-bottom: .2rem; } .lesson-nav strong { color: var(--ink); font-weight: 600; font-size: .96rem; } .lesson-nav .next { text-align: right; } /* -- resources ------------------------------------------------------------ */ .resource-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .resource { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: inherit; box-shadow: var(--shadow-xs); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; } .resource:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); } .resource-ext { flex: none; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 11px; background: var(--accent-wash); color: var(--accent-ink); font-size: .66rem; font-weight: 750; letter-spacing: .03em; } .resource-body { flex: 1; min-width: 0; } .resource-body strong { display: block; font-weight: 650; font-size: .97rem; overflow-wrap: anywhere; } .resource:hover .resource-body strong { color: var(--accent-ink); } .resource-desc { display: block; font-size: .88rem; color: var(--ink-soft); } .resource-meta { display: block; font-size: .77rem; color: var(--ink-faint); } .resource-go { flex: none; font-size: .8rem; font-weight: 600; color: var(--ink-faint); border: 1px solid var(--line-firm); border-radius: var(--r-pill); padding: .25rem .8rem; } .resource:hover .resource-go { background: var(--accent); border-color: var(--accent); color: #fff; } /* -- one file, viewed on the page ------------------------------------------ */ /* The presenter: a deck the site drew itself (src/Viewer/Slides.php). */ .presenter { --bar: #14171c; position: relative; margin-bottom: .8rem; border-radius: var(--r); background: #0e1014; box-shadow: var(--shadow); overflow: hidden; color: #e8eaed; } .presenter-stage { position: relative; width: 100%; aspect-ratio: var(--deck-ratio, 16 / 9); overflow: hidden; outline: none; background: #0e1014; } .presenter-stage:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); } .presenter-slide { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--scale, .5)); transform-origin: center; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s linear .18s; } .presenter-slide.is-current { opacity: 1; visibility: visible; transition: opacity .18s ease; } .presenter-slide > .s-stage { box-shadow: 0 0 0 1px rgba(255, 255, 255, .04); } /* Click the left third to go back, anywhere else to go on. */ .presenter-hit { position: absolute; top: 0; bottom: 0; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .presenter-hit-prev { left: 0; width: 33%; cursor: w-resize; } .presenter-hit-next { right: 0; width: 67%; cursor: e-resize; } .presenter-bar { display: flex; align-items: center; gap: .35rem; padding: .45rem .6rem; background: var(--bar); border-top: 1px solid rgba(255, 255, 255, .06); transition: opacity .25s ease, transform .25s ease; } .presenter-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 2.4rem; height: 2.4rem; padding: 0 .55rem; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; } .presenter-btn:hover { background: rgba(255, 255, 255, .1); } .presenter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .presenter-btn[aria-pressed="true"] { background: rgba(255, 255, 255, .14); } .presenter-btn[disabled] { opacity: .35; cursor: default; background: transparent; } .presenter-btn svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .presenter-count { min-width: 4.2rem; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; color: #aeb4bd; } .presenter-count b { color: #fff; font-weight: 700; } .presenter-progress { flex: 1; height: 3px; margin: 0 .6rem; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; } .presenter-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s ease; } /* Every slide at once. */ .presenter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .9rem; max-height: 60vh; overflow: auto; padding: 1rem; background: var(--bar); border-top: 1px solid rgba(255, 255, 255, .06); } .presenter-grid[hidden] { display: none; } .presenter-thumb { display: grid; gap: .35rem; justify-items: center; padding: 0; border: 0; background: none; color: #aeb4bd; font: inherit; font-size: .75rem; cursor: pointer; } .presenter-thumb-frame { display: block; position: relative; width: 168px; height: var(--thumb-h, 94.5px); overflow: hidden; border-radius: 6px; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s ease; } .presenter-thumb:hover .presenter-thumb-frame, .presenter-thumb:focus-visible .presenter-thumb-frame { outline-color: rgba(255, 255, 255, .5); } .presenter-thumb.is-current .presenter-thumb-frame { outline-color: var(--accent); } .presenter-thumb.is-current { color: #fff; } .presenter-thumb-scale { position: absolute; left: 0; top: 0; transform: scale(var(--thumb-scale, .13)); transform-origin: 0 0; pointer-events: none; } /* Presenting: the whole screen, the bar out of the way until the mouse moves. */ .presenter:fullscreen { display: flex; flex-direction: column; width: 100vw; height: 100vh; border-radius: 0; background: #000; } .presenter:fullscreen .presenter-stage { flex: 1; aspect-ratio: auto; background: #000; } .presenter:fullscreen .presenter-bar { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); border: 0; border-radius: 999px; background: rgba(20, 23, 28, .88); box-shadow: 0 8px 30px rgba(0, 0, 0, .4); width: min(560px, calc(100vw - 2rem)); } .presenter:fullscreen.is-idle .presenter-bar { opacity: 0; transform: translate(-50%, 1rem); pointer-events: none; } .presenter:fullscreen.is-idle .presenter-stage { cursor: none; } .presenter:fullscreen .presenter-grid { position: absolute; inset: 0 0 5rem; max-height: none; background: rgba(14, 16, 20, .96); } @media (max-width: 560px) { .presenter { border-radius: var(--r-sm); margin-left: -4px; margin-right: -4px; } .presenter-btn-text span { display: none; } .presenter-progress { margin: 0 .3rem; } .presenter-grid { grid-template-columns: repeat(2, 1fr); } .presenter-thumb-frame { width: 100%; } } @media (prefers-reduced-motion: reduce) { .presenter-slide, .presenter-slide.is-current, .presenter-bar, .presenter-progress span { transition: none; } } .file-view-note kbd { display: inline-block; min-width: 1.5em; padding: .05em .4em; border: 1px solid var(--line-firm); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); font: inherit; font-size: .78rem; text-align: center; } .file-view-failed { margin: 1rem 0 2rem; } /* A Word file, drawn as a page (src/Viewer/Document.php). */ .doc-view { margin: 0 0 2rem; padding: clamp(.5rem, 3vw, 2rem); border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); } .doc-page { max-width: 820px; margin: 0 auto; padding: clamp(1.2rem, 5vw, 3.2rem); background: #fff; color: #1b1e22; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 8px 28px rgba(0, 0, 0, .06); font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif; font-size: 11pt; line-height: 1.4; /* anywhere, not break-word: a gap on a notes-to-complete sheet is one long run of underscores, and only this lets a table cell wrap it. */ overflow-wrap: anywhere; } .doc-page p { margin: 0 0 .35em; max-width: none; } .doc-page img { max-width: 100%; height: auto; border: 0; border-radius: 0; animation: none; } .doc-page table { width: 100%; border-collapse: collapse; margin: .4em 0 .8em; } .doc-page td, .doc-page th { vertical-align: top; padding: .35em .55em; } .doc-page > div > *:first-child { margin-top: 0; } @media (max-width: 560px) { .doc-page { font-size: 10.5pt; } .doc-page table { display: block; overflow-x: auto; } } .file-view-head .btn-row { margin-top: 1.1rem; } .file-view { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); overflow: hidden; box-shadow: var(--shadow-xs); } .file-view iframe { display: block; width: 100%; height: min(80vh, 900px); min-height: 420px; border: 0; background: #fff; } .file-view-image { display: grid; place-items: center; padding: 1rem; } .file-view-image img { display: block; max-width: 100%; height: auto; } .file-view-note { margin: .8rem 0 2rem; font-size: .85rem; color: var(--ink-faint); } /* -- mark schemes ---------------------------------------------------------- Shared with the teacher view's question-and-answer panel (.teacher-q). */ .markscheme { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; } .markscheme li { position: relative; padding: .7rem .9rem .7rem 2.1rem; background: var(--ok-soft); border-radius: var(--r-sm); font-size: .91rem; color: var(--ink-soft); } .markscheme li::before { content: "✓"; position: absolute; left: .85rem; top: .7rem; color: var(--ok); font-weight: 700; } .model-answer { background: var(--surface-2); border-radius: var(--r-sm); border-left: 3px solid var(--accent); padding: 1rem 1.15rem; font-size: .95rem; } .model-answer p:last-child { margin-bottom: 0; } /* -- search --------------------------------------------------------------- */ .search-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; } .search-form input[type="search"], .search-form select { padding: .7rem 1.1rem; border: 1px solid var(--line-firm); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: .94rem; } .search-form input[type="search"] { flex: 1 1 300px; } .search-form input:focus, .search-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } .result { display: block; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: .55rem; text-decoration: none; color: inherit; transition: transform .14s ease, border-color .14s ease; } .result:hover { transform: translateY(-2px); border-color: var(--accent); } .result .where { font-size: .76rem; color: var(--ink-faint); margin-bottom: .2rem; } .result h3 { margin: 0 0 .15rem; font-size: 1.02rem; } .result:hover h3 { color: var(--accent-ink); } .result p { margin: 0; font-size: .89rem; color: var(--ink-soft); } /* Search extras: the count, a corrected or suggested spelling, a definition card for a search that is exactly a key term, and one heading per subject when the lessons found span more than one. */ .search-count { color: var(--ink-faint); font-size: .87rem; margin-bottom: 1.4rem; } .search-note { padding: .75rem 1rem; margin-bottom: 1rem; background: var(--surface-2); border-radius: var(--r-sm); font-size: .9rem; color: var(--ink-soft); } .search-note a, .empty a { color: var(--accent-ink); font-weight: 600; } .search-define { padding: 1.1rem 1.3rem; margin-bottom: 2rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); box-shadow: var(--shadow-xs); } .search-define .where { font-size: .76rem; color: var(--ink-faint); margin: 0 0 .2rem; } .search-define h2 { margin: 0 0 .35rem; font-size: 1.3rem; } .search-define p { margin: 0 0 .6rem; color: var(--ink-soft); } .search-define a { font-size: .85rem; color: var(--accent-ink); text-decoration: none; font-weight: 600; } .search-define a:hover { text-decoration: underline; } .result-list { border-top: 1px solid var(--line); padding-top: .55rem; margin-bottom: 2.4rem; } .result-group { display: flex; align-items: center; gap: .5rem; margin: 1.4rem 0 .6rem; font-size: .95rem; } .result-group .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); } .result-group + .result-list { margin-bottom: 1rem; } .result-count { font-size: .75rem; font-weight: 600; color: var(--ink-faint); background: var(--surface-2); border-radius: var(--r-pill); padding: .05rem .5rem; } /* -- footer --------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); margin-top: 3rem; background: var(--surface); } .footer-inner { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; padding: 2rem 0 2.4rem; font-size: .85rem; color: var(--ink-faint); } .site-footer strong { color: var(--ink); } .site-footer p { margin: .3rem 0 0; max-width: 46ch; } .site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; } .site-footer a { color: var(--ink-soft); text-decoration: none; } .site-footer a:hover { color: var(--accent-ink); } /* -- notices, errors, install -------------------------------------------- */ .notice { padding: .9rem 1.1rem; border-radius: var(--r-sm); border-left: 3px solid var(--accent); background: var(--surface-2); margin-bottom: 1.1rem; } .notice-ok { border-left-color: var(--ok); background: var(--ok-soft); } .notice-bad { border-left-color: var(--bad); background: var(--bad-soft); } .error-page { padding: 4.5rem 0; text-align: center; } .error-page .code { font-size: 3.4rem; font-weight: 700; letter-spacing: -.03em; color: var(--accent-ink); margin-bottom: .3rem; } .error-page .lede { margin-inline: auto; } .error-page .btn-row { justify-content: center; } .install-form { display: grid; gap: 1rem; max-width: 460px; margin-top: 1.4rem; } .install-form input[type="password"] { padding: .65rem .9rem; border: 1px solid var(--line-firm); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; } .install-form label { display: flex; gap: .5rem; align-items: center; font-size: .92rem; } /* A section heading with one of the line icons in front of it. */ .heading-icon { display: flex; align-items: center; gap: .5rem; } .heading-icon .icon { flex: none; width: 20px; height: 20px; color: var(--accent-ink); } /* -- cookie notice -------------------------------------------------------- */ /* A bar along the bottom, not a modal: it never covers the page or traps the keyboard, because there is no consent to collect. Sits under the menu (z-index 60/61) so opening the drawer still buries it. */ .cookie-note { position: fixed; z-index: 50; left: 1rem; right: 1rem; bottom: 1rem; margin-inline: auto; width: min(100% - 2rem, 660px); padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line-firm); border-radius: var(--r-lg); box-shadow: var(--shadow-md); /* The biscuit's own palette. The bite is a hole punched in the mark, so it has to be painted in whatever the card behind it is. */ --biscuit: #e2ac4d; --biscuit-edge: #c08529; --chip: #5b3a1e; --cookie-bg: var(--surface); opacity: 0; transform: translateY(1.2rem); transition: opacity .28s ease, transform .28s ease; } .cookie-note[hidden] { display: none; } .cookie-note.is-in { opacity: 1; transform: none; } .cookie-note.is-out { opacity: 0; transform: translateY(1.2rem); } .cookie-note-inner { display: grid; gap: .5rem 1rem; grid-template-columns: auto minmax(0, 1fr); align-items: start; } .cookie-note-text { grid-column: 2; } .cookie-note h2 { margin: 0 0 .35rem; font-size: 1.02rem; letter-spacing: -.01em; } .cookie-note p { margin: 0; font-size: .89rem; color: var(--ink-soft); } .cookie-note-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; } /* -- the biscuit ---------------------------------------------------------- */ .cookie-mark-wrap { display: block; line-height: 0; } .cookie-mark { display: block; overflow: visible; } .cookie-body { fill: var(--biscuit); stroke: var(--biscuit-edge); stroke-width: 1.6; } .cookie-chips circle { fill: var(--chip); } .cookie-chips circle:nth-child(2n) { opacity: .82; } /* Painted in the card colour and scaled up from nothing, so pressing the button takes a bite out of the biscuit rather than redrawing it. */ .cookie-bite circle { fill: var(--cookie-bg); } .cookie-bite { transform: scale(0); transform-origin: 40px 11px; transform-box: view-box; transition: transform .34s cubic-bezier(.2, .9, .3, 1.35); } .cookie-note.is-eaten .cookie-bite { transform: scale(1); } .cookie-crumbs circle { fill: var(--biscuit-edge); } .cookie-crumbs { opacity: 0; transform: translateY(-9px); transition: opacity .3s ease .12s, transform .4s ease .12s; } .cookie-note.is-eaten .cookie-crumbs { opacity: .9; transform: none; } @media (max-width: 560px) { .cookie-note { left: .75rem; right: .75rem; bottom: .75rem; padding: 1rem; } .cookie-note-inner { gap: .4rem .7rem; } .cookie-mark { width: 38px; height: 38px; } .cookie-note h2 { font-size: .98rem; } .cookie-note-actions { grid-column: 1 / -1; margin-top: .8rem; } .cookie-note-actions .btn { flex: 1 1 auto; justify-content: center; } } /* -- responsive ----------------------------------------------------------- */ @media (max-width: 920px) { .lesson-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .lesson-toc { display: none; } } /* A four-level breadcrumb wrapped onto four lines on a phone, which pushed the lesson itself below the fold. One scrollable line keeps every ancestor reachable and costs one row. */ @media (max-width: 720px) { .breadcrumbs ol { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: .2rem; } .breadcrumbs ol::-webkit-scrollbar { display: none; } .breadcrumbs li { flex: none; white-space: nowrap; } } @media (max-width: 620px) { .header-inner { gap: .5rem; } .brand-tag { display: none; } .lesson-header { padding: 1.3rem 1.2rem; } .practice-bar { position: static; border-radius: var(--r); } .index-row { padding: .95rem 1rem; gap: .75rem; } .question-card, .exam-q { padding: 1.15rem 1.1rem; } .page-head { padding: 1.6rem 0 1.4rem; } .teacher-panel { padding: 1.2rem 1.1rem; } .teacher-q { padding: 1rem 1rem; } .casestudy { padding: 1.2rem 1.1rem; } .casestudy-figures { gap: 1.1rem; } .card-meter { gap: 1.1rem; } .exam-total { padding: 1.3rem 1.2rem; } } /* A file row is an icon, a name and a Download pill on one line. At phone width the name was left a narrow column between the two and a generated filename ran to six lines, so below this the pill moves to its own full width row underneath. */ @media (max-width: 560px) { .resource { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ext body" "go go"; align-items: start; gap: .7rem .85rem; padding: .9rem 1rem; } .resource-ext { grid-area: ext; width: 2.4rem; height: 2.4rem; } .resource-body { grid-area: body; } .resource-go { grid-area: go; text-align: center; padding: .45rem .8rem; } } @media (max-width: 420px) { .wrap, .wrap-text { width: min(100% - 1.5rem, var(--wrap)); } .wrap-text { width: min(100% - 1.5rem, var(--text)); } .lesson-header { padding: 1.1rem 1rem; } .audience-switch { padding: .7rem .85rem; } .audience-option { padding: .4rem .75rem; } .flashcard-inner { min-height: 240px; } .flashcard-face { padding: 2.9rem 1.1rem 2.7rem; } .btn { padding: .55rem 1rem; font-size: .87rem; } .meta-line { gap: .4rem; } } /* -- print ---------------------------------------------------------------- */ @media print { .site-header, .site-footer, .breadcrumbs, .drawer, .drawer-scrim, .lesson-toc, .lesson-nav, .btn-row, .skip-link, .cookie-note, .audience-switch, .share-feedback { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .lesson-layout { display: block; padding: 0; } .lesson-header { border: 0; box-shadow: none; padding: 0 0 1rem; } .block { break-inside: avoid; margin-bottom: 1.3rem; } .keypoint, .objectives li, .process li, .term, .compare-col, .casestudy, .examfocus, .teacher-q { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } .teacher-panel { box-shadow: none; border: 1px solid #ccc; padding: 0 0 1rem; } a { color: #000; text-decoration: none; } /* A topic's banner is decoration: on paper the heading goes back to being a line of black type, with no picture and no wash under it. */ .topic-banner { display: block; aspect-ratio: auto; min-height: 0; border: 0; box-shadow: none; background: none; } .topic-banner img, .topic-banner::after { display: none; } .topic-card-picture { display: none; } .topic-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } .topic-banner-title { position: static; padding: 0; color: #000; text-shadow: none; font-size: 20pt; } } /* The page behind the menu must not scroll with it. */ body.drawer-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* A recent-lessons row has no number, so its marker is just the subject dot. */ .index-row .n:empty { width: .65rem; height: .65rem; border-radius: 50%; background: var(--accent); margin-top: .55rem; } /* ========================================================================== The newer lesson sections: mind maps, pictures, statements, worked examples and source sets. ========================================================================== */ /* -- mind map -------------------------------------------------------------- Not a radial drawing. A ring of branches around a hub reads beautifully at 1280px and is unusable at 360px, and this site is read on phones. So the hub is a banner and the branches are a grid under it, joined by a spine that only appears once there is room for it to mean anything. */ .mindmap { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); padding: 1.4rem; position: relative; } .mindmap-centre { margin: 0 auto 1.3rem; max-width: 34ch; text-align: center; font-family: var(--serif); font-size: 1.32rem; font-weight: 700; line-height: 1.25; color: #fff; background: var(--accent-ink); border-radius: var(--r); padding: .85rem 1.2rem; position: relative; z-index: 1; } .mindmap-branches { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .mindmap-branch { position: relative; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .85rem 1rem 1rem; } .mindmap-branch::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 3px 0 0 3px; background: var(--accent-ink); opacity: .75; } .mindmap-branch h3 { margin: 0 0 .4rem; font-size: .97rem; line-height: 1.3; } .mindmap-branch ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; } .mindmap-branch ul li { position: relative; padding-left: 1rem; font-size: .88rem; line-height: 1.45; color: var(--ink-soft); } .mindmap-branch ul li::before { content: "▸"; position: absolute; left: 0; top: -.02em; color: var(--accent-ink); font-size: .8em; } /* Above this width the grid is at least two across, so a spine down the middle joins the hub to the branches the way the drawing would. */ @media (min-width: 720px) { .mindmap-branches::before { content: ""; position: absolute; top: 3.4rem; bottom: 1.4rem; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(var(--accent-ink), transparent); opacity: .28; z-index: 0; } .mindmap-branch { z-index: 1; } } /* -- pictures -------------------------------------------------------------- */ .gallery { margin: 0; } .gallery-item img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); } .gallery-2, .gallery-3 { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .gallery-caption { margin: .5rem 0 0; font-size: .85rem; color: var(--ink-faint); line-height: 1.45; } /* Picture-and-text: the words on the left, the picture on the right. On a phone the picture drops under the words rather than squeezing them. */ .picture-split { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } .picture-split.picture-split-words { grid-template-columns: minmax(0, 1fr); } .picture-split-words-col > p:first-child { margin-top: 0; } .picture-split-points { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .6rem; } .picture-split-points li { padding: .6rem .85rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-sm); background: var(--surface-2); line-height: 1.5; } .picture-split-points strong { display: block; } @media (max-width: 720px) { .picture-split { grid-template-columns: minmax(0, 1fr); } } /* -- the big statement ----------------------------------------------------- */ .statement { border-radius: var(--r-lg); padding: 1.7rem 1.6rem; background: linear-gradient(135deg, var(--accent-wash), transparent 70%), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); } .statement-text { margin: .5rem 0 0; font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); font-weight: 700; line-height: 1.28; letter-spacing: -.01em; text-wrap: balance; } .statement-support { margin: .85rem 0 0; padding-top: .85rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .93rem; line-height: 1.55; } /* -- worked example -------------------------------------------------------- */ .worked-problem { margin: 0 0 1.1rem; padding: .9rem 1.1rem; background: var(--surface-2); border-left: 4px solid var(--accent-ink); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .97rem; line-height: 1.55; } .worked-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; counter-reset: none; } .worked-steps li { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .2rem .8rem; align-items: baseline; padding: .6rem .2rem; border-bottom: 1px solid var(--line); } .worked-steps li:last-child { border-bottom: 0; } .worked-steps .n { grid-row: 1 / span 2; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent-ink); color: #fff; font-size: .8rem; font-weight: 700; display: grid; place-items: center; align-self: start; } .worked-steps .what { font-weight: 600; } .worked-steps .working { font-family: var(--mono); font-size: .89rem; color: var(--ink-soft); overflow-wrap: anywhere; } .worked-answer { margin: 1.1rem 0 0; padding: .85rem 1.1rem; background: var(--accent-ink); color: #fff; border-radius: var(--r-sm); font-weight: 600; display: flex; gap: .9rem; align-items: baseline; flex-wrap: wrap; } .worked-answer span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; font-weight: 700; } /* -- source sets ----------------------------------------------------------- */ .sourceset { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .source-card { margin: 0; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent-ink); border-radius: var(--r-sm); box-shadow: var(--shadow-xs); } .source-card blockquote { margin: .5rem 0 .7rem; padding: 0; border: 0; font-family: var(--serif); font-size: 1rem; font-style: italic; line-height: 1.55; } .source-card figcaption { padding-top: .6rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-faint); } .source-question { margin: 1rem 0 0; padding: .85rem 1.1rem; background: var(--surface-2); border-radius: var(--r-sm); font-size: .95rem; line-height: 1.5; } @media print { .mindmap, .source-card, .statement, .worked-answer { break-inside: avoid; box-shadow: none; } .mindmap-centre, .worked-answer { background: #eee !important; color: #000 !important; } .mindmap-branches::before { display: none; } .gallery-item img { max-height: 7cm; width: auto; } } /* ========================================================================== The loading screen, and the thin bar that replaces it afterwards. The overlay is created by script, so none of this applies unless the script ran — a browser with JavaScript off never gets a splash it cannot dismiss. ========================================================================== */ /* While the splash is up the page behind it must not scroll, or a flick of the thumb scrolls a page nobody can see yet. */ html[data-loading], html[data-loading] body { overflow: hidden; } .loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); opacity: 1; transition: opacity .38s ease, visibility .38s ease; } .loader.is-out { opacity: 0; visibility: hidden; pointer-events: none; } .loader-inner { display: grid; justify-items: center; gap: 1.1rem; padding: 2rem; animation: loader-rise .5s cubic-bezier(.2, .7, .3, 1) both; } .loader-mark svg { display: block; } /* The tile and the letter keep their own colours in both themes, exactly as the header mark does: a printed label does not invert. */ .loader-tile { fill: var(--logo-bg); } .loader-letter { fill: var(--logo-ink); font-family: var(--serif); font-size: 42px; font-weight: 700; } /* The mark breathes rather than spins. A spinner says "waiting"; this says "arriving", and it is the difference between the two that was wanted. */ .loader-mark { animation: loader-breathe 1.8s ease-in-out infinite; transform-origin: 50% 50%; } .loader-word { margin: 0; font-family: var(--serif); font-size: 1.12rem; font-weight: 700; letter-spacing: .01em; color: var(--ink); } .loader-track { width: 168px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; } /* An indeterminate sweep, because the page has no progress to report: it is one request, and it either has arrived or it has not. Pretending to know a percentage would be a lie drawn at 60fps. */ .loader-fill { display: block; width: 40%; height: 100%; border-radius: 3px; background: var(--accent-ink); animation: loader-sweep 1.15s cubic-bezier(.65, .05, .35, 1) infinite; } @keyframes loader-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes loader-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } } @keyframes loader-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } } /* -- the navigation bar ---------------------------------------------------- Every page after the first. It only appears once a navigation has taken long enough to be worth acknowledging, so a fast page shows nothing at all rather than flashing a bar for 80ms. */ .nav-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 190; opacity: 0; transition: opacity .2s ease; pointer-events: none; } .nav-progress.is-on { opacity: 1; } .nav-progress span { display: block; height: 100%; width: 0; background: var(--accent-ink); box-shadow: 0 0 8px color-mix(in srgb, var(--accent-ink) 60%, transparent); transition: width .25s ease; } @media (prefers-reduced-motion: reduce) { .loader-mark, .loader-fill { animation: none; } .loader-inner { animation: none; } .loader-fill { width: 100%; } } @media print { .loader, .nav-progress { display: none !important; } } /* ========================================================================== Quality of life: the reading bar, linkable headings, the report form. ========================================================================== */ .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; } .read-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-ink), color-mix(in srgb, var(--accent-ink) 55%, var(--ink-ghost))); } /* A heading you can link to. Invisible until the heading is hovered or the link itself is focused, so it never competes with the heading. */ .heading-anchor { margin-left: .45rem; color: var(--ink-ghost); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity .15s ease, color .15s ease; } .block > h2:hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; } .heading-anchor:hover { color: var(--accent-ink); } /* Touch has no hover, so on a phone it would never appear at all. */ @media (hover: none) { .heading-anchor { display: none; } } /* -- reporting a lesson ---------------------------------------------------- */ .report { margin: 2.4rem 0 0; border: 1px dashed var(--line-firm); border-radius: var(--r); background: var(--surface); } .report > summary { padding: .9rem 1.2rem; cursor: pointer; font-size: .92rem; color: var(--ink-soft); list-style: none; border-radius: var(--r); display: flex; align-items: center; gap: .5rem; transition: color .15s ease, background .15s ease; } .report > summary::-webkit-details-marker { display: none; } .report > summary::before { content: "?"; flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: var(--accent-ink); background: var(--accent-wash); } .report > summary:hover { color: var(--ink); background: var(--surface-2); } .report[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; } .report-body { padding: 1.1rem 1.2rem 1.3rem; } .report-intro { margin: 0 0 1rem; font-size: .9rem; line-height: 1.55; color: var(--ink-soft); } .report-form .field { margin-bottom: .9rem; } .report-form label { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 600; } .report-form label .hint { font-weight: 400; color: var(--ink-faint); } .report-form select, .report-form textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--line-firm); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: inherit; font-size: .92rem; } .report-form textarea { resize: vertical; min-height: 4.5rem; } .report-form select:focus-visible, .report-form textarea:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; border-color: var(--accent-ink); } /* The honeypot. Off-screen rather than display:none, because a bot that reads the stylesheet skips anything hidden and fills anything that is not. */ .report-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media print { .read-progress, .report, .heading-anchor { display: none !important; } } /* ========================================================================== Premium polish. Small things, all of them: the difference between a site that works and one that feels made. ========================================================================== */ /* Selected text takes the subject's colour rather than the browser's blue. */ ::selection { background: color-mix(in srgb, var(--accent-ink) 22%, transparent); color: var(--ink); } /* One focus ring everywhere, in the accent, always visible against both themes. Keyboard users get it; mouse users never see it. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r-xs); } /* Anchored headings land below the sticky header rather than under it. */ :target { scroll-margin-top: 5.5rem; } html { scroll-behavior: smooth; } /* Long words — a German loanword, a chemical name, a URL in a caption — break rather than pushing the layout sideways on a phone. */ .lede, .block p, .keypoint p, .term dd, .report-intro { overflow-wrap: break-word; } /* Headings that wrap should wrap evenly rather than leaving one word alone on the last line. Ignored by browsers that do not have it, which is fine. */ h1, h2, h3, .lede { text-wrap: balance; } /* A card that can be clicked says so by lifting very slightly. Transform rather than shadow alone, because a shadow change on its own reads as a flicker at this scale. */ .index-row, .tile, .keypoint, .source-card { transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease, border-color .18s ease; } a.index-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--line-firm); } a.index-row:active { transform: none; } /* A solid button should depress rather than just change colour. */ .btn { transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; } .btn:active { transform: translateY(1px); } /* Images arrive rather than snap in, once they have decoded. */ .gallery-item img { animation: fade-in .35s ease both; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* A number that is being compared should line up in its column. */ .num, td.num, .tile b { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .index-row, .tile, .keypoint, .source-card, .btn { transition: none; } a.index-row:hover, .btn:active { transform: none; } .gallery-item img { animation: none; } } /* The wide shapes are not prose, so the prose measure does not apply to them. A mind map squeezed into 680px stops being a diagram and becomes a list; a row of pictures at that width is a column of pictures. Their own container still bounds them — inside a lesson, the article column. */ .block-mindmap, .block-gallery, .block-sources, .block-statement { max-width: none; } /* ========================================================================== Studying a lesson: a key term marked where the lesson uses it. ========================================================================== */ /* -- a key term, in the prose --------------------------------------------- */ /* The first mention of each term the lesson defines. Underlined rather than coloured, because a colour would read as a link to another page, and this goes nowhere: it opens the definition in place. */ a.gloss { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; cursor: help; } a.gloss:hover, a.gloss:focus-visible { background: var(--accent-wash); color: var(--accent-ink); } a.gloss.is-open { background: var(--accent-wash); color: var(--accent-ink); } .gloss-pop { position: absolute; z-index: 70; width: min(22rem, calc(100vw - 2rem)); padding: .85rem 1rem .9rem; background: var(--surface); border: 1px solid var(--line-firm); border-radius: var(--r); box-shadow: var(--shadow-md); } .gloss-pop[hidden] { display: none; } .gloss-term { margin: 0 0 .25rem; font-weight: 650; font-size: .95rem; color: var(--accent-ink); } .gloss-def { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); } .gloss-more { font-size: .8rem; color: var(--ink-faint); } .gloss-more:hover { color: var(--accent-ink); } /* An underline on paper reads as an underline, not as something to tap. */ @media print { .gloss-pop { display: none !important; } a.gloss { text-decoration: none; } } .block-foot { margin-top: 1rem; color: var(--ink-faint); font-size: .87rem; } /* ========================================================================== Knowledge organisers: a chapter on one A4 landscape sheet. The sheet is laid out at its real size in millimetres so what is measured on screen is what prints; organiser.js sets the type size to fit and scales the whole sheet down to the column. The colours are fixed rather than themed: it is a piece of paper, and it stays one in dark mode. ========================================================================== */ .ko-frame { position: relative; width: 100%; margin: 0 0 2.5rem; overflow: hidden; } .ko-sheet { --ko-columns: 3; width: 297mm; height: 210mm; box-sizing: border-box; padding: 7mm 8mm 5mm; display: flex; flex-direction: column; gap: 3.2mm; background: #fff; color: #16201b; font-family: var(--sans); font-size: 12px; line-height: 1.32; transform-origin: top left; box-shadow: 0 2px 6px rgba(16, 32, 26, .12), 0 18px 40px -24px rgba(16, 32, 26, .45); border-radius: 2px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ko-head { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 6mm; padding-bottom: 2.4mm; border-bottom: 1.2mm solid #16201b; } .ko-eyebrow { grid-column: 1 / -1; margin: 0 0 .6mm; font-size: 9pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5b6863; } .ko-title { margin: 0; font-family: var(--serif); font-size: 22pt; line-height: 1.05; color: #16201b; } .ko-subtitle { margin: 0; font-size: 10pt; font-style: italic; color: #47544e; text-align: right; } .ko-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(var(--ko-columns), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); grid-auto-flow: row dense; gap: 2.6mm; } .ko-box { --ko-ink: #4d5a55; --ko-wash: #eef1f0; min-height: 0; display: flex; flex-direction: column; border: .5mm solid var(--ko-ink); border-radius: 2mm; background: var(--ko-wash); overflow: hidden; } .ko-box-title { flex: 0 0 auto; margin: 0; padding: 1.1mm 2.4mm 1.2mm; background: var(--ko-ink); color: #fff; font-family: var(--sans); font-size: 1.08em; font-weight: 700; line-height: 1.2; } .ko-box-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .35em; padding: 1.6mm 2.4mm 1.8mm; overflow: hidden; } .ko-text { margin: 0; } .ko-list { margin: 0; padding: 0 0 0 1.05em; } .ko-list li + li { margin-top: .18em; } .ko-list li::marker { color: var(--ko-ink); } .ko-list b { color: var(--ko-ink); } .ko-pictures { flex: 1 1 0; min-height: 3.2em; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.6mm; } .ko-picture { margin: 0; min-height: 0; display: flex; flex-direction: column; gap: .3mm; } .ko-picture img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; object-position: center; } .ko-picture figcaption { flex: 0 0 auto; font-size: .82em; font-style: italic; text-align: center; color: #47544e; } .ko-picture-missing { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; border: .4mm dashed var(--ko-ink); border-radius: 1.4mm; color: var(--ko-ink); font-size: .85em; text-align: center; padding: 1mm; } .ko-mark { flex: 0 0 auto; margin: 0; font-size: 7pt; color: #8a8f98; text-align: right; } @media print { .ko-page { max-width: none; padding: 0; margin: 0; } .ko-page .ko-intro { display: none !important; } .ko-frame { height: auto !important; margin: 0; overflow: visible; } .ko-sheet { transform: none !important; width: 297mm; height: 209mm; box-shadow: none; border-radius: 0; break-inside: avoid; } body:has(.ko-page) main, body:has(.ko-page) #main { padding: 0 !important; margin: 0 !important; } } /* ========================================================================== The slide presenter: decks drawn by the site (see src/Viewer/Slides.php). A slide is a fixed 1280 × 720 stage of absolutely placed boxes; the presenter scales the whole stage to fit, so nothing here is responsive. ========================================================================== */ .s-stage { position: relative; overflow: hidden; color: #000; font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif; line-height: 1.2; text-align: left; -webkit-font-smoothing: antialiased; } .s-stage *, .s-stage *::before, .s-stage *::after { box-sizing: border-box; } .s-stage p { margin: 0; max-width: none; } .s-sp, .s-pic, .s-tbl { position: absolute; } .s-geo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .s-tx { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: visible; overflow-wrap: break-word; } .s-bu { display: inline-block; min-width: 1.15em; padding-right: .35em; text-indent: 0; } .s-pic { overflow: hidden; } .s-pic img { display: block; border: 0; border-radius: 0; animation: none; } .s-tbl table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; } .s-tbl td { padding: 4.8px 9.6px; vertical-align: top; border: 1px solid rgba(0, 0, 0, .18); } /* -- revision pack ---------------------------------------------------------- */ /* The picker: a section per subject, a fold per chapter, a tick per lesson, and a bar along the foot of the window holding the options and the button. */ .pack-board { margin: .9rem 0 0; font-size: .84rem; color: var(--ink-faint); } .pack-subject { margin: 0 0 2rem; } .pack-subject h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.25rem; } .pack-subject h2 .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent); } .pack-topic { margin: 1.1rem 0 .45rem; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); } .pack-chapter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: .5rem; } .pack-chapter.has-picked { border-color: var(--accent); } .pack-chapter summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; cursor: pointer; font-weight: 600; } .pack-chapter-count { flex: none; font-size: .8rem; font-weight: 500; color: var(--ink-faint); } .pack-chapter.has-picked .pack-chapter-count { color: var(--accent-ink); font-weight: 600; } .pack-all { display: flex; gap: .55rem; align-items: center; padding: 0 1.1rem .55rem; font-size: .88rem; color: var(--ink-soft); } .pack-all[hidden] { display: none; } .pack-lessons { list-style: none; margin: 0; padding: 0 .6rem .6rem; } .pack-lessons label { display: flex; align-items: baseline; gap: .6rem; padding: .5rem .5rem; border-radius: var(--r-xs); cursor: pointer; } .pack-lessons label:hover { background: var(--surface-2); } .pack-lessons label span:nth-of-type(1) { flex: 1; min-width: 0; } .pack-lessons input, .pack-all input, .pack-options input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; flex: none; } .pack-terms { flex: none; font-size: .78rem; color: var(--ink-faint); } .pack-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: 1.5rem 0 0; padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--line-firm); border-radius: var(--r-lg); box-shadow: var(--shadow-md); } .pack-options { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0; padding: 0; border: 0; font-size: .9rem; } .pack-options label { display: flex; align-items: center; gap: .45rem; cursor: pointer; } .pack-total { flex: 1 1 12rem; margin: 0; font-size: .86rem; color: var(--ink-faint); } .pack-total.is-over { color: var(--warn); } .pack-bar .btn[disabled] { opacity: .5; cursor: not-allowed; } /* The pack itself: one lesson after another in a single reading column. */ .pack-page { width: min(100% - 2rem, var(--text)); } .pack-contents { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.3rem; margin: 0 0 2.4rem; } .pack-contents ol { margin: .4rem 0 0; padding-left: 1.3rem; } .pack-contents li { margin: .3rem 0; } .pack-contents a { color: var(--ink); font-weight: 600; text-decoration: none; } .pack-contents a:hover { color: var(--accent-ink); text-decoration: underline; } .pack-contents .where { display: block; font-size: .78rem; color: var(--ink-faint); } .pack-organisers { margin: .9rem 0 0; font-size: .85rem; color: var(--ink-soft); } .pack-organisers a { font-weight: 600; } .pack-lesson { padding-top: 2.4rem; margin-top: 2.4rem; border-top: 2px solid var(--line); } .pack-lesson-title { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 .45rem; } .pack-lesson-title a { color: inherit; text-decoration: none; } .pack-lesson-title a:hover { color: var(--accent-ink); } /* On paper: the contents on the first sheet, then each lesson on a new one. */ @media print { .pack-page { width: auto; } .pack-head .search-note { display: none; } .pack-contents { border: 0; padding: 0; } .pack-contents a { color: #000; } .pack-lesson { break-before: page; border-top: 0; padding-top: 0; margin-top: 0; } }