/* App-wide: the ground every page sits on, and pieces the prototype got from each page's . */ body { background: #b8966c url(/img/tile_kraft.webp) 0 0/1200px auto repeat; min-height: 100vh; } main { display: block; } .pg-notfound { padding-block: 80px 100px; text-align: center; } .pg-notfound img { width: 160px; margin: 0 auto 16px; } .pg-notfound h1 { font: 400 clamp(1.8rem, 4vw, 2.6rem)/1.1 var(--f-slab); margin-bottom: 10px; } .pg-notfound .btn { margin-top: 16px; } /* ---------- the treasure hunt (components/hunt.rs), on every KS3 page ---------- */ .hunt-tag { position: fixed; z-index: 70; left: 14px; bottom: 14px; display: grid; gap: 2px; max-width: min(300px, calc(100vw - 28px)); text-decoration: none; font-size: .9rem; --torn-bg: var(--navy); color: var(--label); transform: rotate(-1.5deg); } .hunt-tag small { font: 700 1rem/1 var(--f-hand); color: var(--mustard); } .hunt-tag:hover, .hunt-tag:focus-visible { --torn-bg: var(--ink); } .hunt-pop { position: fixed; z-index: 90; right: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px)); display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; padding: 18px 20px; background: #fffdf6 url(/img/tile_cream.webp) center/400px; border-top: 10px solid var(--mustard); box-shadow: 0 12px 30px rgba(40,25,5,.35); animation: hunt-pop .45s cubic-bezier(.3,1.5,.6,1) both; } .hunt-pop .got { width: 110px; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); animation: hunt-wiggle .9s .3s ease-in-out both; } .hunt-pop h2 { font: 400 1.5rem/1.05 var(--f-slab); margin: 0 0 6px; color: var(--ink); } .hunt-pop p { margin: 0 0 12px; font-size: .95rem; } .hunt-pop .acts { display: flex; flex-wrap: wrap; gap: 8px; } .hunt-pop .btn { font-size: .9rem; } @keyframes hunt-pop { from { opacity: 0; transform: translateY(30px) scale(.9); } } @keyframes hunt-wiggle { 30% { transform: rotate(-8deg) scale(1.08); } 60% { transform: rotate(6deg) scale(1.08); } } @media (max-width: 480px) { .hunt-pop { grid-template-columns: 72px 1fr; } .hunt-pop .got { width: 72px; } } @media (prefers-reduced-motion: reduce) { .hunt-pop, .hunt-pop .got { animation: none; } } .hunt-pop.miss { border-top-color: var(--coral); } .hunt-pop.done { border-top-color: var(--s-science); } .hunt-pop .next { background: #f6ecd4; padding: 8px 10px; font-size: .92rem; } .hunt-pop .count { font: 700 1.15rem/1.1 var(--f-hand); color: #5b3a1a; } /* a smaller part of a unit, under its title (e.g. Year 7 Maths' KS2 recap) */ .unit-sub { margin: -2px 0 10px; font: 700 1.15rem/1.15 var(--f-hand); color: #7a5a2e; } .unit-sub::before { content: "↳ "; color: var(--c, var(--coral)); }