brain backup 2026-09-14

projects/ckmath-interactive-pilot/styles.css

@@ -0,0 +1,9 @@
+:root { --ink:#142737; --muted:#576a75; --paper:#f7f4ed; --card:#fffdfa; --line:#ded7c7; --blue:#156d92; --blue-deep:#0e526f; --mint:#dceee9; --gold:#edb950; --good:#13765a; --bad:#a13d34; }
+* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"Avenir Next",Avenir,ui-rounded,system-ui,sans-serif; }
+a { color:var(--blue-deep); } .site-header { width:min(100% - 2rem,1160px); margin:auto; padding:1.15rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .brand { color:var(--ink); text-decoration:none; font-weight:850; letter-spacing:-.04em; font-size:1.17rem; } .brand span { color:var(--blue); } nav { display:flex; gap:1.2rem; } nav a { color:var(--muted); text-decoration:none; font-size:.92rem; font-weight:700; }
+main { width:min(100% - 2rem,1160px); margin:auto; } .hero { display:grid; grid-template-columns:1.5fr .78fr; gap:clamp(1.5rem,6vw,6rem); align-items:end; padding:clamp(3rem,8vw,7rem) 0 4rem; border-bottom:1px solid var(--line); } .eyebrow { margin:0 0 .6rem; color:var(--blue-deep); font-size:.73rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; } h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; letter-spacing:-.045em; } h1 { max-width:13ch; margin:0; font-size:clamp(3.1rem,7vw,6.3rem); line-height:.92; } h2 { margin:0; font-size:clamp(2rem,4vw,3rem); line-height:1; } h3 { margin:.2rem 0 .8rem; font-size:1.45rem; line-height:1.05; } .lede { max-width:58ch; color:var(--muted); font-size:1.08rem; line-height:1.6; } .hero-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.5rem; } .button,button { appearance:none; border:0; border-radius:.68rem; padding:.8rem 1rem; color:white; background:var(--blue); cursor:pointer; text-decoration:none; font:inherit; font-weight:800; } .button:hover,button:hover { background:var(--blue-deep); } .button.quiet { color:var(--blue-deep); background:#dceef3; } .hero-note { border:1px solid var(--line); border-radius:1rem; padding:1.2rem 1.3rem; background:var(--card); box-shadow:0 1rem 2.4rem #283d4012; } .hero-note p { margin:.55rem 0; } .hero-note strong { font-family:Georgia,serif; color:var(--blue-deep); font-size:1.5rem; } .note-label { color:var(--muted); font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; } hr { border:0; border-top:1px solid var(--line); margin:1rem 0; }
+.teacher-bridge { display:grid; grid-template-columns:.8fr 1.2fr; gap:2rem; padding:4rem 0; } .teacher-bridge>p { margin:0; color:var(--muted); font-size:1.06rem; line-height:1.65; } .library-section,.interactive-wrap { padding:4rem 0; border-top:1px solid var(--line); } .section-head { display:flex; justify-content:space-between; align-items:end; gap:1.5rem; margin-bottom:1.5rem; } .small { color:var(--muted); font-size:.88rem; line-height:1.5; } .filters { display:flex; flex-wrap:wrap; gap:.45rem; margin:1.25rem 0 1.5rem; } .filter { padding:.52rem .75rem; border:1px solid #cbd7d9; color:var(--blue-deep); background:transparent; font-size:.88rem; } .filter.selected { color:white; background:var(--blue-deep); border-color:var(--blue-deep); }
+.unit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; } .unit-card { display:flex; min-height:235px; flex-direction:column; padding:1.15rem; border:1px solid var(--line); border-radius:.95rem; background:var(--card); } .unit-subject { margin:0; color:var(--blue-deep); font-size:.75rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; } .material-count { margin:0 0 .9rem; color:var(--muted); font-size:.86rem; line-height:1.4; } .resource-links { display:grid; gap:.35rem; margin-top:auto; } .resource-link { width:fit-content; color:var(--blue-deep); font-size:.9rem; font-weight:800; } .source-link { margin-top:.85rem; color:var(--muted); font-size:.76rem; }
+.interactive-wrap { padding-bottom:2rem; max-width:790px; } .progress { display:flex; gap:.45rem; margin:2rem 0 1.2rem; } .progress span { height:.4rem; flex:1; border-radius:2rem; background:#d8e0e2; } .progress span.active { background:var(--blue); } .session { border:1px solid var(--line); border-radius:1.1rem; background:var(--card); box-shadow:0 1.2rem 3rem #42381610; padding:clamp(1.25rem,4vw,2rem); } .session + .session { margin-top:1rem; } .session h3 { font-size:1.75rem; } .prompt { margin:.9rem 0 1.25rem; font-size:1.1rem; line-height:1.5; } .groups { display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:.65rem; margin:1.1rem 0; } .group { min-height:88px; border:2px dashed #b7d0dc; border-radius:.85rem; padding:.65rem; background:#f3fbfd; text-align:center; } .group span { display:block; color:var(--muted); font-size:.78rem; font-weight:700; } .shoes { min-height:42px; padding-top:.45rem; font-size:1.45rem; letter-spacing:.08em; } .answer-row { display:flex; gap:.65rem; flex-wrap:wrap; align-items:center; margin-top:1.15rem; } input,textarea { width:min(100%,320px); border:1px solid #afbac1; border-radius:.65rem; background:white; color:var(--ink); font:inherit; padding:.78rem; } textarea { min-height:112px; width:100%; resize:vertical; } button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--gold); outline-offset:3px; } .feedback { min-height:1.5rem; margin:.8rem 0 0; font-weight:700; } .feedback.good { color:var(--good); } .feedback.bad { color:var(--bad); } .tip { color:var(--muted); font-size:.94rem; line-height:1.45; } [hidden] { display:none!important; } .source { max-width:850px; margin:2rem 0 3.5rem; color:var(--muted); font-size:.8rem; line-height:1.5; }
+@media (max-width:800px) { .hero,.teacher-bridge { grid-template-columns:1fr; } .hero { padding-top:3.5rem; } .unit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
+@media (max-width:520px) { .site-header,main { width:min(100% - 1.2rem,1160px); } nav { gap:.8rem; } .unit-grid { grid-template-columns:1fr; } .section-head { display:block; } .section-head .small { margin-top:.8rem; } h1 { font-size:3.35rem; } .session { padding:1.15rem; } .answer-row input { width:100%; } }