/* ════════════════════════════════════════════════════════════ Third Rock Wealth · TOOL-DARK Shared dark theme for the bespoke, cinematic calculator pages. Scoped to body.tool-page. Loaded after main.css + v8-tokens.css and before the per-tool stylesheet. The marketing site stays light; the tools are a distinct dark "instrument" world. No pure #000 / #fff — every neutral is tinted toward evergreen. ════════════════════════════════════════════════════════════ */ body.tool-page { /* ── dark palette ─────────────────────────────────────── */ --surface: #0E1410; /* page · near-black evergreen */ --surface-raised: #141C16; /* panels */ --surface-high: #1C271F; /* lifted controls */ --hairline: rgba(123, 165, 135, 0.16); --hairline-bold: rgba(123, 165, 135, 0.34); --text: #F4EBD9; /* eggshell */ --text-soft: rgba(244, 235, 217, 0.64); --text-mute: rgba(244, 235, 217, 0.40); --accent: #7BA587; /* evergreen, lifted */ --accent-bright: #9BC4A6; /* luminous evergreen */ --accent-deep: #2E4636; --accent-glow: rgba(123, 165, 135, 0.50); --alert: #C97A82; /* mahogany, lifted for dark */ /* contrast accent — warm gold marks growth / the upside */ --gold: #E2A63E; --gold-bright: #F2BE5C; --gold-soft: rgba(226, 166, 62, 0.13); --gold-glow: rgba(226, 166, 62, 0.50); /* roundness */ --r-panel: 16px; --r-ctl: 10px; background: var(--surface); color: var(--text); -webkit-font-smoothing: antialiased; } body.tool-page main { overflow: clip; } /* ── selection ──────────────────────────────────────────── */ body.tool-page ::selection { background: var(--accent-deep); color: var(--text); } /* ════════════════════════════════════════════════════════════ ENTRANCE STATES — hidden only while carries .tool-anim-ready (added by an inline head script when motion is allowed). If JS/GSAP fails the class is dropped and all content shows. No dependency on script success. ════════════════════════════════════════════════════════════ */ html.tool-anim-ready [data-anim] { opacity: 0; will-change: opacity, transform; } @media (prefers-reduced-motion: reduce) { html.tool-anim-ready [data-anim] { opacity: 1 !important; transform: none !important; } } /* ════════════════════════════════════════════════════════════ SHARED SITE HEADER — dark variant ════════════════════════════════════════════════════════════ */ body.tool-page .site-header { background: rgba(14, 20, 16, 0.90); border-bottom: 1px solid var(--hairline); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); } body.tool-page .logo { color: var(--text); } body.tool-page .logo .ital { color: var(--accent-bright); } body.tool-page .site-nav a { color: var(--text-soft); transition: color 140ms ease; } body.tool-page .site-nav a:hover, body.tool-page .site-nav a.active { color: var(--text); } body.tool-page .site-nav a.active { text-decoration-color: var(--accent); } body.tool-page .nav-dropdown { background: var(--surface-raised); border: 1px solid var(--hairline); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.7); } body.tool-page .nav-dropdown a { color: var(--text-soft); } body.tool-page .nav-dropdown a:hover { color: var(--text); background: var(--surface-high); } body.tool-page .cta-icon-btn { color: var(--text-soft); border-color: var(--hairline); } body.tool-page .cta-icon-btn:hover { color: var(--text); border-color: var(--hairline-bold); } body.tool-page .badge-count, body.tool-page .nav-dropdown .count { background: var(--accent); color: var(--surface); } body.tool-page .signin { color: var(--text); border-color: var(--hairline-bold); } body.tool-page .signin:hover { background: var(--accent); color: var(--surface); border-color: var(--accent); } body.tool-page .signout { color: var(--text-soft); } body.tool-page .who-block { color: var(--text-soft); } body.tool-page .hamburger span { background: var(--text); } /* nav revamp — dark-theme equivalents (underline, focus, hovers) */ body.tool-page .site-nav a:hover { border-bottom-color: rgba(155, 196, 166, 0.40); } body.tool-page .site-nav a.active { border-bottom-color: var(--accent); } body.tool-page .cta-icon-btn:hover { background: var(--surface-high); } body.tool-page .site-nav a:focus-visible, body.tool-page .hamburger:focus-visible, body.tool-page .cta-icon-btn:focus-visible, body.tool-page .auth-state .signin:focus-visible, body.tool-page .nav-dropdown a:focus-visible { outline-color: var(--accent-bright); } /* ════════════════════════════════════════════════════════════ SHARED SITE FOOTER — dark variant (cohere with evergreen-black) ════════════════════════════════════════════════════════════ */ body.tool-page .site-footer { background: var(--surface); border-top: 1px solid var(--hairline); } body.tool-page .footer-bottom, body.tool-page .footer-grid { border-color: var(--hairline); } body.tool-page .footer-col-title { color: var(--accent-bright); } body.tool-page .site-footer a:hover { color: var(--accent-bright); } /* ════════════════════════════════════════════════════════════ SHARED — focus, scrollbars ════════════════════════════════════════════════════════════ */ body.tool-page a:focus-visible, body.tool-page button:focus-visible, body.tool-page input:focus-visible, body.tool-page [tabindex]:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; } /* ════════════════════════════════════════════════════════════ TOOLKIT PRIMITIVES — shared dark control + panel vocabulary (tk-*). Each tool stylesheet overrides the palette tokens and adds its own bespoke layout/composition on top of these. Defaults below: --contrast falls back to the gold accent. ════════════════════════════════════════════════════════════ */ body.tool-page { --contrast: var(--gold); --contrast-bright: var(--gold-bright); --contrast-soft: var(--gold-soft); --contrast-glow: var(--gold-glow); } .tk-shell { padding: clamp(34px, 4.5vw, 68px) 0 clamp(48px, 7vw, 96px); } .tk-wrap { width: min(1280px, 92vw); margin: 0 auto; } .tk-kicker { font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent-bright); } .tk-panel { background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--r-panel); } /* ── HERO ─────────────────────────────────────────────────── */ .tk-hero { position: relative; min-height: 420px; height: clamp(420px, 56vh, 640px); overflow: hidden; display: flex; align-items: flex-end; border-bottom: 1px solid var(--hairline); } .tk-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .tk-hero-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 28%, transparent 52%, var(--surface) 99%); } .tk-hero-inner { position: relative; width: min(1280px, 92vw); margin: 0 auto; padding-bottom: clamp(32px, 5vh, 56px); } .tk-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent-bright); margin: 0 0 16px; } .tk-eyebrow span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent-bright); font-size: 12px; } .tk-hero-title { font-family: var(--serif); font-weight: 400; font-size: clamp(31px, 4.5vw, 62px); line-height: 1.03; letter-spacing: -0.025em; margin: 0 0 16px; color: var(--text); font-variation-settings: "SOFT" 40, "opsz" 110; } .tk-hero-title .l { display: block; } .tk-hero-title em { font-style: italic; color: var(--contrast-bright); font-variation-settings: "SOFT" 90, "opsz" 144; } .tk-hero-lede { font-family: var(--sans); font-size: clamp(14px, 1.4vw, 17px); line-height: 1.6; color: var(--text-soft); max-width: 46ch; margin: 0; } /* ── instrument grid: console + chart, equal height ───────── */ .tk-grid { display: grid; grid-template-columns: 372px 1fr; gap: clamp(16px, 2vw, 26px); align-items: stretch; } @media (max-width: 940px) { .tk-grid { grid-template-columns: 1fr; gap: 18px; } } /* ── READOUT BAND ─────────────────────────────────────────── */ .tk-readout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 52px); padding: clamp(22px, 2.8vw, 40px) clamp(24px, 3vw, 46px); margin-bottom: clamp(16px, 2vw, 26px); } .tk-readout-main { min-width: 0; } .tk-readout-main .tk-kicker { display: block; margin-bottom: 12px; } .tk-figure { font-family: var(--serif); font-weight: 400; font-size: clamp(50px, 8vw, 122px); line-height: 0.9; letter-spacing: -0.04em; margin: 0; color: var(--text); font-variation-settings: "SOFT" 20, "opsz" 144; font-feature-settings: "tnum"; text-shadow: 0 0 64px var(--contrast-glow); } .tk-subs { display: flex; flex-wrap: wrap; } .tk-sub { padding: 2px clamp(16px, 2.2vw, 32px); border-left: 1px solid var(--hairline); } .tk-sub:first-child { border-left: none; padding-left: 0; } .tk-sub-k { display: block; font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-mute); margin-bottom: 10px; } .tk-sub-v { display: block; font-family: var(--serif); font-size: clamp(23px, 2.7vw, 36px); font-weight: 500; letter-spacing: -0.02em; color: var(--text); font-feature-settings: "tnum"; font-variation-settings: "SOFT" 40, "opsz" 100; } .tk-sub-accent .tk-sub-v { color: var(--accent-bright); } .tk-sub-contrast .tk-sub-v { color: var(--contrast-bright); } /* ── CONSOLE ──────────────────────────────────────────────── */ .tk-console { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 30px); } .tk-console-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--hairline); } .tk-meta { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-mute); } .tk-meta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 4px var(--accent-glow); } .tk-console-foot { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--hairline); font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--text-mute); } /* mode toggle */ .tk-mode { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hairline-bold); border-radius: var(--r-ctl); overflow: hidden; margin-bottom: 26px; } .tk-mode-btn { background: transparent; border: none; font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--text-soft); padding: 13px 10px; cursor: pointer; transition: color 160ms ease, background 160ms ease; } .tk-mode-btn + .tk-mode-btn { border-left: 1px solid var(--hairline-bold); } .tk-mode-btn:hover { color: var(--text); } .tk-mode-btn.is-on { background: var(--accent); color: var(--surface); } /* field */ .tk-field { margin-bottom: 24px; } .tk-field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .tk-field-top label { font-family: var(--mono); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-soft); } .tk-field-value { display: inline-flex; align-items: baseline; gap: 4px; } .tk-unit-pre { font-family: var(--serif); font-size: 21px; color: var(--text-soft); font-variation-settings: "SOFT" 40, "opsz" 90; } .tk-unit { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--text-soft); letter-spacing: 0.04em; } body.tool-page .tk-num { font-family: var(--serif); font-size: 25px; font-weight: 500; color: var(--text); background: transparent; border: none; border-bottom: 1px solid var(--hairline-bold); border-radius: 0; text-align: right; padding: 0 1px 3px; margin: 0; box-sizing: content-box; letter-spacing: -0.01em; font-variation-settings: "SOFT" 40, "opsz" 90; -webkit-appearance: none; -moz-appearance: textfield; appearance: none; box-shadow: none; transition: border-color 140ms ease; } body.tool-page .tk-num::-webkit-outer-spin-button, body.tool-page .tk-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } body.tool-page .tk-num:hover { border-bottom-color: var(--accent); } body.tool-page .tk-num:focus { border-bottom-color: var(--contrast-bright); background: transparent; } .tk-num--w { width: 132px; } .tk-num--m { width: 78px; } .tk-num--s { width: 56px; } /* slider */ .tk-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--accent) var(--fill, 0%), var(--hairline-bold) var(--fill, 0%)); outline: none; cursor: pointer; } .tk-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-bright); border: 4px solid var(--surface-raised); box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--accent-glow); cursor: grab; transition: transform 120ms ease; } .tk-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.14); } .tk-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-bright); border: 4px solid var(--surface-raised); box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--accent-glow); cursor: grab; } .tk-range::-moz-range-track { height: 4px; border-radius: 999px; background: var(--hairline-bold); } .tk-range:focus-visible { outline: 2px solid var(--contrast-bright); outline-offset: 6px; } .tk-field-scale { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-mute); } /* ── CHART PANEL ──────────────────────────────────────────── */ .tk-chart-panel { display: flex; flex-direction: column; margin: 0; min-width: 0; overflow: hidden; } .tk-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 15px clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--hairline); } .tk-chart-wrap { position: relative; flex: 1; min-height: 320px; } .tk-chart-wrap canvas { display: block; width: 100%; height: 100%; } .tk-legend { display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-soft); } .tk-legend .lg { display: inline-flex; align-items: center; gap: 8px; } .tk-legend .lg::before { content: ''; width: 16px; height: 3px; border-radius: 2px; } .tk-legend .lg-a::before { background: var(--accent-bright); } .tk-legend .lg-b::before { background: var(--contrast-bright); box-shadow: 0 0 10px var(--contrast-glow); } .tk-legend .lg-c::before { background: repeating-linear-gradient(to right, var(--text-mute) 0 5px, transparent 5px 9px); } /* ── BANDS / RELATED / DISCLAIMER ─────────────────────────── */ .tk-band { border-top: 1px solid var(--hairline); padding: clamp(44px, 7vw, 92px) 0; } .tk-band-inner { width: min(1280px, 92vw); margin: 0 auto; } .tk-related { border-top: 1px solid var(--hairline); padding: clamp(44px, 6vw, 88px) 0; } .tk-related h2 { font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent-bright); margin: 0 0 26px; } .tk-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-panel); overflow: hidden; } .tk-related-card { display: block; padding: clamp(22px, 2.6vw, 32px); background: var(--surface-raised); color: var(--text); text-decoration: none; position: relative; transition: background 160ms ease; } .tk-related-card:hover { background: var(--surface-high); } .tk-related-card .rc-meta { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-mute); margin: 0 0 10px; } .tk-related-card h3 { font-family: var(--serif); font-size: 23px; font-weight: 500; margin: 0 0 8px; letter-spacing: -0.018em; color: var(--text); font-variation-settings: "SOFT" 40, "opsz" 90; } .tk-related-card p { font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--text-soft); margin: 0; } .tk-related-card .rc-arrow { position: absolute; right: 22px; bottom: 22px; font-family: var(--mono); color: var(--contrast-bright); opacity: 0; transform: translateX(-6px); transition: opacity 200ms ease, transform 200ms ease; } .tk-related-card:hover .rc-arrow { opacity: 1; transform: translateX(0); } .tk-disclaimer { border-top: 1px solid var(--hairline); padding: clamp(34px, 4vw, 56px) 0; text-align: center; } .tk-disclaimer-inner { width: min(680px, 90vw); margin: 0 auto; } .tk-disclaimer .tk-kicker { display: block; margin-bottom: 12px; } .tk-disclaimer p { font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.65; color: var(--text-soft); margin: 0; } /* ════════════════════════════════════════════════════════════ FIELD GUIDE — a quiet, collapsible "how to read this tool" disclosure. Native
; closed by default, themes to each tool's palette. Lowkey when shut, a clear strip to open. ════════════════════════════════════════════════════════════ */ .tk-guide-band { border-top: 1px solid var(--hairline); margin-top: clamp(22px, 3vw, 38px); } .tk-guide { } .tk-guide > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: clamp(20px, 2.5vw, 30px) 0; } .tk-guide > summary::-webkit-details-marker { display: none; } .tk-guide > summary::marker { content: ''; } .tk-guide > summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 4px; border-radius: 4px; } .tk-guide-icon { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--hairline-bold); border-radius: 50%; color: var(--accent-bright); font-family: var(--mono); font-size: 16px; line-height: 1; transition: transform 320ms var(--ease, ease), border-color 160ms ease, background 160ms ease; } .tk-guide[open] .tk-guide-icon { transform: rotate(45deg); } .tk-guide > summary:hover .tk-guide-icon { border-color: var(--accent); background: var(--surface-high); } .tk-guide-label { font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text); } .tk-guide-hint { font-family: var(--sans); font-size: 13px; color: var(--text-mute); margin-left: auto; text-align: right; transition: color 160ms ease; } .tk-guide > summary:hover .tk-guide-hint { color: var(--text-soft); } @media (max-width: 560px) { .tk-guide-hint { display: none; } } .tk-guide-body { padding: 6px 0 clamp(34px, 4.5vw, 56px); display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(24px, 4vw, 68px); } .tk-guide:not([open]) > .tk-guide-body { display: none; } @media (max-width: 820px) { .tk-guide-body { grid-template-columns: 1fr; gap: 22px; } } .tk-guide-lead { font-family: var(--serif); font-size: clamp(18px, 2vw, 24px); line-height: 1.5; color: var(--text-soft); margin: 0; font-variation-settings: "SOFT" 50, "opsz" 90; } .tk-guide-lead b { color: var(--text); font-weight: 500; } .tk-guide-inputs { margin: 0; } .tk-guide-row { padding: 14px 0; border-top: 1px solid var(--hairline); } .tk-guide-row:first-child { border-top: none; padding-top: 0; } .tk-guide-row:last-child { padding-bottom: 0; } .tk-guide-row dt { font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-bright); margin-bottom: 7px; } .tk-guide-row dd { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.62; color: var(--text-soft); } .tk-guide-row dd b { color: var(--text); font-weight: 600; } @media (prefers-reduced-motion: no-preference) { .tk-guide[open] .tk-guide-body { animation: tk-guide-in 380ms var(--ease, ease); } @keyframes tk-guide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } } /* ── pulse ────────────────────────────────────────────────── */ @keyframes tk-pulse { 0% { text-shadow: 0 0 64px var(--contrast-glow); } 40% { text-shadow: 0 0 64px var(--contrast-glow), 0 0 26px var(--contrast-glow); } 100% { text-shadow: 0 0 64px var(--contrast-glow); } } .tk-figure.is-pulsing { animation: tk-pulse 520ms var(--ease, ease); } @media (prefers-reduced-motion: reduce) { .tk-figure.is-pulsing { animation: none; } }