/* worksheet-junior.css — Year 7-10 Science printable worksheets Two-page layout: each .page div = one A4 sheet. Subject accent supplied via inline style on : --ws-accent (e.g. #0369a1 for Y7 science) --ws-accent-soft (e.g. #dbeafe) */ :root { --ink: #172033; --muted: #5d6b7d; --line: #cbd5e1; --surface: #f8fafc; --ws-accent: #0369a1; --ws-accent-soft: #dbeafe; --diff-recall-bg: #dcfce7; --diff-recall-ink: #15803d; --diff-apply-bg: #fef3c7; --diff-apply-ink: #92400e; --diff-challenge-bg: #fee2e2; --diff-challenge-ink: #991b1b; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: #dde6ef; color: var(--ink); font: 15px/1.6 "Segoe UI", Arial, sans-serif; } /* ── Toolbar (screen only) ── */ .ws-toolbar { width: 210mm; margin: 16px auto 0; display: flex; justify-content: flex-end; gap: 8px; } .ws-toolbar button { border: 0; border-radius: 999px; padding: 9px 16px; background: var(--ws-accent); color: #fff; font: 700 13px "Segoe UI", Arial, sans-serif; cursor: pointer; letter-spacing: .02em; } .ws-toolbar button:hover { filter: brightness(1.12); } /* ── Page shell ── */ .page { width: 210mm; padding: 14mm 15mm 12mm; margin: 12px auto; background: #fff; box-shadow: 0 16px 40px rgba(15,23,42,.14); page-break-after: always; } .page:last-child { page-break-after: avoid; } /* ── Header ── */ .ws-header { display: grid; grid-template-columns: 1fr 52mm; gap: 10mm; padding-bottom: 7mm; border-bottom: 2.5px solid var(--ws-accent); margin-bottom: 6mm; } .ws-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ws-accent); margin-bottom: 3px; } .ws-title { font-size: 24px; line-height: 1.1; color: var(--ink); margin-bottom: 3px; } .ws-subtitle { font-size: 12px; color: var(--muted); font-weight: 600; } .ws-student-box { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface); align-self: start; } .ws-field { display: grid; grid-template-columns: 14mm 1fr; gap: 5px; margin-bottom: 7px; align-items: end; font-size: 12px; color: var(--muted); font-weight: 600; } .ws-field:last-child { margin-bottom: 0; } .ws-field-line { display: block; border-bottom: 1px solid var(--ink); min-height: 16px; } /* ── Goals box ── */ .ws-goals { background: var(--ws-accent-soft); border-left: 4px solid var(--ws-accent); border-radius: 0 8px 8px 0; padding: 8px 12px; margin-bottom: 6mm; font-size: 13px; } .ws-goals-title { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ws-accent); margin-bottom: 4px; } .ws-goals ul { padding-left: 16px; } .ws-goals li { margin-bottom: 2px; } /* ── Section labels ── */ .ws-section { margin-bottom: 6mm; break-inside: avoid; } .ws-section-label { font-size: 13.5px; font-weight: 800; color: var(--ws-accent); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4mm; padding-bottom: 2px; border-bottom: 1px solid var(--ws-accent-soft); } .ws-activity-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3mm; } .ws-instruction { font-size: 13px; color: var(--muted); margin-bottom: 3mm; } /* ── Difficulty badges ── */ .ws-badge-row { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 3mm; } .ws-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .ws-badge-recall { background: var(--diff-recall-bg); color: var(--diff-recall-ink); } .ws-badge-apply { background: var(--diff-apply-bg); color: var(--diff-apply-ink); } .ws-badge-challenge { background: var(--diff-challenge-bg); color: var(--diff-challenge-ink); } .ws-badge-marks { background: #f1f5f9; color: #475569; } /* ── Answer lines ── */ .ws-lines { display: grid; gap: 8px; margin-top: 4mm; } .ws-line { height: 22px; border-bottom: 1px solid var(--line); display: block; } /* ── Tables ── */ .ws-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ws-table th, .ws-table td { border: 1px solid var(--line); padding: 6px 8px; vertical-align: top; text-align: left; } .ws-table th { background: var(--ws-accent-soft); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ws-accent); } .ws-table td.ws-answer { min-height: 28px; } /* ── Cloze / fill-the-blank ── */ .ws-cloze { font-size: 14px; line-height: 2.2; } .ws-blank { display: inline-block; min-width: 32mm; border-bottom: 1.5px solid var(--ink); margin: 0 2px; vertical-align: bottom; } .ws-word-bank { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 6px; margin-bottom: 4mm; background: var(--surface); } .ws-word { background: var(--ws-accent-soft); color: var(--ws-accent); font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 4px; } /* ── True/False ── */ .ws-tf-item { display: grid; grid-template-columns: 1fr 22mm; gap: 5mm; margin-bottom: 4mm; align-items: start; break-inside: avoid; } .ws-tf-statement { font-size: 13.5px; } .ws-tf-correction { font-size: 12px; color: var(--muted); margin-top: 2mm; } .ws-tf-correction .ws-line { margin-top: 2mm; } .ws-tf-buttons { display: flex; gap: 4px; } .ws-tf-btn { width: 24px; height: 24px; border: 1.5px solid var(--line); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; color: var(--muted); } /* ── Sort-it table ── */ .ws-sort-grid { display: grid; gap: 3mm; margin-top: 3mm; } .ws-sort-col-label { font-size: 12px; font-weight: 800; color: var(--ws-accent); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2mm; } .ws-sort-box { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; min-height: 28mm; background: var(--surface); } .ws-items-pool { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px; border: 1px dashed var(--line); border-radius: 6px; margin-bottom: 3mm; background: var(--surface); } .ws-item-chip { border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; font-size: 12.5px; background: #fff; } /* ── Cause-effect chain ── */ .ws-chain { display: grid; gap: 2mm; } .ws-chain-row { display: grid; grid-template-columns: 1fr 8mm 1fr; gap: 2mm; align-items: center; break-inside: avoid; } .ws-chain-cell { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 13px; background: #fff; min-height: 28px; } .ws-chain-cell.ws-given { background: var(--ws-accent-soft); font-weight: 600; } .ws-chain-cell.ws-empty { background: var(--surface); } .ws-chain-arrow { text-align: center; font-size: 16px; color: var(--muted); } /* ── Scenario / stimulus box ── */ .ws-stimulus { border-left: 4px solid var(--ws-accent); background: var(--ws-accent-soft); border-radius: 0 8px 8px 0; padding: 8px 12px; font-size: 13.5px; margin-bottom: 4mm; break-inside: avoid; } .ws-stimulus-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ws-accent); margin-bottom: 3px; } /* ── Image placeholder ── */ .ws-img-placeholder { border: 2px dashed var(--line); border-radius: 8px; min-height: 28mm; display: flex; align-items: center; justify-content: center; background: var(--surface); margin-bottom: 4mm; } .ws-img-tag { font-size: 12px; color: var(--muted); font-style: italic; } /* ── Wrap-up / reflection ── */ .ws-wrapup { border: 1.5px solid var(--ws-accent); border-radius: 8px; padding: 8px 12px; margin-top: 5mm; break-inside: avoid; } .ws-wrapup-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ws-accent); margin-bottom: 3px; } .ws-wrapup p { font-size: 13.5px; margin-bottom: 3mm; } /* ── Q-block (numbered questions) ── */ .ws-q { margin-bottom: 5mm; break-inside: avoid; } .ws-q-stem { font-size: 14px; margin-bottom: 3mm; } .ws-q-num { font-weight: 800; color: var(--ws-accent); margin-right: 3px; } /* ── Footer ── */ .ws-footer { text-align: center; font-size: 10px; color: var(--muted); padding-top: 5mm; margin-top: auto; } /* ── Print rules ── */ @page { size: A4; margin: 0; } @media print { body { background: #fff; } .ws-toolbar { display: none; } .page { width: auto; margin: 0; padding: 14mm 15mm 12mm; box-shadow: none; page-break-after: always; } .page:last-child { page-break-after: avoid; } .ws-section, .ws-q, .ws-tf-item, .ws-chain-row { break-inside: avoid; } }