/* ======================================================================== styles-climb.css — THE CLIMB skin for the Closer Dojo portal (2026-09-02) A second skin, layered over styles.css and switched on by (app.js: an admin-only switch in the header, remembered per browser). Nothing here changes markup or behavior — every feature keeps its class names; this file only changes how they look. The idea, carried over from the One Call Close Framework quiz: a call is a climb. One luminous rail, nodes that ignite mint as they're earned, frosted glass instead of boxes, thin display type, spring motion. Apple-influenced, dark-only, the brand amber kept for ACTION only. Override grammar: every selector is prefixed with [data-skin="climb"] so it out-specifies the base rule it replaces. Base rules with two classes get the prefix plus the same two classes. ======================================================================== */ [data-skin="climb"] { --bg: #0a0d14; --bg-2: #0e1320; --panel: rgba(255, 255, 255, .035); --panel-2: rgba(255, 255, 255, .06); --border: rgba(255, 255, 255, .07); --border-hi: rgba(255, 255, 255, .14); --text: #c3c9d4; --text-hi: #f5f7fa; --muted: #7c8594; --faint: #4b5262; --accent: #f0a93b; --accent-hi: #ffc463; --live: #34d399; /* mint: the lit state, everywhere */ --mint-hi: #6ee7b7; --mint-glow: 0 0 18px rgba(52, 211, 153, .45), 0 0 48px rgba(52, 211, 153, .18); --alarm: #ff7a5c; --alarm-deep:#e0593c; --cool: #6c8bb0; /* the heat ladder keeps its meaning: locked red → open mint */ --heat-1: #34d399; --heat-2: #bcc94a; --heat-3: #ef8a3c; --heat-4: #e5563a; --heat-5: #d8333f; /* the audit card joins the glass world */ --card-paper: rgba(255, 255, 255, .025); --card-tile: rgba(255, 255, 255, .04); --card-tile-hi: rgba(255, 255, 255, .07); --card-line: rgba(255, 255, 255, .08); --card-green: #22c97d; --card-green-ink: #5cf0ac; --card-l3green: #bcc94a; --card-l3green-ink: #dae481; --card-gold: #f2c119; --card-gold-ink: #ffd75e; --card-ember: #ff5f36; --card-ember-ink: #ff9670; --card-glow: #34d399; --card-glow-ink: #7dffc0; --card-tint-green: rgba(34, 201, 125, .10); --card-tint-gold: rgba(242, 193, 25, .10); --card-tint-ember: rgba(255, 95, 54, .10); --card-tint-glow: rgba(52, 211, 153, .14); --card-glow-halo: 0 0 3px rgba(52, 211, 153, .5), 0 0 22px -2px rgba(52, 211, 153, .4); --display: -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif; --body: -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.4, .44, 1); --radius: 20px; --card-shadow: none; --glass-blur: blur(22px) saturate(160%); } /* ---- Ground: one navy surface with a soft light source top-left ---------- */ [data-skin="climb"] body { background: radial-gradient(1400px 800px at 18% -12%, #151c2e 0%, var(--bg-2) 42%, var(--bg) 100%) fixed; font-size: 15px; color: var(--text); } [data-skin="climb"] :focus-visible { outline: 2px solid var(--mint-hi); outline-offset: 3px; } [data-skin="climb"] .shell { gap: 16px; padding-bottom: 80px; } [data-skin="climb"] .dojo-tabs { margin-bottom: 2px; } /* ---- Header: thin wordmark, doors as a segmented pill -------------------- */ [data-skin="climb"] .app-header { padding: 22px 20px 6px; align-items: center; } [data-skin="climb"] .wordmark { font-weight: 200; font-size: 24px; letter-spacing: .12em; color: var(--text-hi); } [data-skin="climb"] .wordmark i { font-weight: 600; background: linear-gradient(100deg, var(--accent-hi), var(--accent) 60%, #d98a1e); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-skin="climb"] .tagline { font-weight: 500; letter-spacing: .22em; color: var(--faint); } [data-skin="climb"] .door-nav { padding: 3px; gap: 0; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); } [data-skin="climb"] .door { font-weight: 500; font-size: 13px; letter-spacing: .08em; padding: 6px 14px; border-radius: 999px; border: 0; transition: color .25s var(--ease), background .25s var(--ease), box-shadow .25s; } [data-skin="climb"] .door[aria-current="true"] { color: var(--text-hi); background: rgba(255, 255, 255, .14); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .06); } [data-skin="climb"] .who { font-weight: 500; letter-spacing: .02em; } /* ---- Buttons: pills. Amber only where the student ACTS. ------------------ */ [data-skin="climb"] .ghost-btn, [data-skin="climb"] .back-btn, [data-skin="climb"] .view-btn, [data-skin="climb"] .regrade-btn, [data-skin="climb"] .confirm-no, [data-skin="climb"] .more-btn, [data-skin="climb"] .listen-btn { border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font-weight: 500; letter-spacing: .01em; transition: border-color .2s, background .2s, color .2s, transform .2s var(--spring); } [data-skin="climb"] .ghost-btn { padding: 6px 12px; font-size: 12px; } [data-skin="climb"] .ghost-btn:hover, [data-skin="climb"] .back-btn:hover, [data-skin="climb"] .view-btn:hover { border-color: var(--border-hi); background: var(--panel); color: var(--text-hi); } [data-skin="climb"] .start-btn, [data-skin="climb"] .print-btn, [data-skin="climb"] .grade-btn { font-weight: 600; letter-spacing: .06em; border-radius: 999px; color: #1a1200; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: 0 10px 30px -14px rgba(240, 169, 59, .7), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s var(--spring), box-shadow .25s, filter .2s; } [data-skin="climb"] .start-btn { font-size: 16px; padding: 14px 32px; } [data-skin="climb"] .start-btn:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 14px 36px -14px rgba(240, 169, 59, .85), inset 0 1px 0 rgba(255, 255, 255, .25); } [data-skin="climb"] .start-btn:active:not(:disabled) { transform: scale(.98); } [data-skin="climb"] .start-btn:disabled { opacity: 1; filter: none; box-shadow: none; background: rgba(255, 255, 255, .06); color: var(--faint); border: 1px solid var(--border); } [data-skin="climb"] .end-btn, [data-skin="climb"] .confirm-yes { border-radius: 999px; font-weight: 600; letter-spacing: .04em; } /* ---- Inputs: quiet glass, mint focus ------------------------------------ */ [data-skin="climb"] input[type="url"], [data-skin="climb"] input[type="text"], [data-skin="climb"] input[type="email"], [data-skin="climb"] input[type="password"], [data-skin="climb"] input[type="date"], [data-skin="climb"] input[type="number"], [data-skin="climb"] .num-input, [data-skin="climb"] .select-input, [data-skin="climb"] .paste-panel textarea, [data-skin="climb"] .paste-fact input, [data-skin="climb"] .paste-fact select, [data-skin="climb"] .meet-slot input { background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: 12px; color: var(--text-hi); font-size: 14px; padding: 11px 14px; transition: border-color .2s, box-shadow .2s, background .2s; } [data-skin="climb"] input:focus, [data-skin="climb"] .num-input:focus, [data-skin="climb"] .select-input:focus, [data-skin="climb"] .paste-panel textarea:focus, [data-skin="climb"] .meet-slot input:focus { outline: none; border-color: rgba(52, 211, 153, .6); box-shadow: 0 0 0 4px rgba(52, 211, 153, .12); background: rgba(0, 0, 0, .3); } [data-skin="climb"] .field-label { font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--muted); } [data-skin="climb"] .field-label.sect::after { background: var(--border); } /* ---- Cards → glass ------------------------------------------------------- */ [data-skin="climb"] .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); padding: 22px; animation: climb-rise .6s var(--ease) both; } [data-skin="climb"] .banner { border-radius: 16px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } /* ---- Landing: the hero is the thesis ------------------------------------ */ [data-skin="climb"] .landing { padding-top: clamp(40px, 8vh, 90px); } [data-skin="climb"] .landing-eyebrow { font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: .24em; color: var(--muted); } [data-skin="climb"] .landing-brand { font-weight: 200; letter-spacing: .14em; font-size: 20px; } [data-skin="climb"] .landing-brand i { font-weight: 600; background: linear-gradient(100deg, var(--accent-hi), var(--accent) 60%, #d98a1e); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-skin="climb"] .brand-dot { background: var(--live); box-shadow: var(--mint-glow); } [data-skin="climb"] .landing-headline { font-weight: 200; font-size: clamp(44px, 6.4vw, 84px); line-height: .98; letter-spacing: -.035em; max-width: 14ch; } [data-skin="climb"] .landing-headline em { font-weight: 500; background: linear-gradient(100deg, var(--accent-hi), var(--accent) 60%, #d98a1e); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-skin="climb"] .landing-lede { font-weight: 300; font-size: 17px; line-height: 1.6; color: var(--muted); margin-top: 22px; } /* the ambient climb: a faint rail behind the hero with one traveling light */ [data-skin="climb"] .landing-hero { position: relative; padding-left: 34px; } [data-skin="climb"] .landing-hero::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(52, 211, 153, .0), rgba(52, 211, 153, .35) 30%, rgba(52, 211, 153, .35) 70%, rgba(52, 211, 153, 0)); } [data-skin="climb"] .landing-hero::after { content: ""; position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--mint-hi); box-shadow: var(--mint-glow); animation: climb-travel 5.5s var(--ease) infinite; } [data-skin="climb"] .request-btn { margin-top: 28px; letter-spacing: .06em; font-size: 15px; padding: 14px 30px; } [data-skin="climb"] .login-card { background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 24px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 80px -40px rgba(0, 0, 0, .8); padding: 30px 30px 30px; } [data-skin="climb"] .login-title { font-weight: 500; font-size: 24px; letter-spacing: -.02em; } [data-skin="climb"] .login-sub { font-weight: 300; font-size: 14px; } [data-skin="climb"] .login-btn { font-size: 15px; letter-spacing: .06em; padding: 13px 20px; } /* how it works: three nodes on one rail */ [data-skin="climb"] .landing-how { margin-top: clamp(40px, 7vh, 72px); } [data-skin="climb"] .landing-sect { font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } [data-skin="climb"] .how-steps { gap: 40px; } [data-skin="climb"] .how-step { position: relative; } [data-skin="climb"] .how-n { width: 34px; height: 34px; border-radius: 50%; font-family: var(--display); font-weight: 400; font-size: 15px; background: var(--bg); color: var(--mint-hi); border: 1.5px solid rgba(52, 211, 153, .5); box-shadow: 0 0 14px rgba(52, 211, 153, .25); display: grid; place-items: center; } [data-skin="climb"] .how-text { font-weight: 300; color: var(--text); font-size: 15px; } /* ---- Dojo sub-nav: one segmented pill ------------------------------------ */ [data-skin="climb"] .dojo-tabs { display: inline-flex; gap: 0; padding: 3px; align-self: flex-start; flex-wrap: wrap; max-width: 100%; /* eight tabs now — wrap, never clip */ border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); } [data-skin="climb"] .dojo-tab { font-family: var(--body); font-weight: 500; font-size: 13px; letter-spacing: .06em; color: var(--muted); background: transparent; border: 0; border-radius: 999px; padding: 7px 16px; transition: color .25s var(--ease), background .25s var(--ease), box-shadow .25s; } [data-skin="climb"] .dojo-tab:hover { color: var(--text-hi); } [data-skin="climb"] .dojo-tab[aria-current="true"] { color: var(--text-hi); background: rgba(255, 255, 255, .14); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .06); } /* ---- Setup: the full call is the product, so it gets the big thin title -- */ [data-skin="climb"] .setup-stage .hero-card, [data-skin="climb"] .hero-card { border-radius: 20px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); padding: 22px 24px 20px; transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s; } [data-skin="climb"] .hero-card:hover { border-color: var(--border-hi); } [data-skin="climb"] .hero-card[aria-checked="true"] { border-color: rgba(52, 211, 153, .45); background: linear-gradient(180deg, rgba(52, 211, 153, .08), rgba(52, 211, 153, .02)); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .12), 0 0 40px -18px rgba(52, 211, 153, .6); } [data-skin="climb"] .setup-stage .hero-title, [data-skin="climb"] .hero-title { font-weight: 300; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.03em; line-height: 1; } [data-skin="climb"] .hero-card[aria-checked="true"] .hero-title { color: var(--text-hi); } [data-skin="climb"] .setup-stage .hero-sub, [data-skin="climb"] .hero-sub { font-weight: 300; font-size: 15px; color: var(--muted); } [data-skin="climb"] .drill-card { border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); transition: border-color .25s, background .25s, transform .25s var(--spring); } [data-skin="climb"] .drill-card:hover { border-color: var(--border-hi); transform: translateY(-1px); } [data-skin="climb"] .drill-card[aria-checked="true"] { border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .06); } [data-skin="climb"] .drill-card[aria-checked="true"] .drill-title { color: var(--mint-hi); } [data-skin="climb"] .drill-title { font-weight: 500; letter-spacing: -.01em; } [data-skin="climb"] .setup-stage .segments, [data-skin="climb"] .segments { border: 0; border-radius: 0; } [data-skin="climb"] .segments-summary, [data-skin="climb"] .prospect-summary, [data-skin="climb"] .offer-tag { font-weight: 500; color: var(--muted); letter-spacing: .01em; } [data-skin="climb"] .segments-summary:hover, [data-skin="climb"] .prospect-summary:hover { color: var(--text-hi); } /* the difficulty ramp becomes a lit rail: each step a node, heat fills to the pick */ [data-skin="climb"] .setup-stage .diff-row, [data-skin="climb"] .diff-row { gap: 12px; } [data-skin="climb"] .diff-ramp { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; } [data-skin="climb"] .diff-seg { font-family: var(--body); font-weight: 500; font-size: 13px; letter-spacing: .04em; text-transform: none; padding: 9px 8px 11px; border-radius: 999px; overflow: visible; transition: color .25s, background .25s; } [data-skin="climb"] .diff-seg + .diff-seg { border-left: 0; } [data-skin="climb"] .diff-seg:first-child, [data-skin="climb"] .diff-seg:last-child { border-radius: 999px; } [data-skin="climb"] .setup-stage .diff-seg::after, [data-skin="climb"] .diff-seg::after { left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; opacity: .18; transition: opacity .3s, box-shadow .3s; } [data-skin="climb"] .setup-stage .diff-seg.heat-lit::after, [data-skin="climb"] .diff-seg.heat-lit::after { opacity: .9; box-shadow: 0 0 10px color-mix(in srgb, var(--heat) 60%, transparent); } [data-skin="climb"] .diff-seg[aria-checked="true"] { color: var(--text-hi); background: rgba(255, 255, 255, .12); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .06); } [data-skin="climb"] .setup-stage .diff-night, [data-skin="climb"] .diff-night { border-radius: 999px; font-family: var(--body); font-weight: 500; letter-spacing: .04em; text-transform: none; } [data-skin="climb"] .diff-caption { font-weight: 300; color: var(--muted); } [data-skin="climb"] .diff-caption b { font-weight: 600; } [data-skin="climb"] .offer-row { border-radius: 999px; overflow: hidden; } [data-skin="climb"] .offer-seg { font-family: var(--body); font-weight: 500; letter-spacing: .02em; text-transform: none; } [data-skin="climb"] .offer-seg[aria-checked="true"] { color: var(--text-hi); background: rgba(255, 255, 255, .12); } [data-skin="climb"] .action-line { gap: 12px; } [data-skin="climb"] .meet-slot input { border-radius: 999px; padding: 13px 18px; } [data-skin="climb"] .setup-stage .coach-row, [data-skin="climb"] .coach-row { border-radius: 999px; border: 1px solid var(--border); background: transparent; transition: border-color .25s, background .25s; } [data-skin="climb"] .setup-stage .coach-row:has(input:checked), [data-skin="climb"] .coach-row:has(input:checked) { border-color: rgba(52, 211, 153, .5); background: rgba(52, 211, 153, .08); } [data-skin="climb"] .coach-row:has(input:checked) .coach-name { color: var(--mint-hi); } [data-skin="climb"] .coach-row input { accent-color: var(--live); } [data-skin="climb"] .start-hint, [data-skin="climb"] .setup-stage .start-hint { font-weight: 300; } [data-skin="climb"] .coach-nudge { border-radius: 16px; } /* ---- Live: the ladders are the quiz rail, lit rung by rung --------------- */ [data-skin="climb"] .live-card { gap: 14px; } [data-skin="climb"] .live-dot { background: var(--live); box-shadow: var(--mint-glow); } [data-skin="climb"] .live-label { color: var(--live); font-weight: 600; letter-spacing: .18em; } [data-skin="climb"] .live-title { font-weight: 400; font-size: 20px; letter-spacing: -.01em; } [data-skin="climb"] .live-clock { font-weight: 500; } [data-skin="climb"] .ladder { width: 64px; padding: 14px 6px; gap: 10px; background: transparent; border: 0; border-radius: 0; position: relative; } [data-skin="climb"] .ladder::before { content: ""; position: absolute; left: 50%; top: 34px; bottom: 30px; width: 2px; margin-left: -1px; background: var(--border); border-radius: 2px; } [data-skin="climb"] .ladder-label { font-weight: 600; letter-spacing: .18em; color: var(--muted); } [data-skin="climb"] .ladder-rungs { gap: 10px; align-items: center; } [data-skin="climb"] .ladder-rung { flex: none; width: 34px; height: 34px; min-height: 0; border-radius: 50%; font-family: var(--display); font-weight: 400; font-size: 14px; color: var(--muted); background: var(--bg); border: 1.5px solid var(--border-hi); position: relative; z-index: 1; transition: background .35s, color .35s, border-color .35s, box-shadow .35s, transform .45s var(--spring); } [data-skin="climb"] .ladder-rung.lit { color: #062b1d; background: var(--rc); border-color: var(--rc); box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 50%, transparent); } [data-skin="climb"] .ladder-rung.now { transform: scale(1.12); animation: climb-ignite .7s var(--spring); } [data-skin="climb"] .ladder-cap { font-weight: 600; letter-spacing: .12em; } [data-skin="climb"] .ladder-close .ladder-label { color: var(--accent); } [data-skin="climb"] .stream { border-radius: 16px; background: rgba(0, 0, 0, .22); border: 1px solid var(--border); } [data-skin="climb"] .v-row { border-radius: 12px; } [data-skin="climb"] .v-chip { border-radius: 999px; font-weight: 600; letter-spacing: .1em; } [data-skin="climb"] .briefing { border-radius: 18px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); } [data-skin="climb"] .brief-eyebrow { font-weight: 600; letter-spacing: .2em; color: var(--muted); } [data-skin="climb"] .brief-title { font-weight: 300; letter-spacing: -.02em; font-size: 30px; } [data-skin="climb"] .brief-layer-label { font-weight: 600; letter-spacing: .18em; } [data-skin="climb"] .end-confirm { border-radius: 14px; } [data-skin="climb"] .exit-panel { border-radius: 16px; } [data-skin="climb"] .exit-tail { border-radius: 12px; } /* ---- Session log + live calls: hairlines, no boxes ----------------------- */ [data-skin="climb"] .sessions-toggle { border-radius: 12px; } [data-skin="climb"] .session-row { padding: 14px 6px; border-top: 1px solid var(--border); transition: background .2s; border-radius: 12px; } [data-skin="climb"] .session-row:hover { background: rgba(255, 255, 255, .025); } [data-skin="climb"] .session-title { font-weight: 500; font-size: 16px; letter-spacing: -.01em; } [data-skin="climb"] .session-score .score-num { font-family: var(--display); font-weight: 300; letter-spacing: -.02em; } [data-skin="climb"] .session-score .score-num.elite { color: var(--card-glow-ink); text-shadow: 0 0 12px rgba(52, 211, 153, .45); } [data-skin="climb"] .grade-btn { font-size: 12px; letter-spacing: .06em; padding: 8px 16px; } [data-skin="climb"] .paste-link { font-weight: 500; } [data-skin="climb"] .paste-panel { border-radius: 18px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); } [data-skin="climb"] .paste-speaker, [data-skin="climb"] .closer-chip, [data-skin="climb"] .pasted-tag, [data-skin="climb"] .prospect-chip, [data-skin="climb"] .stall-chip, [data-skin="climb"] .student-tag { border-radius: 999px; } /* ---- Progress: the number is the hero ------------------------------------ */ [data-skin="climb"] .period-row, [data-skin="climb"] .progress-tabs { padding: 3px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); gap: 0; } [data-skin="climb"] .period-seg, [data-skin="climb"] .progress-tab { font-family: var(--body); font-weight: 500; font-size: 12px; letter-spacing: .06em; border: 0; border-radius: 999px; padding: 6px 14px; color: var(--muted); background: transparent; transition: color .25s var(--ease), background .25s var(--ease); } [data-skin="climb"] .period-seg + .period-seg { border-left: 0; } [data-skin="climb"] .period-seg[aria-checked="true"], [data-skin="climb"] .progress-tab[aria-selected="true"] { color: var(--text-hi); background: rgba(255, 255, 255, .14); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .06); } [data-skin="climb"] .score-hero { border-radius: 20px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); padding: 22px 24px; } [data-skin="climb"] .score-hero-num { font-family: var(--display); font-weight: 200; font-size: 96px; letter-spacing: -.05em; line-height: .9; } [data-skin="climb"] .score-hero-num.elite { color: var(--card-glow-ink); text-shadow: 0 0 24px rgba(52, 211, 153, .45); } [data-skin="climb"] .score-hero-label { font-weight: 600; letter-spacing: .2em; color: var(--muted); } [data-skin="climb"] .score-hero-sub { font-weight: 300; } [data-skin="climb"] .score-coach { /* the coach's line runs the full width of the hero above it, with room to breathe: the base rule's 60ch cap made it wrap into a second bar */ max-width: none; margin: 14px 0 18px; padding: 14px 18px; border-radius: 14px; font-size: 15px; font-weight: 300; line-height: 1.5; background: rgba(52, 211, 153, .06); border: 1px solid rgba(52, 211, 153, .2); } [data-skin="climb"] .score-hero { border-bottom: 0; } [data-skin="climb"] .cat-row { border-radius: 12px; } [data-skin="climb"] .cat-name { font-weight: 500; } [data-skin="climb"] .cat-track { border-radius: 999px; background: rgba(255, 255, 255, .06); height: 6px; } [data-skin="climb"] .cat-fill { border-radius: 999px; transition: width .8s var(--ease); } [data-skin="climb"] .cat-fill.elite { box-shadow: 0 0 12px rgba(52, 211, 153, .5); } [data-skin="climb"] .stat-strip { border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); margin-bottom: 10px; } [data-skin="climb"] .field-label.sect { margin-top: 6px; } [data-skin="climb"] .stat-value { font-family: var(--display); font-weight: 300; letter-spacing: -.03em; font-size: 28px; } [data-skin="climb"] .stat-label { font-weight: 600; letter-spacing: .16em; } [data-skin="climb"] .board-table th, [data-skin="climb"] .roster-table th, [data-skin="climb"] .usage-table th { font-weight: 600; letter-spacing: .14em; color: var(--muted); border-bottom: 1px solid var(--border); } [data-skin="climb"] .board-table td, [data-skin="climb"] .roster-table td, [data-skin="climb"] .usage-table td { border-color: var(--border); } [data-skin="climb"] .coach-banner { border-radius: 14px; } /* ---- Floor: money in thin numerals --------------------------------------- */ [data-skin="climb"] .money-strip { gap: 10px; } [data-skin="climb"] .money-cell { border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); padding: 16px 18px; } [data-skin="climb"] .money-value { font-family: var(--display); font-weight: 200; font-size: 36px; letter-spacing: -.04em; } [data-skin="climb"] .money-value.accent { color: var(--accent-hi); } [data-skin="climb"] .money-label { font-weight: 600; letter-spacing: .16em; } [data-skin="climb"] .req-admin { border-radius: 16px; } [data-skin="climb"] .cred-card { border-radius: 16px; } [data-skin="climb"] .cred-body { border-radius: 12px; } [data-skin="climb"] .request-row, [data-skin="climb"] .student-row, [data-skin="climb"] .glitch-row { border-radius: 12px; } [data-skin="climb"] .new-login-btn { font-size: 13px; padding: 12px 22px; } [data-skin="climb"] .student-pass-input { border-radius: 10px; } [data-skin="climb"] .student-pass-save { font-size: 12px; padding: 6px 14px; } [data-skin="climb"] .roster-row.plateau td { color: var(--accent-hi); } /* ---- Report card: the verdict on glass ----------------------------------- */ [data-skin="climb"] .report-toolbar { margin-bottom: 16px; } [data-skin="climb"] .print-btn { font-size: 13px; padding: 10px 20px; } [data-skin="climb"] .audit-card { background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-radius: 24px; padding: 30px 32px 24px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 80px -50px rgba(0, 0, 0, .9); animation: climb-rise .6s var(--ease) both; } [data-skin="climb"] .audit-eyebrow { font-weight: 600; letter-spacing: .22em; color: var(--muted); } [data-skin="climb"] .audit-title { font-weight: 300; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.03em; line-height: 1; } [data-skin="climb"] .audit-facts { font-weight: 300; } [data-skin="climb"] .audit-verdict { border-radius: 999px; font-weight: 600; letter-spacing: .12em; } [data-skin="climb"] .audit-verdict.ok { background: rgba(52, 211, 153, .12); color: var(--mint-hi); border-color: rgba(52, 211, 153, .4); box-shadow: 0 0 20px -8px rgba(52, 211, 153, .6); } [data-skin="climb"] .audit-pdf { border-radius: 999px; font-weight: 500; } [data-skin="climb"] .audit-stamp { border-radius: 12px; } [data-skin="climb"] .audit-label { font-weight: 600; letter-spacing: .2em; color: var(--muted); } [data-skin="climb"] .audit-label::after { background: var(--border); } [data-skin="climb"] .audit-tiles { gap: 10px; } [data-skin="climb"] .audit-tile { border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid var(--border); border-left-width: 1px; padding: 14px 16px 14px; position: relative; overflow: hidden; transition: background .25s, border-color .25s, transform .25s var(--spring), box-shadow .3s; } /* the severity rail moves INSIDE the tile, as a lit edge with a glow */ [data-skin="climb"] .audit-tile::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--card-line); } [data-skin="climb"] .audit-tile.ok::before { background: var(--card-l3green); box-shadow: 0 0 10px rgba(188, 201, 74, .5); } [data-skin="climb"] .audit-tile.warn::before { background: var(--card-gold); box-shadow: 0 0 10px rgba(242, 193, 25, .5); } [data-skin="climb"] .audit-tile.low::before { background: var(--card-ember); box-shadow: 0 0 10px rgba(255, 95, 54, .5); } [data-skin="climb"] .audit-tile.elite::before { background: var(--card-glow); box-shadow: var(--mint-glow); } [data-skin="climb"] .audit-tile.elite { background: linear-gradient(180deg, rgba(52, 211, 153, .12), rgba(255, 255, 255, .03) 70%); border-color: rgba(52, 211, 153, .35); box-shadow: 0 0 40px -16px rgba(52, 211, 153, .7); } [data-skin="climb"] button.audit-tile:hover { transform: translateY(-2px); border-color: var(--border-hi); background: rgba(255, 255, 255, .06); } [data-skin="climb"] button.audit-tile.open { border-color: var(--border-hi); background: rgba(255, 255, 255, .06); } [data-skin="climb"] .audit-tile-pct { font-family: var(--display); font-weight: 200; letter-spacing: -.04em; } [data-skin="climb"] .audit-tile-name { font-weight: 600; letter-spacing: .14em; } [data-skin="climb"] .audit-tile-sub { font-weight: 300; } [data-skin="climb"] .audit-overall { background: rgba(0, 0, 0, .2); } [data-skin="climb"] .audit-overall .audit-tile-pct { font-size: clamp(44px, 6vw, 64px); } [data-skin="climb"] .audit-breakout { border-radius: 16px; padding: 15px 18px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); animation: climb-unfold .45s var(--ease); } [data-skin="climb"] .audit-structure { font-weight: 300; } [data-skin="climb"] .audit-well { border-radius: 16px; } /* The skin re-rounds every box on the card, so each one's padding has to be re-cut with it: a 16px corner curves further into the box than a 13px padding reaches, and the text lands ON the curve (Blake, 2026-09-03 — THE MOVE THAT WAS THERE was boxed with no padding at all). Pad at least as far in as the corner curves. */ [data-skin="climb"] .audit-signal { border-radius: 16px; padding: 17px 19px; } [data-skin="climb"] .audit-inch, [data-skin="climb"] .audit-say { border-radius: 14px; padding: 13px 16px; background: rgba(52, 211, 153, .06); border: 1px solid rgba(52, 211, 153, .22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-skin="climb"] .audit-inch-label, [data-skin="climb"] .audit-say-label { color: var(--live); font-weight: 600; letter-spacing: .18em; } [data-skin="climb"] .audit-tabs { padding: 3px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); display: inline-flex; gap: 0; } [data-skin="climb"] .audit-tab { font-family: var(--body); font-weight: 500; font-size: 13px; letter-spacing: .04em; text-transform: none; border: 0; border-radius: 999px; padding: 7px 16px; color: var(--muted); background: transparent; } [data-skin="climb"] .audit-tab.on { color: var(--text-hi); background: rgba(255, 255, 255, .14); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); } [data-skin="climb"] .audit-chip { border-radius: 999px; font-weight: 600; letter-spacing: .1em; } /* One chip shape on the whole card: the skin's chips are pills, so the tile badge and the reel's tier chip are pills too (Blake, 2026-09-03). */ [data-skin="climb"] .audit-crushed, [data-skin="climb"] .audit-tier { border-radius: 999px; font-weight: 600; letter-spacing: .12em; padding: 2px 8px 2px 9px; } [data-skin="climb"] .audit-chip.elite { box-shadow: 0 0 14px -4px rgba(52, 211, 153, .7); } [data-skin="climb"] .audit-cat { border-radius: 12px; } [data-skin="climb"] .audit-cat-score { font-family: var(--display); font-weight: 300; letter-spacing: -.02em; } [data-skin="climb"] .audit-box { border-radius: 14px; } [data-skin="climb"] .audit-reel-item { border-radius: 16px; padding: 15px 18px; } [data-skin="climb"] .audit-reel-item.veteran { box-shadow: 0 0 40px -16px rgba(52, 211, 153, .8); border-color: rgba(52, 211, 153, .4); } [data-skin="climb"] .audit-tier { border-radius: 999px; } [data-skin="climb"] .audit-dial { border-radius: 14px; } [data-skin="climb"] .audit-dial-value { font-family: var(--display); font-weight: 200; letter-spacing: -.04em; } [data-skin="climb"] .audit-foot { font-weight: 300; } /* the markdown fallback + the transcript stay paper: a document is a document */ [data-skin="climb"] .report-paper { border-radius: 18px; } /* ---- HUD door: same grammar ---------------------------------------------- */ [data-skin="climb"] .hud-name { font-weight: 200; letter-spacing: -.02em; font-size: 40px; } [data-skin="climb"] .hud-name i { font-weight: 600; background: linear-gradient(100deg, var(--accent-hi), var(--accent) 60%, #d98a1e); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-skin="climb"] .hud-explain { font-weight: 300; } [data-skin="climb"] .hud-actions { border-radius: 16px; } [data-skin="climb"] .hud-float-btn { font-size: 14px; } [data-skin="climb"] .quiz-card { padding: 0; } /* ---- Amber warmth (Blake, 2026-09-02: "a little colorless after login") -- Amber is his brand. Mint stays the language of what's EARNED (rungs, scores, verdicts); amber becomes the language of what's YOURS - the tab you're on, the drill you picked, the section rules, the headings that carry the brand - plus a second, warm light source on the ground. */ [data-skin="climb"] body { background: radial-gradient(900px 520px at 88% -8%, rgba(240, 169, 59, .10), transparent 62%), radial-gradient(1400px 800px at 18% -12%, #151c2e 0%, var(--bg-2) 42%, var(--bg) 100%) fixed; } /* the active door and tab wear the brand, the way the wordmark's DOJO does */ [data-skin="climb"] .door[aria-current="true"], [data-skin="climb"] .dojo-tab[aria-current="true"] { color: var(--accent-hi); background: rgba(240, 169, 59, .13); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(240, 169, 59, .28); } [data-skin="climb"] .tagline { color: rgba(240, 169, 59, .55); } /* section rules warm from the label outward */ [data-skin="climb"] .field-label.sect::after, [data-skin="climb"] .audit-label::after { background: linear-gradient(90deg, rgba(240, 169, 59, .45), rgba(240, 169, 59, .06)); } [data-skin="climb"] .sessions-toggle[aria-expanded="true"] .field-label { color: var(--accent-hi); } /* your pick: the drill, the difficulty, the offer */ [data-skin="climb"] .hero-card[aria-checked="true"] { border-color: rgba(240, 169, 59, .5); background: linear-gradient(180deg, rgba(240, 169, 59, .10), rgba(240, 169, 59, .02)); box-shadow: inset 0 0 0 1px rgba(240, 169, 59, .12), 0 0 44px -18px rgba(240, 169, 59, .7); } [data-skin="climb"] .drill-card[aria-checked="true"] { border-color: rgba(240, 169, 59, .5); background: rgba(240, 169, 59, .08); } [data-skin="climb"] .drill-card[aria-checked="true"] .drill-title { color: var(--accent-hi); } [data-skin="climb"] .drill-min, [data-skin="climb"] .hero-card .drill-foot { color: rgba(240, 169, 59, .75); } [data-skin="climb"] .diff-seg[aria-checked="true"] { color: var(--accent-hi); background: rgba(240, 169, 59, .13); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(240, 169, 59, .28); } [data-skin="climb"] .diff-caption b, [data-skin="climb"] .offer-caption b { color: var(--accent-hi); } [data-skin="climb"] .offer-tag b { color: var(--accent-hi); } [data-skin="climb"] .offer-seg[aria-checked="true"] { color: var(--accent-hi); background: rgba(240, 169, 59, .13); } [data-skin="climb"] .seg-chevron, [data-skin="climb"] .prospect-summary::before { color: var(--accent); } [data-skin="climb"] .coach-row:has(input:checked) { border-color: rgba(240, 169, 59, .5); background: rgba(240, 169, 59, .08); } [data-skin="climb"] .coach-row:has(input:checked) .coach-name { color: var(--accent-hi); } [data-skin="climb"] .coach-row input { accent-color: var(--accent); } /* forms: the focus ring is the action color again */ [data-skin="climb"] input:focus, [data-skin="climb"] .num-input:focus, [data-skin="climb"] .select-input:focus, [data-skin="climb"] .paste-panel textarea:focus, [data-skin="climb"] .meet-slot input:focus { border-color: rgba(240, 169, 59, .6); box-shadow: 0 0 0 4px rgba(240, 169, 59, .12); } [data-skin="climb"] :focus-visible { outline-color: var(--accent-hi); } [data-skin="climb"] .check input, [data-skin="climb"] .reset-check input { accent-color: var(--accent); } /* the segmented controls on Progress and the card follow the tabs */ [data-skin="climb"] .period-seg[aria-checked="true"], [data-skin="climb"] .progress-tab[aria-selected="true"], [data-skin="climb"] .audit-tab.on { color: var(--accent-hi); background: rgba(240, 169, 59, .13); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(240, 169, 59, .28); } [data-skin="climb"] .score-hero-label, [data-skin="climb"] .stat-label, [data-skin="climb"] .money-label { color: rgba(240, 169, 59, .7); } [data-skin="climb"] .score-coach { border-color: rgba(240, 169, 59, .35); background: rgba(240, 169, 59, .06); } [data-skin="climb"] .score-coach b { color: var(--accent-hi); } /* the report card carries the brand in its eyebrow and its section headings */ [data-skin="climb"] .audit-eyebrow, [data-skin="climb"] .report-eyebrow, [data-skin="climb"] .brief-eyebrow, [data-skin="climb"] .audit-label { color: rgba(240, 169, 59, .8); } [data-skin="climb"] .audit-tile-name { color: rgba(240, 169, 59, .6); } [data-skin="climb"] .audit-verdict { border-color: rgba(240, 169, 59, .5); } /* the live screen: the title and the clock warm up, the LIVE pulse stays mint */ [data-skin="climb"] .live-title { color: var(--accent-hi); } [data-skin="climb"] .briefing { border-color: rgba(240, 169, 59, .2); } /* the landing eyebrow too, so the brand shows before the login */ [data-skin="climb"] .landing-eyebrow { color: rgba(240, 169, 59, .75); } [data-skin="climb"] .landing-sect { color: rgba(240, 169, 59, .7); } /* ---- Motion -------------------------------------------------------------- */ @keyframes climb-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes climb-unfold { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes climb-ignite { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1.12); } } @keyframes climb-travel { 0% { top: 100%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 0; opacity: 0; } } @media (prefers-reduced-motion: reduce) { [data-skin="climb"] *, [data-skin="climb"] *::before, [data-skin="climb"] *::after { animation: none !important; transition: none !important; } } @media print { [data-skin="climb"] .view-switch { display: none; } } /* ---- Floor folds ---------------------------------------------------------- */ [data-skin="climb"] .floor-fold > summary::before { border-color: var(--accent); } [data-skin="climb"] .floor-fold > summary .field-label.sect { margin-top: 0; } /* ---- flow restructure (2026-09-09): LEARN sub-nav wears the pill ---------- */ [data-skin="climb"] .learn-nav { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); gap: 0; } [data-skin="climb"] .learn-seg { font-family: var(--body); font-weight: 500; font-size: 12px; letter-spacing: .06em; border: 0; border-radius: 999px; padding: 6px 14px; color: var(--muted); background: transparent; transition: color .25s var(--ease), background .25s var(--ease); } [data-skin="climb"] .learn-seg[aria-current="true"] { color: var(--accent-hi); background: rgba(240, 169, 59, .13); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(240, 169, 59, .28); } /* Phone header (2026-09-09): the skin's own ghost-button padding beat the phone pass's, so the account buttons kept three rows of header. Same specificity, later in the cascade, and only under 700px. */ @media (max-width: 700px) { [data-skin="climb"] .report-bug-btn, [data-skin="climb"] .logout-btn { padding: 2px 8px; font-size: 11px; } [data-skin="climb"] .door { padding: 4px 10px; font-size: 12px; } } /* ====================================================================== THE PHONE, IN THE SKIN'S OWN VOICE (2026-09-09) ---------------------------------------------------------------------- These live here, not in styles.css, because the skin OWNS these selectors — a `[data-skin="climb"] .dojo-tabs` rule in the earlier file loses to this one on load order, whatever a media query says. ====================================================================== */ @media (max-width: 700px) { /* Blake: "center that bar at the top because it looks like it's a little to the left." It was pinned with align-self: flex-start. And the second half of the same bug: at 999px, a corner curves inward by half the box's HEIGHT. One row that was invisible; wrapped to two rows it cut across the first tab, which is the tab "going over the edge of the border". Re-cut the radius for the taller box — the same padding debt the report card had on 2026-09-03. */ [data-skin="climb"] .dojo-tabs { align-self: center; justify-content: center; margin: 0 auto; padding: 5px; border-radius: 20px; row-gap: 4px; } [data-skin="climb"] .dojo-tab { padding: 9px 14px; } /* The header's own rows, centred with it. */ [data-skin="climb"] .app-header { align-items: center; padding: 14px 10px 4px; } [data-skin="climb"] .header-main { width: 100%; justify-content: center; gap: 6px; /* The brand line has to survive a 390px screen with four things on it: wordmark, door pill, count, avatar. Wrapping is the fallback, but the sizes below are tuned so it does not have to. */ flex-wrap: wrap; } /* The wordmark goes back up (Blake, 2026-09-09): it was shrunk to make room for the notification count, and the count has since moved into the account menu — so the space it was borrowed for no longer exists. The door pill tightens instead, which is the cheaper give. */ [data-skin="climb"] .wordmark { font-size: 22px; letter-spacing: .06em; } [data-skin="climb"] .door { padding: 6px 9px; font-size: 10.5px; letter-spacing: .04em; } [data-skin="climb"] .door-nav { padding: 2px; } /* COACH ME is desktop-only for now (Blake, 2026-09-09): the Closer HUD has no mobile build, so a toggle here could only disappoint whoever ticked it. Written at the skin's own specificity — a bare `.coach-row` in styles.css loses to `[data-skin="climb"] .coach-row`, which is the same trap that hid a start panel behind display:flex once before. */ [data-skin="climb"] .setup-stage .coach-row, [data-skin="climb"] .coach-row { display: none; } .notif-flag { padding: 4px 8px; } [data-skin="climb"] .header-right { gap: 8px; } /* Blake: "the selector for Normal still clips the edge of the border... we just highlight that corner, so we don't add a border and clip out." The cause: this skin gives every .diff-seg a 999px radius, which outranks the mobile rule that set it to 0 — so the selected pill's round corner pushed past the ramp's own round corner. Two fixes, both needed: the segments stop being pills (a selected cell is just a filled cell), and the ramp CLIPS its children, so whatever radius a segment ends up with in future it can never escape the box again. */ [data-skin="climb"] .diff-ramp { border-radius: 14px; overflow: hidden; padding: 0; gap: 1px; } [data-skin="climb"] .diff-seg, [data-skin="climb"] .diff-seg:first-child, [data-skin="climb"] .diff-seg:last-child, [data-skin="climb"] .setup-stage .diff-night, [data-skin="climb"] .diff-night { border-radius: 0; border: 0; } /* Selected reads as a lit cell, not an outlined chip — no border to clip. */ [data-skin="climb"] .diff-seg[aria-checked="true"] { background: rgba(240, 169, 59, .16); box-shadow: none; } }