/* ============================================================ modes.css — PASTEL / CARDS MODE (SHARED · loads LAST) ------------------------------------------------------------ The "pastel" half of the site-wide view switch (see theme-mode.js). Everything here is scoped under html[data-mode="pastel"], so the default "sea" look in /theme.css is untouched — pastel is purely additive. Toggle back anytime. Two layers: 1. PALETTE — re-point the design tokens to a light pastel set. Because components read variables (never hardcoded brand colors), this recolors the whole site. 2. LAYOUT — flatten the dive: kill floating/particle motion, lighten the cel-shade, and turn the home page into a static, grounded card grid. Load order: tokens.css → components.css → skins.css → /theme.css → THIS (last, so it wins). ============================================================ */ /* ════════════════════════════════════════════════════════════ 1 · PALETTE — promote the hub's own island/buoy pastels (mint · pink · peach · butter) onto a soft lavender-purple field. ════════════════════════════════════════════════════════════ */ html[data-mode="pastel"] { /* ---- Surfaces — pastel BLUE field, near-white lavender card base ---- The --tune-* vars let the on-page color tuner (fitness.html, pastel-only) live-drive the core palette. They're REFERENCED ONLY inside this pastel block, so setting them on can't bleed into sea mode. Baked values stay as the fallbacks → look is identical until the tuner touches them. */ --bg-base: var(--tune-field, #bfd2ee); /* blue field (Sami's locked pick) */ --bg-card: #f2f0fb; /* near-white lavender */ --bg-card-hover: #eae6f6; --bg-glass: rgba(242, 240, 251, 0.86); --bg-inset: rgba(80, 70, 140, 0.06); /* ---- Borders → soft lavender ---- */ --border-subtle: #e9e2f6; --border-muted: #ddd2ee; --border-active: #c7b8ee; /* ---- Accent: soft purple (the pops: toggle, links, mission-control) ---- */ --accent: var(--tune-accent, #aa98eb); --accent-bright: #c5b9f3; --accent-muted: #8472cc; --accent-dim: #e6e0fa; --accent-glow: rgba(170, 152, 235, 0.24); --accent-contrast:#2a2140; /* dark text on a light fill */ /* ---- Secondary data accent: pastel PINK (chart pop) ---- */ --data: #e9a8cb; --data-muted: #cf85ac; --data-glow: rgba(233, 168, 203, 0.22); /* ---- Semantic (softened) ---- */ --success: #5cc99a; --danger: #f08a8a; --warning: #f0b86a; /* ---- Text → deep purple on light ---- */ --text-primary: var(--tune-text, #53206f); --text-secondary: #6f5a86; --text-muted: #9b8ba8; /* ---- Zone / depth accents (home metrics) — uniform lavender ---- */ --zone-shallow-accent: #ddd1ff; --zone-mid-accent: #ddd1ff; --zone-deep-accent: #ddd1ff; /* per-metric calendar dots */ --m-fitness: var(--zone-deep-accent); --m-habits: var(--zone-mid-accent); --m-reports: var(--zone-shallow-accent); --m-sleep: #e9a8cb; /* pastel pink */ /* ---- Mission Control / impact tags (pastel) ---- */ --wr-accent: #aa98eb; --card-shade: rgba(120, 100, 160, 0.07); --impact-needle: #f0a78f; /* soft rose = urgent */ --impact-needle-soft: rgba(240, 167, 143, 0.18); --impact-standard: #bcaae8; /* lavender, ties to cards */ --impact-standard-soft:rgba(188, 170, 232, 0.18); --impact-minor: #9aa4b2; /* gray, recedes */ --impact-minor-soft: rgba(154, 164, 178, 0.14); --task-deadline: var(--impact-needle); --task-fuzzy: var(--accent-muted); /* ---- Cel-shade outline → light lavender, thin (cards sit flat) ---- */ --card-outline: #e4dcf3; --card-outline-w: 1.5px; /* scene contract still defined so nothing reads empty if shown, but the scene itself is hidden below. */ --particle-a: rgba(160, 140, 210, 0.10); --particle-b: rgba(170, 152, 235, 0.10); --dock-glow: rgba(170, 152, 235, 0.55); /* the locked card lavender (reports panels + home metric cards) */ --card-lavender: var(--tune-card, #aa98eb); --card-lavender-edge: var(--tune-card-edge, #beb4db); /* input/select fields — the tuner's "Inputs" wheel drives this; default is the near-white lavender card base (the old hardcoded navy .f-input is overridden below). */ --tune-input-default: #d1e3ff; /* stat-box / inset panel tint — the tuner's "Stat Box" wheel drives this; used for ww-stat, split-dd-trigger, flip-toggle, exercise groups, scan rows, pd-rows, and the exercise scroll region. */ --tune-statbox-default: #d1e3ff; /* ---- Fitness charts (shared/fitness-charts.js reads these) ---- Lines/axes must read on the BLUE card field, so they go darker than the sea's neon cyan/pink. a = deep purple (primary), b = deep pink. */ --fc-a: #5a3aa8; /* primary line (weight · muscle a · overall) */ --fc-b: #c43d8e; /* secondary line (waist · muscle b) */ --fc-grid: #7d6bb0; /* faint gridlines (low opacity applied in JS) */ --fc-axis: #6f5a86; /* axis lines + x-date labels */ --fc-dot-stroke: #f2f0fb; /* point outline = near-white, so dots pop on blue */ } /* ════════════════════════════════════════════════════════════ CARD PAINT — every pastel card is the locked lavender. (Reports mission-control panels + home metric cards.) ════════════════════════════════════════════════════════════ */ html[data-mode="pastel"] .wr-panel { background: var(--bg-base); /* reports cards = the planning-calendar blue (blue-on-blue) */ border-color: color-mix(in srgb, var(--card-lavender) 60%, var(--border-muted)); border-left: 3px solid var(--card-lavender-edge); } html[data-mode="pastel"] .metric-panel { background: var(--bg-base); /* home cards = the same calendar blue as the reports cards */ border-color: color-mix(in srgb, var(--card-lavender) 60%, var(--border-muted)); } /* Planning stage: SOLID blue field (no fade-to-white) — the blue-on-blue Sami likes. */ html[data-mode="pastel"] .planning-stage { background: var(--bg-base); } /* ════════════════════════════════════════════════════════════ 2 · LAYOUT — flatten the dive (applies to EVERY page) ════════════════════════════════════════════════════════════ */ /* plain off-white page instead of the deep-water gradient */ html[data-mode="pastel"] body { background: var(--bg-base) !important; padding-bottom: var(--space-2xl); } /* kill the drifting bioluminescent particle layer */ html[data-mode="pastel"] body::before { display: none !important; } /* hide the immersive sea furniture wherever it appears */ html[data-mode="pastel"] .sky-scene, html[data-mode="pastel"] .sea-surface, html[data-mode="pastel"] .waterline, html[data-mode="pastel"] .zone-depthmark, html[data-mode="pastel"] .zone-meta, html[data-mode="pastel"] .dive-divider { display: none !important; } /* stop everything from floating/bobbing — cards are grounded */ html[data-mode="pastel"] .metric-panel, html[data-mode="pastel"] .wr-panel, html[data-mode="pastel"] .buoy-svg, html[data-mode="pastel"] .critter { animation: none !important; } /* soften the heavy cel-shade drop shadow site-wide. (NOT .wr-panel / .metric-panel — the reports + home cards keep the raised cel-shade lift so they read "on top of the field," like the calendar.) */ html[data-mode="pastel"] .card, html[data-mode="pastel"] .panel { box-shadow: 0 1px 2px rgba(40, 30, 70, 0.05), 0 6px 18px rgba(40, 30, 70, 0.07) !important; } /* ────────────────────────────────────────────────────────── HOME ONLY — hide the sea dive entirely; show the redesigned card dashboard (.home-cards) instead. The sea markup stays in the DOM untouched so 🌊 mode is exactly the signed-off dive. (Selectors are home-specific; harmless on other pages.) ────────────────────────────────────────────────────────── */ html[data-mode="pastel"] .surface-zone, html[data-mode="pastel"] .abyss-dock, html[data-mode="pastel"] .dive { display: none !important; } /* the new card dashboard is hidden everywhere by default (base rule, unscoped — harmless on pages that have no .home-cards) … */ .home-cards { display: none; } .home-subnav { display: none; } /* … and revealed only in pastel mode. TWO INDEPENDENT COLUMNS (Sami's arrangement, 2026-06-30): LEFT = Spiritual · Reports rises right beneath it RIGHT = Fitness · the shortcut rail beneath it Each column flows its own cards vertically, so Reports hugs Spiritual no matter how tall Fitness is (no forced grid-row alignment → natural, not pushed apart). align-items:flex-start keeps each column its own height. Stacks to 1 col narrow. */ html[data-mode="pastel"] .home-cards { display: flex; align-items: flex-start; gap: var(--space-xl, 2rem); /* space BETWEEN the two columns */ max-width: 1340px; margin: 100px auto 0; /* 100px below the subnav / white line → space before cards */ padding: 0 var(--space-xl, 2rem); } html[data-mode="pastel"] .hc-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-lg, 1.5rem); /* gap between stacked cards — natural, not far apart */ } @media (max-width: 1040px) { html[data-mode="pastel"] .home-cards { flex-direction: column; max-width: 620px; } } /* ════════════════════════════════════════════════════════════ PASTEL HOME CARDS — the "serious / dashboard" treatment. The lever (per the old homescreen): UPPERCASE tracked small-caps labels + monospace numerals, thin rules, no whimsical flavor. ════════════════════════════════════════════════════════════ */ /* small low-contrast section nav, tucked top-right under the header rule */ html[data-mode="pastel"] .home-subnav { display: block; text-align: right; max-width: 1120px; /* sit 5px under the header's white rule (the Seal Studios → date border-bottom). The header carries margin-bottom:var(--space-xl); a negative top margin cancels it — the two collapse to a 5px gap so the nav hugs the line instead of floating down toward the cards. */ margin: calc(5px - var(--space-xl, 2rem)) auto 0; padding: 0 var(--space-lg); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--text-muted); } html[data-mode="pastel"] .home-subnav a { color: var(--text-muted); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; transition: color var(--t-fast) ease; } html[data-mode="pastel"] .home-subnav a:hover { color: var(--text-secondary); } html[data-mode="pastel"] .home-subnav .hs-sep { opacity: 0.5; margin: 0 4px; } /* card shell — blue field + a clean neutral drop shadow for lift. (The old hard 0 6px 0 navy offset read as a thin blue "underglow" under the cards, so it's gone; just soft black shadows now.) No global min-height — each card sizes to its own content (per-card floors set below), so the columns stay uneven on purpose. */ html[data-mode="pastel"] .hc-card { background: var(--bg-base); border: 1px solid color-mix(in srgb, var(--card-lavender) 60%, var(--border-muted)); border-left: 3px solid var(--card-lavender-edge); border-radius: var(--radius-lg, 14px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30), 0 20px 50px rgba(0, 0, 0, 0.40); padding: var(--space-lg) var(--space-lg) var(--space-md); display: flex; flex-direction: column; } /* per-card content floors — the carousel area gets a min-height so cycling between slides of different heights doesn't make the card jump, and each card "owns" a size that fits its tallest slide. Tuned per Sami's feedback. */ html[data-mode="pastel"] .hc-fitness .cz-track { min-height: 360px; } html[data-mode="pastel"] .hc-reports .cz-track { min-height: 380px; } /* ≈ a 3–4 task list */ /* Reports: spread a short task list so 1–3 tasks still look even (4 fills naturally). */ html[data-mode="pastel"] .hc-reports .hc-tasks { min-height: 360px; justify-content: space-between; } html[data-mode="pastel"] .hc-systems .cz-track { min-height: 320px; } /* whole card header is a clickable link in pastel too (parity with grid) */ html[data-mode="pastel"] a.hc-head { text-decoration: none; cursor: pointer; } /* ── SHORTCUT DOCK — fixed frosted-glass rail hugging the RIGHT EDGE, vertically centered (pastel-only). Like the glass mode-pill but bigger + vertical: a floating icon dock (Windows-taskbar feel) enclosed to however many tiles it holds (default 3). It floats OVER the page, so it's not part of the card columns. First tile = Roadmap. */ .hc-rail { display: none; } /* base (sea mode): hidden */ html[data-mode="pastel"] .hc-rail { display: flex; flex-direction: column; gap: 10px; position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 60; padding: 10px; border-radius: 24px; /* pill-ish, like the mode toggle */ background: color-mix(in srgb, var(--bg-card) 50%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid color-mix(in srgb, #ffffff 50%, transparent); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55); } /* square glass icon tiles (room for text later via .hc-tile-label, hidden for now) */ html[data-mode="pastel"] .hc-tile { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; padding: 0; border-radius: 16px; background: color-mix(in srgb, #ffffff 32%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, #ffffff 55%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.12); color: var(--text-primary); font: inherit; cursor: pointer; transition: transform var(--t-fast, 0.15s) ease, box-shadow var(--t-fast, 0.15s) ease; } html[data-mode="pastel"] .hc-tile:hover { transform: translateX(-3px); /* nudges away from the edge */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 6px 16px rgba(0, 0, 0, 0.22); } html[data-mode="pastel"] .hc-tile-icon { font-size: 1.55rem; line-height: 1; } /* icon-only dock for now — markup keeps the label so text can be re-enabled later */ html[data-mode="pastel"] .hc-tile-label { display: none; } /* reserved empty slots — dashed ghost tiles so the dock shows its default room for 3 */ html[data-mode="pastel"] .hc-tile-empty { cursor: default; opacity: 0.45; background: color-mix(in srgb, #ffffff 14%, transparent); border-style: dashed; box-shadow: none; } html[data-mode="pastel"] .hc-tile-empty:hover { transform: none; box-shadow: none; } html[data-mode="pastel"] .hc-tile-empty .hc-tile-icon { font-size: 1.2rem; opacity: 0.7; } /* card header — title up top; the "Open ▸" link drops down to hug the divider */ html[data-mode="pastel"] .hc-head { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 5px; margin-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--card-lavender-edge) 45%, transparent); } html[data-mode="pastel"] .hc-title { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-primary); } html[data-mode="pastel"] .hc-link { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; color: var(--accent-muted); } html[data-mode="pastel"] .hc-link:hover { color: var(--text-primary); } /* slide sub-head (metric label + optional control) */ html[data-mode="pastel"] .hc-slide-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; } html[data-mode="pastel"] .hc-metric-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); } html[data-mode="pastel"] .hc-perf-select { font: inherit; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-muted); border-radius: var(--radius-pill, 999px); padding: 3px 8px; cursor: pointer; } /* carousel plumbing (shared markup contract from carousel.js) */ html[data-mode="pastel"] .cz { display: flex; flex-direction: column; flex: 1; } html[data-mode="pastel"] .cz-track { position: relative; flex: 1; } html[data-mode="pastel"] .cz-slide { display: none; } html[data-mode="pastel"] .cz-slide.active { display: block; animation: hcFade var(--t-med, 0.25s) ease; } @keyframes hcFade { from { opacity: 0; } to { opacity: 1; } } html[data-mode="pastel"] .cz-nav { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 10px; margin-top: auto; } html[data-mode="pastel"] .cz-arrow { border: none; background: none; cursor: pointer; color: var(--accent-muted); font-size: 0.7rem; line-height: 1; padding: 2px 4px; opacity: 0.55; transition: opacity var(--t-fast) ease, transform var(--t-fast) ease; } html[data-mode="pastel"] .cz-arrow:hover { opacity: 1; transform: scale(1.15); } html[data-mode="pastel"] .cz-dots { display: flex; gap: 5px; } html[data-mode="pastel"] .cz-dot { width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: var(--card-lavender-edge); opacity: 0.45; transition: opacity var(--t-fast) ease, transform var(--t-fast) ease; } html[data-mode="pastel"] .cz-dot.active { opacity: 1; transform: scale(1.25); background: var(--accent); } /* charts */ html[data-mode="pastel"] .hc-chart { width: 100%; display: block; } html[data-mode="pastel"] .hc-chart-perf { height: 300px; } html[data-mode="pastel"] .hc-chart-weight { height: 270px; } html[data-mode="pastel"] .hc-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 0.72rem; color: var(--text-secondary); } html[data-mode="pastel"] .hc-lg { display: inline-flex; align-items: center; gap: 5px; } html[data-mode="pastel"] .hc-lg-dot { width: 8px; height: 8px; border-radius: 2px; } html[data-mode="pastel"] .hc-lg-demo { font-style: italic; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.08em; } /* fitness score ring (conic-gradient fill set inline by JS) — bigger, fills the slide */ html[data-mode="pastel"] .hc-score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px 0 10px; flex: 1; } html[data-mode="pastel"] .hc-score-ring { position: relative; width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(var(--accent) 0%, var(--bg-inset) 0); } html[data-mode="pastel"] .hc-score-ring::before { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: var(--bg-base); box-shadow: 0 1px 3px rgba(40,30,70,0.12) inset; } /* the number sits in a layer that fills the ring, so it's truly centered */ html[data-mode="pastel"] .hc-score-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; } html[data-mode="pastel"] .hc-score-val { font-family: var(--font-mono, monospace); font-size: 3.4rem; font-weight: 800; color: var(--text-primary); line-height: 1; } html[data-mode="pastel"] .hc-score-max { font-family: var(--font-mono, monospace); font-size: 0.82rem; letter-spacing: 0.08em; color: var(--text-muted); } html[data-mode="pastel"] .hc-score-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } /* tasks — weekly activity: one-tap "worked on it today" + Mon–Sun streak dots */ html[data-mode="pastel"] .hc-tasks { display: flex; flex-direction: column; gap: 20px; } html[data-mode="pastel"] .hc-task-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; } html[data-mode="pastel"] .hc-task-name { font-size: 0.86rem; font-weight: 600; color: var(--text-primary); } html[data-mode="pastel"] .hc-log { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-active); background: var(--bg-card); color: var(--accent-muted); font-size: 0.9rem; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease; } html[data-mode="pastel"] .hc-log:hover { transform: scale(1.1); border-color: var(--accent); } html[data-mode="pastel"] .hc-log.done { background: var(--accent); border-color: var(--accent); color: #fff; } /* Mon–Sun streak dots, each with the day's first letter */ html[data-mode="pastel"] .hc-streak { display: flex; gap: 7px; } html[data-mode="pastel"] .hc-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; font-family: var(--font-mono, monospace); background: var(--bg-inset); border: 1px solid var(--border-muted); color: var(--text-muted); } html[data-mode="pastel"] .hc-dot.on { background: var(--accent); border-color: var(--accent); color: #fff; } html[data-mode="pastel"] .hc-dot.today { box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 3.5px var(--accent-muted); } html[data-mode="pastel"] .hc-task-meta { margin-top: 8px; font-size: 0.66rem; letter-spacing: 0.04em; color: var(--text-muted); } /* generic list (Due Soon · Parking Lot) */ html[data-mode="pastel"] .hc-list { display: flex; flex-direction: column; } html[data-mode="pastel"] .hc-list-row { display: flex; align-items: center; gap: 12px; font-size: 0.98rem; color: var(--text-primary); padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--card-lavender-edge) 28%, transparent); } html[data-mode="pastel"] .hc-list-row:last-child { border-bottom: none; } html[data-mode="pastel"] .hc-list-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent); } html[data-mode="pastel"] .hc-list-dot[data-tag="fitness"] { background: var(--m-fitness); } html[data-mode="pastel"] .hc-list-dot[data-tag="reports"] { background: var(--data); } html[data-mode="pastel"] .hc-list-dot[data-tag="event"] { background: var(--accent); } html[data-mode="pastel"] .hc-list-dot[data-tag="finance"] { background: var(--success); } html[data-mode="pastel"] .hc-list-bullet { color: var(--accent-muted); flex: none; font-size: 0.7rem; } html[data-mode="pastel"] .hc-list-label { flex: 1; } html[data-mode="pastel"] .hc-list-meta { flex: none; font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.04em; } /* quotes — two per slide, stacked. Bigger text + more breathing room between the two quotes, and a shorter min-height so the card shrinks to fit (less empty space). */ html[data-mode="pastel"] .hc-quote-pair { display: flex; flex-direction: column; gap: 34px; min-height: 200px; justify-content: center; padding: 6px 4px; } html[data-mode="pastel"] .hc-quote { margin: 0; display: flex; flex-direction: column; gap: 10px; } html[data-mode="pastel"] .hc-quote-text { margin: 0; font-size: 1.18rem; line-height: 1.55; color: var(--text-primary); } html[data-mode="pastel"] .hc-quote-src { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-muted); } /* ════════════════════════════════════════════════════════════ FITNESS PAGE (pastel) — ground the free-floating "reef" into two independent flex columns of flat lavender cards. Sea mode keeps the 158vh absolutely-positioned free-roam dive, untouched. (Selectors are fitness-specific; harmless on pages with no .reef.) ════════════════════════════════════════════════════════════ */ /* drop the sea furniture on the fitness page */ html[data-mode="pastel"] .reef .school, html[data-mode="pastel"] .reef .deep-watermark { display: none !important; } /* the reef stops being a tall positioning field → a two-column flex row. LEFT col = log (Session · Weight) · RIGHT col = review (Perf · BWI). Each column flows its own cards by natural height (no forced row alignment). */ html[data-mode="pastel"] .reef { position: static; min-height: 0; max-width: 1340px; margin: 100px auto 0; /* same 100px breathing room as the home cards */ padding: 0 var(--space-xl, 2rem); display: flex; align-items: flex-start; gap: var(--space-xl, 2rem); } html[data-mode="pastel"] .fit-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-lg, 1.5rem); } @media (max-width: 1040px) { html[data-mode="pastel"] .reef { flex-direction: column; max-width: 620px; } } /* the cards: stop floating/scattering, flatten the glass into a grounded lavender card matching the home dashboard (same field, border, soft shadow). !important beats both the keyframe float and the settle mechanic's inline transform. */ html[data-mode="pastel"] .glass-card { position: static !important; width: auto !important; min-height: 0 !important; animation: none !important; transform: none !important; background: var(--bg-base); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid color-mix(in srgb, var(--card-lavender) 60%, var(--border-muted)); border-left: 3px solid var(--card-lavender-edge); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30), 0 20px 50px rgba(0, 0, 0, 0.40); } html[data-mode="pastel"] .glass-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34), 0 24px 60px rgba(0, 0, 0, 0.46); } /* the top accent bar → soft lavender edge (was a neon sea glow) */ html[data-mode="pastel"] .glass-card::before { background: var(--card-lavender-edge); opacity: 1; } /* neon muscle accents (autocomplete badges + session-detail row borders) → the pastel chart palette so cyan/hot-pink don't glare on the light card. --tron-cyan is only read by these two spots, so repointing it is safe. */ html[data-mode="pastel"] { --tron-cyan: var(--fc-a); } html[data-mode="pastel"] .ex-ac-opt.a .ex-ac-muscle { border-color: color-mix(in srgb, var(--fc-a) 40%, transparent); } html[data-mode="pastel"] .ex-ac-opt.b .ex-ac-muscle { color: var(--fc-b); border-color: color-mix(in srgb, var(--fc-b) 40%, transparent); } html[data-mode="pastel"] .pd-row.a { border-left-color: var(--fc-a); } html[data-mode="pastel"] .pd-row.b { border-left-color: var(--fc-b); } /* input / select / set-entry fields: the page CSS hardcodes a dark navy (rgba(2,14,24,.6)) that pastel never recolored → dark-blue boxes on the light field. Repaint them light. The tuner's "Inputs" wheel drives --tune-input. */ html[data-mode="pastel"] .f-input, html[data-mode="pastel"] select.f-input, html[data-mode="pastel"] .set-in, html[data-mode="pastel"] .pd-cal input { background: var(--tune-input, var(--tune-input-default)) !important; color: var(--text-primary); border-color: var(--border-muted); } html[data-mode="pastel"] .f-input::placeholder, html[data-mode="pastel"] .set-in::placeholder { color: var(--text-muted); } /* dropdown menus (split picker + exercise autocomplete): the page CSS hardcodes the deep-sea navy (rgba(2,14,24,0.96)) for the floating menus. Repaint to the "Inputs" color so they match the rest of the form chrome. */ html[data-mode="pastel"] .split-dd-menu, html[data-mode="pastel"] .ex-autocomplete { background: var(--tune-input, var(--tune-input-default)) !important; } /* stat box / split-trigger / flip-toggle / exercise group / scan item / pd-row: the page CSS hardcodes a dark navy (rgba(2,14,24,0.4–0.6)) for the small inset panels and toggles inside cards. Repaint with the "Stat Box" wheel. (Exercise group + head + session-scroll left transparent — their own CSS now uses a soft tinted border so the page flows instead of looking blocky.) */ html[data-mode="pastel"] .ww-stat, html[data-mode="pastel"] .split-dd-trigger, html[data-mode="pastel"] .flip-toggle, html[data-mode="pastel"] .scan-item, html[data-mode="pastel"] .pd-row { background: var(--tune-statbox, var(--tune-statbox-default)) !important; } /* ════════════════════════════════════════════════════════════ 3 · THE TOGGLE CONTROL — small 🌊 / 🌸 segmented pill (lives in .header-tools; theme-neutral, reads tokens) ════════════════════════════════════════════════════════════ */ .mode-seg { display: inline-flex; align-items: center; gap: 2px; background: var(--bg-inset); border: 1px solid var(--border-muted); border-radius: var(--radius-pill, 999px); padding: 2px; vertical-align: middle; } .mode-opt { border: none; background: none; cursor: pointer; font-size: 0.82rem; line-height: 1; padding: 4px 7px; border-radius: var(--radius-pill, 999px); opacity: 0.45; filter: grayscale(0.4); transition: opacity var(--t-fast) ease, background var(--t-fast) ease, filter var(--t-fast) ease, transform var(--t-fast) ease; } .mode-opt:hover { opacity: 0.85; filter: grayscale(0); transform: translateY(-1px); } .mode-opt.active { opacity: 1; filter: grayscale(0); background: var(--bg-card); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); } @media (max-width: 720px) { html[data-mode="pastel"] .dive { grid-template-columns: 1fr; } }