/* ============================================================ DotSense design system — shared by every tool page and the marketing site. Extracted from the original subitizing tool so all tools stay visually and behaviorally identical. Depends on the Nunito font being linked in each page's . ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --radius: 16px; /* Fixed banner palette — the homepage hero band stays dark in both light and dark theme, like a printed masthead, so it doesn't wash out when a teacher flips the toggle. */ --banner-bg:#141a33; --banner-text:#f8f8fc; --banner-muted:#aab2d6; --banner-border:rgba(255,255,255,.18); } [data-theme="dark"] { --bg:#1B2340; --surface:#252E4B; --border:#2F3A5A; --text:#F8F8F2; --muted:#8892B0; --stage-bg:#252E4B; --active-bg:#4ECDC4; --active-fg:#1B2340; --next-bg:#2F3A5A; --next-fg:#F8F8F2; --teal:#4ECDC4; --coral:#FF6B6B; --yellow:#FFD166; --die-face:#2a3654; } [data-theme="light"] { --bg:#F4F1EB; --surface:#EDE9E0; --border:#D6D0C4; --text:#1a1a2e; --muted:#7a7468; --stage-bg:#EDE9E0; --active-bg:#4338ca; --active-fg:#fff; --next-bg:#D6D0C4; --next-fg:#1a1a2e; --teal:#4338ca; --coral:#c1121f; --yellow:#2d6a4f; --die-face:#ddd8cc; } body { font-family:'Nunito',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column; align-items:center; transition:background .25s,color .25s; } header { width:100%; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); } .logo { font-size:1.35rem; font-weight:900; letter-spacing:-.5px; } .logo span { color:var(--teal); } .logo a { color:inherit; text-decoration:none; } .header-right { display:flex; align-items:center; gap:12px; } .tagline { font-size:.72rem; color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; } .theme-toggle { display:flex; align-items:center; gap:6px; cursor:pointer; padding:5px 10px; border-radius:99px; border:1.5px solid var(--border); background:transparent; font-family:'Nunito',sans-serif; font-size:.73rem; font-weight:800; color:var(--muted); transition:border-color .15s,color .15s; white-space:nowrap; } .theme-toggle:hover { border-color:var(--teal); color:var(--text); } .theme-toggle:focus-visible, .collapse-toggle:focus-visible, .seg-btn:focus-visible, .chip:focus-visible, .spin-btn:focus-visible, .btn:focus-visible, .color-dot:focus-visible, a:focus-visible, input[type=range]:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; } /* main fills the area below the header; we size children to fit without scrolling */ main { flex:1; width:100%; max-width:1100px; padding:16px 20px 16px; display:flex; flex-direction:column; align-items:center; gap:14px; min-height:0; } /* STAGE — wide, grows to fill width, but capped by available height so the control bar below stays on screen. Uses min(...) of width- and height-based caps. */ .stage-wrap { width:100%; /* height is the binding constraint: leave room for the control bar + actions. 42vh keeps the stage large but guarantees the bar fits beneath it. */ height:min(46vh, 56.25vw, 480px); background:var(--stage-bg); border-radius:var(--radius); border:2px solid var(--border); position:relative; overflow:hidden; transition:background .25s,border-color .25s,height .3s ease; } /* when controls are collapsed, the stage grows to fill the reclaimed space */ body.collapsed .stage-wrap { height:min(72vh, 78vw, 760px); } .stage-canvas { width:100%; height:100%; display:block; } .blank-overlay { position:absolute; inset:0; background:var(--stage-bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; transition:opacity .12s,background .25s; } .blank-overlay.hidden { opacity:0; pointer-events:none; } .blank-overlay .think-icon { font-size:2.6rem; } .blank-overlay .think-text { font-size:1rem; font-weight:700; color:var(--muted); } /* reveal prompt — small, quiet cue at the bottom of the stage during reveal */ .reveal-prompt { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); font-size:.8rem; font-weight:600; font-style:italic; color:var(--muted); opacity:0; transition:opacity .25s; pointer-events:none; letter-spacing:.01em; max-width:90%; text-align:center; } .reveal-prompt.show { opacity:.7; } .stage-status { position:absolute; top:11px; left:50%; transform:translateX(-50%); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; padding:3px 11px; border-radius:99px; pointer-events:none; } .stage-status.ready{background:var(--border);color:var(--muted);} .stage-status.flashing{background:var(--coral);color:#fff;} .stage-status.thinking{background:var(--border);color:var(--muted);} .stage-status.revealed{background:var(--teal);color:var(--active-fg);} /* CONTROL BAR — horizontal row of control sections beneath the stage */ .control-bar { width:100%; background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); padding:10px 16px; position:relative; transition:background .25s,border-color .25s; } /* the row of sections; single row on wide screens, centered as a group */ .control-bar-inner { display:flex; align-items:flex-start; gap:16px; flex-wrap:nowrap; justify-content:center; } /* Below ~1140px the sections can't share one row without squishing, so wrap gracefully. Dividers hide when wrapped to avoid stray lines. */ @media (max-width:1140px){ .control-bar-inner { flex-wrap:wrap; gap:14px 22px; } .bar-divider { display:none; } } .bar-section { display:flex; flex-direction:column; gap:6px; } .bar-divider { width:1px; align-self:stretch; background:var(--border); } /* collapse toggle — small chevron + label, top-right of the bar */ .collapse-toggle { position:absolute; top:8px; right:12px; display:flex; align-items:center; gap:5px; cursor:pointer; background:transparent; border:none; padding:4px 6px; font-family:'Nunito',sans-serif; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--teal); transition:opacity .15s; z-index:5; } .collapse-toggle:hover { opacity:.75; } .collapse-toggle .chev { display:inline-block; transition:transform .3s ease; font-size:.8rem; line-height:1; } /* one-time "look here" nudge — pulses once the first time a teacher begins the routine (Flash/Advance) without collapsing the panel first */ .collapse-toggle.hide-nudge { animation:hideNudge .8s ease-in-out 1; } @keyframes hideNudge { 0%, 100% { transform:scale(1); color:var(--teal); } 50% { transform:scale(1.3); color:var(--coral); } } /* collapsed strip (hidden by default, shown when body.collapsed) */ .collapsed-strip { display:none; width:100%; background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); padding:8px 16px; align-items:center; justify-content:space-between; transition:background .25s,border-color .25s; } .collapsed-strip .strip-summary { font-size:.74rem; font-weight:700; color:var(--muted); letter-spacing:.02em; } /* COLLAPSE STATE SWITCHING */ body.collapsed .control-bar { display:none; } body.collapsed .collapsed-strip { display:flex; } .ctrl-group { display:flex; flex-direction:column; gap:6px; } .ctrl-label { font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); } .seg { display:flex; gap:4px; flex-wrap:wrap; } .seg-btn { padding:5px 10px; border-radius:7px; border:1.5px solid var(--border); background:transparent; color:var(--text); font-family:'Nunito',sans-serif; font-size:.74rem; font-weight:700; cursor:pointer; transition:all .15s; } .seg-btn:hover:not(.disabled-opt){ border-color:var(--teal); } .seg-btn.active { background:var(--active-bg); border-color:var(--active-bg); color:var(--active-fg); } .seg-btn.disabled-opt { opacity:.26; cursor:not-allowed; } /* pattern type stack: Dots row / preset row / other-types row */ .type-stack { display:flex; flex-direction:column; gap:7px; } /* collapsible preset row — animates open/closed via max-height + opacity */ .preset-row { overflow:hidden; max-height:0; opacity:0; transition:max-height .28s ease, opacity .2s ease, margin .28s ease; margin-top:-7px; /* cancels parent gap while collapsed */ } .preset-row.open { max-height:60px; opacity:1; margin-top:0; } .preset-chips { display:flex; flex-direction:row; gap:5px; flex-wrap:wrap; } .chip { padding:6px 11px; border-radius:8px; border:1.5px dashed var(--border); background:transparent; color:var(--text); font-family:'Nunito',sans-serif; font-size:.74rem; font-weight:800; cursor:pointer; transition:all .15s; text-align:center; letter-spacing:.01em; white-space:nowrap; } .chip:hover:not(.disabled-opt) { border-color:var(--teal); border-style:solid; } .chip.active { background:var(--teal); border-color:var(--teal); border-style:solid; color:var(--active-fg); } .chip.disabled-opt { opacity:.26; cursor:not-allowed; } .slider-row { display:flex; align-items:center; gap:8px; } input[type=range] { flex:1; -webkit-appearance:none; height:4px; border-radius:4px; background:var(--border); outline:none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--teal); cursor:pointer; } input[type=range]::-moz-range-thumb { width:16px; height:16px; border:none; border-radius:50%; background:var(--teal); cursor:pointer; } .slider-val { font-size:.78rem; font-weight:800; color:var(--teal); min-width:34px; text-align:right; } .auto-badge { font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--yellow); opacity:0; transition:opacity .3s; text-align:center; } .auto-badge.show { opacity:1; } /* number range — centered to kill negative space */ .range-control { display:flex; align-items:center; justify-content:center; gap:14px; } .range-endpoint { display:flex; flex-direction:column; align-items:center; gap:2px; } .range-endpoint-label { font-size:.59rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); } .range-spinbox { display:flex; flex-direction:column; align-items:center; gap:2px; } .spin-btn { width:30px; height:21px; border-radius:5px; border:1.5px solid var(--border); background:transparent; color:var(--text); font-size:.8rem; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .15s,background .15s; font-family:'Nunito',sans-serif; line-height:1; } .spin-btn:hover { border-color:var(--teal); background:var(--border); } .spin-val { font-size:1.3rem; font-weight:900; color:var(--text); min-width:26px; text-align:center; } .range-dash { font-size:.9rem; font-weight:700; color:var(--muted); padding-top:16px; } /* color row */ .color-row { display:flex; gap:10px; align-items:center; justify-content:center; } .color-dot { width:30px; height:30px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:border-color .15s,transform .15s; flex-shrink:0; padding:0; background-clip:content-box; } .color-dot:hover { transform:scale(1.12); } .color-dot.selected { border-color:var(--teal); } /* actions */ .actions { width:100%; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .btn { padding:12px 26px; border-radius:12px; border:none; font-family:'Nunito',sans-serif; font-size:1rem; font-weight:800; cursor:pointer; transition:transform .1s,opacity .15s; white-space:nowrap; } .btn:active { transform:scale(.97); } .btn:disabled { opacity:.28; cursor:not-allowed; transform:none; } .btn-flash{ background:var(--coral); color:#fff; } .btn-flash:hover:not(:disabled){ opacity:.88; } .btn-reveal{ background:var(--teal); color:var(--active-fg); } .btn-reveal:hover:not(:disabled){ opacity:.88; } .btn-next{ background:var(--next-bg); color:var(--next-fg); border:1.5px solid var(--border); } .btn-next:hover:not(:disabled){ border-color:var(--teal); color:var(--teal); } /* segmented mode control used by multi-mode tools (e.g. compare/missing-number) */ .mode-switch { display:flex; gap:4px; } footer { padding:12px; color:var(--muted); font-size:.7rem; font-weight:600; text-align:center; } footer a { color:var(--teal); text-decoration:none; } @media (max-width:700px){ .tagline{ display:none; } } /* ============================================================ SITE PAGES — landing, tool libraries, about, legal. These classes only appear on marketing/index pages, never on the tool stages, so they can't disturb any routine tool. Everything reads the same CSS variables, so the fraction theme (data-suite="fractions") re-skins these too. ============================================================ */ .site { max-width:1080px; margin:0 auto; padding:0 22px; width:100%; } .site-nav { display:flex; gap:20px; align-items:center; } .site-nav a { color:var(--muted); text-decoration:none; font-weight:800; font-size:.82rem; transition:color .15s; } .site-nav a:hover, .site-nav a.active { color:var(--teal); } @media(max-width:640px){ .site-nav{ gap:12px; } .site-nav a{ font-size:.74rem; } } .hero { text-align:center; padding:54px 0 30px; } .hero h1 { font-size:2.5rem; font-weight:900; letter-spacing:-1px; line-height:1.12; margin-bottom:16px; } .hero h1 .accent { color:var(--teal); } .hero p.lead { font-size:1.1rem; color:var(--muted); font-weight:600; max-width:640px; margin:0 auto 26px; line-height:1.55; } .hero .cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } @media(max-width:640px){ .hero{ padding:34px 0 20px; } .hero h1{ font-size:1.85rem; } .hero p.lead{ font-size:1rem; } } /* ── homepage banner hero — full-bleed dark band above the fold ── */ .hero-banner { width:100%; background:var(--banner-bg); color:var(--banner-text); position:relative; overflow:hidden; padding:74px 24px 66px; } .hero-banner::before { content:""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(circle, rgba(78,205,196,.55) 1.6px, transparent 1.7px), radial-gradient(circle, rgba(255,107,107,.45) 1.8px, transparent 1.9px), radial-gradient(circle, rgba(255,209,102,.5) 1.4px, transparent 1.5px); background-size: 46px 46px, 88px 88px, 64px 64px; background-position: 0 0, 20px 40px, 55px 10px; opacity:.5; } .hero-banner-inner { position:relative; z-index:1; max-width:1080px; margin:0 auto; } .hero-banner .eyebrow { border-color:var(--banner-border); color:var(--banner-muted); background:rgba(255,255,255,.06); } .hero-banner h1 { font-size:2.7rem; font-weight:900; letter-spacing:-1px; line-height:1.14; max-width:700px; margin-bottom:18px; } .hero-banner h1 .accent { color:var(--teal); } .hero-banner p.lead { font-size:1.1rem; color:var(--banner-muted); font-weight:600; max-width:600px; margin:0 0 28px; line-height:1.55; } .hero-banner .cta-row { display:flex; gap:12px; flex-wrap:wrap; } .hero-banner .btn-ghost { border-color:var(--banner-border); color:var(--banner-text); } .hero-banner .btn-ghost:hover { border-color:var(--banner-text); color:var(--banner-text); } @media(max-width:640px){ .hero-banner{ padding:48px 20px 42px; } .hero-banner h1{ font-size:1.9rem; } .hero-banner p.lead{ font-size:1rem; } } /* ── small uppercase pill label used above section headings ── */ .eyebrow { display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:99px; border:1px solid var(--border); color:var(--muted); margin-bottom:14px; } /* ── circular icon badge on each tool card ── */ .tool-icon { width:52px; height:52px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:14px; background:var(--bg); } .tool-icon svg { width:26px; height:26px; } .tool-icon.icon-teal { color:var(--teal); } .tool-icon.icon-coral { color:var(--coral); } .tool-icon.icon-yellow { color:var(--yellow); } .btn-primary { display:inline-block; background:var(--teal); color:var(--active-fg); font-weight:900; font-size:1.05rem; padding:15px 34px; border-radius:14px; text-decoration:none; transition:transform .1s, opacity .15s; } .btn-primary:hover { opacity:.9; } .btn-primary:active { transform:scale(.97); } .btn-ghost { display:inline-block; border:1.5px solid var(--border); color:var(--text); font-weight:800; font-size:1rem; padding:14px 26px; border-radius:12px; text-decoration:none; transition:border-color .15s,color .15s; } .btn-ghost:hover { border-color:var(--teal); color:var(--teal); } .section { padding:36px 0; border-top:1px solid var(--border); } .section h2 { font-size:1.4rem; font-weight:900; margin-bottom:6px; } .section .sub { color:var(--muted); font-weight:600; margin-bottom:22px; line-height:1.5; } .routine-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } @media(max-width:720px){ .routine-steps{ grid-template-columns:repeat(2,1fr); } } .step { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; } .step .n { font-size:1.15rem; font-weight:900; color:var(--teal); letter-spacing:.02em; text-transform:uppercase; margin-bottom:8px; } .step p { font-size:.85rem; color:var(--muted); font-weight:600; line-height:1.5; } /* ── subsections within a tool-library page (e.g. "Flash Routines" / "Choral Counting") ── */ .tool-subsection { margin-bottom:32px; } .tool-subsection:last-child { margin-bottom:0; } .subsection-title { font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin:0 0 14px; } /* ── grade-band filter chips above a tool grid (reuses .chip from the tool control bar) ── */ .filter-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; } .tool-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; } .tool-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; transition:border-color .15s; } .tool-card:hover { border-color:var(--teal); } .tool-card .band { font-size:.66rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); } .tool-card h3 { font-size:1.15rem; font-weight:900; margin:6px 0 8px; display:flex; align-items:center; flex-wrap:wrap; gap:6px; } .tool-card p { font-size:.85rem; color:var(--muted); font-weight:600; line-height:1.5; flex:1; margin-bottom:16px; } .badge { display:inline-block; font-size:.6rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; padding:2px 8px; border-radius:99px; vertical-align:middle; } .badge-free { color:var(--active-fg); background:var(--teal); } .badge-plus { color:var(--active-fg); background:var(--coral); } .badge-soon { color:var(--muted); background:var(--border); } .tool-card a.open { align-self:flex-start; background:var(--teal); color:var(--active-fg); font-weight:800; font-size:.85rem; padding:9px 18px; border-radius:10px; text-decoration:none; transition:opacity .15s; } .tool-card a.open:hover { opacity:.9; } .tool-card a.open.disabled { background:var(--border); color:var(--muted); pointer-events:none; } .suite-banner { display:flex; align-items:center; justify-content:space-between; gap:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px 26px; flex-wrap:wrap; } .suite-banner .txt h2 { font-size:1.3rem; font-weight:900; margin-bottom:6px; } .suite-banner .txt p { color:var(--muted); font-weight:600; max-width:560px; line-height:1.5; font-size:.9rem; } .email-capture { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px; text-align:center; } .email-capture h2 { font-size:1.3rem; font-weight:900; margin-bottom:8px; } .email-capture p { color:var(--muted); font-weight:600; margin-bottom:18px; line-height:1.5; } .email-form { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:460px; margin:0 auto; } .email-form input[type=email] { flex:1; min-width:200px; padding:13px 16px; border-radius:12px; border:1.5px solid var(--border); background:var(--bg); color:var(--text); font-family:'Nunito',sans-serif; font-size:.95rem; font-weight:600; } .email-form input[type=email]:focus { outline:none; border-color:var(--teal); } .email-form button { background:var(--teal); color:var(--active-fg); border:none; font-weight:900; font-size:.95rem; padding:13px 24px; border-radius:12px; cursor:pointer; font-family:'Nunito',sans-serif; transition:opacity .15s; } .email-form button:hover { opacity:.9; } .email-note { font-size:.72rem; color:var(--muted); margin-top:12px; } .prose { max-width:760px; margin:0 auto; padding:30px 0; } .prose h1 { font-size:2rem; font-weight:900; margin-bottom:16px; } .prose h2 { font-size:1.2rem; font-weight:900; margin:26px 0 8px; color:var(--text); } .prose p, .prose li { color:var(--muted); font-weight:600; line-height:1.7; font-size:.95rem; } .prose ul { padding-left:20px; margin:8px 0; } .prose a { color:var(--teal); } .prose .updated { font-size:.8rem; color:var(--muted); font-style:italic; } .site-footer { border-top:1px solid var(--border); margin-top:44px; padding:26px 0 34px; color:var(--muted); font-size:.8rem; font-weight:600; } .site-footer a { color:var(--teal); text-decoration:none; } .site-footer a:hover { text-decoration:underline; } .site-footer .cols { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center; } .site-footer nav { display:flex; gap:16px; flex-wrap:wrap; } /* focus visibility for keyboard users across site + tool controls */ a:focus-visible, button:focus-visible, input:focus-visible, .chip:focus-visible, .seg-btn:focus-visible, .spin-btn:focus-visible { outline:3px solid var(--teal); outline-offset:2px; } /* ── explanatory research section below a tool's stage (both suites) ── */ .tool-explainer { width:100%; max-width:820px; margin:26px auto 8px; padding:0 24px; } .tool-explainer h2 { font-size:.95rem; font-weight:900; letter-spacing:.02em; color:var(--text); margin-bottom:8px; } .tool-explainer p { font-size:.88rem; line-height:1.65; color:var(--muted); font-weight:600; } /* tighten the header on very small phones so logo + nav don't crowd */ @media (max-width:440px){ header { padding:12px 14px; } .site-nav { gap:9px; } .site-nav a { font-size:.7rem; } .theme-toggle { padding:5px 8px; font-size:.68rem; } .logo { font-size:1.15rem; } }