/* Daylight design tokens, copied unchanged from the ASVAB Prep design system (asvab-prep/design-system/tokens.css) so the two products share one look. Only the two @font-face rules below are added: the fonts are served from ./fonts. Change colours, type, spacing and shape here, in one place. */ @font-face { font-family: 'Bricolage Grotesque Variable'; font-style: normal; font-display: swap; font-weight: 200 800; src: url('fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations'); } @font-face { font-family: 'Plus Jakarta Sans Variable'; font-style: normal; font-display: swap; font-weight: 200 800; src: url('fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations'); } /* Daylight design tokens. Standalone: drop this file into a project and load it first. components.css depends on it and on nothing else. The specification is DAYLIGHT-DESIGN-SPEC.md. Colour rules - Near-black ink on a bright, slightly warm page. Dark mode follows the device (prefers-color-scheme) unless the person chose a theme: the choice is the attribute data-theme="light" or data-theme="dark" on the root element, set before the first paint. - Every category owns a hue with four values: --cat-N-field the big soft field. The same in light and dark. Always with --on-field ink on it. --cat-N-deep a darker step of the field, for the large decorative shape drawn on the field. --cat-N-soft a tint for chips, method panels and "shaky" tiles. Changes with the theme. --cat-N-text the hue as text, a glyph or an outline on the page. At least 4.5:1 on --bg, --surface and its own soft tint. Changes with the theme. - A category's colour is never shown without its shape and its name. - Right and wrong mark one answer, never a person: always with an icon and a word. Fonts Bricolage Grotesque (display) and Plus Jakarta Sans (text), both variable, weight axis only, Latin subset, self-hosted. Install: npm i @fontsource-variable/bricolage-grotesque @fontsource-variable/plus-jakarta-sans and declare the two faces in your own stylesheet (the address depends on your build tool): @font-face { font-family: 'Bricolage Grotesque Variable'; font-style: normal; font-display: swap; font-weight: 200 800; src: url('@fontsource-variable/bricolage-grotesque/files/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations'); } @font-face { font-family: 'Plus Jakarta Sans Variable'; font-style: normal; font-display: swap; font-weight: 200 800; src: url('@fontsource-variable/plus-jakarta-sans/files/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations'); } The real faces are used only when the root element has the class "fonts" (see html.fonts below). Add that class from a small script once the page works, or write it into the markup if you do not delay the fonts. Until then the metric-matched stand-in faces below are used, so lines do not move when the real faces arrive. */ /* ---------- Stand-in faces ---------- Made from a font the device already has and sized to take the same room as the real face: the same average width (size-adjust) and the same height above and below the line (ascent-override, descent-override). A family whose font the device does not have is passed over. The Segoe UI and Arial figures were measured in Edge against the two font files; the Roboto figures are worked out from Arial's and Roboto's published heights and were not seen on an Android phone. */ @font-face { font-family: 'Text Segoe'; font-weight: 200 549; src: local('Segoe UI'); size-adjust: 106%; ascent-override: 97.9%; descent-override: 20.9%; line-gap-override: 0%; } @font-face { font-family: 'Text Segoe'; font-weight: 550 800; src: local('Segoe UI Bold'); size-adjust: 102.1%; ascent-override: 101.6%; descent-override: 21.7%; line-gap-override: 0%; } @font-face { font-family: 'Text Roboto'; font-weight: 400; src: local('Roboto'); size-adjust: 104.1%; ascent-override: 99.7%; descent-override: 21.3%; line-gap-override: 0%; } @font-face { font-family: 'Text Arial'; font-weight: 200 549; src: local('Arial'); size-adjust: 104.9%; ascent-override: 99%; descent-override: 21.2%; line-gap-override: 0%; } @font-face { font-family: 'Text Arial'; font-weight: 550 800; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 100.4%; ascent-override: 103.4%; descent-override: 22.1%; line-gap-override: 0%; } @font-face { font-family: 'Display Segoe'; font-weight: 200 800; src: local('Segoe UI Bold'); size-adjust: 103.1%; ascent-override: 90.2%; descent-override: 26.2%; line-gap-override: 0%; } @font-face { font-family: 'Display Roboto'; font-weight: 200 800; src: local('Roboto Bold'), local('Roboto-Bold'), local('Roboto'); size-adjust: 102%; ascent-override: 91.2%; descent-override: 26.5%; line-gap-override: 0%; } @font-face { font-family: 'Display Arial'; font-weight: 200 800; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 102%; ascent-override: 91.2%; descent-override: 26.5%; line-gap-override: 0%; } :root { color-scheme: light; /* Surfaces and ink */ --bg: #fdfcf9; /* the page */ --surface: #ffffff; /* a raised card, an option row, a field */ --sunk: #f3f1ea; /* a quiet panel, the rail, a quiet button */ --ink: #1a1730; /* text, primary buttons, the answer block */ --muted: #5b5873; /* secondary text */ --line: #e4e1d8; /* hairlines between rows, card edges */ --line-strong: #86839b; /* the edge of a control (3:1 against the page), dashed outlines */ --focus: #1a1730; --bar: #1a1730; /* the floating tab bar */ --bar-ink: #fdfcf9; --on-field: #1a1730; /* ink on any colour field; the same in both themes */ --btn: #1a1730; --btn-ink: #fdfcf9; --notice: #fdf2cb; /* One answer, right or wrong */ --right-text: #0e6b45; --right-soft: #ddf4e7; --right-field: #55d69a; --wrong-text: #a8291f; --wrong-soft: #fce5e1; --wrong-field: #ff9a8f; /* The ten categorical hues. In ASVAB Prep each is a subject: 1 Tangerine Arithmetic Reasoning (ar) 6 Sun Electronics Information (ei) 2 Sky Mathematics Knowledge (mk) 7 Slate Auto Information (ai) 3 Orchid Word Knowledge (wk) 8 Grape Shop Information (si) 4 Lagoon Paragraph Comprehension (pc) 9 Fern Mechanical Comprehension (mc) 5 Iris General Science (gs) 10 Coral Assembling Objects (ao) */ --cat-1-field: #ff9a4d; --cat-1-deep: #f4812a; --cat-1-soft: #fde4d0; --cat-1-text: #9c4b0d; --cat-2-field: #74a9ff; --cat-2-deep: #4f8ff6; --cat-2-soft: #dce8fa; --cat-2-text: #1058cb; --cat-3-field: #f28dd2; --cat-3-deep: #ed64c2; --cat-3-soft: #fae1f0; --cat-3-text: #b31480; --cat-4-field: #2fc9be; --cat-4-deep: #26a49b; --cat-4-soft: #ccf0eb; --cat-4-text: #196b66; --cat-5-field: #ac96ff; --cat-5-deep: #8c70f7; --cat-5-soft: #eae4fa; --cat-5-text: #4113ec; --cat-6-field: #ffd43b; --cat-6-deep: #f3c319; --cat-6-soft: #fdf2cb; --cat-6-text: #7b620a; --cat-7-field: #a3b3cc; --cat-7-deep: #859bbc; --cat-7-soft: #e7eaee; --cat-7-text: #4b6287; --cat-8-field: #d596f5; --cat-8-deep: #c272ee; --cat-8-soft: #f3e3fb; --cat-8-text: #8a1fb8; --cat-9-field: #7be08c; --cat-9-deep: #56cf6b; --cat-9-soft: #ddf6e1; --cat-9-text: #17722b; --cat-10-field: #ff8e7e; --cat-10-deep: #f66c59; --cat-10-soft: #fde2db; --cat-10-text: #b8240f; /* The original names used by ASVAB Prep, kept as aliases. A new product can delete this block. */ --ar-field: var(--cat-1-field); --ar-deep: var(--cat-1-deep); --ar-soft: var(--cat-1-soft); --ar-text: var(--cat-1-text); --mk-field: var(--cat-2-field); --mk-deep: var(--cat-2-deep); --mk-soft: var(--cat-2-soft); --mk-text: var(--cat-2-text); --wk-field: var(--cat-3-field); --wk-deep: var(--cat-3-deep); --wk-soft: var(--cat-3-soft); --wk-text: var(--cat-3-text); --pc-field: var(--cat-4-field); --pc-deep: var(--cat-4-deep); --pc-soft: var(--cat-4-soft); --pc-text: var(--cat-4-text); --gs-field: var(--cat-5-field); --gs-deep: var(--cat-5-deep); --gs-soft: var(--cat-5-soft); --gs-text: var(--cat-5-text); --ei-field: var(--cat-6-field); --ei-deep: var(--cat-6-deep); --ei-soft: var(--cat-6-soft); --ei-text: var(--cat-6-text); --ai-field: var(--cat-7-field); --ai-deep: var(--cat-7-deep); --ai-soft: var(--cat-7-soft); --ai-text: var(--cat-7-text); --si-field: var(--cat-8-field); --si-deep: var(--cat-8-deep); --si-soft: var(--cat-8-soft); --si-text: var(--cat-8-text); --mc-field: var(--cat-9-field); --mc-deep: var(--cat-9-deep); --mc-soft: var(--cat-9-soft); --mc-text: var(--cat-9-text); --ao-field: var(--cat-10-field); --ao-deep: var(--cat-10-deep); --ao-soft: var(--cat-10-soft); --ao-text: var(--cat-10-text); /* The current category. A wrapper with class cat-1 ... cat-10 sets these; the default is neutral. */ --s-field: var(--sunk); --s-deep: var(--line); --s-soft: var(--sunk); --s-text: var(--ink); /* Type: Bricolage Grotesque for display, Plus Jakarta Sans for text. */ --font-display-local: 'Display Segoe', 'Display Roboto', 'Display Arial', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-text-local: 'Text Segoe', 'Text Roboto', 'Text Arial', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: var(--font-display-local); --font-text: var(--font-text-local); --font-math: 'Cambria Math', 'STIX Two Math', Cambria, Georgia, 'Times New Roman', serif; /* The weight of running text. */ --w-text: 450; /* rem throughout, so the device's text size and 200% scaling are honoured. 15 px is the floor. */ --t-hero: clamp(2.125rem, 1.55rem + 3.1vw, 3.75rem); --t-1: clamp(1.75rem, 1.5rem + 1.3vw, 2.625rem); --t-2: 1.5rem; --t-3: 1.1875rem; --t-body: 1.0625rem; --t-small: 0.9375rem; /* Space: a 4 px base */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; /* Shape: soft and generous */ --r-s: 12px; --r-m: 20px; --r-l: 28px; --r-xl: 36px; --r-pill: 999px; /* Elevation: colour does the layering; shadow is kept for things that float */ --e-1: 0 1px 2px rgb(16 12 40 / 0.06), 0 6px 16px rgb(16 12 40 / 0.07); --e-2: 0 2px 6px rgb(16 12 40 / 0.14), 0 14px 36px rgb(16 12 40 / 0.22); /* Motion: one spring, three durations. Browsers without linear() get the cubic-bezier. */ --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --d-fast: 140ms; --d: 360ms; --d-slow: 640ms; /* Sizes */ --tap: 3rem; /* the smallest touch target: 48 px */ --measure: 40rem; /* the reading column */ --rail: 16.5rem; /* the left rail on a laptop */ --safe-b: env(safe-area-inset-bottom, 0px); } /* The real faces, once the root element has the class "fonts". */ html.fonts { --font-display: 'Bricolage Grotesque Variable', var(--font-display-local); --font-text: 'Plus Jakarta Sans Variable', var(--font-text-local); } @supports (transition-timing-function: linear(0, 1)) { :root { --spring: linear(0, 0.012 1.2%, 0.05 2.6%, 0.2 5.6%, 0.75 15%, 0.94 19.5%, 1.04 23.5%, 1.085 27.5%, 1.095 31%, 1.08 36%, 1.02 46%, 0.995 54%, 0.988 61%, 0.998 78%, 1); } } /* ---------- Dark ---------- The two blocks below hold the same values and must be kept the same. Fields (--cat-N-field, --cat-N-deep, --right-field, --wrong-field) and --on-field do not change: a colour field looks the same in both themes and always carries near-black ink. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: #121120; --surface: #1b1a2e; --sunk: #23213a; --ink: #f7f4ec; --muted: #b5b2ca; --line: #34324f; --line-strong: #7d7aa0; --focus: #f7f4ec; --bar: #2c2a47; --bar-ink: #f7f4ec; --btn: #f7f4ec; --btn-ink: #121120; --notice: #413825; --right-text: #7be3b0; --right-soft: #163829; --wrong-text: #ffa79d; --wrong-soft: #43201d; --cat-1-soft: #412c29; --cat-1-text: #ff9a4d; --cat-2-soft: #262f4d; --cat-2-text: #74a9ff; --cat-3-soft: #3f2a44; --cat-3-text: #f28dd2; --cat-4-soft: #183640; --cat-4-text: #2fc9be; --cat-5-soft: #312c4d; --cat-5-text: #af9aff; --cat-6-soft: #413825; --cat-6-text: #ffd43b; --cat-7-soft: #2f3142; --cat-7-text: #a3b3cc; --cat-8-soft: #38294a; --cat-8-text: #d596f5; --cat-9-soft: #22392b; --cat-9-text: #7be08c; --cat-10-soft: #412a33; --cat-10-text: #ff8e7e; --e-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px rgb(0 0 0 / 0.3); --e-2: 0 2px 6px rgb(0 0 0 / 0.4), 0 14px 36px rgb(0 0 0 / 0.5); } } :root[data-theme='dark'] { color-scheme: dark; --bg: #121120; --surface: #1b1a2e; --sunk: #23213a; --ink: #f7f4ec; --muted: #b5b2ca; --line: #34324f; --line-strong: #7d7aa0; --focus: #f7f4ec; --bar: #2c2a47; --bar-ink: #f7f4ec; --btn: #f7f4ec; --btn-ink: #121120; --notice: #413825; --right-text: #7be3b0; --right-soft: #163829; --wrong-text: #ffa79d; --wrong-soft: #43201d; --cat-1-soft: #412c29; --cat-1-text: #ff9a4d; --cat-2-soft: #262f4d; --cat-2-text: #74a9ff; --cat-3-soft: #3f2a44; --cat-3-text: #f28dd2; --cat-4-soft: #183640; --cat-4-text: #2fc9be; --cat-5-soft: #312c4d; --cat-5-text: #af9aff; --cat-6-soft: #413825; --cat-6-text: #ffd43b; --cat-7-soft: #2f3142; --cat-7-text: #a3b3cc; --cat-8-soft: #38294a; --cat-8-text: #d596f5; --cat-9-soft: #22392b; --cat-9-text: #7be08c; --cat-10-soft: #412a33; --cat-10-text: #ff8e7e; --e-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px rgb(0 0 0 / 0.3); --e-2: 0 2px 6px rgb(0 0 0 / 0.4), 0 14px 36px rgb(0 0 0 / 0.5); } :root[data-theme='light'] { color-scheme: light; } /* ---------- A category's colours for everything inside the element ---------- Never used without the category's shape and name. */ .cat-1, .s-ar { --s-field: var(--cat-1-field); --s-deep: var(--cat-1-deep); --s-soft: var(--cat-1-soft); --s-text: var(--cat-1-text); } .cat-2, .s-mk { --s-field: var(--cat-2-field); --s-deep: var(--cat-2-deep); --s-soft: var(--cat-2-soft); --s-text: var(--cat-2-text); } .cat-3, .s-wk { --s-field: var(--cat-3-field); --s-deep: var(--cat-3-deep); --s-soft: var(--cat-3-soft); --s-text: var(--cat-3-text); } .cat-4, .s-pc { --s-field: var(--cat-4-field); --s-deep: var(--cat-4-deep); --s-soft: var(--cat-4-soft); --s-text: var(--cat-4-text); } .cat-5, .s-gs { --s-field: var(--cat-5-field); --s-deep: var(--cat-5-deep); --s-soft: var(--cat-5-soft); --s-text: var(--cat-5-text); } .cat-6, .s-ei { --s-field: var(--cat-6-field); --s-deep: var(--cat-6-deep); --s-soft: var(--cat-6-soft); --s-text: var(--cat-6-text); } .cat-7, .s-ai { --s-field: var(--cat-7-field); --s-deep: var(--cat-7-deep); --s-soft: var(--cat-7-soft); --s-text: var(--cat-7-text); } .cat-8, .s-si { --s-field: var(--cat-8-field); --s-deep: var(--cat-8-deep); --s-soft: var(--cat-8-soft); --s-text: var(--cat-8-text); } .cat-9, .s-mc { --s-field: var(--cat-9-field); --s-deep: var(--cat-9-deep); --s-soft: var(--cat-9-soft); --s-text: var(--cat-9-text); } .cat-10, .s-ao { --s-field: var(--cat-10-field); --s-deep: var(--cat-10-deep); --s-soft: var(--cat-10-soft); --s-text: var(--cat-10-text); } /* ---------- Base element rules: the look of a bare page ---------- */ *, *::before, *::after { box-sizing: border-box; } /* scroll-padding-bottom: nothing that takes focus is left under the floating tab bar of a phone. font-variant-ligatures: Plus Jakarta Sans has a contextual alternate (OpenType "calt") that turns a letter x after a digit into a multiplication sign, so "5x" read as "5 times". It is off for all text. A multiplication sign that is typed as one is still one. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-bottom: calc(6rem + var(--safe-b)); font-variant-ligatures: no-contextual; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--t-body); line-height: 1.55; font-weight: var(--w-text); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: var(--t-1); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin: var(--sp-2) 0 var(--sp-4); } h2 { font-size: var(--t-2); margin: var(--sp-6) 0 var(--sp-3); } h3 { font-size: var(--t-3); line-height: 1.2; letter-spacing: -0.01em; margin: var(--sp-5) 0 var(--sp-2); } h4 { font-size: var(--t-body); line-height: 1.3; letter-spacing: 0; margin: var(--sp-4) 0 var(--sp-1); } p, ul, ol { margin: 0 0 var(--sp-4); } ul, ol { padding-left: 1.4rem; } li { margin: 0; } strong, b { font-weight: 700; } a { color: inherit; text-decoration-color: var(--line-strong); text-decoration-thickness: 0.09em; text-underline-offset: 0.2em; } a:hover { text-decoration-color: currentColor; text-decoration-thickness: 0.14em; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } /* Focus: a 3 px ring in the ink colour, 3 px off the control. */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } /* A heading or a line that the page itself moves focus to (a new question, a summary) is marked only for someone using the keyboard, and quietly: a short bar in the margin beside it. */ [tabindex='-1']:focus { outline: 0; } [tabindex='-1']:focus-visible { position: relative; } [tabindex='-1']:focus-visible::before { content: ''; position: absolute; left: -0.625rem; top: 0.2em; bottom: 0.2em; width: 3px; border-radius: 2px; background: var(--focus); } main:focus { outline: 0; } /* Helpers */ .sr, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: -999rem; } .skip:focus { left: var(--sp-3); top: var(--sp-3); z-index: 60; background: var(--surface); color: var(--ink); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-s); box-shadow: var(--e-2); } .small { font-size: var(--t-small); } .muted { color: var(--muted); } .lead { font-size: 1.125rem; line-height: 1.5; font-weight: 500; color: var(--ink); max-width: 36rem; text-wrap: pretty; } .eyebrow { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--t-small); font-weight: 700; letter-spacing: 0.01em; } .label { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-family: var(--font-text); font-size: var(--t-small); font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--muted); } .flush { margin-top: 0; } .nw { white-space: nowrap; } .icon, .glyph, .mark { display: block; flex: none; } /* A line that only means something while a script is at work ("Loading the questions."): shown only when scripts run. A script in the head adds the class "js" to the root element. */ html:not(.js) .js-only { display: none; } /* Motion */ @keyframes dl-rise { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes dl-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } } @keyframes dl-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .rise { animation: dl-rise var(--d-slow) var(--spring) both; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }