/* ============================================================
Hope Springs — READ AND IMAGINE stylesheet
Worksheets based on Oxford Read and Imagine ("Clunk") story
readers for young kids. Same print engine and structure as the
Read and Discover sheet (readdiscover.css), but with Read and
Imagine's own aqua / ocean-cloud branding.
Link from a lesson:
Fully self-contained — it never touches hopesprings.css,
happyreader.css or readdiscover.css. Editing it cannot change
any other series. Print-ready A4, embedded font, exact colour.
============================================================ */
/* ---- Reading font: Andika (SIL literacy font), shared fonts/ folder. ---- */
@font-face {
font-family: "Andika";
src: url("fonts/Andika-Regular.ttf") format("truetype");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Andika";
src: url("fonts/Andika-Bold.ttf") format("truetype");
font-weight: 700; font-style: normal; font-display: swap;
}
:root {
--font-read: "Andika", "Segoe UI", "Helvetica Neue", sans-serif;
/* Oxford Read and Imagine palette (aqua + ocean) */
--blue: #159fd6; /* brand aqua — titles, section numbers */
--blue-d: #0f79a8; /* darker aqua for text on pale blue */
--navy: #0d5b8a; /* deep accent */
--aqua: #16b5c9; /* accent — page numbers, right match column */
--sun: #f6b93b; /* accent — badges */
--leaf: #52a36b; /* accent — "correct" */
--paper: #fbfdff; /* cool page */
--ink: #24323a; /* body text */
--line: #2c4048; /* writing lines */
--soft: #e9f6fc; /* pale blue fill (banks, pills) */
--soft-b: #bfe4f2; /* pale blue border */
--grey: #eef2f4; /* neutral pill (circle-the-word options) */
/* Grammar colour-code (shared house scheme — see happyreader.css) */
--c-s: #1a66d0; /* Subject = blue */
--c-v: #e11d1d; /* Verb = red */
--c-o: #17983c; /* Object = green */
--c-c: #d98e00; /* Complement = gold */
--c-mod: #8e44ad; /* modal verb = purple */
/* Type sizes — big, for a young reader */
--t-title: 33pt;
--t-head: 19pt;
--t-body: 17.5pt;
--t-write: 18pt;
--t-small: 13pt;
}
@page { size: A4 portrait; margin: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font-read);
font-size: var(--t-body); /* big base — no row falls back to 16px */
color: var(--ink);
background: #fff; /* plain white — no tint behind the sheets */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
line-height: 1.3;
}
.page {
position: relative;
width: 210mm;
min-height: 297mm; /* fill the whole A4 sheet (no strip at the foot) */
padding: 12mm 14mm 12mm;
background: var(--paper);
display: flex;
flex-direction: column;
}
.page + .page { page-break-before: always; }
/* ---- Top banner: series ribbon + cloud level badge + book title ---- */
.brand {
display: flex; align-items: center; gap: 10px;
font-size: 11pt; font-weight: 700; letter-spacing: .5px;
color: var(--blue-d); text-transform: uppercase;
margin-bottom: 4px;
}
.brand::before { /* little cloud/bubble mark */
content: "";
width: 22px; height: 22px; border-radius: 50%;
background:
radial-gradient(circle at 50% 45%, #fff 0 2px, transparent 2px),
var(--aqua);
border: 2px solid #fff; box-shadow: 0 0 0 2px var(--aqua);
}
/* book-title header: cloud "Level N" badge + puffy blue title */
.head { display: flex; align-items: center; gap: 14px; margin: 2px 0 12px; }
.head .lvl {
flex: 0 0 auto;
min-width: 74px; height: 40px; padding: 0 14px;
border-radius: 999px;
background: var(--blue); color: #fff;
font-weight: 700; font-size: 14pt;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--soft-b);
}
.head h1 {
color: var(--blue);
font-size: var(--t-title); line-height: 1.02; font-weight: 700;
text-shadow: 0 1px 0 #fff, 1px 0 0 #cdeaf6, -1px 0 0 #cdeaf6;
}
/* ---- Exercise header: aqua rounded-square number + instruction ---- */
.ex {
display: flex; align-items: baseline; gap: 10px;
margin: 14px 0 6px;
}
.ex .no {
flex: 0 0 auto;
min-width: 26px; height: 26px; padding: 0 6px;
border-radius: 8px;
background: var(--blue); color: #fff;
font-weight: 700; font-size: 15pt; line-height: 26px;
text-align: center;
transform: translateY(3px);
}
.ex .say { font-weight: 700; font-size: var(--t-head); line-height: 1.15; }
.ex .say .hi { color: var(--blue-d); } /* highlight a target structure */
.ex .tip { font-weight: 400; font-size: var(--t-small); color: #6b7a82; }
/* ---- Grammar colour-code legend + coloured chunks ---- */
.legend {
display: flex; flex-wrap: wrap; gap: 5px 16px;
font-size: var(--t-small); font-weight: 400; /* key, not emphasis — colour does the marking */
background: var(--soft); border: 2px solid var(--soft-b);
border-radius: 12px; padding: 7px 13px; margin: 4px 0 6px;
}
.legend span::before { content: "\25CF"; margin-right: 5px; } /* ● */
.s { color: var(--c-s); }
.v { color: var(--c-v); }
.o { color: var(--c-o); }
/* Complement = gold. Gold is faint on white, so lay a fine dark-grey edge UNDER
the fill (paint-order: stroke first) — the gold stays crisp and the thin
outline gives it definition on paper. (The blue/red/green/purple roles are
dark enough to need no outline.) */
.c { color: var(--c-c); -webkit-text-stroke: 0.4px #55534d; paint-order: stroke fill; }
.mod { color: var(--c-mod); }
/* ---- Word bank strip (for fill-in exercises) ---- */
/* Word bank: lay the words out on an even grid so the rows are balanced
(e.g. 8 words = 4+4, never 6+2). Set the column count per bank with the
inline var --wb-cols (pick cols so rows come out even: 8->4, 6->3, 5->5,
9->3). See the "Word-bank layout" house rule in the Read and Imagine memory. */
.wordbox {
display: grid;
grid-template-columns: repeat(var(--wb-cols, 4), auto);
justify-content: center; justify-items: center;
gap: 9px 30px;
background: var(--soft); border: 2px solid var(--soft-b);
border-radius: 12px; padding: 10px 16px; margin: 6px 0 10px;
font-size: var(--t-body); font-weight: 700; color: var(--blue-d);
}
/* ---- Cloze paragraph (fill the blanks in running text) ---- */
.cloze { font-size: var(--t-body); line-height: 2.0; margin: 4px 0 2px; }
.blank {
display: inline-block; min-width: 120px;
border-bottom: 2.5px solid var(--line);
height: 1.1em; vertical-align: -4px; margin: 0 5px;
}
.blank.sm { min-width: 70px; }
.blank.grow { min-width: 0; } /* inside a flex .ansline: fills to the right edge */
/* ---- Writing lines ---- */
.wl { border-bottom: 2.5px solid var(--line); height: 12mm; margin-top: 3px; }
.wl.tall { height: 14mm; }
.numline { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; font-size: var(--t-body); line-height: 1.5; }
.numline .qn { font-weight: 700; color: var(--blue-d); flex: 0 0 auto; }
.numline .wl { flex: 1; }
/* light 4-line ruling for single-word writing (young hand) */
.hw {
margin-top: 6px; height: 13mm; background-repeat: no-repeat;
background-image:
repeating-linear-gradient(to right, #7fc4de 0 6px, transparent 6px 12px),
linear-gradient(var(--line), var(--line)),
repeating-linear-gradient(to right, #7fc4de 0 6px, transparent 6px 12px),
linear-gradient(var(--line), var(--line));
background-size: 100% 2px, 100% 2.2px, 100% 2px, 100% 2.2px;
background-position: 0 100%, 0 66.66%, 0 33.33%, 0 0;
}
.hw.sm { height: 10mm; }
/* ---- Numbered item (hanging number) --------------------------------------
The number hangs in the left margin; everything else — wrapped text AND the
write line under it — lines up with the FIRST WORD, like a normal numbered
list. Structure:
--------------------------------------------------------------------------- */
.item { display: flex; gap: 8px; align-items: baseline; margin-top: 11px; }
.item > .qn { flex: 0 0 auto; color: var(--blue-d); font-weight: 700; }
.qbody { flex: 1; min-width: 0; } /* the text column; write lines fill its width */
/* order-the-words row (colour = role; NOT bold — colour alone marks the word) */
.scram { font-size: var(--t-body); font-weight: 400; line-height: 1.45; }
.scram .sep { color: #b9c6cc; margin: 0 5px; }
.scram .chunk { white-space: nowrap; }
/* ---- Write-the-word picture grid (unscramble the letters) ---- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin-top: 8px; }
.grid.fill { flex: 1; align-content: space-between; }
.cell { position: relative; display: flex; flex-direction: column; align-items: center; }
.pic {
width: 100%; aspect-ratio: 4/3; object-fit: contain;
border-radius: 14px; background: #eaf4f8;
border: 3px solid #fff; box-shadow: 0 0 0 2px var(--soft-b);
padding: 6px;
}
.badge {
position: absolute; top: -9px; left: -8px;
width: 34px; height: 34px; border-radius: 50%;
background: var(--blue); color: #fff; font-weight: 700; font-size: 16pt;
display: flex; align-items: center; justify-content: center;
border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); z-index: 2;
}
.letters { /* the scrambled-letter hint */
margin-top: 6px; font-weight: 700; font-size: var(--t-body);
letter-spacing: 3px; color: var(--blue-d);
}
.cell .hw { width: 100%; }
/* ---- Match two columns (draw a line) ---- */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 28px; margin-top: 10px; }
.match .col { display: flex; flex-direction: column; gap: 9px; }
.mrow {
display: flex; align-items: center; gap: 10px;
background: #fff; border: 2.5px solid var(--soft-b); border-radius: 12px;
padding: 8px 12px; font-size: var(--t-body); font-weight: 700;
}
.match .right .mrow { border-color: #bfe9ef; }
.dot { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--blue); background:#fff; }
.match .left .dot { margin-left: auto; } /* right edge, facing the gutter */
.match .right .dot { border-color: var(--aqua); order: 0; margin-right: 9px; } /* left edge, facing the gutter */
.match .right .mtext { order: 1; }
.match .qn { color: var(--blue-d); font-weight: 700; flex: 0 0 auto; }
/* ---- Choose the correct word (grey option pills) — lives on a .qbody ---- */
.pick { font-size: var(--t-body); line-height: 1.7; }
.opt {
display: inline-block; background: var(--grey); border-radius: 999px;
padding: 2px 12px; margin: 0 1px; font-weight: 700;
}
.pick .or { color: #9aa8ae; margin: 0 1px; }
/* ---- Question text + a full-width answer line (Answer the questions) ---- */
.q { font-size: var(--t-body); line-height: 1.4; }
/* ---- "Write about a character": question, example, answer line ---- */
.qhead { font-weight: 700; font-size: var(--t-body); }
.eg { color: #6f7d86; font-size: var(--t-small); margin: 1px 0 3px; } /* the source's ( ) example — no "e.g.", not italic */
.eg b { color: var(--blue-d); }
.ansline { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-body); margin-top: 3px; }
.ansline .blank.grow { flex: 1; } /* the writing blank runs to the right edge */
/* ---- Fill-the-page helper ---- */
.fillcol { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.grow { flex: 1; }
/* ---- Footer ---- */
.foot { margin-top: auto; padding-top: 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.foot .note { font-size: var(--t-small); color: #7c8a91; }
.foot .note b { color: var(--ink); }
.pageno {
flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
background: var(--aqua); color: #fff; font-weight: 700; font-size: 14pt;
display: flex; align-items: center; justify-content: center;
}
/* roomy rhythm (plenty of space for a young answer) */
.page.tight .ex { margin: 17px 0 7px; }
.page.tight .item, .page.tight .numline { margin-top: 13px; }
@media screen {
body { padding: 16px; }
.page { margin: 0 auto 16px; box-shadow: 0 2px 12px rgba(0,0,0,.18); }
}