:root{ /* Shell: dark, energetic navy/black */ --baize:#0E1526; --baize-deep:#060A14; --baize-soft:#1C2740; /* Gold: primary CTA / accent */ --brass:#E8A43D; --brass-light:#F5C468; --brass-ink:#AD7A15; /* Learning canvas: dark navy everywhere, regardless of the device's own light/dark setting */ --vellum:#0C1120; --panel:#161F35; --line:#2E3B5C; --ink:#F4F6FC; --ink-soft:#AFB9D2; /* Red and blue accents */ --oxblood:#C4293F; --moss:#1E9E5A; --slate:#1F4E73; --sq-l:#E7D7B3; --sq-d:#9A6A43; --display:"Poppins","Segoe UI",system-ui,sans-serif; --body:"Inter","Segoe UI",system-ui,sans-serif; --r-sm:8px; --r-md:14px; --r-sharp:4px; --nav-w:260px; /* Dark energetic panels: used for activities, demos, quizzes, celebration moments */ --dpanel:#161F35; --dpanel-2:#1D2A46; --dline:#2E3B5C; --dink:#F4F6FC; --dink-soft:#AFB9D2; } :root[data-theme="light"]{ --vellum:#F7F5EF; --panel:#FFFFFF; --line:#E3E1D8; --ink:#12141C; --ink-soft:#585F70; } :root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); } *,*::before,*::after{ box-sizing:inherit; } html{ scroll-padding-top:env(safe-area-inset-top,0px); -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--body); font-size:17px; line-height:1.55; color:var(--ink); background-color:var(--vellum); } img,svg{ max-width:100%; } button{ font:inherit; } a{ color:var(--slate); } :focus-visible{ outline:3px solid var(--brass); outline-offset:2px; } /* ---------- shell ---------- */ .shell{ display:grid; grid-template-columns:var(--nav-w) 1fr; min-height:100%; } .nav-backdrop{ display:none; } .nav{ background:var(--baize-deep); color:#EAF0FF; position:sticky; top:env(safe-area-inset-top,0px); height:calc(100vh - env(safe-area-inset-top,0px)); overflow-y:auto; padding:22px 16px 28px; background-image:radial-gradient(ellipse 480px 300px at 15% 0%, rgba(31,78,115,.28), transparent 60%), radial-gradient(ellipse 420px 260px at 100% 30%, rgba(196,41,63,.22), transparent 60%), linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.025) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.025) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.025) 75%); background-size:auto, auto, 44px 44px, 44px 44px, 44px 44px, 44px 44px; background-position:0 0, 0 0, 0 0, 0 22px, 22px -22px, -22px 0px; background-repeat:no-repeat, no-repeat, repeat, repeat, repeat, repeat; position:relative; } .wordmark{ display:block; text-decoration:none; color:inherit; text-align:center; padding:6px 4px 18px; margin-bottom:12px; border-bottom:1px solid rgba(255,255,255,.12); } .student-bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:rgba(232,164,61,.14); border:1px solid rgba(232,164,61,.4); border-radius:var(--r-sharp); padding:8px 10px; margin:0 10px 14px; } .student-bar .who{ font-size:13px; font-weight:700; color:var(--brass); } .path-wrap{ position:relative; max-width:340px; margin:20px auto; } .path-line{ position:absolute; inset:0; width:100%; height:100%; } .path-node{ position:absolute; width:52px; height:52px; text-decoration:none; } .path-node-locked{ pointer-events:none; opacity:.6; } .path-node .dot{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; border:4px solid; font-family:var(--display); font-weight:800; font-size:18px; color:var(--ink); box-shadow:0 4px 10px rgba(0,0,0,.15); } .lb-list{ display:flex; flex-direction:column; gap:10px; } .lb-row{ display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sharp); padding:14px 16px; } .lb-row.lb-me{ border-color:var(--brass); background:linear-gradient(rgba(232,164,61,.06),rgba(232,164,61,.06)), var(--panel); } .rank-badge{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 44px; } .rank-badge svg{ width:100%; height:100%; } .rank-badge.rank-plain{ position:relative; background:var(--vellum); border-radius:50%; } .rank-badge.rank-plain .rp-pawn{ display:block; width:100%; height:100%; opacity:.55; } .rank-badge.rank-plain .rp-pawn svg{ width:100%; height:100%; } .rank-badge.rank-plain .rp-n{ position:absolute; inset:auto -2px -2px auto; background:var(--ink-soft); color:#fff; font-family:var(--display); font-weight:800; font-size:11px; min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px; } .lb-info{ flex:1; min-width:0; } .lb-name{ font-family:var(--display); font-weight:700; font-size:17px; } .lb-meter{ height:8px; background:var(--vellum); border-radius:99px; overflow:hidden; margin:6px 0 4px; } .student-cta{ display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink); background:linear-gradient(100deg, rgba(232,164,61,.16), rgba(31,78,115,.1)), var(--panel); border:2px solid var(--brass); border-radius:var(--r-sharp); padding:18px 20px; margin:20px 0; } .student-cta-icon{ flex:0 0 56px; width:56px; height:56px; background:var(--brass); border-radius:50%; display:flex; align-items:center; justify-content:center; padding:8px; } .student-cta-icon svg{ width:100%; height:100%; } .student-cta-text{ flex:1; min-width:0; } .student-cta-text h2{ margin:0 0 4px; font-size:20px; } .student-cta-text p{ margin:0; color:var(--ink-soft); font-size:15px; } .student-cta-arrow{ font-size:26px; color:var(--brass-ink); flex:0 0 auto; } body.class-mode h1 { font-size: clamp(24px, 6.4vw, 34px); } body.class-mode h2 { font-size: 22px; } body.young-mode { font-size: 1.06em; } body.young-mode h1 { font-size: clamp(26px, 7vw, 34px); } body.young-mode h2 { font-size: 23px; } body.young-mode .summary h2, body.class-mode .summary h2 { font-size: 14px; } body.young-mode .btn { min-height: 50px; font-size: 1.05em; padding: 12px 20px; border-radius: var(--r-sharp); } body.young-mode .tile { padding: 20px; } body.young-mode .tile h3 { font-size: 1.25em; } body.young-mode p.lede { font-size: 1.05em; } body.young-mode .young-hide { display: none !important; } body.young-mode .young-only { display: block !important; } .young-only { display: none; } body.student-mode [data-tab="troubleshoot"]{ display:none; } body.student-mode .study-btn, body.student-mode .mode-toggle{ display:none; } .wordmark .wm-name{ font-family:var(--display); font-weight:800; font-size:24px; line-height:1.1; letter-spacing:.01em; color:#FFFFFF; text-transform:uppercase; } .wordmark .wm-rule{ display:block; height:4px; margin:10px auto 8px; width:100px; border-radius:3px; background:linear-gradient(90deg,var(--slate),var(--brass),var(--oxblood)); } .wordmark .wm-sub{ font-family:var(--body); font-weight:600; font-size:14px; color:var(--brass-light); letter-spacing:.03em; } .nav h2{ font-family:var(--body); font-size:12px; font-weight:800; color:#8FA3D6; margin:20px 10px 8px; letter-spacing:.08em; text-transform:uppercase; } .nav a{ display:flex; align-items:center; justify-content:flex-start; gap:10px; color:#EAF0FF; text-decoration:none; padding:10px 12px; border-radius:var(--r-sm); font-size:16px; min-height:44px; font-weight:500; transition:background .12s ease; } .nav a:hover{ background:rgba(255,255,255,.08); } .nav a[aria-current="page"]{ background:linear-gradient(90deg, rgba(232,164,61,.16), rgba(232,164,61,.04)); box-shadow:inset 3px 0 0 var(--brass); font-weight:700; color:#fff; } .nav a[aria-current="page"] .nav-ic{ color:var(--brass); opacity:1; } .nav-ic{ flex:0 0 auto; width:19px; height:19px; opacity:.65; color:#C9D3EE; } .nav-ic svg{ width:100%; height:100%; display:block; } .nav-label{ min-width:0; } .new-badge{ flex:0 0 auto; margin-left:auto; padding:2px 7px; border-radius:20px; background:#E1483F; color:#fff; font-size:10px; font-weight:800; letter-spacing:.04em; line-height:1.5; } .nav .tag{ font-size:12px; color:#8FA3D6; } .topbar{ display:none; } .main{ min-width:0; padding:28px clamp(16px,3vw,40px) 64px; } .page{ max-width:1120px; margin:0 auto; } @media (max-width: 900px){ .shell{ grid-template-columns:1fr; } .nav{ position:fixed; inset:0 auto 0 0; width:min(86vw,320px); height:100%; z-index:50; transform:translateX(-102%); transition:transform .2s ease; padding-top:calc(22px + env(safe-area-inset-top,0px)); touch-action:pan-y; overscroll-behavior:contain; } .nav.open{ transform:none; } .nav-backdrop{ display:block; position:fixed; inset:0; z-index:49; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .2s ease; } .nav-backdrop.show{ opacity:1; pointer-events:auto; } .topbar{ display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:40; background:var(--baize-deep); color:#fff; padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top,0px)); } .topbar .wm-name{ font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:.01em; text-transform:uppercase; } .menu-btn{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:var(--r-sm); min-height:44px; min-width:44px; padding:0 12px; font-weight:700; } .main{ padding-top:18px; } } /* ---------- type ---------- */ h1,h2,h3{ font-family:var(--display); font-weight:800; line-height:1.15; color:var(--ink); } h1{ font-size:clamp(30px,4.4vw,44px); margin:0 0 6px; } h2{ font-size:26px; margin:34px 0 10px; } h3{ font-size:21px; margin:22px 0 6px; font-weight:700; } p{ margin:0 0 12px; max-width:72ch; } .lede{ font-size:18px; color:var(--ink-soft); max-width:62ch; } .small{ font-size:15px; color:var(--ink-soft); } ul.plain{ padding-left:20px; margin:0 0 12px; } ul.plain li{ margin:4px 0; max-width:70ch; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 20px; border-radius:999px; border:1px solid var(--baize); background:var(--baize); color:#fff; font-weight:700; cursor:pointer; text-decoration:none; font-size:16px; } .btn:hover{ background:var(--baize-soft); } .btn:disabled{ opacity:.45; cursor:not-allowed; } .btn-quiet{ background:transparent; color:var(--ink); border-color:var(--line); font-weight:600; border-radius:999px; } .btn-quiet:hover{ background:rgba(31,78,115,.08); } .btn-quiet[aria-pressed="true"]{ border-color:var(--slate); background:rgba(31,78,115,.12); } .btn-brass{ background:var(--brass); border-color:var(--brass); color:#1A1200; font-weight:800; } .btn-brass:hover{ background:var(--brass-light); } .btn-row{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; } /* ---------- panels ---------- */ .panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 22px; margin:14px 0; } .panel.framed{ border:2px solid var(--brass); box-shadow:none; padding:24px 26px; } .coach-note{ border-left:4px solid var(--slate); background:linear-gradient(rgba(31,78,115,.08),rgba(31,78,115,.08)), var(--panel); padding:12px 16px; border-radius:0 var(--r-sm) var(--r-sm) 0; margin:12px 0; } .say{ border-left:4px solid var(--moss); background:linear-gradient(rgba(30,158,90,.08),rgba(30,158,90,.08)), var(--panel); padding:12px 16px; border-radius:0 var(--r-sm) var(--r-sm) 0; margin:12px 0; font-size:18px; } .say::before{ content:"You might say"; display:block; font-size:13px; font-weight:800; color:var(--moss); margin-bottom:2px; text-transform:uppercase; letter-spacing:.04em; } body.student-mode .say::before{ content:"Here\2019s the idea"; } .rule-flag{ display:block; border:2px dashed var(--oxblood); color:var(--oxblood); padding:10px 14px; border-radius:var(--r-sm); font-weight:800; margin:12px 0; background:rgba(196,41,63,.06); } .rule-flag small{ display:block; font-weight:500; color:var(--ink); margin-top:4px; font-size:15px; } /* ---------- dashboard ---------- */ .hero-wrap{ border-radius:var(--r-sharp); overflow:hidden; margin-bottom:0; } .hero-wrap .art-strip{ position:relative; height:200px; overflow:hidden; } .hero-wrap .art-strip svg{ position:absolute; inset:0; width:100%; height:100%; } .hero{ display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; background:var(--baize); color:#fff; border-radius:0; padding:32px 34px; position:relative; overflow:hidden; border-top:1px solid rgba(232,164,61,.35); } .hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(ellipse 460px 320px at -5% -10%, rgba(31,78,115,.55), transparent 60%), radial-gradient(ellipse 420px 340px at 108% 15%, rgba(196,41,63,.45), transparent 60%), radial-gradient(ellipse 300px 260px at 60% 120%, rgba(232,164,61,.28), transparent 65%); } .hero::after{ display:none; } .hero h1{ color:#fff; } .hero .lede{ color:#CBD5F0; } .hero-name{ font-family:var(--display); font-weight:800; font-size:clamp(30px,5vw,46px); line-height:1; letter-spacing:.01em; margin:0; color:#fff; text-transform:uppercase; position:relative; z-index:1; } .hero-rule{ display:flex; gap:4px; width:170px; margin:14px 0; position:relative; z-index:1; } .hero-rule span{ flex:1 1 0; height:5px; border-radius:3px; } .hero-rule span:nth-child(1){ background:var(--slate); } .hero-rule span:nth-child(2){ background:var(--oxblood); } .hero-rule span:nth-child(3){ background:var(--brass); } .chess-pattern-bg{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23ffffff' fill-opacity='0.07'%3E%3Cpath d='M20 18c-3 0-5 2-5 5 0 2 1 3 2 4-3 1-5 4-5 7h16c0-3-2-6-5-7 1-1 2-2 2-4 0-3-2-5-5-5z'/%3E%3Crect x='11' y='34' width='18' height='4' rx='1'/%3E%3Cpath d='M95 20l-6 3v6l3 2-4 2c-3 1-5 4-5 7h20c0-4-3-7-6-8l3-2-3-2v-5z'/%3E%3Crect x='85' y='40' width='22' height='4' rx='1'/%3E%3Cpath d='M55 85l-3 3 2 2-4 3 3 2-3 3c-2 2-3 5-3 8h16c0-3-1-6-3-8l3-3-3-2 3-3-3-2z'/%3E%3Crect x='46' y='103' width='16' height='4' rx='1'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:repeat; } .hero-meter{ position:relative; z-index:1; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-md); padding:18px 20px; } .meter{ height:10px; background:rgba(255,255,255,.16); border-radius:6px; overflow:hidden; margin:10px 0; } .meter > span{ display:block; height:100%; background:linear-gradient(90deg,var(--slate),var(--brass)); } .hero-meter .big{ font-family:var(--display); font-size:40px; font-weight:800; line-height:1; } .ring-wrap{ position:relative; width:92px; height:92px; margin:0 auto 10px; } .ring-svg{ width:100%; height:100%; transform:rotate(-90deg); } .ring-bg{ fill:none; stroke:rgba(255,255,255,.14); stroke-width:9; } .ring-fg{ fill:none; stroke:var(--brass); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset .4s ease; } .ring-mid{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .ring-big{ font-family:var(--display); font-size:24px; font-weight:800; line-height:1; } .ring-small{ font-size:11px; color:#CBD5F0; margin-top:2px; } .welcome-bar{ display:flex; align-items:center; gap:12px; background:var(--dpanel); border:1px solid var(--dline); border-radius:var(--r-sharp); padding:12px 16px; margin:0 0 18px; color:var(--dink); } .welcome-avatar{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--baize-soft); border:2px solid var(--brass); color:var(--brass); font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; } .welcome-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; } .welcome-text b{ font-size:15px; } .welcome-text span{ font-size:13px; color:var(--dink-soft); } .welcome-profile{ flex:0 0 auto; color:var(--dink); border-color:var(--dline); min-height:38px; padding:0 16px; } @media (max-width: 760px){ .hero{ grid-template-columns:1fr; padding:26px 22px; } } .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; } /* small piece/board icon shown on lesson and program tiles, so the topic reads at a glance */ .l-icon{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:rgba(31,78,115,.12); margin-bottom:8px; flex:none; } .l-icon svg{ width:66%; height:66%; } .tile.cat-power .l-icon, .cat-power.l-icon{ background:rgba(196,41,63,.14); } .tile.cat-play .l-icon{ background:rgba(232,164,61,.16); } .tile.cat-puzzle .l-icon{ background:rgba(232,115,58,.16); } .l-icon.prog-icon{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.16); } .tile.cat-first .l-icon.prog-icon{ background:rgba(255,255,255,.22); } .tile.cat-power .l-icon.prog-icon{ background:rgba(255,255,255,.22); } .l-icon.prog-icon-big{ width:74px; height:74px; border-radius:var(--r-sharp); background:rgba(31,78,115,.14); position:relative; z-index:1; margin-bottom:0; } .program-hero.power .l-icon.prog-icon-big{ background:rgba(196,41,63,.14); } .program-hero{ border-radius:var(--r-sharp); margin:0 0 20px; overflow:hidden; background:var(--baize-deep); } .program-hero .art-strip{ position:relative; height:260px; overflow:hidden; } .program-hero .art-strip svg{ position:absolute; inset:0; width:100%; height:100%; } .hero-textbox{ position:relative; background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--c-first); border-radius:0 0 var(--r-sharp) var(--r-sharp); padding:22px 26px; color:var(--ink); } .program-hero.power .hero-textbox{ border-top-color:var(--c-power); } .hero-textbox h1{ color:var(--ink); } .hero-textbox .lede{ color:var(--ink-soft); max-width:640px; } @media (max-width:640px){ .program-hero .art-strip{ height:130px; } .hero-textbox{ padding:18px 20px; } } .tile{ display:flex; flex-direction:column; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; text-decoration:none; color:var(--ink); min-height:120px; } a.tile:hover{ border-color:var(--slate); box-shadow:0 4px 16px rgba(31,78,115,.12); } .tile h3{ margin:0; font-size:21px; font-weight:700; } .tile p{ margin:0; font-size:15px; color:var(--ink-soft); } .tile .foot{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:14px; } /* status pills: text + shape, never colour alone */ .pill{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:3px 10px; border-radius:999px; border:1px solid currentColor; white-space:nowrap; } .pill::before{ content:""; width:8px; height:8px; border-radius:50%; border:1.5px solid currentColor; } .pill.s-not{ color:var(--ink-soft); } .pill.s-learning{ color:var(--slate); } .pill.s-learning::before{ background:linear-gradient(90deg,currentColor 50%,transparent 50%); } .pill.s-practicing{ color:var(--brass-ink); } .pill.s-practicing::before{ background:linear-gradient(90deg,currentColor 75%,transparent 75%); } .pill.s-mastered{ color:var(--moss); } .pill.s-mastered::before{ background:currentColor; } .pill.b-tested{ color:var(--moss); } .pill.b-tested::before{ background:currentColor; } .pill.b-needs{ color:var(--brass-ink); } .pill.b-partial{ color:var(--slate); } .pill.b-not{ color:var(--ink-soft); border-style:dashed; } /* ---------- lesson ---------- */ .lesson-head{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:flex-end; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:6px; } .crumbs{ font-size:15px; color:var(--ink-soft); margin-bottom:6px; } .crumbs a{ color:var(--ink-soft); } .tabs{ display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--line); margin:14px 0 18px; position:sticky; top:0; background:var(--vellum); z-index:5; } @media (max-width:900px){ .tabs{ top:64px; } } .tabs button{ background:none; border:none; border-bottom:3px solid transparent; padding:12px 16px; min-height:48px; cursor:pointer; color:var(--ink-soft); font-weight:600; white-space:nowrap; } .tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--brass); } .sec{ margin:0 0 26px; } .sec-h{ display:flex; align-items:baseline; gap:12px; margin:26px 0 8px; } .sec-h .n{ font-family:var(--display); font-size:20px; color:var(--brass-ink); min-width:28px; font-weight:600; } .sec-h h2{ margin:0; font-size:28px; } .qa{ display:grid; gap:8px; } .qa details{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 14px; } .qa summary{ cursor:pointer; font-weight:600; min-height:32px; } .mist{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--panel); } .mist > div{ padding:12px 14px; border-bottom:1px solid var(--line); } .mist > div:nth-child(odd){ border-right:1px solid var(--line); } .mist .hd{ font-weight:700; background:linear-gradient(rgba(232,164,61,.14),rgba(232,164,61,.14)), var(--panel); } @media (max-width:640px){ .mist{ grid-template-columns:1fr; } .mist > div:nth-child(odd){ border-right:none; } .mist .hd:nth-child(2){ display:none; } .mist > div:nth-child(even):not(.hd)::before{ content:"How to respond: "; font-weight:700; } } body.class-mode [data-aud="coach"]{ display:none !important; } body.class-mode .main{ font-size:19px; } .mode-toggle[aria-pressed="true"]{ background:var(--brass); border-color:var(--brass); color:#1A160E; } /* ---------- activity layout ---------- */ .activity{ display:grid; grid-template-columns:minmax(280px,560px) 1fr; gap:22px; align-items:start; } .activity .side{ min-width:0; } @media (max-width: 980px){ .activity{ grid-template-columns:1fr; } .activity .board-col{ max-width:560px; width:100%; margin:0 auto; } } .prompt{ font-family:var(--display); font-size:30px; font-weight:600; margin:0 0 8px; line-height:1.15; } .scoreline{ display:flex; gap:16px; flex-wrap:wrap; font-size:15px; color:var(--ink-soft); margin:6px 0 10px; } .scoreline b{ color:var(--ink); font-size:18px; } .choice-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:10px 0; } .choice-grid.cols-8{ grid-template-columns:repeat(8,1fr); } .choice-grid.cols-3{ grid-template-columns:repeat(3,1fr); } .choice-grid.cols-2{ grid-template-columns:repeat(2,1fr); } .choice{ min-height:48px; border:1px solid var(--line); background:var(--panel); border-radius:var(--r-sm); cursor:pointer; font-weight:600; font-size:17px; color:var(--ink); padding:6px; } .choice:hover{ border-color:var(--brass); } .choice[aria-pressed="true"]{ background:var(--baize); color:#F6F1E4; border-color:var(--baize); } .choice.right{ border:2px solid var(--moss); } .choice.wrong{ border:2px dashed var(--oxblood); } .feedback{ padding:10px 14px; border-radius:var(--r-sm); margin:10px 0; display:flex; gap:10px; align-items:flex-start; } .feedback .ic{ font-weight:800; flex:none; width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center; font-size:14px; border:2px solid currentColor; } .feedback.ok{ background:rgba(47,107,69,.1); color:var(--moss); } .feedback.ok span:last-child{ color:var(--ink); } .feedback.bad{ background:rgba(123,45,38,.08); color:var(--oxblood); } .feedback.bad span:last-child{ color:var(--ink); } .feedback.info{ background:rgba(44,90,134,.08); color:var(--slate); } .feedback.info span:last-child{ color:var(--ink); } .hintbox{ border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 14px; background:var(--panel); margin:8px 0; } .hintbox ol{ margin:4px 0 0; padding-left:22px; } /* ---------- board ---------- */ .cfc-board-wrap{ width:100%; } .cfc-board{ position:relative; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); aspect-ratio:1/1; width:100%; user-select:none; -webkit-user-select:none; touch-action:none; border:6px solid #3B2A1C; border-radius:4px; box-shadow:0 0 0 1px var(--brass), 0 10px 24px rgba(0,0,0,.18); outline:none; } .cfc-board:focus-visible{ box-shadow:0 0 0 3px var(--brass-light), 0 10px 24px rgba(0,0,0,.18); } .sq{ position:relative; } .sq.l{ background:var(--sq-l); } .sq.d{ background:var(--sq-d); } .sq.last::after{ content:""; position:absolute; inset:0; background:rgba(214,178,90,.42); } .sq.sel::after{ content:""; position:absolute; inset:0; background:rgba(47,107,69,.45); } .sq.dot::before{ content:""; position:absolute; left:50%; top:50%; width:28%; height:28%; transform:translate(-50%,-50%); border-radius:50%; background:rgba(20,40,32,.5); z-index:3; } .sq.cap::before{ content:""; position:absolute; inset:5%; border-radius:50%; border:5px solid rgba(20,40,32,.55); z-index:3; } .sq.atk::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg,rgba(142,43,34,.35) 0 4px,transparent 4px 10px); } .sq.chk{ background:radial-gradient(circle,#D8574A 0%,rgba(216,87,74,.5) 45%,transparent 75%), var(--sq-l); } .sq.d.chk{ background:radial-gradient(circle,#D8574A 0%,rgba(216,87,74,.5) 45%,transparent 75%), var(--sq-d); } .sq.cur{ box-shadow:inset 0 0 0 4px var(--slate); } .sq.hl::after{ content:""; position:absolute; inset:0; background:rgba(44,90,134,.42); } .sq.hl2::after{ content:""; position:absolute; inset:0; background:rgba(184,135,59,.55); } .sq.good::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:min(4.5vw,26px); color:#fff; background:rgba(47,107,69,.72); z-index:4; } .sq.miss::after{ content:"?"; position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:min(4.5vw,26px); color:#fff; background:rgba(44,90,134,.7); z-index:4; } .sq.badpick::after{ content:"✗"; position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:min(4.5vw,26px); color:#fff; background:rgba(142,43,34,.72); z-index:4; } .sq.pick::after{ content:""; position:absolute; inset:8%; border:4px solid var(--baize); border-radius:6px; background:rgba(47,107,69,.25); z-index:4; } .sq.wrongpiece::after{ content:"?"; position:absolute; right:3%; top:2%; font-weight:800; font-size:min(3.4vw,18px); color:#fff; background:var(--oxblood); width:38%; height:38%; border-radius:50%; display:grid; place-items:center; z-index:4; } .sq .cf,.sq .cr{ position:absolute; font-size:clamp(9px,1.5vw,13px); font-weight:700; z-index:2; line-height:1; pointer-events:none; } .sq .cf{ right:4%; bottom:4%; } .sq .cr{ left:4%; top:4%; } .sq.l .cf,.sq.l .cr{ color:var(--sq-d); } .sq.d .cf,.sq.d .cr{ color:var(--sq-l); } .sq .lbl{ position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:clamp(12px,2.4vw,20px); z-index:5; color:#1a1a1a; text-shadow:0 0 3px #fff,0 0 6px #fff; pointer-events:none; } .cfc-pieces{ position:absolute; inset:0; pointer-events:none; z-index:6; } .pc{ position:absolute; width:12.5%; height:12.5%; display:grid; place-items:center; } .pc svg{ width:88%; height:88%; filter:drop-shadow(0 1.5px 1px rgba(0,0,0,.28)); } .pc.dragging{ z-index:20; transform:scale(1.12); } .pc.ghost{ transition:opacity .5s ease, transform .5s ease; } .pc.ghost.gone{ opacity:0; transform:scale(.6); } .cfc-overlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:7; } .cfc-status{ min-height:28px; margin:10px 0 0; font-size:16px; display:flex; gap:8px; align-items:flex-start; } .cfc-status .ic{ flex:none; width:22px; height:22px; border-radius:50%; border:2px solid currentColor; display:inline-grid; place-items:center; font-size:13px; font-weight:800; } .cfc-status.ok{ color:var(--moss); } .cfc-status.bad{ color:var(--oxblood); } .cfc-status.info{ color:var(--slate); } .cfc-status.warn{ color:var(--brass-ink); } .cfc-status span:last-child{ color:var(--ink); } .cfc-controls{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .cfc-controls .btn{ min-height:44px; padding:0 14px; } .cfc-promo{ position:absolute; inset:12% 8%; background:var(--panel); border:2px solid var(--brass); border-radius:var(--r-md); z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:14px; } .promo-title{ font-family:var(--display); font-size:24px; font-weight:600; margin:0; color:var(--ink); } .promo-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%; } .promo-btn{ display:flex; flex-direction:column; align-items:center; gap:4px; border:1px solid var(--line); background:var(--vellum); border-radius:var(--r-sm); padding:8px 4px; cursor:pointer; color:var(--ink); min-height:48px; } .promo-btn svg{ width:70%; max-width:64px; } .promo-btn:hover,.promo-btn:focus-visible{ border-color:var(--brass); } /* mini boards (orientation check) */ .mini-boards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .mini{ border:2px solid var(--line); border-radius:var(--r-md); padding:10px; background:var(--panel); cursor:pointer; text-align:center; color:var(--ink); } .mini[aria-pressed="true"]{ border-color:var(--baize); } .mini .mgrid{ display:grid; grid-template-columns:repeat(8,1fr); aspect-ratio:1; border:3px solid #3B2A1C; } .mini .mgrid i{ display:block; } .mini .seat{ font-size:14px; margin-top:6px; color:var(--ink-soft); } /* tray (setup challenge) */ .tray{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin:8px 0; } .tray button{ border:1px solid var(--line); background:var(--panel); border-radius:var(--r-sm); padding:4px; cursor:pointer; min-height:52px; display:flex; flex-direction:column; align-items:center; font-size:12px; color:var(--ink); } .tray button svg{ width:36px; height:36px; } .tray button[aria-pressed="true"]{ border:2px solid var(--baize); background:rgba(47,107,69,.14); } .tray .count{ font-weight:700; } /* tables */ .tbl{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; font-size:15px; } .tbl th,.tbl td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; } .tbl th{ background:linear-gradient(rgba(232,164,61,.14),rgba(232,164,61,.14)), var(--panel); font-weight:700; } .tbl-wrap{ overflow-x:auto; } .search{ width:100%; min-height:48px; font:inherit; padding:0 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); color:var(--ink); } .pin-wrap{ position:relative; display:block; max-width:200px; } .pin-wrap .pin-input{ padding-right:46px; width:100%; } .pin-eye{ position:absolute; right:2px; top:50%; transform:translateY(-50%); width:40px; height:38px; border:none; background:transparent; font-size:19px; cursor:pointer; opacity:.55; border-radius:8px; } .pin-eye:hover, .pin-eye.on{ opacity:1; background:rgba(255,255,255,.08); } .coach-box{ padding:18px 20px; border-radius:var(--r-sharp); margin-bottom:18px; } .coach-box-return{ background:rgba(31,78,115,.09); border:1.5px solid rgba(31,78,115,.4); } .coach-box-new{ background:rgba(245,180,0,.07); border:1.5px solid rgba(245,180,0,.35); } .coach-box-title{ margin:0 0 6px; font-size:20px; font-family:var(--display); } .field{ min-height:44px; font:inherit; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); color:var(--ink); max-width:100%; } .kc-q{ margin:16px 0; } .kc-q .scenario{ font-weight:600; } .kc-opt{ display:block; width:100%; text-align:left; margin:6px 0; padding:10px 14px; min-height:48px; border:1px solid var(--line); background:var(--panel); border-radius:var(--r-sm); cursor:pointer; color:var(--ink); } .kc-opt.right{ border:2px solid var(--moss); } .kc-opt.wrong{ border:2px dashed var(--oxblood); } .kc-opt:disabled{ cursor:default; } .steps-nav{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0; } .steps-nav .count{ font-size:15px; color:var(--ink-soft); margin:0 6px; } .demo-text{ min-height:120px; } .demo-text h3{ margin-top:0; } .gamebar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:8px 0; } .gamebar label{ font-size:15px; display:flex; gap:6px; align-items:center; min-width:0; flex:1 1 auto; } .gamebar label select{ min-width:0; flex:1 1 auto; } .dl{ display:grid; grid-template-columns:190px 1fr; gap:6px 16px; margin:0; } .dl dt{ font-weight:700; } .dl dd{ margin:0; } @media (max-width:640px){ .dl{ grid-template-columns:1fr; } .dl dd{ margin-bottom:8px; } } .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } } .main:focus{outline:none} .nav a.wordmark{ display:block; min-height:0; padding:6px 4px 18px; } .nav a.wordmark:hover{ background:none; } /* keep the whole board visible on landscape tablets and laptops */ .activity{ grid-template-columns:minmax(260px, min(560px, calc(100vh - 120px))) 1fr; } @media (max-width: 980px){ .activity{ grid-template-columns:1fr; } .activity .board-col{ max-width:min(560px, calc(100vh - 120px)); } } @media (max-width: 980px) and (orientation: portrait){ .activity .board-col{ max-width:560px; } } @media (max-width: 640px){ .panel{ padding:14px 12px; } .panel.framed{ padding:18px 14px; } .main{ padding-left:12px; padding-right:12px; } } .activity{ scroll-margin-top:72px; } .result-box{ margin-top:12px; padding:14px 16px; border:2px solid var(--brass); border-radius:var(--r-md); background:var(--panel); } .result-box .result-text{ margin:0 0 4px; font-size:19px; } .result-box .result-text strong{ font-family:var(--display); font-size:24px; display:block; line-height:1.15; font-weight:800; } /* ---------- dramatic dark treatment for interactive moments (activities, demos, quizzes) ---------- */ /* per design direction: keep instructional reading on the light canvas, but bring back dark + blue + red energy the moment a coach is doing something interactive. */ .panel:has(.activity), .panel.kc-q, .study-card{ background:var(--dpanel); border-color:var(--dline); color:var(--dink); } .panel:has(.activity) h1, .panel:has(.activity) h2, .panel:has(.activity) h3, .panel:has(.activity) .prompt, .panel.kc-q p, .panel.kc-q .scenario, .study-card h2, .study-card .front, .study-card .back{ color:var(--dink); } .panel:has(.activity) .scoreline, .panel:has(.activity) .small, .panel:has(.activity) p{ color:var(--dink-soft); } .panel:has(.activity) .scoreline b{ color:var(--dink); } .panel:has(.activity) .choice, .kc-opt{ background:var(--dpanel-2); border-color:var(--dline); color:var(--dink); } .panel:has(.activity) .choice:hover, .kc-opt:hover{ border-color:var(--brass); } .panel:has(.activity) .choice[aria-pressed="true"]{ background:var(--slate); color:#fff; border-color:var(--slate); } .panel:has(.activity) .btn-quiet, .panel:has(.activity) .field, .panel:has(.activity) .hintbox{ color:var(--dink); border-color:var(--dline); } .panel:has(.activity) .field{ background:var(--dpanel-2); } .panel:has(.activity) .hintbox{ background:var(--dpanel-2); } .panel:has(.activity) .feedback.ok span:last-child, .panel.kc-q .feedback.ok span:last-child{ color:var(--dink); } .panel:has(.activity) .feedback.bad span:last-child, .panel.kc-q .feedback.bad span:last-child{ color:var(--dink); } .panel:has(.activity) .feedback.info span:last-child, .panel.kc-q .feedback.info span:last-child{ color:var(--dink); } .panel:has(.activity) .demo-text, .panel:has(.activity) .steps-nav .count{ color:var(--dink-soft); } .panel:has(.activity) .gamebar label{ color:var(--dink-soft); } /* the activity-picker buttons above the stage get the same energetic dark-pill treatment */ .act-picker .btn-quiet{ background:var(--dpanel); color:#fff; border-color:var(--dline); } .act-picker .btn-quiet[aria-pressed="true"]{ background:var(--slate); border-color:var(--slate); } /* ---------- profiles ---------- */ .pbar{ height:12px; background:rgba(31,58,49,.12); border-radius:7px; overflow:hidden; margin:10px 0; } .pbar > span{ display:block; height:100%; background:linear-gradient(90deg,var(--baize),var(--brass)); border-radius:7px; min-width:2px; } .avatar{ border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--brass); background:var(--vellum); display:inline-block; } .avatar-i{ display:inline-grid; place-items:center; background:var(--baize); color:#F4EBD6; font-family:var(--display); font-weight:600; } .coach-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .coach-tile{ min-height:0; } .coach-tile h3{ font-size:22px; } .nav a.me-chip{ display:flex; justify-content:flex-start; gap:10px; margin:0 0 6px; background:rgba(255,255,255,.05); } .nav a.me-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nav a.me-chip[hidden]{ display:none; } .cloud-banner{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:60; width:min(760px, calc(100% - 24px)); background:var(--baize-deep); color:#F2ECDC; border:1px solid var(--brass); border-radius:var(--r-md); padding:12px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; box-shadow:0 8px 24px rgba(0,0,0,.25); font-size:15px; } .cloud-banner[hidden]{ display:none; } .cloud-banner span{ flex:1; min-width:220px; } .profile-hero{ display:flex; align-items:center; gap:18px; margin:8px 0 12px; flex-wrap:wrap; } .big-pct{ font-size:18px; } .big-pct b{ font-family:var(--display); font-size:44px; line-height:1; margin-right:6px; } .badges{ display:flex; flex-wrap:wrap; gap:8px; } .badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; border:1px dashed var(--line); color:var(--ink-soft); font-size:14px; background:var(--panel); } .badge.got{ border:1.5px solid var(--brass); color:var(--ink); background:linear-gradient(rgba(232,164,61,.14),rgba(232,164,61,.14)), var(--panel); font-weight:600; } .badge .bmark{ font-size:18px; line-height:1; } .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:14px 0; } .stats > div{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; } .stats b{ display:block; font-family:var(--display); font-size:34px; line-height:1.05; } .stats span{ font-size:14px; color:var(--ink-soft); } .edit-grid{ display:grid; grid-template-columns:170px 1fr; gap:20px; } @media (max-width:640px){ .edit-grid{ grid-template-columns:1fr; } } .photo-col{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; } .flabel{ display:block; font-weight:700; margin:12px 0 4px; } .field.wide{ width:100%; max-width:480px; } textarea.field{ padding:10px 12px; min-height:80px; } .file-btn{ cursor:pointer; } .check{ display:flex; gap:8px; align-items:center; margin-top:12px; font-weight:600; } .check input{ width:22px; height:22px; } .cert-img{ width:100%; max-width:900px; border:1px solid var(--line); border-radius:var(--r-sm); display:block; } .me-strip{ margin-top:0; margin-bottom:16px; padding:12px 16px; } .cloud-banner .btn-quiet{ color:#fff; border-color:rgba(255,255,255,.4); } /* ---------- readable lessons ---------- */ .sec-h{ margin:22px 0 8px; font-size:inherit; } .sec-toggle{ display:flex; align-items:baseline; gap:12px; width:100%; background:none; border:0; padding:4px 0; text-align:left; cursor:pointer; color:var(--ink); font:inherit; min-height:44px; } .sec-toggle .n{ font-family:var(--display); font-size:20px; color:var(--brass-ink); min-width:28px; font-weight:600; } .sec-toggle .st{ font-family:var(--display); font-size:28px; font-weight:600; line-height:1.15; flex:1; } .sec-toggle .chev{ width:12px; height:12px; border-right:2.5px solid var(--brass-ink); border-bottom:2.5px solid var(--brass-ink); transform:rotate(45deg); margin:0 6px; align-self:center; transition:transform .15s; } .sec.closed .chev{ transform:rotate(-45deg); } .sec.closed > .body{ display:none; } .sec.closed .sec-h{ margin:6px 0; } .sec.closed{ margin-bottom:0; border-bottom:1px solid var(--line); } .sec > .body{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; } .sec > .body > :last-child{ margin-bottom:0; } .summary{ background:linear-gradient(rgba(var(--tabclr-rgb, var(--c-brass-rgb)), .12),rgba(var(--tabclr-rgb, var(--c-brass-rgb)), .12)), var(--panel); border:1px solid rgba(var(--tabclr-rgb, var(--c-brass-rgb)), .4); border-left:5px solid var(--tabclr, var(--brass)); border-radius:var(--r-sm); padding:14px 18px; margin:6px 0 14px; color:var(--ink); } .summary h2{ color:var(--tabclr, var(--brass-ink)); font-size:19px; margin:0 0 6px; font-family:var(--body); font-weight:800; letter-spacing:.01em; text-transform:uppercase; } .summary ul{ margin:0; padding-left:20px; } .summary li{ margin:5px 0; max-width:70ch; } .summary li::marker{ color:var(--tabclr, var(--brass)); } .kcards{ display:grid; gap:10px; } .kcard{ border-left:4px solid var(--brass); background:var(--vellum); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:10px 14px; } .kcard h3{ margin:0 0 2px; font-size:21px; } .kcard p{ margin:0; } .more-btn{ margin-top:10px; } .tico{ display:none; } .tl-short{ display:none; } .page{ animation:pagein .22s ease-out; } @keyframes pagein{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } /* chess pieces that pop out on navigation */ .burst-pc{ position:fixed; width:48px; height:48px; z-index:200; pointer-events:none; transform:translate(-50%,-50%); } .burst-pc svg{ width:100%; height:100%; filter:drop-shadow(0 2px 2px rgba(0,0,0,.3)); } /* study mode */ body.no-scroll{ overflow:hidden; } .study{ position:fixed; inset:0; z-index:100; background:var(--vellum); display:flex; flex-direction:column; padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(14px + env(safe-area-inset-bottom,0px)); } .study-top{ display:flex; justify-content:space-between; align-items:center; max-width:720px; width:100%; margin:0 auto; } .study-count{ font-weight:700; color:var(--ink-soft); } .study-card{ flex:1; max-width:720px; width:100%; margin:14px auto; background:var(--panel); border:1px solid var(--brass); border-radius:var(--r-md); padding:24px; overflow:auto; box-shadow:none; } .study-card .kind{ font-size:14px; font-weight:700; color:var(--brass-ink); margin-bottom:6px; } .study-card h2{ margin:0 0 8px; } .study-card .front{ font-size:20px; line-height:1.5; } .study-card .back{ margin-top:16px; border-top:1px solid var(--line); padding-top:12px; font-size:19px; } .study-nav{ display:flex; justify-content:space-between; gap:10px; max-width:720px; width:100%; margin:0 auto; } .study-nav .btn{ flex:1; min-height:52px; } @media (min-width:701px){ .page .sec > .body{ padding:18px 22px; } } /* phones: quieter background, smaller type, tab bar at the bottom */ @media (max-width:700px){ body{ font-size:16px; line-height:1.5; background-image:none; } h1{ font-size:30px; } .sec-toggle .st{ font-size:21px; } .sec-toggle .n{ font-size:17px; min-width:24px; } .say{ font-size:16px; } .lede{ font-size:17px; } .kcard h3{ font-size:19px; } .summary{ padding:12px 14px; } .summary h2{ font-size:15px; } .lesson-head .btn{ min-height:40px; padding:0 12px; font-size:15px; } .tabs{ position:fixed; top:auto; bottom:0; left:0; right:0; z-index:45; margin:0; border:0; border-top:1px solid rgba(255,255,255,.14); background:var(--baize-deep); display:grid; grid-template-columns:repeat(5,1fr); gap:0; overflow:visible; padding-bottom:env(safe-area-inset-bottom,0px); } .tabs button{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px 8px; min-height:58px; color:#C9C2AE; border-bottom:0; border-top:3px solid transparent; font-size:12.5px; } .tabs button[aria-selected="true"]{ color:#F7F0DF; border-top-color:var(--brass-light); border-bottom:0; background:rgba(255,255,255,.06); } .tico{ display:block; width:26px; height:26px; } .tico svg{ width:100%; height:100%; } .tl-long{ display:none; } .tl-short{ display:block; } .main{ padding-bottom:calc(90px + env(safe-area-inset-bottom,0px)); } .cloud-banner{ bottom:calc(76px + env(safe-area-inset-bottom,0px)); } .study-card .front{ font-size:18px; } } @media (max-width:700px){ html{ scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)); } body.banner-on .main{ padding-bottom:calc(240px + env(safe-area-inset-bottom,0px)); } body.banner-on{ scroll-padding-bottom:calc(230px + env(safe-area-inset-bottom,0px)); } } body.banner-on .main{ padding-bottom:180px; } .lesson-kicker{ display:block; font-family:var(--body); font-size:15px; font-weight:700; color:var(--brass-ink); margin-bottom:2px; } .words{ background:var(--panel); border:1px solid var(--brass); border-radius:var(--r-md); padding:14px 18px; margin:0 0 10px; } .words h2{ font-size:22px; margin:0 0 8px; } .words dl{ margin:0; display:grid; gap:8px; } .words dl > div{ display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:4px 14px; border-top:1px solid var(--line); padding-top:8px; } .words dl > div:first-child{ border-top:0; padding-top:0; } .words dt{ font-weight:800; } .words dd{ margin:0; } @media (max-width:700px){ .words dl > div{ grid-template-columns:1fr; } .lesson-head h1{ font-size:26px; } .words h2{ font-size:20px; } } /* ---------- color-by-category system ---------- */ :root{ --c-path:#1F4E73; --c-play:#E8A43D; --c-tools:#1F4E73; --c-test:#A62D45; --c-slate:#1F4E73; --c-moss:#1E9E5A; --c-brass:#E8A43D; --c-oxblood:#A62D45; --c-deep:#1E40AF; --c-people:#E8A43D; /* First Moves = blue, Power Moves = red: the two-program identity */ --c-first:#1F4E73; --c-power:#A62D45; --c-flame:#E8733A; } :root{ --c-slate-rgb:31,78,115; --c-moss-rgb:30,158,90; --c-brass-rgb:232,164,61; --c-oxblood-rgb:166,45,69; --c-deep-rgb:30,64,175; --c-flame-rgb:232,115,58; } .page-kicker{ display:flex; align-items:center; gap:9px; margin:0 0 6px; } .page-kicker .pk-icon{ flex:0 0 auto; width:30px; height:30px; padding:5px; border-radius:9px; background:rgba(var(--kc-rgb),.15); } .page-kicker .pk-icon svg{ width:100%; height:100%; } .page-kicker .pk-label{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:rgb(var(--kc-rgb)); } .page-kicker + h1{ margin-top:2px; } /* nav: a colored bar per group, so the menu itself is grouped by color */ .nav-group{ border-left:3px solid transparent; padding-left:11px; margin:14px 0; } .nav-group.cat-path{ border-left-color:var(--slate); } .nav-group.cat-play{ border-left-color:var(--brass); } .nav-group.cat-tools{ border-left-color:var(--slate); } .nav-group.cat-test{ border-left-color:var(--oxblood); } .nav-group.cat-people{ border-left-color:var(--brass); } .nav-group h2{ margin-top:0; } /* dashboard / library tiles: colored top bar + small category tag, by area */ .tile{ position:relative; border-top:4px solid var(--line); padding-top:14px; } .tile .cat-tag{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; padding:2px 9px; border-radius:999px; margin-bottom:8px; text-transform:uppercase; } .tile.cat-path{ border-top-color:var(--slate); } .tile.cat-path .cat-tag{ background:rgba(31,78,115,.14); color:var(--slate); } .tile.cat-play{ border-top-color:var(--c-play); } .tile.cat-play .cat-tag{ background:rgba(232,164,61,.18); color:var(--brass-ink); } .tile.cat-puzzle{ border-top-color:var(--c-flame); } .tile.cat-puzzle .cat-tag{ background:rgba(232,115,58,.16); color:var(--c-flame); } .tile.cat-tools{ border-top-color:var(--c-tools); } .tile.cat-tools .cat-tag{ background:rgba(31,78,115,.12); color:var(--slate); } .tile.cat-test{ border-top-color:var(--c-test); } .tile.cat-test .cat-tag{ background:rgba(196,41,63,.12); color:var(--oxblood); } /* Program identity: First Moves (blue) and Power Moves (red) get their own bold tile treatment */ .tile.cat-first{ border-top-color:var(--c-first); background:linear-gradient(180deg, rgba(31,78,115,.07), var(--panel) 40%); } .tile.cat-first .cat-tag{ background:var(--c-first); color:#fff; } .tile.cat-power{ border-top-color:var(--c-power); background:linear-gradient(180deg, rgba(196,41,63,.07), var(--panel) 40%); } .tile.cat-power .cat-tag{ background:var(--c-power); color:#fff; } /* lesson tabs: each part gets its own color (badge, active tab, focus) */ .tabpanel{ --tabclr:var(--brass); } .tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--tabclr, var(--brass)); } .tabs button:nth-child(1)[aria-selected="true"]{ --tabclr:var(--c-slate); } .tabs button:nth-child(1)[aria-selected="true"]{ color:var(--c-slate); } .tabs button:nth-child(2)[aria-selected="true"]{ color:var(--c-moss); border-bottom-color:var(--c-moss); } .tabs button:nth-child(3)[aria-selected="true"]{ color:var(--brass-ink); border-bottom-color:var(--brass); } .tabs button:nth-child(4)[aria-selected="true"]{ color:var(--oxblood); border-bottom-color:var(--oxblood); } .tabs button:nth-child(5)[aria-selected="true"]{ color:var(--c-deep); border-bottom-color:var(--c-deep); } @media (max-width:700px){ .tabs button:nth-child(1)[aria-selected="true"]{ color:#fff; border-top-color:var(--c-slate); } .tabs button:nth-child(2)[aria-selected="true"]{ color:#fff; border-top-color:var(--c-moss); } .tabs button:nth-child(3)[aria-selected="true"]{ color:#fff; border-top-color:var(--brass-light); } .tabs button:nth-child(4)[aria-selected="true"]{ color:#fff; border-top-color:var(--oxblood); } .tabs button:nth-child(5)[aria-selected="true"]{ color:#fff; border-top-color:#7C9BFF; } } .sec-toggle .n{ color:var(--tabclr, var(--brass-ink)); } /* content-type tinting: each kind of box in a lesson reads differently at a glance */ .sec.k-coach > .body{ background:linear-gradient(rgba(31,78,115,.06),rgba(31,78,115,.06)), var(--panel); border-color:rgba(31,78,115,.3); } .sec.k-coach .kcard{ background:linear-gradient(rgba(31,78,115,.07),rgba(31,78,115,.07)), var(--panel); border-left-color:var(--c-slate); } .sec.k-easy > .body{ background:linear-gradient(rgba(30,158,90,.07),rgba(30,158,90,.07)), var(--panel); border-color:rgba(30,158,90,.35); } .sec.k-hard > .body{ background:linear-gradient(rgba(196,41,63,.06),rgba(196,41,63,.06)), var(--panel); border-color:rgba(196,41,63,.3); } .sec.k-goal > .body{ background:linear-gradient(rgba(232,164,61,.09),rgba(232,164,61,.09)), var(--panel); border-color:rgba(232,164,61,.4); } .sec.k-coach .sec-toggle .st, .sec.k-hard .sec-toggle .st, .sec.k-easy .sec-toggle .st, .sec.k-goal .sec-toggle .st{ color:var(--ink); } .sec[data-aud="coach"] .sec-toggle::before{ content:"Coach only"; font-size:11px; font-weight:800; letter-spacing:.05em; color:var(--c-slate); border:1px solid var(--c-slate); border-radius:999px; padding:1px 8px; margin-right:10px; align-self:center; } /* words-to-know stays visually its own thing: warm gold, distinct from blue coach panels */ .words{ background:rgba(232,164,61,.08); } /* mistakes table already uses red header tint; strengthen it slightly */ .mist .hd{ background:linear-gradient(rgba(196,41,63,.12),rgba(196,41,63,.12)), var(--panel); color:var(--oxblood); } /* Decorative pieces that sit only in empty space (never behind text) */ .deco-inline{ display:block; flex:0 0 auto; width:46px; height:46px; margin-left:auto; align-self:flex-end; pointer-events:none; } .deco-inline svg{ width:100%; height:100%; } .meter-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .meter-head .deco-inline{ align-self:flex-start; width:42px; height:42px; } /* Body pattern only in the side margins of wide screens, and never under the content column */ /* The exit box must stay hidden unless a student is active, and be readable in light mode */ .student-bar[hidden]{ display:none; } .student-bar .btn{ color:#fff; border-color:rgba(255,255,255,.45); } /* Neon chess-piece scatter as the page background (all six piece kinds, sparse) */ body{ background-image:var(--neon-bg, none); background-repeat:repeat; background-size:640px 640px; background-attachment:fixed; } .hero-wrap .art-strip{ height:206px; background:#011730; } .hero-wrap .art-strip::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:40px; background:linear-gradient(rgba(6,10,20,0), rgba(6,10,20,.7)); pointer-events:none; } @media (max-width:640px){ .hero-wrap .art-strip{ height:150px; } .hero-wrap .art-strip img{ object-fit:contain !important; object-position:center bottom; } } .art-overlay{ position:absolute; inset:0; pointer-events:none; } .art-notation{ position:absolute; left:0; right:0; top:14px; text-align:center; font-family:"Courier New",monospace; font-size:13px; letter-spacing:.06em; color:#fff; opacity:.16; mix-blend-mode:soft-light; } .hero-wrap .art-strip svg.art-knight{ position:absolute; inset:auto; left:52%; top:18px; width:46px; height:30px; color:rgba(255,255,255,.38); } .art-header{ background:#011730; padding:18px 22px 4px; } .art-header .hero-name{ font-size:clamp(24px,4vw,34px); } .art-header .hero-rule{ margin:10px 0 0; } .art-footer{ background:#011730; padding:11px 4% 11px; display:flex; flex-direction:column; gap:7px; border-top:1px solid rgba(245,180,0,.14); } .art-coords{ display:flex; justify-content:space-evenly; font-family:"Courier New",monospace; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--brass-light); opacity:.55; } .art-tagline{ margin:0; text-align:center; font-family:var(--display); font-size:16px; font-weight:800; color:#fff; } @media (max-width:640px){ .art-notation{ font-size:11px; } .art-coords{ font-size:10px; } .art-knight{ width:36px; height:24px; top:10px; } .art-tagline{ font-size:14px; } .art-header{ padding:14px 18px 2px; } .art-footer{ padding:9px 4% 9px; gap:5px; } } /* No scattered pieces behind lesson pages (or a lesson's coach quiz) */ body.no-scatter{ background-image:none; } /* Pieces stay in the menu; the page area is clear. Only on very wide screens do they show in the empty side margins. */ @media (max-width:1499px){ body{ background-image:none; } } @media (min-width:1500px){ .page{ background:var(--vellum); box-shadow:0 0 0 28px var(--vellum); } } /* Student Mode: a short, simple menu. Coach-only items are hidden. */ .student-only{ display:none; } body.student-mode .student-only{ display:block; } body.student-mode .coach-only, body.student-mode .nav [data-coach], body.student-mode .nav [data-nav="me"], body.student-mode .nav [data-nav="coaches"], body.student-mode .nav [data-nav="admin"], body.student-mode .nav [data-nav="me-chip"], body.student-mode .nav .grp-main > h2{ display:none !important; } .nav a.nav-cta{ display:block; margin:0 10px 14px; padding:12px 14px; background:var(--brass); color:#12141C; font-weight:800; border-radius:var(--r-sharp); text-align:center; text-decoration:none; } body.student-mode .nav a.nav-cta.student-only{ display:block; } .topbar-cta{ margin-left:auto; background:var(--brass); color:#12141C; font-weight:800; font-size:14px; padding:9px 13px; border-radius:var(--r-sharp); text-decoration:none; white-space:nowrap; } .nav a.nav-cta.student-only{ display:none; } body.student-mode .nav a.nav-cta.student-only{ display:block; } /* Stages */ .stage{ margin:8px 0 26px; } .stage-h{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin:26px 0 4px; } .stage-n{ font-family:var(--display); font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--brass); color:#12141C; padding:3px 10px; border-radius:var(--r-sharp); } .stage-count{ margin-left:auto; font-family:var(--body); font-size:14px; font-weight:600; color:var(--ink-soft); } .stage-blurb{ margin:0 0 12px; color:var(--ink-soft); } .stage-prog{ display:inline-block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--brass-ink); margin-right:6px; } .stage-h3{ font-size:19px; margin:22px 0 8px; } .path-stage{ position:absolute; left:50%; transform:translateX(-50%); z-index:2; white-space:nowrap; max-width:96%; overflow:hidden; text-overflow:ellipsis; background:var(--vellum); border:2px solid var(--brass); color:var(--ink); border-radius:99px; padding:6px 14px; font-size:14px; box-shadow:0 2px 8px rgba(0,0,0,.12); } .path-stage b{ color:var(--brass-ink); } .path-stage span{ color:var(--ink-soft); font-size:12px; margin-left:4px; } /* Front door and coach PIN */ body.door-mode .nav, body.door-mode .topbar{ display:none !important; } body.door-mode .shell{ grid-template-columns:1fr; } .door-title{ text-align:center; margin:6px 0 18px; } .door-grid{ display:grid; grid-template-columns:1fr; gap:16px; max-width:860px; margin:0 auto 24px; } .door-card{ position:relative; overflow:hidden; display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:var(--r-md); color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.08); transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 6px 18px rgba(0,0,0,.28); } .door-card:hover, .door-card:focus-visible{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.36); } .door-card:active{ transform:translateY(0); } .door-card .door-tex{ position:absolute; inset:0; opacity:.05; background-image:linear-gradient(45deg, #fff 25%, transparent 25%), linear-gradient(-45deg, #fff 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #fff 75%), linear-gradient(-45deg, transparent 75%, #fff 75%); background-size:28px 28px; background-position:0 0, 0 14px, 14px -14px, -14px 0px; pointer-events:none; } .door-card h2{ margin:0; font-size:21px; font-family:var(--display); color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.55); } .door-card p{ margin:4px 0 0; color:rgba(255,255,255,.85); font-size:15px; text-shadow:0 1px 3px rgba(0,0,0,.55); } .door-card .door-text{ position:relative; z-index:1; flex:1 1 auto; min-width:0; padding:8px 12px; border-radius:10px; background:linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.14) 80%, transparent); } .door-card .door-arrow{ position:relative; z-index:1; flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.14); font-size:18px; font-weight:700; } .panel.door-coach{ border-color:var(--brass); background:linear-gradient(140deg, rgba(232,164,61,.14), rgba(232,164,61,0)), var(--panel); } .panel.door-student{ border-color:var(--slate); background:linear-gradient(140deg, rgba(31,78,115,.12), rgba(31,78,115,0)), var(--panel); } .door-icon{ position:relative; z-index:1; flex:0 0 auto; width:52px; height:52px; padding:10px; border-radius:50%; background:rgba(255,255,255,.16); display:flex; } .door-icon svg{ width:100%; height:100%; } .door-card.door-coach, .door-card.door-student, .door-card.door-endgames{ overflow:visible; background:radial-gradient(ellipse 460px 280px at 90% 45%, rgba(var(--glow-rgb),.5), transparent 68%), linear-gradient(135deg, #12224F, #050A1F 75%); border:1.5px solid rgba(var(--glow-rgb),.6); box-shadow:0 0 0 1px rgba(var(--glow-rgb),.15), 0 0 38px rgba(var(--glow-rgb),.28), inset 0 0 32px rgba(var(--glow-rgb),.1), 0 8px 20px rgba(0,0,0,.3); padding:28px 30px; } .door-card.door-coach:hover, .door-card.door-student:hover, .door-card.door-endgames:hover, .door-card.door-coach:focus-visible, .door-card.door-student:focus-visible, .door-card.door-endgames:focus-visible{ box-shadow:0 0 0 1px rgba(var(--glow-rgb),.22), 0 0 46px rgba(var(--glow-rgb),.36), inset 0 0 32px rgba(var(--glow-rgb),.13), 0 10px 26px rgba(0,0,0,.36); } .door-card.door-coach .door-text, .door-card.door-student .door-text, .door-card.door-endgames .door-text{ position:relative; z-index:1; background:rgba(0,0,0,.24); padding:12px 16px; border-radius:10px; margin:-12px -16px; } .door-clip{ position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; } .door-piece{ position:absolute; right:-6px; top:50%; transform:translateY(-50%); width:170px; height:170px; opacity:.24; filter:drop-shadow(0 0 18px rgba(var(--glow-rgb),.5)); } .door-piece svg{ width:100%; height:100%; } @media (max-width:520px){ .door-piece{ width:120px; height:120px; right:-16px; } } .door-card.door-coach h2, .door-card.door-student h2, .door-card.door-endgames h2{ font-size:28px; } .door-card.door-coach p, .door-card.door-student p, .door-card.door-endgames p{ font-size:16px; color:rgba(255,255,255,.82); } .door-card.door-coach .door-arrow, .door-card.door-student .door-arrow, .door-card.door-endgames .door-arrow{ width:46px; height:46px; background:rgba(var(--glow-rgb),.32); border:1.5px solid rgba(var(--glow-rgb),.6); box-shadow:0 0 16px rgba(var(--glow-rgb),.35); } .door-card.door-coach{ --glow-rgb:245,180,0; } .door-card.door-student{ --glow-rgb:31,78,115; } .door-card.door-endgames{ --glow-rgb:30,158,90; } .pin-row{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; width:100%; margin-top:6px; } .pin-label{ display:block; margin:10px 0; font-weight:700; } .pin-input{ display:block; margin-top:6px; width:100%; max-width:220px; font-size:22px; letter-spacing:.3em; text-align:center; } .pin-row .pin-label{ margin:0; flex:1 1 140px; } .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .nav a.nav-lock{ display:block; margin:-6px 10px 14px; padding:8px 12px; text-align:center; font-size:14px; border:1px solid rgba(255,255,255,.35); border-radius:var(--r-sharp); color:#EAF0FF; text-decoration:none; } .pin-input::placeholder{ letter-spacing:normal; font-size:16px; } /* Avatars, getting-started card, finished stages */ .stu-avatar{ display:inline-flex; flex:0 0 auto; background:#0E1526; border-radius:50%; padding:3px; box-shadow:0 0 0 2px rgba(255,255,255,.18); } .stu-avatar svg{ width:100%; height:100%; } .stu-name{ display:flex; align-items:center; gap:10px; } .student-bar .who{ display:flex; align-items:center; gap:8px; } .lb-name .stu-avatar{ vertical-align:middle; margin-right:4px; } .path-stage.done{ background:var(--brass); color:#12141C; } .path-stage.done b{ color:#12141C; } .path-stage.done span{ color:#3a2f00; } .start-card{ border:2px solid var(--brass); border-radius:var(--r-sharp); background:linear-gradient(120deg, rgba(232,164,61,.14), rgba(232,164,61,0)), var(--panel); padding:18px 20px; margin:0 0 18px; } .start-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; } .start-head h2{ margin:0; } .start-count{ font-weight:700; color:var(--brass-ink); } .start-lede{ margin:4px 0 10px; color:var(--ink-soft); } .start-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:0 0 10px; } .start-step{ position:relative; display:flex; flex-direction:column; gap:4px; padding:14px 14px 12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sharp); color:var(--ink); text-decoration:none; } .start-step .step-badge{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff; } .start-step .step-ic{ position:absolute; top:12px; right:12px; width:20px; height:20px; opacity:.35; } .start-step .step-ic svg{ width:100%; height:100%; } .start-step b{ font-size:15px; margin-top:6px; } .start-step small{ display:block; color:var(--ink-soft); font-size:13px; line-height:1.35; } .start-step.hue-brass .step-badge{ background:var(--brass); color:#1A1200; } .start-step.hue-slate .step-badge{ background:var(--slate); } .start-step.hue-coral .step-badge{ background:#E07A3F; } .start-step.hue-moss .step-badge{ background:var(--moss); } .start-step.done{ border-color:var(--moss); } .start-step.done .step-badge{ background:var(--moss); color:#fff; } .start-step.done b{ text-decoration:line-through; text-decoration-thickness:1px; opacity:.65; } .stu-avatar svg g[stroke]{ stroke-width:2.3; } .door-sub{ text-align:center; margin:-8px 0 4px; color:var(--ink-soft); font-size:19px; font-weight:700; } .door-sub{ max-width:none !important; } .door-desc{ text-align:center; margin:0 auto 22px; color:var(--ink-soft); font-size:16px; max-width:480px !important; } /* Quotes on the front door */ .door-quotes{ max-width:860px; margin:8px auto 34px; } .door-quotes h2{ text-align:center; font-size:20px; margin:0 0 14px; } .door-quotes h2::before, .door-quotes h2::after{ content:'\265F'; color:var(--brass); margin:0 10px; font-size:18px; } .quote-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } @media (max-width:860px){ .quote-grid{ grid-template-columns:1fr; } } .quote-card{ margin:0; padding:18px; display:flex; flex-direction:column; gap:8px; color:#EAF0FF; border-radius:var(--r-sharp); border:1px solid rgba(255,255,255,.14); background:radial-gradient(ellipse at 100% 0%, rgba(31,78,115,.28), transparent 60%), linear-gradient(160deg, #101a36, #060a1a); } .qicon{ width:40px; height:40px; display:block; } .qicon svg{ width:100%; height:100%; } .quote-card blockquote{ margin:0; font-family:var(--display); font-weight:600; font-size:19px; line-height:1.3; color:#fff; } .q-by{ color:var(--brass); font-weight:700; font-size:14px; } .q-plain{ margin:2px 0 0; font-size:14px; color:#AFB9D2; } /* A shorter menu: "More" is folded away, and the neon pieces sit in a tidy row instead of behind the words */ .nav a.nav-lock{ margin:-6px 10px 12px; } .nav a.nav-lock[hidden]{ display:none; } .nav-more{ margin:8px 4px 14px; } .nav-more > summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border:1px solid rgba(255,255,255,.25); border-radius:var(--r-sharp); color:#EAF0FF; font-weight:700; } .nav-more > summary::-webkit-details-marker{ display:none; } .nav-more > summary::after{ content:'\25BE'; } .nav-more[open] > summary::after{ content:'\25B4'; } .more-h{ margin:14px 12px 2px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8FA3D9; } .nav-watermark{ position:absolute; right:-38px; bottom:64px; width:190px; height:190px; opacity:.05; pointer-events:none; } .nav-watermark svg{ width:100%; height:100%; } .nav-art{ position:relative; display:flex; justify-content:space-between; gap:6px; margin:18px 10px 6px; } .nav-art a{ display:block; width:30px; height:30px; opacity:.82; border-radius:8px; transition:opacity .12s ease, background .12s ease, transform .12s ease; } .nav-art a:hover, .nav-art a:focus-visible{ opacity:1; background:rgba(255,255,255,.08); transform:translateY(-2px); } .nav-art svg{ width:100%; height:100%; } .nav a.me-chip .chip-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; align-self:center; } .nav a.nav-back{ display:block; margin:0 10px 6px; padding:8px 12px; text-align:center; font-size:14px; color:#AFB9D2; text-decoration:none; } .topbar-cta[hidden]{ display:none !important; } .row-actions{ white-space:nowrap; } .row-actions .btn{ min-height:0; padding:8px 12px; font-size:14px; } .tbl .stu-name{ display:flex; align-items:center; gap:10px; } /* My Students: one card per student */ .stu-list{ display:grid; gap:12px; } .stu-row{ display:grid; grid-template-columns:minmax(150px,1fr) minmax(190px,1.4fr) minmax(200px,1.4fr); gap:10px 22px; align-items:start; padding:16px 18px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sharp); } .stu-id{ display:flex; align-items:center; gap:12px; } .stu-nm{ font-family:var(--display); font-size:19px; } .stu-lab{ text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:var(--brass-ink); margin-bottom:2px; } .stu-stats{ display:grid; gap:1px; font-size:15px; } .stu-act{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-top:10px; border-top:1px solid var(--line); } .stu-act .btn{ min-height:0; padding:9px 16px; font-size:15px; } .stu-start{ display:flex; align-items:center; gap:8px; margin-left:auto; } .stu-del{ color:var(--oxblood); } @media (max-width:760px){ .stu-row{ grid-template-columns:1fr; } .stu-start{ margin-left:0; } } /* Student sign-up */ .signup{ max-width:560px; margin:18px 0 0; } .su-label{ display:block; margin:12px 0; font-weight:700; } .su-label .field{ display:block; margin-top:6px; width:100%; font-size:18px; } .signup .btn{ margin-top:6px; min-height:52px; font-size:18px; } .signup-toggle{ display:flex; gap:12px; align-items:flex-start; margin:0 0 16px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sharp); background:var(--panel); cursor:pointer; } .signup-toggle input{ width:20px; height:20px; margin-top:3px; } .su-badge{ display:inline-block; margin-top:4px; padding:2px 8px; border-radius:99px; background:rgba(31,78,115,.14); color:var(--slate); font-weight:700; } /* Student number */ .num-card{ max-width:520px; margin:0 0 18px; } .num-input{ letter-spacing:.5em; text-align:center; font-size:24px !important; max-width:200px; } .num-input::placeholder{ letter-spacing:normal; font-size:16px; } /* Which side am I on? */ .side-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 6px 14px; } .side-row.student-only{ display:none; } body.student-mode .side-row.student-only{ display:flex; } .side-badge{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:99px; background:var(--brass); color:#12141C; } .side-badge.stu{ background:#1F6C75; color:#fff; } .nav .side-row a.nav-back{ margin:0; padding:5px 12px; border:1px solid rgba(255,255,255,.35); border-radius:99px; color:#EAF0FF; font-size:14px; font-weight:700; } /* Account messages are for coaches only */ body.student-mode #cloud-banner, body.door-mode #cloud-banner, body.coach-locked #cloud-banner{ display:none !important; } body.student-mode.banner-on .main, body.door-mode.banner-on .main, body.coach-locked.banner-on .main{ padding-bottom:64px; } /* PIN set-up and recovery */ .rec-code{ font-family:var(--display); font-weight:800; font-size:34px; letter-spacing:.14em; padding:14px 18px; border:2px dashed var(--brass); border-radius:var(--r-sharp); background:rgba(232,164,61,.1); text-align:center; width:100%; } .rec-inline{ font-family:var(--display); letter-spacing:.12em; font-size:1.1em; } .wrote{ display:flex; gap:10px; align-items:center; font-weight:700; margin:6px 0; } .wrote input{ width:20px; height:20px; } .forgot-link{ margin-top:10px; font-size:14px; } .forgot-box{ margin-top:10px; padding:12px; border:1px solid var(--line); border-radius:var(--r-sharp); background:var(--panel); width:100%; } /* Coach sign-in on the front door */ .coach-list{ display:flex; flex-direction:column; gap:8px; width:100%; margin:6px 0 10px; } .coach-chip{ display:flex; align-items:center; gap:12px; padding:10px 14px; font:inherit; font-weight:700; font-size:18px; text-align:left; cursor:pointer; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sharp); } .coach-chip:hover{ border-color:var(--brass); } .coach-ini{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:#0E1526; color:#F4EBD6; border:2px solid var(--brass); font-family:var(--display); font-weight:800; font-size:14px; } .cs-form{ width:100%; margin-top:8px; } .cs-form[hidden]{ display:none; } .nav a.me-chip .coach-ini{ width:36px; height:36px; } /* Keep the front door inside the screen, however long the cards get */ .quote-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } @media (max-width:860px){ .quote-grid{ grid-template-columns:minmax(0,1fr); } } .door-card{ min-width:0; overflow-wrap:anywhere; } .door-card .field{ max-width:100%; } .cl-form{ width:100%; } /* Student lesson pages: no section numbers, and a clear goals checklist */ body.class-mode .sec-h .n{ display:none; } body.class-mode .lesson-kicker{ font-size:14px; } .summary ol{ margin:0; padding-left:22px; } .summary ol li{ margin:6px 0; } .goals-lede{ margin:0 0 8px; } .goal-list{ list-style:none; margin:0 0 8px; padding:0; display:grid; gap:8px; } .goal-list li{ display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sharp); } .goal-mark{ flex:0 0 26px; height:26px; border-radius:50%; border:2px solid var(--brass); display:flex; align-items:center; justify-content:center; font-weight:800; color:#12141C; } .goal-list li.ok{ border-color:var(--c-moss); } .goal-list li.ok .goal-mark{ background:var(--c-moss); border-color:var(--c-moss); color:#fff; } .goals-help{ margin:0; color:var(--ink-soft); } .summary .goal-list{ padding-left:0; } /* ---------- Endgame Trainer ---------- */ .eg-topback{ margin-bottom:12px; } .eg-h2{ margin:26px 0 10px; } .eg-h3{ margin:22px 0 8px; font-size:20px; } .eg-soon{ margin-top:18px; color:var(--ink-soft); } .eg-back{ display:inline-block; margin-bottom:8px; font-weight:700; } .eg-tile .eg-prog{ font-weight:700; } .eg-who{ margin:8px 0 14px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--r-sharp); background:var(--panel); display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; } .eg-who .btn{ min-height:0; padding:6px 14px; font-size:14px; } .eg-who-form{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; width:100%; } .eg-f{ display:flex; flex-direction:column; gap:4px; font-weight:700; min-width:0; } .eg-tabs{ display:flex; border-bottom:2px solid var(--line); margin:6px 0 18px; } .eg-tab{ flex:1; background:none; border:0; border-bottom:4px solid transparent; padding:14px 6px; font:inherit; font-weight:800; font-size:18px; color:var(--ink-soft); cursor:pointer; margin-bottom:-2px; } .eg-tab.on{ color:var(--ink); border-bottom-color:var(--brass); } .eg-chips{ display:flex; flex-wrap:wrap; gap:8px; } .eg-chip{ font:inherit; font-weight:700; padding:8px 14px; border-radius:var(--r-sharp); border:2px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; } .eg-chip.on{ border-color:var(--brass); background:rgba(232,164,61,.16); } .eg-num{ min-width:54px; min-height:48px; font-size:20px; position:relative; } .eg-tick{ position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; background:var(--brass); color:#1A1200; font-size:13px; display:flex; align-items:center; justify-content:center; } .eg-pos{ margin-bottom:14px; } .eg-lab{ font-weight:800; letter-spacing:.07em; font-size:13px; color:var(--ink-soft); margin-bottom:4px; } .eg-val{ font-family:var(--display); font-weight:800; font-size:26px; } .eg-facts{ display:flex; gap:36px; margin:2px 0 12px; } .eg-how{ margin:0 0 12px; } .eg-big{ min-height:56px; font-size:20px; padding:12px 44px; } .eg-cap{ min-height:96px; font-size:18px; line-height:1.4; padding:12px 14px; background:var(--panel); border:1px solid var(--line); border-left:5px solid var(--brass); border-radius:var(--r-sharp); } .eg-step{ margin:6px 0 10px; color:var(--ink-soft); } .eg-ctl .btn{ min-height:0; padding:9px 14px; } .eg-ideas{ margin:0 0 12px; padding-left:20px; } .eg-ideas li{ margin:7px 0; } .eg-video{ min-height:0; } .eg-hud{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; } .eg-clock{ font-family:var(--display); font-weight:800; font-size:42px; } .eg-pos-n{ font-weight:700; color:var(--ink-soft); } .eg-bigtime{ font-family:var(--display); font-weight:800; font-size:60px; line-height:1.1; margin:4px 0 8px; } .eg-chal-box{ max-width:640px; } .eg-lb-head{ display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:space-between; margin-bottom:12px; } .eg-row .eg-time{ margin-left:auto; font-family:var(--display); font-weight:800; font-size:22px; } .eg-empty{ padding:10px 0; } .eg-coach{ margin-top:14px; } @media (max-width:760px){ .eg-facts{ gap:24px; } .eg-clock{ font-size:34px; } } .eg-go[hidden], .eg-live[hidden]{ display:none !important; } .eg-facts[hidden], .eg-how[hidden]{ display:none !important; } .eg-ctl{ flex-wrap:nowrap; } .eg-ctl .btn{ flex:1 1 0; padding:9px 6px; font-size:14px; white-space:nowrap; } /* On a phone: the instruction bar stays pinned at the top, then the board, then the controls and messages right under it */ @media (max-width:760px){ .eg-practice, .eg-learn{ display:flex; flex-direction:column; gap:10px; } .eg-practice .side, .eg-learn .side{ display:contents; } .eg-practice .board-col, .eg-learn .board-col{ order:2; width:100%; } .eg-practice .eg-facts{ order:1; } .eg-practice .eg-how{ order:1; } .eg-practice .eg-go{ order:3; } .eg-practice .eg-live{ order:3; } .eg-practice .eg-hintbox{ order:4; } .eg-practice .fbk{ order:4; } .eg-practice .eg-cbtns{ order:5; } .eg-learn .eg-cap{ order:3; } .eg-learn .eg-step{ order:4; } .eg-learn .eg-ctl{ order:5; } .eg-learn .eg-after{ order:6; } .eg-learn .eg-h3{ order:30; } .eg-learn .eg-ideas{ order:31; } .eg-learn .side > p{ order:32; } .eg-cap{ min-height:0; } .eg-practice .eg-facts, .eg-practice .eg-how{ display:none; } } .eg-loading{ max-width:520px; } .eg-bar{ height:8px; border-radius:99px; background:var(--line); overflow:hidden; } .eg-bar span{ display:block; height:100%; width:38%; border-radius:99px; background:var(--brass); animation:egbar 1.3s ease-in-out infinite; } @keyframes egbar{ 0%{ margin-left:-38%; } 100%{ margin-left:100%; } } .eg-videos{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; } .eg-videos .eg-video{ text-align:left; white-space:normal; } .eg-vnote{ margin:6px 0 0; color:var(--ink-soft); } @media (max-width:760px){ .eg-learn .eg-vnote{ order:33; } .eg-learn .eg-videos{ order:32; } } @media (max-width:760px){ .eg-learn .eg-h3{ order:30; } .eg-learn .eg-ideas{ order:31; } .eg-learn .eg-vh{ order:32; } .eg-learn .eg-videos{ order:33; } .eg-learn .eg-vnote{ order:34; } } .eg-more{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:10px; } .eg-more-card{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px; border:1px solid var(--line); border-radius:var(--r-sharp); background:var(--panel); } .eg-more-card .eg-video{ text-align:left; white-space:normal; } /* Owner Access */ .door-owner{ text-align:center; margin:18px 0 30px; } .door-owner a{ display:inline-block; font-size:14px; font-weight:700; padding:9px 16px; border:1px solid var(--line); border-radius:99px; color:var(--ink); background:var(--panel); text-decoration:none; } .door-owner a:hover, .door-owner a:focus{ border-color:var(--brass); } .own-h2{ margin:28px 0 10px; font-size:22px; } .own-list{ display:grid; gap:10px; margin-bottom:6px; } .own-row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 16px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-sharp); background:var(--panel); } .own-row .btn{ min-height:0; padding:8px 14px; font-size:14px; } .own-log{ display:flex; flex-direction:column; gap:6px; max-height:520px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r-sharp); padding:8px; } .own-log-row{ display:grid; grid-template-columns:64px 1fr 100px 90px; gap:10px; align-items:center; padding:7px 10px; border-radius:8px; font-size:14px; } .own-log-row.ok{ background:rgba(34,181,115,.10); } .own-log-row.bad{ background:rgba(200,60,60,.10); } .own-log-kind{ text-transform:capitalize; font-weight:700; color:var(--ink-soft); } .own-log-name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .own-log-result{ color:var(--ink-soft); } .own-log-row.bad .own-log-result{ color:var(--oxblood); } .own-log-when{ text-align:right; color:var(--ink-soft); font-size:13px; } @media (max-width:600px){ .own-log-row{ grid-template-columns:1fr; text-align:left; } .own-log-when{ text-align:left; } } /* Owner "view as" bar: a distinct colour from the student bar so it's never mistaken for a normal session */ .owner-view-bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:rgba(140,90,255,.18); border:1px solid rgba(140,90,255,.5); border-radius:var(--r-sharp); padding:8px 10px; margin:0 10px 14px; } .owner-view-bar[hidden]{ display:none; } .owner-view-bar .who{ font-size:13px; font-weight:700; color:#B99CFF; } .owner-view-bar .btn{ color:#fff; border-color:rgba(255,255,255,.45); min-height:0; padding:7px 12px; font-size:13px; } /* Owner mode: show the full menu (coach pages and student pages together) so the owner can browse anything, without needing to "View as" a specific person first. This only applies when not actively viewing as someone (viewing as someone shows exactly their own menu, matching their real experience). */ body.owner-mode .student-only{ display:block; } body.owner-mode .nav a.nav-cta.student-only{ display:block; } .owner-only{ display:none; } body.owner-mode .owner-only{ display:block; } .nav-group.owner-group{ order:-1; } .nav-group.owner-group h2{ color:#B99CFF; } .owner-logout-link{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; text-align:left; color:#EAF0FF; background:none; border:none; text-decoration:none; padding:11px 12px; border-radius:var(--r-sm); font-size:16px; min-height:44px; font-weight:500; cursor:pointer; font-family:inherit; } .owner-logout-link:hover{ background:rgba(255,255,255,.08); } /* Scholar's Mate / Wayward Queen trainer */ .opn-page h1{ margin-top:4px; } .opn-why{ margin-top:10px; border-left:5px solid var(--slate); } .opn-tag{ display:inline-block; font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; margin-left:8px; vertical-align:middle; } .opn-tag.bad{ background:rgba(196,41,63,.14); color:var(--oxblood); } .opn-tag.ok{ background:rgba(30,158,90,.14); color:var(--moss); } .switch-row{ display:flex; align-items:center; gap:8px; margin:10px 0; font-weight:600; font-size:14px; } .switch-row input{ width:18px; height:18px; } /* ---------- Endgame Trainer: instruction bar, progress, levels, coach panel (navy and brass) ---------- */ .eg-brief{ position:sticky; top:0; z-index:12; display:grid; gap:6px; margin:0 0 12px; padding:12px 14px; background:var(--baize-soft); border:2px solid var(--brass); border-radius:var(--r-sharp); } .eg-brief-row{ display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:baseline; } .eg-brief-obj{ font-weight:800; font-size:18px; line-height:1.35; color:var(--ink); } .eg-brief-side{ display:flex; gap:10px; align-items:center; font-size:16px; line-height:1.4; } .eg-pc{ flex:0 0 30px; width:30px; height:30px; padding:3px; border-radius:50%; background:var(--sq-l); border:2px solid var(--brass); display:inline-flex; } .eg-pc svg{ width:100%; height:100%; } .eg-turn{ font-size:17px; padding:3px 10px; border-radius:99px; background:rgba(232,164,61,.18); border:1px solid var(--brass); justify-self:start; } .eg-brief[data-turn="computer"] .eg-turn{ background:rgba(31,78,115,.2); border-color:var(--slate); } .eg-brief[data-turn="over"] .eg-turn{ background:transparent; border-color:var(--line); color:var(--ink-soft); } @media (max-width:760px){ .eg-brief{ top:var(--eg-sticky,54px); display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:7px 10px; } .eg-brief-row{ display:flex; gap:0; align-items:center; } .eg-brief-row:first-child{ flex-basis:100%; } .eg-brief-row .eg-lab, .eg-extra{ display:none; } .eg-brief-row:last-child{ margin-left:auto; } .eg-brief-obj{ font-size:15px; line-height:1.3; } .eg-brief-side{ font-size:14px; } .eg-pc{ flex-basis:22px; width:22px; height:22px; } .eg-turn{ font-size:14px; padding:2px 9px; } } .eg-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:6px 0 14px; } .eg-stat{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sharp); } .eg-stat b{ font-family:var(--display); font-size:26px; line-height:1.1; } .eg-stat b small{ font-size:15px; color:var(--ink-soft); font-weight:600; } .eg-stat-n{ font-size:13px; color:var(--ink-soft); line-height:1.3; } .eg-stat-m.s-mastered{ border-color:var(--brass); background:linear-gradient(rgba(232,164,61,.14),rgba(232,164,61,.14)),var(--panel); } @media (max-width:760px){ .eg-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } } .eg-pill{ display:inline-block; padding:3px 10px; border-radius:99px; font-size:13px; font-weight:800; border:1px solid var(--line); color:var(--ink-soft); white-space:nowrap; } .eg-pill.s-practicing,.eg-pill.s-watched{ color:var(--brass-light); border-color:var(--brass-ink); } .eg-pill.s-solid{ color:var(--brass-light); border-color:var(--brass); } .eg-pill.s-mastered{ background:var(--brass); color:#1A1200; border-color:var(--brass); } .eg-tick.asst{ background:transparent; color:var(--brass-light); border:2px solid var(--brass); } .eg-legend{ margin-top:6px; color:var(--ink-soft); } .eg-crumb{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:4px 0 6px; } .eg-level-chip{ padding:3px 12px; border-radius:99px; font-weight:800; font-size:14px; background:var(--brass); color:#1A1200; } .eg-level-chip.lvl-next{ background:var(--brass-light); } .eg-level-chip.lvl-adv{ background:transparent; color:var(--brass-light); border:2px solid var(--brass); } .eg-crumb-step,.eg-crumb-kind{ color:var(--ink-soft); font-weight:700; font-size:15px; } .eg-prereq{ margin:0 0 8px; } .eg-where{ flex-basis:100%; margin:4px 0 0; font-size:15px; line-height:1.45; color:var(--ink-soft); padding-left:10px; border-left:4px solid var(--line); } .eg-where-account{ border-left-color:var(--brass); } .eg-where-device{ border-left-color:var(--slate); } .eg-where-session{ border-left-color:var(--oxblood); } .eg-where b{ color:var(--ink); } .eg-continue{ position:relative; display:block; margin:10px 0 14px; padding:14px 50px 14px 16px; text-decoration:none; color:var(--ink); background:linear-gradient(100deg, rgba(232,164,61,.18), rgba(31,78,115,.08)), var(--panel); border:2px solid var(--brass); border-radius:var(--r-sharp); } .eg-continue b{ display:block; font-size:19px; margin-top:2px; } .eg-go-arrow{ position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:24px; color:var(--brass); } .eg-review ul{ margin:0; padding:0; list-style:none; display:grid; gap:8px; } .eg-review li{ display:flex; flex-direction:column; gap:2px; } .eg-review li span{ color:var(--ink-soft); font-size:15px; } .eg-path{ margin:12px 0 18px; } .eg-path-list{ margin:10px 0 0; padding:0; list-style:none; display:grid; gap:6px; } .eg-path-list a{ display:grid; grid-template-columns:34px 1fr auto auto; gap:10px; align-items:center; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sharp); text-decoration:none; color:var(--ink); background:var(--vellum); } .eg-path-list li.next a{ border-color:var(--brass); box-shadow:0 0 0 1px var(--brass); } .eg-path-n,.eg-order{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--brass); color:#1A1200; font-weight:800; } .eg-path-t{ font-weight:700; } .eg-path-l{ font-size:13px; color:var(--ink-soft); } @media (max-width:560px){ .eg-path-list a{ grid-template-columns:30px 1fr auto; } .eg-path-l{ display:none; } } .eg-tile{ position:relative; } .eg-tile .eg-order{ position:absolute; top:12px; right:12px; } .eg-level-blurb{ margin:-4px 0 10px; color:var(--ink-soft); } .eg-level.lvl-adv .eg-tile{ border-style:dashed; } .eg-hintbox{ display:grid; gap:8px; margin:10px 0; padding:12px 14px; background:var(--dpanel-2); border:1px solid var(--brass-ink); border-radius:var(--r-sharp); } .eg-hintbox[hidden]{ display:none; } .eg-hint-step{ padding-left:10px; border-left:4px solid var(--line); font-size:17px; line-height:1.45; } .eg-hint-step.now{ border-left-color:var(--brass); } .eg-hint-note{ margin:0; color:var(--ink-soft); } .eg-mastery-intro{ margin-bottom:12px; } .eg-teach{ margin:22px 0; border:2px solid var(--brass-ink); border-radius:var(--r-sharp); background:var(--panel); } .eg-teach summary{ cursor:pointer; padding:14px 16px; display:grid; gap:2px; list-style:none; } .eg-teach summary::-webkit-details-marker{ display:none; } .eg-teach-title{ font-family:var(--display); font-weight:800; font-size:22px; color:var(--brass-light); } .eg-teach-sub{ color:var(--ink-soft); font-size:15px; } .eg-teach-body{ padding:4px 18px 18px; font-size:17px; line-height:1.55; } .eg-teach-body h3{ margin:18px 0 6px; font-size:18px; color:var(--brass-light); } .eg-teach-steps,.eg-teach-qa,.eg-teach-body ul{ padding-left:22px; } .eg-teach-steps li,.eg-teach-qa li{ margin:9px 0; } .eg-teach-a{ color:var(--ink-soft); } .eg-tabs .eg-tab{ font-size:17px; padding:14px 2px; } @media (max-width:420px){ .eg-tabs .eg-tab{ font-size:15px; } } .eg-big,.eg-chal .btn,.eg-practice .btn{ min-height:48px; } .eg-tour{ position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:16px; background:rgba(6,10,20,.78); } .eg-tour-card{ width:min(520px,100%); padding:22px; background:var(--panel); color:var(--ink); border:2px solid var(--brass); border-radius:var(--r-md); } .eg-tour-card h2{ margin:4px 0 8px; font-size:26px; } .eg-tour-t{ font-size:19px; line-height:1.55; margin:0 0 16px; } .eg-tour-btn{ margin-top:8px; } .review-list{ margin:0; padding:0; list-style:none; display:grid; gap:10px; } .review-list li{ display:flex; flex-direction:column; gap:2px; } .review-list .small{ color:var(--ink-soft); } /* ---------- Owner activity dashboard ---------- */ .oa-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:12px 0 4px; } .oa-card{ display:flex; flex-direction:column; gap:2px; padding:12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sharp); } .oa-card b{ font-family:var(--display); font-size:28px; line-height:1.1; color:var(--brass-light); } .oa-card span{ font-size:14px; color:var(--ink-soft); } .oa-cards-sm .oa-card b{ font-size:20px; } .oa-since{ color:var(--ink-soft); margin:4px 0 14px; } .oa-filters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; align-items:end; margin:10px 0 14px; padding:12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sharp); } .oa-filters label{ display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700; color:var(--ink-soft); } .oa-filters select,.oa-filters input{ font:inherit; font-size:16px; min-height:44px; padding:6px 8px; background:var(--vellum); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sharp); } .oa-h2{ margin:20px 0 6px; } .oa-h2 small{ font-size:15px; color:var(--ink-soft); font-weight:600; } .oa-feed{ list-style:none; margin:8px 0 14px; padding:0; display:flex; flex-direction:column; gap:6px; } .oa-row{ padding:9px 12px; border:1px solid var(--line); border-left:4px solid var(--brass-ink); border-radius:var(--r-sharp); background:var(--panel); } .oa-row.bad{ border-left-color:var(--oxblood); background:linear-gradient(rgba(196,41,63,.10),rgba(196,41,63,.10)),var(--panel); } .oa-sentence{ font-size:16px; line-height:1.45; } .oa-meta{ font-size:13px; color:var(--ink-soft); margin-top:2px; } .oa-name{ background:none; border:0; padding:0; font:inherit; font-weight:800; color:var(--brass-light); text-decoration:underline; cursor:pointer; } .oa-people{ margin:6px 0 10px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--r-sharp); background:var(--panel); } .oa-people summary{ cursor:pointer; font-weight:700; } .oa-people ul{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; max-height:320px; overflow:auto; } .oa-people li{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; } .oa-last{ margin-left:auto; font-size:13px; color:var(--ink-soft); } @media (max-width:600px){ .oa-cards{ grid-template-columns:repeat(2,1fr); } .oa-last{ margin-left:0; flex-basis:100%; } } /* ---------- Tournament Director Training ---------- */ .td-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:10px 0; } .td-stat{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sharp); } .td-stat b{ font-family:var(--display); font-size:26px; line-height:1.1; color:var(--brass-light); } .td-stat b small{ font-size:15px; color:var(--ink-soft); font-weight:600; } .td-stat span{ font-size:13px; color:var(--ink-soft); } .td-where{ margin:6px 0 12px; padding-left:10px; border-left:4px solid var(--line); color:var(--ink-soft); font-size:15px; line-height:1.45; } .td-where b{ color:var(--ink); } .td-where-account{ border-left-color:var(--brass); } .td-where-device{ border-left-color:var(--slate); } .td-frame{ display:block; width:100%; height:calc(100vh - 250px); min-height:620px; border:2px solid var(--line); border-radius:var(--r-sharp); background:#0C1120; } @media (max-width:760px){ .td-frame{ height:calc(100vh - 150px); min-height:560px; } .td-stat b{ font-size:22px; } }