/* ═══════════════════════════════════════════════════════════════════════════ R2 Education — shared stylesheet for the Scholarships arm. The six pages under /scholarships/ all link ../policy.css first (masthead, ransom lettering, callouts, tables, footer, focus styles) and then this file on top, the same way pricing.html layers its own block over policy.css. Nothing in here redefines a colour token or a font — every value is one of the custom properties policy.css already declares. ── Body copy ───────────────────────────────────────────────────────────── policy.css sets long-form body text in Libre Baskerville. That is right for the two explainers (aas.html, edutest.html), which are a few thousand words of reading, so those pages leave the body alone. The other four are short-form marketing and go back to Special Elite via , matching the homepage and the pricing page. No JavaScript anywhere in this arm — the CSP in _headers has no script-src, and the FAQ is native

. No dark mode, same as the rest of the site. ═══════════════════════════════════════════════════════════════════════════ */ body.short{font-family:var(--mono); font-size:13px; line-height:1.68} body.short p{margin:0 0 13px} body.short .standfirst{font-family:var(--mono); font-size:13px; max-width:54ch} .wrap{max-width:900px} /* Ransom headline, sized like the homepage hero and the pricing page */ .ransom{display:flex; flex-wrap:wrap; column-gap:30px; row-gap:10px; margin:0 0 16px; line-height:1} .ransom .row{display:flex; gap:4px; flex-wrap:nowrap} .ransom span{display:inline-block; border:2.5px solid var(--ink); line-height:.95} .ransom .r1,.ransom .r5{font-size:40px} .ransom .r2{font-size:32px} .ransom .r3{font-size:30px} .ransom .r4{font-size:34px} .ransom .r6{font-size:42px} /* ── Arm navigation — the six pages as chips, same chip as the footer nav ─ Sits under the standfirst on every page so the arm reads as one booklet. The current page is inked pink, exactly like aria-current in .foot-nav. */ .armnav{display:flex; flex-wrap:wrap; gap:9px; margin:0 0 clamp(26px,4vw,36px)} .armnav a{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-decoration:none; color:var(--ink); background:#fff; border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); padding:5px 11px; } .armnav a:hover,.armnav a:focus-visible{background:var(--yellow)} .armnav a[aria-current]{background:var(--pink); color:#fff} /* ── Section bands (pricing.html's .band, verbatim) ─────────────────────── */ .band{ font-family:var(--display); font-weight:400; letter-spacing:.01em; font-size:clamp(24px,4.4vw,32px); line-height:1.08; margin:clamp(34px,5vw,48px) 0 4px; padding-bottom:11px; border-bottom:3px solid var(--ink); } .band-sub{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--magenta); margin-bottom:20px} /* ── Provider chips — which exam a school actually sets ───────────────── Same object as the OLNA/NAPLAN .who chips in the policies. Black ink on every fill, for the same contrast reason. */ .prov{ display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; border:2px solid var(--ink); padding:1px 6px; white-space:nowrap; color:var(--ink); } .prov.aas{background:var(--cyan)} .prov.edutest{background:var(--yellow)} .prov.own{background:var(--green)} .prov.acer{background:#fff} .prov.todo{background:var(--card); color:var(--ink2); border-style:dashed} /* ── The three-provider count — big numbers in the glance tiles ─────────── */ .glance .big{font-family:var(--display); font-size:44px; line-height:.9; letter-spacing:.01em; color:var(--ink); margin:2px 0 6px} .glance .big small{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink2); margin-left:6px} /* ── Included / feature grid (pricing.html's .incl) ─────────────────────── */ .incl{display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .inc{background:var(--card); border:2.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:13px 15px} .inc .n{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink); margin-bottom:5px; font-weight:700} .inc .d{font-family:var(--mono); font-size:11.5px; color:var(--ink2); line-height:1.6} /* ── Big CTA panel (pricing.html's .schools box + .btn) ─────────────────── */ .panel{background:#fff; border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:22px 22px 20px; margin:0 0 22px} .panel p{font-size:12.5px; color:var(--ink2)} .btn{ display:inline-block; margin-top:4px; text-decoration:none; font-family:var(--display); font-size:16px; letter-spacing:.06em; color:var(--ink); border:2.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:9px 19px; } .btn.yellow{background:var(--yellow)} .btn.cyan{background:var(--cyan)} .btn.pink{background:var(--pink)} .btn:hover,.btn:focus-visible{background:#fff; color:var(--ink)} .btnrow{display:flex; flex-wrap:wrap; gap:12px 14px; margin-top:6px} /* ── Paper-section cards on the explainers ──────────────────────────────── */ .secgrid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:18px 0 8px} .seccard{background:#fff; border:2.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:15px 17px} .seccard .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; color:var(--magenta); margin-bottom:5px} .seccard h3{margin:0 0 8px; font-size:18px} .seccard p{font-size:13px; margin-bottom:8px} .seccard p:last-child{margin-bottom:0} .seccard .size{ display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; background:var(--yellow); border:2px solid var(--ink); padding:1px 7px; margin-bottom:8px; } /* ── FAQ — native

, dressed as the bordered card ──────────────── No script needed: the browser handles open/close, keyboard and the disclosure semantics. The marker is our own ▸ so it matches the feature list bullets rather than the browser's default triangle. */ .faq{margin:0 0 14px} .faq details{background:#fff; border:2.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); margin:0 0 14px} .faq summary{ cursor:pointer; list-style:none; padding:13px 16px 13px 40px; position:relative; font-family:var(--mono); font-size:13.5px; line-height:1.5; color:var(--ink); font-weight:700; } .faq summary::-webkit-details-marker{display:none} .faq summary::before{ content:"\25B8"; position:absolute; left:16px; top:12px; color:var(--magenta); font-size:16px; transition:transform .12s ease; } .faq details[open] summary::before{transform:rotate(90deg)} .faq details[open] summary{border-bottom:2px dashed var(--ink); background:var(--card)} .faq summary:hover,.faq summary:focus-visible{background:var(--yellow)} .faq .a{padding:13px 16px 4px 40px; font-size:12.5px; color:var(--ink2); line-height:1.75} .faq .a p{margin:0 0 11px} .faq .a p:last-child{margin-bottom:11px} @media (prefers-reduced-motion:reduce){ .faq summary::before{transition:none} } /* ── Dates table — policy.css .tw/table with two additions ──────────────── */ .dates td{white-space:normal} .dates td:first-child{color:var(--ink); font-weight:700; min-width:170px} /* School name links straight to that school's own scholarship page (the source_url in schools.json). Ink, not magenta, so the column still reads as a heading; the dotted rule and the arrow say "this goes somewhere". */ .dates td:first-child a.school{color:var(--ink); text-decoration:none; border-bottom:2px dotted var(--ink3)} .dates td:first-child a.school::after{content:" \2197"; font-family:var(--mono); font-size:10px; font-weight:400; color:var(--ink3)} .dates td:first-child a.school:hover,.dates td:first-child a.school:focus-visible{background:var(--yellow); border-bottom-style:solid; border-bottom-color:var(--ink)} .dates .tbc{color:var(--ink3); font-style:italic} /* The previous round's date, shown under a "to be confirmed" cell as a planning hint. Deliberately quieter and smaller than the cell above it so it can never be mistaken for this season's date. */ .dates .prev{display:block; margin-top:4px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; line-height:1.45; color:var(--ink3); text-transform:uppercase} .count{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink2); margin:-10px 0 18px} /* ── The practice-pack books — pricing.html's composition books ────────── Same generated marbling, same spine, same stuck-on label. A third cover colour joins the shelf: cyan, which is the Scholarships arm's colour throughout this booklet. The label's display colour is a darker teal so it clears the white label at AA. */ .shelf{position:relative; display:grid; gap:clamp(24px,3.6vw,32px); grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .book{ position:relative; display:flex; flex-direction:column; overflow:hidden; border:3px solid var(--ink); border-radius:5px; box-shadow:6px 6px 0 var(--ink); padding:26px 22px 20px 48px; background-color:var(--cover); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.075' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 8 0 0 0 -4.55'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23l)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.085' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 8 0 0 0 -4.05'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23d)'/%3E%3C/svg%3E"); background-size:260px 260px, 260px 260px; } .book.c{--cover:var(--cyan); --accent:#0b5d75; --btn:var(--yellow); transform:rotate(-.6deg)} .book.d{--cover:var(--yellow); --accent:var(--red); --btn:var(--pink); transform:rotate(.6deg)} .book::before{ content:""; position:absolute; top:-2px; bottom:-2px; left:0; width:30px; background:#141414; border-right:2px solid rgba(0,0,0,.85); box-shadow:inset -3px 0 6px rgba(255,255,255,.09); } .label{ position:relative; align-self:stretch; background:#fdfcf7; border:1.5px solid #2a2622; border-radius:14px; box-shadow:0 2px 0 rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.35); padding:15px 18px 16px; margin-bottom:auto; text-align:center; } .brand{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink2); margin:0 0 1px} .label h3{ font-family:var(--display); font-weight:400; font-size:clamp(26px,4vw,32px); line-height:1; letter-spacing:.02em; margin:0 0 3px; color:var(--accent); } .sub{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink2); margin:0 0 11px} .yr{ display:inline-block; font-family:var(--mono); background:var(--yellow); border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); padding:3px 9px; font-size:10px; letter-spacing:.14em; transform:rotate(-1.5deg); margin-bottom:14px; } .price{display:flex; align-items:baseline; justify-content:center; gap:8px} .amount{font-family:var(--display); font-weight:400; font-size:52px; line-height:.9; letter-spacing:.01em} /* Until a price is set the label carries "PRICE TO COME" in place of the dollar figure — same slot, smaller type, so the book keeps its shape. */ .amount.tba{font-size:30px; line-height:1.1; padding:6px 0} .per{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--ink2)} .price-sub{font-family:var(--mono); font-size:11px; color:var(--ink2); margin:5px 0 12px; line-height:1.6} /* The yearly alternative, as a torn-off strip under the monthly price — same strip as pricing.html so the three books read as one shelf. */ .yearly{ background:var(--card); border:2px dashed #3a352f; padding:9px 12px; margin:0 0 13px; font-family:var(--mono); font-size:11px; line-height:1.6; color:var(--ink2); } .yearly b{font-family:var(--display); font-weight:400; font-size:19px; color:var(--ink); letter-spacing:.01em} .save{ display:inline-block; background:var(--green); border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); padding:2px 7px; margin-top:7px; font-size:9.5px; letter-spacing:.13em; transform:rotate(-1.5deg); } .feat{list-style:none; margin:0 0 11px; padding:0 2px; text-align:left; color:var(--ink2)} .feat li{ position:relative; font-family:var(--mono); font-size:11px; line-height:1.5; padding:0 0 3px 15px; border-bottom:1.2px solid #3a352f; margin-bottom:8px; } .feat li::before{content:"\25B8"; position:absolute; left:0; color:var(--magenta)} .feat li:last-child{margin-bottom:0} .fineprint{font-family:var(--mono); font-size:8.5px; letter-spacing:.03em; color:#9a938a; margin:0} .footrow{margin-top:20px; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap} .go{ font-family:var(--display); font-size:17px; letter-spacing:.06em; text-decoration:none; background:var(--btn); color:var(--ink); border:2.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:9px 20px; } .go:hover,.go:focus-visible{background:#fdfcf7; color:var(--ink)} .barcode{background:#fff; border:1px solid var(--ink); padding:3px 4px 2px; width:92px} .barcode i{ display:block; height:26px; background:repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 3px, #111 3px 4px, #fff 4px 6px, #111 6px 9px, #fff 9px 10px, #111 10px 11px, #fff 11px 14px); } .barcode span{display:block; font-family:var(--mono); font-size:7px; letter-spacing:.12em; text-align:center; color:var(--ink); margin-top:1px} /* ── Not-on-sale-yet tape — pricing.html's, same geometry notes apply ──── */ .soon-tape{ position:absolute; left:-5%; right:-5%; top:60%; z-index:5; transform:rotate(-5deg); pointer-events:none; background:var(--yellow); border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:16px 8px; text-align:center; font-family:var(--display); font-size:clamp(15px,3vw,26px); letter-spacing:.14em; white-space:nowrap; overflow:hidden; } .soon-tape::before,.soon-tape::after{ content:""; position:absolute; left:0; right:0; height:8px; background:repeating-linear-gradient(45deg,var(--ink) 0 12px,var(--yellow) 12px 24px); } .soon-tape::before{top:0} .soon-tape::after{bottom:0} @media (max-width:1000px){ .soon-tape{left:0; right:0} } @media (max-width:678px){ .soon-tape{top:29%} } /* .wrap .soon-note so it outranks policy.css's `body.short p` margin reset, which otherwise pins the note to the bottom edge of the books. */ .wrap .soon-note{ font-family:var(--mono); font-size:12.5px; color:var(--ink2); text-align:center; line-height:1.8; margin:32px auto 0; max-width:56ch; } .soon-note a{color:var(--ink)} /* ── The disclaimer every page in this arm carries ────────────────────── Legal requirement, not decoration: lives in the footer of all six pages and is not to be shortened. Same type as the ACARA/SCSA line elsewhere. */ footer .trademark{margin-top:10px; padding-top:10px; border-top:1px dashed var(--ink2)} @media (max-width:520px){ .ransom{column-gap:20px} .ransom .r1,.ransom .r5{font-size:31px} .ransom .r2{font-size:25px} .ransom .r3{font-size:23px} .ransom .r4{font-size:26px} .ransom .r6{font-size:33px} .book.c,.book.d{transform:none} .book{padding:22px 16px 18px 42px} .soon-tape{font-size:15px; letter-spacing:.1em; padding:12px 6px} .amount{font-size:44px} .glance .big{font-size:36px} } @media print{ .soon-tape,.armnav,.barcode{display:none} .book,.panel,.inc,.seccard,.faq details{box-shadow:none; break-inside:avoid} .book{background-image:none; background-color:#fff; border-radius:0; padding:0} .book::before{display:none} .label{box-shadow:none; border-radius:0; border-width:0 0 2px} .faq details{border-width:0 0 1px} footer{display:block} }