/* Shared design tokens for firstaidcourse.ai. * * Locked palette + type from docs/decisions/visual-direction.md and * docs/design/style-guide.html. Do not introduce new colours or fonts here * without updating those docs. */ :root { /* v3 palette — matches docs/decisions/illustration-style.md so plates and * page chrome render in identical hex values. */ --paper: #F2E8CC; --ink: #11100A; --rule: #11100A; --awfa-red: #CE1443; --accent: #CE1443; --margin: #807759; --ink-faint: #807759; --serif: 'Fraunces', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--serif); font-optical-sizing: auto; font-variation-settings: 'SOFT' 30; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--ink); } a:hover { color: var(--awfa-red); } .page { max-width: 720px; margin: 0 auto; padding: 28px 24px 80px; } /* --- Catalogue strip ------------------------------------------------------ */ .strip { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; border-top: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule); padding: 10px 2px; } .strip svg { width: 18px; height: 18px; flex: 0 0 auto; } .strip a { text-decoration: none; } .strip .sep { flex: 1; border-bottom: 1px dashed var(--rule); height: 1px; } /* --- Site navigation ------------------------------------------------------ */ .sitenav { display: flex; gap: 0; border-bottom: 1.5px solid var(--rule); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 0; } .sitenav__link { padding: 8px 14px; text-decoration: none; color: var(--ink-faint); border-right: 1px solid var(--rule); transition: color 0.1s; } .sitenav__link:first-child { padding-left: 2px; } .sitenav__link:hover { color: var(--awfa-red); } /* Active states — keyed to data-section on */ [data-section="Home"] .sitenav__home, [data-section="Units · index"] .sitenav__units, [data-section^="HLTAID"] .sitenav__units, [data-section^="Glossary"] .sitenav__glossary, [data-section="Search"] .sitenav__search { color: var(--awfa-red); font-weight: 500; } /* --- Etymology subhead ---------------------------------------------------- */ .ety { margin: 36px 0 6px; font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--margin); font-size: 15px; } .ety .red { color: var(--awfa-red); font-style: normal; } /* --- Page title ----------------------------------------------------------- */ h1.page-title { font-size: clamp(48px, 9vw, 88px); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 14px; font-weight: 600; font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 700; } h1.page-title .red { color: var(--awfa-red); } /* --- Section numerals ----------------------------------------------------- */ .secnum { font-family: var(--serif); font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--awfa-red); font-size: 14px; letter-spacing: 0.04em; margin: 28px 0 4px; } p { font-size: 18px; margin: 0 0 14px; } p.lede { font-size: 20px; } /* --- Unit specimen card --------------------------------------------------- */ .units { list-style: none; padding: 0; margin: 24px 0 0; } .unit { border: 1.5px solid var(--rule); padding: 18px 20px 20px; margin: 0 0 20px; background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(26,26,26,0.025) 8px 9px); display: block; position: relative; } .unit a.unit-link { text-decoration: none; color: inherit; display: block; } .unit-code { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--margin); } .unit-title { font-family: var(--serif); font-size: 28px; line-height: 1.1; margin: 4px 0 8px; font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 600; } .unit-title .red { color: var(--awfa-red); } .unit-summary { font-size: 16px; margin: 0 0 12px; color: var(--ink); } .unit-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--margin); margin-top: 10px; } .badge { border: 1px solid var(--rule); padding: 3px 7px; display: inline-flex; align-items: center; gap: 6px; } .badge.cert { color: var(--ink); } .badge.cert::before { content: "✓"; color: var(--awfa-red); font-weight: 700; } .badge.no-cert { color: var(--margin); border-style: dashed; } /* --- Chapter list (unit landing) ----------------------------------------- */ .unit-meta--list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 8px 0 0; } .chapter-list { list-style: none; padding: 0; margin: 12px 0 0; counter-reset: chapter; } .chapter-item { counter-increment: chapter; border-top: 1px solid var(--rule); } .chapter-item:last-child { border-bottom: 1px solid var(--rule); } .chapter-link { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 14px; padding: 12px 4px; text-decoration: none; color: inherit; } .chapter-link::before { content: counter(chapter, decimal-leading-zero); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--margin); } .chapter-slug { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--margin); display: none; /* slug is in counter::before; keep slug element accessible */ } .chapter-title { font-family: var(--serif); font-size: 20px; font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 500; } .chapter-link:hover .chapter-title { color: var(--awfa-red); } .chapter-refs { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--margin); display: flex; flex-wrap: wrap; gap: 6px; } .chapter-refs .ref, .ke-refs .ref { border: 1px solid var(--margin); padding: 2px 6px; text-transform: uppercase; } /* --- ANZCOR guideline reference list (chapter page) ----------------------- */ .arc-intro { font-size: 15px; color: var(--ink-faint); margin: 4px 0 12px; } .arc-refs { list-style: none; margin: 0 0 24px; padding: 0; } .arc-ref { border-left: 2px solid var(--rule); padding: 6px 0 6px 14px; margin: 0 0 4px; font-size: 14px; } .arc-ref__link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--margin); } .arc-ref__link:hover { color: var(--awfa-red); border-color: var(--awfa-red); } /* --- KE items (chapter page placeholder body) ---------------------------- */ .ke-items { margin: 12px 0 24px; padding: 0 0 0 22px; } .ke-items li { font-size: 17px; margin: 0 0 10px; line-height: 1.5; } .ke-refs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 24px; } /* --- Chapter prose body --------------------------------------------------- */ .chapter-prose { margin: 8px 0 32px; } .chapter-prose h2 { font-family: var(--serif); font-size: 28px; line-height: 1.15; margin: 36px 0 10px; font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 600; border-top: 1.5px solid var(--rule); padding-top: 18px; } .chapter-prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 12px; } .chapter-prose h3 { font-family: var(--serif); font-size: 20px; margin: 24px 0 8px; font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 600; } .chapter-prose p { font-size: 18px; margin: 0 0 14px; line-height: 1.55; } /* Drop cap on the first paragraph of the first section. */ .chapter-prose > h2:first-child + p::first-letter, .chapter-prose > p:first-child::first-letter { font-family: var(--serif); font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 700; font-size: 64px; float: left; line-height: 0.85; padding: 6px 8px 0 0; color: var(--ink); } .chapter-prose ol, .chapter-prose ul { font-size: 18px; line-height: 1.5; padding-left: 22px; margin: 8px 0 18px; } .chapter-prose ol li, .chapter-prose ul li { margin: 0 0 8px; } .chapter-prose blockquote { margin: 24px 0; padding: 14px 18px; border-left: 3px solid var(--awfa-red); font-family: var(--serif); font-size: 20px; font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--ink); } .chapter-prose blockquote p { font-size: 20px; margin: 0 0 6px; } .chapter-prose blockquote em { font-style: normal; color: var(--margin); font-size: 13px; display: block; margin-top: 4px; } /* Inline glossary marker. */ .chapter-prose dfn { font-style: normal; border-bottom: 1px dashed var(--awfa-red); cursor: help; } /* Glossary popover: any in chapter prose carries * its short definition in `data-short`, which we surface as a CSS-only * tooltip on hover/focus. The dfn must be focusable for keyboard users — * authors add `tabindex="0"` in the markdown source. */ .chapter-prose dfn[data-term] { position: relative; } .chapter-prose dfn[data-term]::after { content: attr(data-short); position: absolute; left: 0; top: calc(100% + 6px); z-index: 10; width: max-content; max-width: 280px; padding: 8px 10px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--rule); font-family: var(--serif); font-size: 14px; line-height: 1.45; font-style: normal; white-space: normal; opacity: 0; pointer-events: none; transition: opacity 80ms ease-in; } .chapter-prose dfn[data-term]:hover::after, .chapter-prose dfn[data-term]:focus::after { opacity: 1; } /* Inline reference pill. */ .chapter-prose a.ref, a.ref { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--margin); padding: 2px 5px; margin: 0 2px; text-decoration: none; color: var(--margin); vertical-align: middle; white-space: nowrap; } .chapter-prose a.ref:hover { color: var(--awfa-red); border-color: var(--awfa-red); } /* Callouts. */ .chapter-prose .callout { border: 1.5px solid var(--rule); padding: 14px 16px 12px; margin: 22px 0; position: relative; } .chapter-prose .callout .label { display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 6px; color: var(--margin); } .chapter-prose .callout p:last-child { margin-bottom: 0; } .chapter-prose .callout.warning { border-color: var(--awfa-red); } .chapter-prose .callout.warning .label { color: var(--awfa-red); } .chapter-prose .callout.note { background: rgba(17, 16, 10, 0.03); } .chapter-prose .callout.anzcor { border-style: double; border-width: 4px; } .chapter-prose .callout.practice { border-style: dashed; } .chapter-prose .callout.practice .label { color: var(--ink); } /* Instructor's-note

. */ .chapter-prose .scrawl-m { margin: 18px 0; border-top: 1px dashed var(--margin); border-bottom: 1px dashed var(--margin); padding: 8px 0; font-family: var(--serif); font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--margin); } .chapter-prose .scrawl-m summary { cursor: pointer; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; font-style: normal; } .chapter-prose .scrawl-m p { font-size: 16px; margin: 8px 0 0; } /* --- Plate figure (illustrations on error pages etc.) -------------------- */ .plate-figure { margin: 24px auto 28px; max-width: 320px; text-align: center; } .plate-figure img { display: block; width: 100%; height: auto; } .plate-figure figcaption { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--margin); margin-top: 6px; } /* --- Inline path / code (error pages) ------------------------------------ */ code.path { font-family: var(--mono); font-size: 0.92em; background: rgba(17, 16, 10, 0.06); padding: 1px 6px; border: 1px solid var(--margin); border-radius: 1px; word-break: break-all; } /* --- Glossary list (index page) ------------------------------------------ */ .glossary-list { list-style: none; padding: 0; margin: 12px 0 0; } .glossary-item { border-top: 1px solid var(--rule); } .glossary-item:last-child { border-bottom: 1px solid var(--rule); } .glossary-link { display: grid; grid-template-columns: minmax(140px, 0.4fr) 1fr; gap: 18px; align-items: baseline; padding: 14px 4px; text-decoration: none; color: inherit; } .glossary-term { font-family: var(--serif); font-size: 22px; font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 600; } .glossary-link:hover .glossary-term { color: var(--awfa-red); } .glossary-short { font-family: var(--serif); font-size: 16px; color: var(--ink); line-height: 1.45; } /* --- Glossary term page (long-def body) ---------------------------------- */ .glossary-long { margin: 8px 0 24px; } .glossary-long p { font-size: 18px; line-height: 1.55; margin: 0 0 14px; } /* --- Secondary glossary figure (smaller inline illustration) -------------- */ .glossary-long figure.secondary { float: right; width: 280px; margin: 0 0 16px 28px; padding: 0; shape-outside: margin-box; } .glossary-long figure.secondary img { display: block; width: 100%; height: auto; background: var(--paper); } .glossary-long::after { content: ""; display: table; clear: both; } /* --- Hero figure (AI-generated field sketches) --------------------------- */ figure.hero { margin: 18px 0 28px; padding: 0; text-align: center; } figure.hero img { display: block; width: 100%; height: auto; margin: 0 auto; background: var(--paper); } figure.hero figcaption { margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); } /* --- Footer plate --------------------------------------------------------- */ footer.plate { margin-top: 48px; padding-top: 14px; border-top: 1.5px solid var(--rule); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; display: flex; flex-wrap: wrap; gap: 14px; color: var(--margin); } footer.plate .sep { flex: 1; } footer.plate a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--margin); } /* --- Search ---------------------------------------------------------------- */ .search-form { display: flex; gap: 8px; margin: 20px 0 32px; } .search-input { flex: 1; font-family: var(--mono); font-size: 14px; padding: 8px 10px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); outline: none; } .search-input:focus { border-color: var(--ink); } .search-btn { font-family: var(--mono); font-size: 13px; padding: 8px 16px; background: var(--ink); color: var(--paper); border: none; cursor: pointer; letter-spacing: 0.05em; } .search-btn:hover { background: var(--accent); } .search-results { list-style: none; padding: 0; margin: 0; } .search-result { padding: 14px 0; border-bottom: 1px solid var(--rule); } .search-result:last-child { border-bottom: 0; } .search-result__title { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; } .search-result__title:hover { border-color: var(--accent); color: var(--accent); } .search-result__meta { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; } .search-result--glossary .search-result__meta::before { content: "glossary · "; } .search-result--chapter .search-result__meta::before { content: "chapter · "; } .search-result--unit .search-result__meta::before { content: "unit · "; } .search-result__excerpt { font-size: 14px; color: var(--ink-soft); margin: 6px 0 0; line-height: 1.5; } /* --- Exam ------------------------------------------------------------------ */ .exam-form { margin: 24px 0; } .question { border: 1.5px solid var(--rule); padding: 20px 20px 16px; margin: 0 0 16px; transition: border-color 0.15s; } .question--unanswered { border-color: var(--awfa-red); border-width: 2px; } .question--unanswered .question__num::after { content: ' ·'; color: var(--awfa-red); } .question--unanswered .question__num { color: var(--awfa-red); } .exam-validation-banner { background: transparent; border: 2px solid var(--awfa-red); color: var(--awfa-red); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; padding: 12px 16px; margin: 0 0 20px; } .question__prompt { font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.45; display: block; padding: 0; margin: 0 0 14px; } .question__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--margin); margin-right: 8px; } .question__choices { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .question__choice label { display: flex; align-items: baseline; gap: 8px; font-size: 15px; cursor: pointer; padding: 6px 8px; border: 1px solid transparent; transition: border-color 0.1s; } .question__choice label:hover { border-color: var(--rule); } .question__choice input[type="radio"] { flex: 0 0 auto; } .exam-submit { margin: 24px 0; } .exam-btn { font-family: var(--mono); font-size: 13px; padding: 10px 24px; background: var(--ink); color: var(--paper); border: none; cursor: pointer; letter-spacing: 0.05em; } .exam-btn:hover { background: var(--accent); } /* --- Results --------------------------------------------------------------- */ .result-banner { display: flex; align-items: baseline; gap: 16px; padding: 20px 24px; margin: 24px 0; border-left: 4px solid var(--rule); } .result-banner--pass { border-left-color: #2a7a2a; } .result-banner--fail { border-left-color: var(--awfa-red); } .result-banner__score { font-family: var(--mono); font-size: 36px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; } .result-banner--pass .result-banner__score { color: #2a7a2a; } .result-banner--fail .result-banner__score { color: var(--awfa-red); } .result-banner__label { font-size: 15px; color: var(--margin); } .graded-list { list-style: none; padding: 0; margin: 0; } .graded-question { padding: 16px 0; border-bottom: 1px solid var(--rule); } .graded-question:last-child { border-bottom: 0; } .graded-question__prompt { font-family: var(--serif); font-size: 16px; font-weight: 500; margin: 0 0 10px; } .graded-question__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--margin); margin-right: 8px; } .graded-question__choices { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .graded-choice { font-family: var(--mono); font-size: 13px; padding: 5px 8px; } .graded-choice--correct { background: rgba(42, 122, 42, 0.08); color: #2a7a2a; font-weight: 500; } .graded-choice--wrong { background: rgba(206, 20, 67, 0.08); color: var(--awfa-red); text-decoration: line-through; } /* --- Certificate capture --------------------------------------------------- */ .cert-form { margin: 24px 0; display: flex; flex-direction: column; gap: 14px; max-width: 420px; } .cert-form__field { display: flex; flex-direction: column; gap: 4px; } .cert-form__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--margin); } .cert-form__input { font-family: var(--serif); font-size: 16px; padding: 8px 10px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); outline: none; } .cert-form__input:focus { border-color: var(--ink); } .cert-btn { font-family: var(--mono); font-size: 13px; padding: 10px 24px; background: var(--ink); color: var(--paper); border: none; cursor: pointer; letter-spacing: 0.05em; text-decoration: none; display: inline-block; text-align: center; } .cert-btn:hover { background: var(--accent); color: var(--paper); } /* --- Exam CTA -------------------------------------------------------------- */ .exam-cta { display: inline-block; font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; padding: 10px 20px; background: var(--ink); color: var(--paper); text-decoration: none; margin: 8px 0 24px; } .exam-cta:hover { background: var(--accent); color: var(--paper); } /* --- Chapter progress ------------------------------------------------------ */ .progress-count { font-family: var(--mono); font-size: 11px; color: var(--margin); letter-spacing: 0.05em; }