/* ===== THEME PALETTES ===== */ :root { /* Light theme */ --bg: #f6f7fb; --card: #ffffff; --text: #0b1220; --muted: #5b6472; --accent: #2b74ff; --border: #e7eaf2; /* Controls (light) */ --input-bg: #f7f9ff; /* soft light fill */ --input-border: #d7deea; /* light border */ --kpi-bg: #f9fbff; /* KPI tiles */ --br: 16px; } :root[data-theme="dark"] { --bg: #0b0f13; --card: #121821; --text: #eaf0f7; --muted: #96a1b2; --accent: #4da3ff; --border: #1d2430; /* Controls (dark) */ --input-bg: #0e141b; --input-border: #2a3342; --kpi-bg: #0d141c; } /* Smooth theme transitions */ html, body, .card, input, select, button { transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* ===== HEADER + TOGGLE ===== */ .header { position: sticky; top: 0; z-index: 50; background: var(--bg); } .header__inner { max-width: 980px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; } .brand { display: inline-flex; align-items: center; } .brand__img { height: 32px; width: auto; display: block; } @media (min-width: 640px) { .brand__img { height: 40px; } } /* Default to light */ .logo--dark { display: none; } /* Flip when data-theme="dark" is on */ html[data-theme="dark"] .logo--light { display: none; } html[data-theme="dark"] .logo--dark { display: block; } /* Optional: if no saved theme yet, respect system preference */ @media (prefers-color-scheme: dark) { html:not([data-theme]) .logo--light { display: none; } html:not([data-theme]) .logo--dark { display: block; } } /* Toggle switch */ .theme-toggle { cursor: pointer; display: inline-flex; align-items: center; user-select: none; } .theme-toggle input { position: absolute; opacity: 0; pointer-events: none; } .theme-toggle .track { width: 56px; height: 30px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; position: relative; display: inline-flex; align-items: center; padding: 0 6px; box-shadow: 0 2px 10px rgba(0,0,0,.06); } .theme-toggle .thumb { position: absolute; top: 50%; transform: translateY(-50%); left: 4px; width: 22px; height: 22px; background: var(--accent); border-radius: 50%; transition: left .18s ease; } .theme-toggle .icons { width: 100%; display: flex; justify-content: space-between; font-size: 14px; opacity: .9; } /* Checked = dark */ .theme-toggle input:checked + .track .thumb { left: 30px; } /* ===== BASE ===== */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; } .container { max-width: 980px; margin: 28px auto; padding: 0 16px; } h1 { margin: 0 0 8px; font-size: 28px; text-align: center; } .subtitle { color: var(--muted); margin-bottom: 20px; text-align: center; } .card { text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--br); padding: 16px; margin-top: 10px; } .grid { display: grid; gap: 12px; grid-template-columns: repeat(12, 1fr); } .span-12 { grid-column: span 12; } .span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; } .span-3 { grid-column: span 3; } @media (max-width: 900px) { .span-6, .span-4, .span-3 { grid-column: span 12; } } label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px; } /* Inputs / selects / buttons pick up theme variables */ input, button, select { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); } input:focus, select:focus { outline: 2px solid var(--accent); border-color: transparent; } /* Prevent the hidden theme checkbox from creating horizontal overflow */ .header .theme-toggle input{ position: absolute; opacity: 0; pointer-events: none; /* override global width/height so it takes no space */ width: 0 !important; height: 0 !important; margin: 0; padding: 0; /* visually hide in an a11y-friendly way */ clip-path: inset(50%); clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } .row { display: flex; gap: 8px; align-items: center; } .pill { padding: 6px 10px; border-radius: 999px; background: var(--input-bg); border: 1px solid var(--input-border); font-size: 12px; cursor: pointer; color: var(--text); } .pill.active { background: color-mix(in oklab, var(--accent) 18%, transparent); border-color: color-mix(in oklab, var(--accent) 55%, var(--input-border)); color: var(--text); } button.primary { background: var(--accent); border: 0; color: #fff; font-weight: 700; margin-top: 25px;} .kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--kpi-bg); } .kpi .label { font-size: 12px; color: var(--muted); } .kpi .value { font-size: 18px; font-weight: 800; } .muted { color: var(--muted); font-size: 12px; } .readonly { background: var(--input-bg); border: 1px dashed var(--input-border); } /* ===== Combobox styles (symbol + currency + lot step) ===== */ .combo { position: relative; } .combo .toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 10px; color: color-mix(in oklab, var(--text) 70%, transparent); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; } .combo .toggle:hover { border-color: var(--accent); background: color-mix(in oklab, var(--input-bg) 85%, #000 15%); } .combo.open .toggle { transform: translateY(-50%) rotate(180deg); } .menu { position: absolute; z-index: 9999; left: 0; right: 0; max-height: 280px; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-top: 6px; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.12);border: 1px solid white; } .menu.open { display: block; } .menu .search { position: sticky; top: 0; background: var(--card); padding: 8px; border-bottom: 1px solid var(--border); } .menu .search input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); } .menu .item { padding: 8px 10px; cursor: pointer; } .menu .item:hover, .menu .item.active { background: color-mix(in oklab, var(--accent) 16%, transparent); } /* Combobox section headings (override item/pill styles) */ .menu .section { display: block; padding: 8px 12px; margin: 6px 0 4px; font-size: 12px; font-weight: 600; color: var(--muted, rgba(255,255,255,.7)); background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; text-transform: none; /* keep 'Major', not UPPERCASE */ letter-spacing: 0; cursor: default; pointer-events: none; /* not selectable/clickable */ } .menu .section:hover { background: transparent !important; } /* optional: nicer spacing under the search row */ .menu .search { padding: 8px 12px; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); } .menu .search + .section { margin-top: 8px; } /* in case you style ::selection globally */ .menu .section::selection { background: transparent; color: inherit; } /* ===== Number inputs: hide native spinners and add custom big buttons ===== */ input[type="number"] { -moz-appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border, rgba(255,255,255,.12)); background: var(--surface-2, rgba(255,255,255,.04)); font-size: 18px; line-height: 1; cursor: pointer; transition: transform .05s ease, background .15s ease, border-color .15s ease; } .icon-btn:hover { background: var(--surface-3, rgba(255,255,255,.08)); } .icon-btn:active { transform: scale(0.97); } .icon-btn.copied { background: #2e7d32; border-color: #2e7d32; color: #fff; } /* Spin input container */ .spin-input { position: relative; } .spin-input > input { width: 100%; padding-right: 86px; } /* space for two big buttons */ /* Big + / − buttons inside the field */ .spin-btn { position: absolute; top: 0; right: 0; height: 37px; width: 40px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .05s ease; } .spin-btn.down { right: 45px; } /* minus sits to the left */ .spin-btn:hover { background: color-mix(in oklab, var(--input-bg) 85%, #000 15%); border-color: var(--accent); } .spin-btn:active { transform: scale(0.98); } /* When the input is focused, echo the accent on the buttons */ .spin-input:has(input:focus) .spin-btn { border-color: var(--accent); } /* ===== Results: sticky on mobile & compact layout ===== */ /* Desktop: keep as a normal card */ .results-card {} /* Mobile: stick to bottom and compact */ @media (max-width: 700px) { .results-card { position: sticky; bottom: 0; z-index: 40; padding: 10px; border-radius: calc(var(--br) + 4px); background: color-mix(in oklab, var(--card) 92%, transparent); border-color: color-mix(in oklab, var(--border) 80%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,.28); backdrop-filter: blur(8px); border: 1px solid #cbcbcb; } .results-card .results-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; /* Lots | Money | Units */ gap: 8px; } .results-card .kpi { padding: 10px; background: var(--input-bg); border-color: var(--input-border); } .results-card .kpi .label { display: none; } /* tighter */ .results-card .kpi .value { font-size: 16px; } .results-card .kpi .muted { display: none; } /* hide sublines on mobile */ } /* ===== Optional: hide Units entirely ===== */ /* Toggle by setting data-hide-units="true" on (see note below) */ :root[data-hide-units="true"] #kpiUnitsWrap { display: none; } @media (max-width: 700px) { :root[data-hide-units="true"] .results-card .results-grid { grid-template-columns: 1fr 1fr; /* Lots | Money */ } } .fx-banner{position:absolute;bottom: 0;width: 100%; display:flex;gap:.75rem;align-items:center;justify-content:space-between; padding:.5rem .75rem;font-size:12px;line-height:1.2; background:var(--kpi-bg, rgba(0,0,0,.05));border-top:1px solid var(--border, rgba(0,0,0,.15));} .fxb-left{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap} .fxb-right{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap} .fx-dot{width:.6rem;height:.6rem;border-radius:50%;display:inline-block;border:1px solid var(--border, rgba(0,0,0,.25));vertical-align:middle;margin-right:.35rem} .fx-open{background: #16a34a;} /* green dot */ .fx-closed{background: #dc2626;} /* red dot */ .fx-pill{border:1px solid var(--border, rgba(0,0,0,.2));border-radius:999px;padding:.15rem .5rem; display:flex; align-items:center; gap:.35rem;} .fx-open-text{color:#16a34a; font-weight:600;} .fx-closed-text{color:#dc2626; font-weight:600;} .fx-times{opacity:.8} .fx-tz-btn{background:none;border:1px solid var(--border, rgba(0,0,0,.2));border-radius:6px;padding:.15rem .4rem;cursor:pointer} @media (max-width:900px){.fx-banner{font-size:11px;position: relative;} .fx-hide-sm{display:none}} /* ===== Calculate button loading state ===== */ button.primary { position: relative; } button.primary.is-loading { pointer-events: none; opacity: .9; } button.primary.is-loading::after { content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; transform: translateY(-50%); animation: fx-spin .8s linear infinite; } @keyframes fx-spin { to { transform: translateY(-50%) rotate(360deg); } } /* tiny success pop after finishing a calc */ button.primary.btn-done { animation: fx-pop .18s ease; } @keyframes fx-pop { from { transform: scale(.98); } to { transform: scale(1); } } /* ===== KPI tile loading state ===== */ .kpi.loading { position: relative; } .kpi.loading .value { opacity: .6; } .kpi.loading::after { content: ""; position: absolute; right: 10px; top: 10px; width: 14px; height: 14px; border: 2px solid var(--input-border); border-top-color: var(--accent); border-radius: 50%; animation: fx-spin .8s linear infinite; } /* Visible focus for keyboard users */ :focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--card, #111827); color: var(--text, #f9fafb); padding: 8px 12px; border-radius: 8px; z-index: 1000; } .skip-link:focus { left: 12px; top: 12px; } /* Visually hidden (still announced by SR) */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Combobox menus: ensure focus styles on options */ .menu [role="option"]:focus, .menu [role="option"][aria-selected="true"] { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* Logo theme swap using your data-theme attribute */ .logo--dark { display: none; } html[data-theme="dark"] .logo--light { display: none; } html[data-theme="dark"] .logo--dark { display: block; }