/* ============================================================ AUSTIN — "FOREST GREEN" THEME (Seal Studios) · v2 ------------------------------------------------------------ Load order: tokens.css → components.css → THIS (last, wins). Austin gets ONE fixed dark look — no sea/pastel/grid mode switcher (matches Jerry/JP precedent). This file does three jobs at once: 1. PALETTE — forest green + confirmed hexes (text #E0E0E0). v2.1: cards are now a shade off the page surface (not a distinct bright green). The accent has moved twice since — gold (#c9a227) read muddy, terracotta (#c1693c) was Sami's next call but still wasn't the one; v2.2 lands on a deep wine/berry (#a3395c, "holly berry in the canopy") — a genuinely different hue family (magenta-red, not another orange/yellow), reads rich and deliberate against dark forest green the way berries or wine do against foliage. Sami's direct call, 2026-07-02 second follow-up round — background/cards stay forest green throughout, only the accent family changes. 2. LAYOUT — the card-dashboard structure (home-cards / shortcut rail / grounded fitness columns / utility page shell) — unchanged from v1, still theme-agnostic. 3. SITEWIDE SURFACE (v2, §9) — v1's parallax mountain-forest scene is GONE. Every page now sits on one solid/gradient fill sampled directly from the continuation-prompt's Reports-page card surface (hub-v1/austin/theme.css's --bg-card:#10241b / --bg-glass:rgba(16,36,27,.86)) — the same calm dark-green floor everywhere, not a Home-only set piece. Every card (`.hc-card`/`.wr-panel`/`.glass-card` /`.metric-panel`) is reshaped to the creative-prompt's "waypoint card" (hairline border + short top tick + soft shadow + hover lift, sampled from track-creative-freedom/ css/base.css's `.card` rule) — a WRAP around existing content, not a resize. See BUILD_STATE.md for the full reasoning + what was searched/borrowed. ============================================================ */ /* ════════════════════════════════════════════════════════════ 1 · PALETTE ════════════════════════════════════════════════════════════ v2.1 (2026-07-02): --bg-card moved close to the body gradient's own tones (was #006400, a confirmed-bright standalone green) so cards read as "just a shade off the background," not a distinct surface — and card box-shadow (§4 below) was flattened, no more glow/halo, just the hairline border + tick for definition. v2.2 (same day, second round): --accent replaced again — gold read muddy, the terracotta swap-in wasn't right either. This is a genuinely different hue family, not another orange: deep wine/berry (#a3395c). Darker than the old accents, so --accent-contrast flips from dark to LIGHT text (a dark-on-wine button would be unreadable) — that's the one non-obvious downstream change this round. */ :root { /* ---- Surfaces — confirmed --bg-base anchor tone kept; --bg-card is now sampled close to the body gradient (§ SITEWIDE SURFACE below, #10241b/#0b1c15) instead of standing out as its own bright green — "a shade off the background," not a distinct surface color. ---- */ --bg-base: #228B22; /* confirmed anchor tone */ --bg-card: #17331f; /* a shade off the page surface, not a distinct green */ --bg-card-hover: #1c3d26; --bg-glass: rgba(23, 51, 31, 0.82); --bg-inset: rgba(224, 224, 224, 0.05); /* ---- Borders → dark mossy green ---- */ --border-subtle: #0e3a18; --border-muted: #185424; --border-active: #2c7a3a; /* ---- Accent: deep wine/berry — "holly berry in the canopy". Second swap: gold (#c9a227) read muddy, terracotta (#c1693c) was the first replacement but still not it. This is a real hue-family change (magenta-red, not another orange) rather than a shade adjustment. Darker/more saturated than either prior accent, so --accent-contrast is now LIGHT text, not dark. ---- */ --accent: #a3395c; --accent-bright: #c85a80; --accent-muted: #7a2846; --accent-dim: #331420; --accent-glow: rgba(163, 57, 92, 0.22); --accent-contrast:#fbeef2; /* ---- Secondary data accent: misty slate-blue (the haze) ---- */ --data: #7fa3ad; --data-muted: #547680; --data-glow: rgba(127, 163, 173, 0.18); /* ---- Semantic (kept inside the forest palette — no pure red/green) ---- */ --success: #4caf6e; --danger: #c85a4a; --warning: #cf8a3c; /* ---- Text → confirmed light grey on dark green ---- */ --text-primary: #E0E0E0; --text-secondary: #b7c7ba; --text-muted: #7f9482; /* ---- pill radius + z shims (mirrors sami/theme.css contract) ---- */ --radius-pill: 999px; --z-switcher: 9998; --z-dock: 9000; /* ---- Calendar categories — Austin's real tracked areas. Icon differentiates within a group since hue alone can't. Sleep re-added per CALENDAR_BUILD_STATE.md's Jerry/Austin note — lives inside Body (fitness/weight/sleep), not a new 6th color, matching Jerry's precedent exactly. ---- */ --cat-body: #d4a23c; /* amber — Fitness · Weight · Sleep */ --cat-mind: #9b8fd9; /* violet — Habits (Workshop) */ --cat-business: #5fb0d6; /* sky-blue — Trading backtest / MA2 study */ --cat-flight: #4fd88a; /* mint — Flight Plan deadlines */ --cat-events: #d9614f; /* rust — Events */ /* ---- Reports / impact tags ---- */ --wr-accent: var(--accent); --card-shade: rgba(1, 50, 32, 0.35); --impact-needle: #d9614f; /* rust = urgent */ --impact-needle-soft: rgba(217, 97, 79, 0.15); --impact-standard: #a3395c; /* wine = standard, matches accent */ --impact-standard-soft: rgba(163, 57, 92, 0.13); --impact-minor: #7f9482; /* muted sage, recedes */ --impact-minor-soft: rgba(127, 148, 130, 0.13); --task-deadline: var(--impact-needle); --task-fuzzy: var(--accent-muted); /* ---- Cel-shade outline → thin moss-green rim ---- */ --card-outline: #1f5c2a; --card-outline-w: 1px; /* scene contract kept so nothing reads empty (no separate particle scene on utility pages) */ --particle-a: rgba(163, 57, 92, 0.08); --particle-b: rgba(127, 163, 173, 0.08); --dock-glow: rgba(163, 57, 92, 0.45); /* ---- Fitness charts (fitness-charts-austin.js reads these) ---- */ --fc-a: #d4a23c; /* primary line — amber (matches cat-body) */ --fc-b: #5fb0d6; /* secondary line — sky-blue */ --fc-grid: #185424; --fc-axis: #6f9478; --fc-dot-stroke: #0b1f0e; /* form-field / inset-box tint (dark green, not Sami's dark-navy literals) */ --field-bg: rgba(1, 40, 26, 0.62); --statbox-bg: rgba(1, 40, 26, 0.45); --menu-bg: #0c2b14; } /* v2 sitewide surface — replaces v1's forest-scene parallax entirely. Sampled directly from the continuation-prompt's Reports-page card surface (hub-v1/austin/theme.css: --bg-card:#10241b, --bg-glass: rgba(16,36,27,.86)) rather than eyeballed: #10241b anchors the gradient midpoint, a shade darker at the floor, a faint accent-colored glow up top (the accent color, at 6% opacity — wine as of v2.2) so the page still reads "lit from somewhere" without any moving/parallax elements. One calm surface, everywhere — not a Home-only set piece. */ body { background: radial-gradient(130% 55% at 50% -8%, rgba(163, 57, 92, 0.06) 0%, transparent 55%), linear-gradient(180deg, #16301f 0%, #10241b 48%, #0b1c15 100%); background-attachment: fixed; min-height: 100vh; } /* ════════════════════════════════════════════════════════════ 2 · HEADER / CHROME ════════════════════════════════════════════════════════════ */ /* v2: was `background: transparent` (floating over the forest scene). v2.3: the plain dark wash (rgba(9,20,14,.55), a near-black bar with only a bottom border) read as its own oddball "darkbox" next to the rounded waypoint cards everywhere else on the page — too dark, too flat, too square. Now styled as one more waypoint card: --bg-card fill, hairline border, --radius-lg corners, the same soft resting shadow every other card uses, real padding on all sides instead of just padding-bottom. */ .hub-header { background: var(--bg-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--card-outline); border-radius: var(--radius-lg, 14px); box-shadow: 0 1px 2px rgba(0,0,0,0.18); padding: 18px 28px; margin: 20px auto var(--space-xl); position: relative; z-index: 2; } /* logo mark: shared default is a small 36px square (radius:8px) with a bright accent glow — bump it up and round it further so it reads as part of the same rounded-card language instead of a tiny square badge. */ .logo-mark { width: 46px; height: 46px; border-radius: var(--radius-md, 10px); box-shadow: 0 0 14px var(--accent-glow); } .header-title h1 { text-shadow: none; } /* Art-style switcher — DROPPED for Austin, matching Jerry/JP precedent (see BUILD_STATE.md judgment call #1). No switcher markup ships on any Austin page; this rule is a defensive backstop only. */ .skin-switcher { display: none !important; } /* ════════════════════════════════════════════════════════════ 3 · HOME — card-dashboard columns (mirrors the shared "grid" arrangement, unconditional since there's only one look here). Sits on the sitewide surface (§9) same as every other page now. ════════════════════════════════════════════════════════════ */ .home-cards { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: var(--space-xl, 2rem); max-width: 1340px; margin: 84px auto 0; padding: 0 var(--space-xl, 2rem); } .hc-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-lg, 1.5rem); } @media (max-width: 1040px) { .home-cards { flex-direction: column; max-width: 640px; } } .home-subnav { position: relative; z-index: 2; display: block; text-align: right; max-width: 1200px; margin: calc(5px - var(--space-xl, 2rem)) auto 0; padding: 0 var(--space-lg); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--text-muted); } .home-subnav a { color: var(--accent-muted); text-decoration: none; text-transform: uppercase; letter-spacing: 0.12em; transition: color var(--t-fast) ease; } .home-subnav a:hover, .home-subnav a[aria-current="page"] { color: var(--accent-bright); } .home-subnav .hs-sep { opacity: 0.4; margin: 0 5px; color: var(--accent-muted); } /* ════════════════════════════════════════════════════════════ 4 · THE DATA-PANEL — v2 "waypoint card": a thin top tick + a hairline border all the way around, reads like a trail marker / topo annotation instead of a left-accent-bar panel. Shape sampled from track-creative-freedom/css/base.css's `.card` rule (hairline border + var(--radius-lg) corners + soft resting shadow + hover lift) — see BUILD_STATE.md for the research this was grounded in (box-sizing:border-box + border/shadow hybrid is the standard way to add a frame without touching the box's own size). This is a WRAP, not a resize: padding/spacing below is completely unchanged from v1 — same content, same density, just a new frame around it. Applies to home cards, mission- control panels, fitness glass cards, and workshop/finance utility cards alike (one card language sitewide). ════════════════════════════════════════════════════════════ */ .hc-card, .wr-panel, .glass-card, .metric-panel, .grid-page .hc-card { position: relative; background: var(--bg-card); border: 1px solid var(--card-outline); border-radius: var(--radius-lg, 14px); box-shadow: 0 1px 2px rgba(0,0,0,0.18); -webkit-backdrop-filter: none; backdrop-filter: none; transition: border-color var(--t-med, 0.28s) ease, box-shadow var(--t-med, 0.28s) ease, transform var(--t-med, 0.28s) ease; } .hc-card::before, .wr-panel::before, .glass-card::before, .metric-panel::before { content: ''; position: absolute; top: 0; left: 22px; width: 26px; height: 3px; background: var(--accent); opacity: 0.85; border-radius: 0 0 3px 3px; } .wr-panel::before { background: var(--wr-accent, var(--accent)); } .hc-card:hover, .wr-panel:hover, .glass-card:hover, .metric-panel:hover { border-color: var(--border-active); box-shadow: 0 2px 6px rgba(0,0,0,0.22); transform: translateY(-2px); } .hc-card { padding: var(--space-lg) var(--space-lg) var(--space-md); display: flex; flex-direction: column; } /* fitness reef cards ground into flex columns (no free-float) */ .reef { position: relative; z-index: 2; min-height: 0; max-width: 1340px; margin: 84px auto 0; padding: 0 var(--space-xl, 2rem); display: flex; align-items: flex-start; gap: var(--space-xl, 2rem); } .fit-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-lg, 1.5rem); } @media (max-width: 1040px) { .reef { flex-direction: column; max-width: 640px; } } .glass-card { /* v2: dropped `transform: none !important` from this grounding reset — it was fighting the new waypoint-card hover lift above. position/width/ min-height/animation still get grounded into the flex column (this class's old job, unrelated to the v2 card-wrap). v2.1 fix: `position: static !important` (carried over from v1, where this class had no ::before pseudo-element) broke the waypoint-card's top-left tick on every Fitness card — an absolutely-positioned ::before needs a positioned ancestor to anchor to, and `static` isn't one, so the tick was rendering relative to the next positioned ancestor up the tree instead of the card itself. `relative` still grounds the card into the flex column (out of any free-float) while giving the tick a correct anchor. */ position: relative !important; width: auto !important; min-height: 0 !important; animation: none !important; padding: var(--space-lg) var(--space-xl) var(--space-xl); } /* ════════════════════════════════════════════════════════════ 5 · HOME CARD COMPONENTS (hc-* — no base style outside this file) ════════════════════════════════════════════════════════════ */ .hc-head { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--border-subtle); } .hc-title { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-primary); } .hc-link { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; color: var(--accent-muted); } .hc-link:hover { color: var(--accent-bright); } a.hc-head { text-decoration: none; cursor: pointer; } a.hc-head:hover .hc-title, a.hc-head:hover .hc-link { color: var(--accent-bright); } .hc-slide-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; } .hc-metric-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); } /* carousel plumbing (shared markup contract from carousel.js) */ .cz { display: flex; flex-direction: column; flex: 1; } .cz-track { position: relative; flex: 1; } .cz-slide { display: none; } .cz-slide.active { display: block; animation: hcFade var(--t-med, 0.25s) ease; } @keyframes hcFade { from { opacity: 0; } to { opacity: 1; } } .cz-nav { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 10px; margin-top: auto; } .cz-arrow { border: none; background: none; cursor: pointer; color: var(--accent-muted); font-size: 0.7rem; line-height: 1; padding: 2px 4px; opacity: 0.6; transition: opacity var(--t-fast) ease, transform var(--t-fast) ease; } .cz-arrow:hover { opacity: 1; transform: scale(1.15); color: var(--accent-bright); } .cz-dots { display: flex; gap: 5px; } .cz-dot { width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: var(--border-active); opacity: 0.55; transition: opacity var(--t-fast) ease, transform var(--t-fast) ease; } .cz-dot.active { opacity: 1; transform: scale(1.25); background: var(--accent); } .hc-fitness .cz-track { min-height: 360px; } .hc-reports .cz-track { min-height: 380px; } .hc-reports .hc-tasks { min-height: 360px; justify-content: space-between; } .hc-systems .cz-track { min-height: 320px; } .hc-chart { width: 100%; display: block; } .hc-chart-perf { height: 300px; } .hc-chart-weight { height: 300px; } /* v2.3: was 200px — too short for its 320x180 viewBox to fill the card width, so it rendered small and letterboxed. Matches .hc-chart-perf now. */ .hc-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 0.72rem; color: var(--text-secondary); } .hc-lg { display: inline-flex; align-items: center; gap: 5px; } .hc-lg-dot { width: 8px; height: 8px; border-radius: 2px; } .hc-lg-demo { font-style: italic; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.08em; } .hc-score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px 0 10px; flex: 1; } .hc-score-ring { position: relative; width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(var(--accent) 0%, var(--bg-inset) 0); } .hc-score-ring::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: var(--bg-card); box-shadow: 0 1px 3px rgba(0,0,0,0.35) inset; } .hc-score-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; } .hc-score-val { font-family: var(--font-mono, monospace); font-size: 3.4rem; font-weight: 800; color: var(--text-primary); line-height: 1; } .hc-score-max { font-family: var(--font-mono, monospace); font-size: 0.82rem; letter-spacing: 0.08em; color: var(--text-muted); } .hc-score-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; } .hc-tasks { display: flex; flex-direction: column; gap: 20px; } .hc-list { display: flex; flex-direction: column; } .hc-list-row { display: flex; align-items: center; gap: 12px; font-size: 0.94rem; color: var(--text-primary); padding: 11px 0; border-bottom: 1px solid var(--border-subtle); } .hc-list-row:last-child { border-bottom: none; } .hc-list-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent); } .hc-list-dot[data-tag="fitness"] { background: var(--cat-body); } .hc-list-dot[data-tag="reports"] { background: var(--data); } .hc-list-dot[data-tag="event"] { background: var(--cat-events); } .hc-list-dot[data-tag="finance"] { background: var(--cat-business); } .hc-list-bullet { color: var(--accent-muted); flex: none; font-size: 0.7rem; } .hc-list-label { flex: 1; } .hc-list-meta { flex: none; font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.04em; } .hc-quote-pair { display: flex; flex-direction: column; gap: 34px; min-height: 200px; justify-content: center; padding: 6px 4px; } .hc-quote { margin: 0; display: flex; flex-direction: column; gap: 10px; } .hc-quote-text { margin: 0; font-size: 1.12rem; line-height: 1.55; color: var(--text-primary); font-style: italic; } .hc-quote-src { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-muted); } .hc-habits { display: flex; flex-direction: column; gap: 9px; } .hc-hab { display: flex; align-items: center; gap: 11px; width: 100%; background: var(--bg-inset); border: 1px solid var(--border-muted); border-radius: var(--radius-md); padding: 9px 12px; cursor: pointer; color: var(--text-primary); font: inherit; text-align: left; transition: border-color var(--t-fast) ease, background var(--t-fast) ease; } .hc-hab:hover { border-color: var(--accent-muted); } .hc-hab-ic { font-size: 1.05rem; flex: none; } .hc-hab-name { flex: 1; font-size: 0.88rem; font-weight: 600; } .hc-hab-check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-active); display: flex; align-items: center; justify-content: center; color: transparent; font-size: 0.82rem; font-weight: 800; } .hc-hab.on { border-color: var(--accent); background: var(--accent-glow); } .hc-hab.on .hc-hab-check { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .hc-hab.avoid.on { border-color: var(--success); background: rgba(76, 175, 110, 0.14); } .hc-hab.avoid.on .hc-hab-check { background: var(--success); border-color: var(--success); } /* shortcut dock — floating rail on the right edge (no 🗺 Roadmap tile for Austin) */ .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: 20px; background: rgba(1, 32, 16, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--border-muted); box-shadow: 0 10px 30px rgba(0,0,0,0.45); } .hc-tile { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; padding: 0; border-radius: 14px; background: var(--bg-inset); border: 1px solid var(--border-muted); color: var(--accent); font: inherit; cursor: pointer; transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease, border-color var(--t-fast) ease; } .hc-tile:hover { transform: translateX(-3px); border-color: var(--accent); box-shadow: 0 4px 14px var(--accent-glow); } .hc-tile-icon { font-size: 1.5rem; line-height: 1; } .hc-tile-label { display: none; } .hc-tile-empty { cursor: default; opacity: 0.4; background: transparent; border-style: dashed; box-shadow: none; } .hc-tile-empty:hover { transform: none; box-shadow: none; border-color: var(--border-subtle); } .hc-tile-badge { position: absolute; top: -4px; right: -4px; background: var(--accent); color: var(--accent-contrast); font-size: 0.6rem; font-weight: 800; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: none; align-items: center; justify-content: center; } .hc-tile.has-badge .hc-tile-badge { display: flex; } @media (max-width: 720px) { .hc-rail { display: none; } } /* ════════════════════════════════════════════════════════════ 6 · REPORTS (fixed dark theme, no per-mode override) ════════════════════════════════════════════════════════════ */ .mission-control { max-width: 1100px; margin: var(--space-xl) auto var(--space-2xl); padding: 0 var(--space-lg); } .planning-stage { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .wr-title { color: var(--text-primary); } .page-tab.active { color: var(--accent-bright); } /* ════════════════════════════════════════════════════════════ 7 · UTILITY / TRACKER PAGE SHELL — workshop · finance. A grounded page shell + responsive card grid reusing .hc-card. ════════════════════════════════════════════════════════════ */ .grid-page { position: relative; z-index: 1; max-width: 1200px; margin: 56px auto 0; padding: 0 var(--space-xl, 2rem) var(--space-2xl); } .page-head { margin-bottom: var(--space-lg); } .page-title { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.02em; color: var(--text-primary); display: flex; align-items: center; gap: 10px; } .page-title .pt-accent { color: var(--accent); } .page-sub { margin-top: 6px; font-size: 0.82rem; color: var(--text-secondary); letter-spacing: 0.02em; line-height: 1.5; } .page-head-2 { margin: var(--space-2xl) 0 var(--space-md); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-muted); } .grid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg, 1.5rem); } .grid-page .hc-card { padding: var(--space-lg); } /* v2.5: shared tab bar — moved here from workshop.html's local