/* ============================================================ HSCScience worksheet — shared chrome Used by every printable lesson worksheet. Each worksheet sets its subject accent via CSS vars on . ============================================================ */ :root { /* Default ink, lines, surfaces */ --ws-ink: #172033; --ws-muted: #5d6b7d; --ws-line: #cbd5e1; --ws-paper: #ffffff; /* Parchment background (browser view only) */ --ws-bg-parchment: #f4ead4; --ws-bg-parchment-deep: #ead7a8; /* Type badge colours */ --ws-badge-build-bg: #475569; --ws-badge-apply-bg: #b45309; --ws-badge-master-bg: #7c3aed; /* Subject accent — overridden per worksheet on */ --ws-accent: #0f766e; --ws-accent-soft: #d8eeeb; } * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(circle at 20% 10%, var(--ws-bg-parchment-deep), transparent 60%), var(--ws-bg-parchment); color: var(--ws-ink); font: 14px/1.55 "Segoe UI", Arial, sans-serif; min-height: 100vh; } /* ------ Toolbar ------ */ .ws-toolbar { width: 210mm; margin: 18px auto 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; } .ws-toolbar button { border: 0; border-radius: 999px; padding: 9px 16px; background: var(--ws-accent); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18); } /* ------ Toolbar toggles (answer space / answer key) ------ */ .ws-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ws-ink); cursor: pointer; -webkit-user-select: none; user-select: none; transition: background 0.15s; } .ws-toggle:hover { background: rgba(255, 255, 255, 0.9); } .ws-toggle input { width: 14px; height: 14px; cursor: pointer; accent-color: var(--ws-accent); } .ws-toggle:has(input:checked) { background: var(--ws-accent); color: #fff; border-color: var(--ws-accent); } .ws-toggle:has(input:checked) input { accent-color: #fff; } /* ------ The A4 sheet ------ */ .ws-sheet { position: relative; width: 210mm; min-height: 297mm; margin: 18px auto; padding: 16mm 16mm 16mm 22mm; /* extra left for accent bar */ background: var(--ws-paper); box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16); } /* Vertical subject accent bar */ .ws-sheet::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3mm; background: var(--ws-accent); } /* ------ Header ------ */ .ws-header { padding-bottom: 8mm; border-bottom: 2px solid var(--ws-accent); } /* Legacy: some old worksheets still wrap header content in a 2-col grid div. Force single-column so the title gets full width when student-box is gone. */ .ws-header > div:only-child { width: 100%; } .ws-kicker { margin: 0 0 4px; color: var(--ws-accent); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .ws-title { margin: 0 0 6px; font-size: 27px; line-height: 1.08; } .ws-purpose { margin: 0; color: var(--ws-muted); font-size: 12px; } .ws-student-box { border: 1px solid var(--ws-line); border-radius: 10px; padding: 10px 12px; } .ws-field { display: grid; grid-template-columns: 18mm 1fr; gap: 6px; margin-bottom: 9px; align-items: end; font-size: 12px; } .ws-field:last-child { margin-bottom: 0; } .ws-blank { display: block; min-height: 18px; border-bottom: 1px solid var(--ws-ink); } /* ------ Type badge ------ */ .ws-badge { display: inline-block; margin-top: 6mm; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; } .ws-badge[data-type="build"] { background: var(--ws-badge-build-bg); } .ws-badge[data-type="apply"] { background: var(--ws-badge-apply-bg); } .ws-badge[data-type="master"] { background: var(--ws-badge-master-bg); } /* ------ Body sections ------ */ .ws-section { margin-top: 8mm; break-inside: avoid; } .ws-section h2 { margin: 0 0 3mm; color: var(--ws-accent); font-size: 17px; } .ws-section h3 { margin: 4mm 0 2mm; font-size: 14px; } /* ------ Common widgets ------ */ .ws-box { border: 1px solid var(--ws-line); border-radius: 10px; padding: 10px 12px; background: var(--ws-paper); } .ws-box.soft { background: var(--ws-accent-soft); border-color: color-mix(in srgb, var(--ws-accent) 30%, white); } .ws-lines { display: grid; gap: 7px; margin-top: 7px; } .ws-line { height: 19px; border-bottom: 1px solid var(--ws-line); } .ws-checkbox { display: inline-block; width: 13px; height: 13px; margin-right: 5px; border: 1px solid var(--ws-ink); vertical-align: -2px; } /* Image placeholder — used in place of inline SVG for anatomical / process / cell-biology / apparatus diagrams that AI can't draw cleanly. A matching prompt is registered in docs/worksheet-image-prompts.md for external image generation (GPT-5, DALL-E). */ .ws-img-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 180px; margin: 12px 0; padding: 24px 18px; border: 1.5px dashed var(--ws-line); border-radius: 12px; background: repeating-linear-gradient( 45deg, rgba(0,0,0,0.018), rgba(0,0,0,0.018) 8px, transparent 8px, transparent 16px ); color: var(--ws-muted); text-align: center; } .ws-img-tag { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: var(--ws-accent); font-family: var(--ws-display, system-ui), system-ui, sans-serif; } .ws-img-hint { font-size: 13px; font-style: italic; line-height: 1.45; max-width: 56ch; color: var(--ws-ink-soft, var(--ws-muted)); } .ws-img { display: block; max-width: 100%; height: auto; margin: 12px auto; border-radius: 6px; } .ws-label-list { margin: 10px 0 0; padding-left: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 14px; line-height: 1.7; } .ws-label-list li { list-style: upper-alpha; } @media (max-width: 560px) { .ws-label-list { grid-template-columns: 1fr; } } .ws-marks { display: inline-block; background: #dcfce7; color: #15803d; border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .ws-band { display: inline-block; background: #fef3c7; color: #b45309; border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .ws-hint { display: block; margin-top: 2mm; font-size: 11px; font-style: italic; color: var(--ws-muted); } /* ------ Tables (data tables, term-definition match, etc.) ------ */ .ws-table { width: 100%; border-collapse: collapse; margin-top: 7px; } .ws-table th, .ws-table td { border: 1px solid var(--ws-line); padding: 8px; vertical-align: top; font-size: 13px; } .ws-table th { background: var(--ws-accent-soft); text-align: left; font-weight: 700; } /* ------ Reflect strip ------ */ .ws-reflect { margin-top: 8mm; padding: 6mm; border-top: 1px dashed var(--ws-line); border-bottom: 1px dashed var(--ws-line); } .ws-reflect-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6mm; margin-bottom: 4mm; } .ws-reflect-row label { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 600; } /* ------ Answer page ------ */ .ws-answers { break-before: page; background: #f4f4f0; margin: 0 -16mm -16mm -22mm; padding: 16mm 16mm 16mm 22mm; min-height: 100%; } .ws-answers-header { background: var(--ws-ink); color: #fff; padding: 4mm 6mm; border-radius: 10px; margin-bottom: 6mm; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .ws-answer { margin-bottom: 6mm; padding: 4mm; background: #fff; border-left: 4px solid var(--ws-accent); border-radius: 6px; } .ws-answer h3 { margin: 0 0 2mm; font-size: 13px; color: var(--ws-accent); } /* ------ Footer ------ */ .ws-footer { margin-top: 9mm; color: var(--ws-muted); font-size: 11px; text-align: center; } /* ============================================================ Toolbar toggle behaviour (answer-space + answer-key) - Defaults to compact view: no blank answer space, no answer key - Each toggle reveals its content when checked - Uses :has() — falls back gracefully (content stays hidden) in browsers that don't support :has yet. ============================================================ */ /* Default: hide answer space everywhere outside the answer-key section. We target both common containers and standalone lines. */ .ws-section .ws-line, .ws-section .ws-lines, .ws-reflect .ws-line, .ws-reflect .ws-lines, .ws-sheet > .ws-line, .ws-sheet > .ws-lines, .ws-box .ws-line, .ws-box .ws-lines { display: none; } /* Reveal answer space when the toggle is checked. .ws-line is a by default — force block so height/border render. */ body:has(.ws-toggle-answer-space:checked) .ws-section .ws-line, body:has(.ws-toggle-answer-space:checked) .ws-reflect .ws-line, body:has(.ws-toggle-answer-space:checked) .ws-sheet > .ws-line, body:has(.ws-toggle-answer-space:checked) .ws-box .ws-line { display: block; } body:has(.ws-toggle-answer-space:checked) .ws-section .ws-lines, body:has(.ws-toggle-answer-space:checked) .ws-reflect .ws-lines, body:has(.ws-toggle-answer-space:checked) .ws-sheet > .ws-lines, body:has(.ws-toggle-answer-space:checked) .ws-box .ws-lines { display: grid; } /* Default: hide the answer key section entirely */ .ws-answers { display: none; } /* Reveal answer key when the toggle is checked */ body:has(.ws-toggle-answer-key:checked) .ws-answers { display: block; } /* ------ Print rules ------ */ /* Top/bottom page margins apply to EVERY physical page, so a section that breaks onto a new page keeps clear of the paper edge (and the printer's non-printable region). Left/right stay 0 — the sheet padding below handles horizontal insets and the full-bleed answer background. */ @page { size: A4; margin: 12mm 0; } @media print { body { background: #fff; } .ws-toolbar { display: none; } .ws-sheet { width: auto; min-height: auto; margin: 0; /* Small vertical padding only — @page supplies the top/bottom gap on every page; horizontal padding still indents the content + accent bar. */ padding: 4mm 15mm 4mm 20mm; box-shadow: none; } /* Keep a little breathing room below a section title if it lands at the top of a fresh page after a break. */ .ws-section h2 { padding-top: 1mm; } .ws-answers { margin: 0 -15mm 0 -20mm; padding: 4mm 15mm 4mm 20mm; } }