/* Shared styling for the navigation pages: index.html, grade4.html, grade6.html, and the per-subject pages. The two activity pages (seven-days.html, prophets.html) are self-contained and do not use this file. Grade colour comes from a class on : g4 = gold, g6 = blue. Everything inside inherits --accent, so cards carry no colour class. */ :root{ --ink:#0E1630; --ink-2:#182448; --ink-3:#22315C; --lead:#3C4C82; --gold:#E9B646; --gold-soft:#F3D68F; --azure:#5C97DC; --azure-soft:#B7D3F4; --glass:#F6F1E4; --muted:#A7B2D6; --accent:var(--gold); --accent-soft:var(--gold-soft); --accent-dim:rgba(233,182,70,.5); --accent-glow:rgba(233,182,70,.16); } body.g4{ --accent:var(--gold); --accent-soft:var(--gold-soft); --accent-dim:rgba(233,182,70,.5); --accent-glow:rgba(233,182,70,.16); } body.g6{ --accent:var(--azure); --accent-soft:var(--azure-soft); --accent-dim:rgba(92,151,220,.5); --accent-glow:rgba(92,151,220,.16); } *{box-sizing:border-box;} html{background:#0B1128;} body{ margin:0;min-height:100vh; background-color:#0B1128; background-image:radial-gradient(125% 62% at 50% 0%, #2E3E78 0%, rgba(46,62,120,0) 62%); background-repeat:no-repeat;background-size:100% 720px; color:var(--glass); font-family:Nunito,"Trebuchet MS",system-ui,sans-serif; font-size:17px;line-height:1.5;-webkit-text-size-adjust:100%; } .wrap{max-width:720px;margin:0 auto;padding:26px 16px 60px;} /* ---------- back link ---------- */ a.back{ display:inline-flex;align-items:center;gap:7px;text-decoration:none; color:var(--muted);font-size:14.5px;font-weight:800; letter-spacing:.05em;padding:9px 15px 9px 12px; border:2px solid var(--lead);border-radius:11px; transition:border-color .18s,color .18s; } a.back:hover{border-color:var(--accent);color:var(--accent-soft);} a.back:focus-visible{outline:3px solid var(--accent);outline-offset:2px;} /* ---------- masthead ---------- */ header.top{text-align:center;padding:16px 0 4px;} .rose{ width:62px;height:62px;margin:0 auto 14px;border-radius:50%; background:radial-gradient(circle at 50% 50%, #FFF3D0 0%, var(--gold) 34%, #B9822A 62%, var(--lead) 63%, var(--ink-2) 100%); box-shadow:0 0 0 3px var(--lead),0 0 34px rgba(233,182,70,.42); position:relative; } .rose::after{content:"";position:absolute;inset:11px;border-radius:50%;border:2px solid rgba(14,22,48,.55);} .gradecrest{ width:62px;height:62px;margin:0 auto 14px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:Cinzel,Georgia,serif;font-weight:700;font-size:28px; color:var(--accent);background:rgba(255,255,255,.04); border:2px solid var(--accent);box-shadow:0 0 24px var(--accent-glow); } h1{ font-family:Cinzel,Georgia,serif;font-weight:700; font-size:clamp(26px,7vw,40px);letter-spacing:.05em; margin:0;color:var(--accent-soft);line-height:1.15;text-wrap:balance; } .kicker{ margin:10px 0 0;color:var(--muted);font-size:13.5px; letter-spacing:.14em;text-transform:uppercase;font-weight:700; } /* ---------- grade cards (index) ---------- */ .grades{display:flex;flex-direction:column;gap:14px;margin-top:34px;} a.grade{ display:flex;align-items:center;gap:20px;text-decoration:none;color:inherit; background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 100%); border:2px solid var(--accent-dim);border-radius:18px;padding:24px 24px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:border-color .18s,transform .14s,box-shadow .18s; } a.grade.g4{--accent:var(--gold);--accent-soft:var(--gold-soft);--accent-dim:rgba(233,182,70,.5);--accent-glow:rgba(233,182,70,.16);} a.grade.g6{--accent:var(--azure);--accent-soft:var(--azure-soft);--accent-dim:rgba(92,151,220,.5);--accent-glow:rgba(92,151,220,.16);} a.grade:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 30px var(--accent-glow);} a.grade:focus-visible{outline:3px solid var(--accent);outline-offset:3px;} a.grade .num{ flex:none;width:66px;height:66px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:Cinzel,Georgia,serif;font-weight:700;font-size:31px; color:var(--accent);background:rgba(255,255,255,.04); border:2px solid var(--accent);box-shadow:0 0 22px var(--accent-glow); } a.grade .name{ font-family:Cinzel,Georgia,serif;font-size:clamp(21px,5vw,27px);font-weight:700; color:#FFF8E8;line-height:1.2;display:block; } a.grade .has{display:block;margin-top:5px;color:var(--muted);font-size:15px;} a.grade .go{margin-left:auto;color:var(--accent);font-size:22px;flex:none;} /* ---------- subject tiles ---------- */ .subjects{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;} @media (max-width:520px){.subjects{grid-template-columns:1fr;}} .subject{ display:block;text-decoration:none;color:inherit; background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 100%); border:2px solid var(--accent-dim);border-radius:16px;padding:20px 18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:border-color .18s,transform .14s,box-shadow .18s; } a.subject:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 26px var(--accent-glow);} a.subject:focus-visible{outline:3px solid var(--accent);outline-offset:3px;} .subject .icon{ width:44px;height:44px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.06);border:1.5px solid var(--accent-dim); color:var(--accent);margin-bottom:13px; } .subject .icon svg{width:24px;height:24px;} .subject .name{ font-family:Cinzel,Georgia,serif;font-size:20px;font-weight:700; color:#FFF8E8;display:block;line-height:1.2; } .subject .count{display:block;margin-top:6px;color:var(--muted);font-size:14.5px;font-weight:700;} .subject .go{display:block;margin-top:12px;color:var(--accent);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;} .subject.empty{ border-style:dashed;border-color:var(--lead); background:rgba(255,255,255,.02);cursor:default; } .subject.empty .icon{color:var(--muted);border-color:var(--lead);background:rgba(255,255,255,.03);} .subject.empty .name{color:var(--muted);} .subject.empty .count{color:#6C7899;} /* ---------- activity cards ---------- */ .cards{display:flex;flex-direction:column;gap:12px;margin-top:26px;} a.card{ display:block;text-decoration:none;color:inherit; background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 100%); border:2px solid var(--accent-dim);border-radius:16px;padding:20px 20px 18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:border-color .18s,transform .14s,box-shadow .18s; } a.card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 30px var(--accent-glow);} a.card:focus-visible{outline:3px solid var(--accent);outline-offset:3px;} a.card .eyebrow{ font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; display:block;margin-bottom:7px;color:var(--accent); } a.card .title{ font-family:Cinzel,Georgia,serif;font-size:clamp(21px,5vw,27px);font-weight:700; color:#FFF8E8;line-height:1.2;display:block; } a.card .blurb{display:block;margin-top:8px;color:var(--muted);font-size:15.5px;line-height:1.45;} a.card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px;} a.card .tags span{ font-size:12.5px;font-weight:800;letter-spacing:.05em; padding:5px 11px;border-radius:20px;background:rgba(255,255,255,.07); border:1px solid var(--lead);color:var(--glass); } a.card .open{ display:block;margin-top:15px;font-family:Cinzel,Georgia,serif; font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--accent); } /* ---------- printables ---------- */ .printhead{ margin:24px 0 9px;font-size:12px;font-weight:800; letter-spacing:.15em;text-transform:uppercase;color:var(--muted); } .prints{display:grid;grid-template-columns:1fr 1fr;gap:11px;} @media (max-width:520px){.prints{grid-template-columns:1fr;}} a.print{ display:block;text-decoration:none;color:inherit; border:2px solid var(--lead);border-radius:13px;padding:15px 16px; background:rgba(255,255,255,.03); transition:border-color .18s,background .18s; } a.print:hover{border-color:var(--accent);background:rgba(255,255,255,.06);} a.print:focus-visible{outline:3px solid var(--accent);outline-offset:2px;} a.print .n{font-weight:800;font-size:16.5px;color:#FFF8E8;display:block;} a.print .d{display:block;margin-top:4px;color:var(--muted);font-size:14px;line-height:1.4;} a.print .pill{ display:inline-block;margin-top:9px;font-size:11.5px;font-weight:800; letter-spacing:.12em;text-transform:uppercase;color:var(--accent); } /* ---------- misc ---------- */ .note{ margin-top:13px;padding:12px 15px;border-radius:11px; background:rgba(255,255,255,.045);border:1px solid var(--lead); font-size:14.5px;line-height:1.5;color:var(--muted); } .note b{color:var(--glass);} .soon{ margin-top:26px;padding:14px 16px;border-radius:12px; border:2px dashed var(--lead);background:rgba(255,255,255,.02); color:var(--muted);font-size:15px;line-height:1.5;text-align:center; } .soon b{color:var(--accent-soft);} footer{margin-top:40px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.7;} @media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}