/* ========================================================================== KPI Tracking — page stylesheet (scoped to `.kpi`) - Mobile-first, fluid & responsive - Honors site variables with robust fallbacks - Accessible focus states, reduced motion support - Dark mode via [data-theme="dark"] on ========================================================================== */ /* ===== Base / Scope ====================================================== */ .kpi.container { max-width: 1120px; margin-inline: auto; padding: clamp(1.25rem, 3vw, 2rem) clamp(0.75rem, 2.5vw, 1.25rem) 4rem; } /* Local fallbacks if core vars are missing */ .kpi { --kpi-surface: var(--clr-surface, #ffffff); --kpi-surface-2: var(--clr-surface-2, #fafafa); --kpi-bg-muted: var(--chip-bg, #f3f4f6); --kpi-border: var(--clr-border, #e5e7eb); --kpi-text: var(--clr-text, #0f172a); --kpi-text-muted: color-mix(in oklab, var(--kpi-text) 65%, transparent); --kpi-accent: var(--accent, var(--brand, #2563eb)); --kpi-accent-ink: #fff; --kpi-radius: var(--radius-md, 12px); --kpi-radius-sm: 8px; --kpi-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06)); --kpi-shadow-md: 0 6px 16px rgba(0,0,0,.08); --kpi-focus: 0 0 0 3px color-mix(in oklab, var(--kpi-accent) 28%, transparent); --kpi-focus-border: color-mix(in oklab, var(--kpi-accent) 65%, #9ab6ff); --kpi-sticky-bg: color-mix(in oklab, var(--kpi-surface) 94%, transparent); --kpi-zebra: color-mix(in oklab, var(--kpi-bg-muted) 55%, transparent); --kpi-fade: linear-gradient(to right, color-mix(in oklab, var(--kpi-surface) 0%, transparent) 0%, color-mix(in oklab, var(--kpi-surface) 85%, transparent) 60%, var(--kpi-surface) 100%); } /* Dark theme refinements */ html[data-theme="dark"] .kpi { --kpi-surface: var(--clr-surface, #0b1220); --kpi-surface-2: color-mix(in oklab, var(--kpi-surface) 80%, #111827); --kpi-bg-muted: color-mix(in oklab, var(--kpi-surface) 75%, #1f2937); --kpi-border: color-mix(in oklab, #94a3b8 28%, transparent); --kpi-text: var(--clr-text, #e5e7eb); --kpi-text-muted: color-mix(in oklab, var(--kpi-text) 60%, transparent); --kpi-accent-ink: #0b1220; --kpi-shadow-sm: 0 1px 2px rgba(0,0,0,.35); --kpi-shadow-md: 0 8px 20px rgba(0,0,0,.45); --kpi-sticky-bg: color-mix(in oklab, var(--kpi-surface) 96%, transparent); --kpi-zebra: color-mix(in oklab, var(--kpi-surface) 86%, transparent); } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { .kpi * { animation: none !important; transition: none !important; } } /* Shared card */ .kpi .card { background: var(--kpi-surface); border: 1px solid var(--kpi-border); border-radius: var(--kpi-radius); padding: clamp(0.9rem, 1.6vw, 1.25rem); box-shadow: var(--kpi-shadow-sm); } /* Hover lift (subtle) */ .kpi .card:hover { box-shadow: var(--kpi-shadow-md); transition: box-shadow .25s ease; } /* Section header */ .kpi .section__head { margin: clamp(1.2rem, 3vw, 2rem) 0 1rem; } .kpi .section__title { margin: 0 0 .25rem; line-height: 1.2; } .kpi .section__sub { margin: 0 0 .75rem; color: var(--kpi-text-muted); max-width: 75ch; } /* Subtle small note */ .kpi .micro-note { color: var(--kpi-text-muted); font-size: .92rem; } /* ===== Hero =============================================================== */ .kpi-hero { display: grid; gap: .9rem; margin: .75rem 0 1.25rem; } .kpi-title { font-size: clamp(1.9rem, 1.2rem + 2.5vw, 2.65rem); letter-spacing: -.015em; margin: 0; } .kpi-subtitle { margin: .25rem 0 .75rem; max-width: 70ch; } .kpi-hero__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .kpi-hero__actions .btn { min-height: 44px; } /* ===== Layout Grids ======================================================= */ .kpi .grid.two { display: grid; gap: clamp(.8rem, 1.5vw, 1rem); grid-template-columns: 1fr 1fr; } .kpi .grid.three { display: grid; gap: clamp(.8rem, 1.5vw, 1rem); grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 960px) { .kpi .grid.two, .kpi .grid.three { grid-template-columns: 1fr; } } /* KPI cards */ .kpi-cards .card { display: flex; flex-direction: column; gap: .35rem; } .kpi-cards .card h3 i { color: var(--kpi-accent); margin-right: .4rem; } /* Lists */ .kpi .list-checks { list-style: none; padding-left: 0; margin: .25rem 0 0; display: grid; gap: .25rem; } .kpi .bullets { margin: 0; padding-left: 1.25rem; } .kpi .bullets li { margin: .25rem 0; } /* ===== Interactive bits: focus & inputs ================================== */ .kpi :where(a, button, input, select, textarea, summary):focus-visible { outline: none; box-shadow: var(--kpi-focus); border-color: var(--kpi-focus-border); } /* Remove spin buttons (number) for a cleaner look */ .kpi input[type="number"]::-webkit-outer-spin-button, .kpi input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .kpi input[type="number"] { appearance: textfield; text-align: right; } /* ===== Calculator ========================================================= */ .kpi .calc { display: grid; gap: .9rem; } .kpi .calc__grid { display: grid; gap: .6rem; grid-template-columns: repeat(5, minmax(180px, 1fr)); } .kpi .calc label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; background: var(--kpi-surface-2); border: 1px solid var(--kpi-border); border-radius: var(--kpi-radius-sm); padding: .75rem; } .kpi .calc label:focus-within { border-color: var(--kpi-focus-border); box-shadow: var(--kpi-focus); } .kpi .calc input[type="number"] { padding: .6rem .75rem; border: 1px solid var(--kpi-border); border-radius: var(--kpi-radius-sm); background: var(--kpi-surface); color: inherit; min-height: 44px; /* comfortable tap target */ } .kpi .calc .hint { font-weight: 400; color: var(--kpi-text-muted); font-size: .92rem; } /* Results panel */ .kpi .calc__results { display: grid; grid-template-columns: repeat(5, minmax(160px, 1fr)); gap: .6rem; margin: .25rem 0; } .kpi .calc__results > div { display: flex; flex-direction: column; gap: .25rem; padding: .6rem .7rem; border: 1px dashed var(--kpi-border); border-radius: var(--kpi-radius-sm); background: var(--kpi-surface-2); } .kpi .calc__results span { color: var(--kpi-text-muted); font-size: .94rem; } .kpi .calc__results strong { font-variant-numeric: tabular-nums; } /* Calc actions */ .kpi .calc__actions { display: flex; gap: .5rem; flex-wrap: wrap; } .kpi .calc__actions .btn { min-height: 40px; } /* Calculator responsive steps */ @media (max-width: 1280px) { .kpi .calc__grid { grid-template-columns: repeat(4, minmax(160px, 1fr)); } } @media (max-width: 1100px) { .kpi .calc__grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); } .kpi .calc__results { grid-template-columns: repeat(3, minmax(160px, 1fr)); } } @media (max-width: 820px) { .kpi .calc__grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); } .kpi .calc__results { grid-template-columns: repeat(2, minmax(150px, 1fr)); } } @media (max-width: 560px) { .kpi .calc__grid { grid-template-columns: 1fr; } .kpi .calc__results { grid-template-columns: 1fr; } } /* ===== Tracker ============================================================ */ .kpi .tracker .tracker__toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; position: sticky; top: .25rem; z-index: 3; background: var(--kpi-sticky-bg); border-bottom: 1px solid var(--kpi-border); padding-bottom: .5rem; backdrop-filter: blur(4px); } .kpi .tracker .toolbar-spacer { flex: 1 1 auto; } .kpi .tracker .file-btn input { display: none; } .kpi .tracker .file-btn { cursor: pointer; } .kpi .tracker .danger { color: #b91c1c; border-color: #b91c1c; } /* Table wrapper with scroll hint & custom scrollbar */ .kpi .table-wrap { overflow: auto; border: 1px solid var(--kpi-border); border-radius: var(--kpi-radius); position: relative; background: var(--kpi-surface); box-shadow: var(--kpi-shadow-sm) inset; } /* Fading hint at right edge to imply scroll */ .kpi .table-wrap::after { content: ""; position: sticky; right: 0; top: 0; bottom: 0; width: 28px; background: linear-gradient(to left, var(--kpi-surface) 55%, transparent 100%); pointer-events: none; } /* Scrollbar styling */ .kpi .table-wrap::-webkit-scrollbar { height: 10px; } .kpi .table-wrap::-webkit-scrollbar-track { background: transparent; } .kpi .table-wrap::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--kpi-border) 70%, transparent); border-radius: 999px; } @supports (scrollbar-color: auto) { .kpi .table-wrap { scrollbar-color: color-mix(in oklab, var(--kpi-border) 70%, transparent) transparent; scrollbar-width: thin; } } /* Data table */ .kpi table.data { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 920px; font-size: clamp(.92rem, .87rem + .15vw, 1rem); } .kpi table.data thead th { position: sticky; top: 0; z-index: 2; background: var(--kpi-sticky-bg); border-bottom: 1px solid var(--kpi-border); text-align: left; padding: .6rem .55rem; font-weight: 700; white-space: nowrap; } /* Sticky first column for better context on mobile scroll */ .kpi table.data th:first-child, .kpi table.data td:first-child { position: sticky; left: 0; z-index: 1; background: var(--kpi-sticky-bg); box-shadow: 1px 0 0 var(--kpi-border); } /* Body cells */ .kpi table.data tbody td { padding: .45rem .55rem; border-bottom: 1px solid var(--kpi-border); vertical-align: middle; background: transparent; } /* Zebra & hover */ .kpi table.data tbody tr:nth-child(odd) td { background: var(--kpi-zebra); } .kpi table.data tbody tr:hover td { background: color-mix(in oklab, var(--kpi-bg-muted) 70%, transparent); } /* Inputs within table */ .kpi table.data :where(input, select, textarea) { width: 100%; min-width: 90px; padding: .5rem .55rem; border: 1px solid var(--kpi-border); border-radius: 8px; background: var(--kpi-surface); color: inherit; min-height: 40px; } .kpi table.data :where(input[type="number"], .is-numeric) { text-align: right; font-variant-numeric: tabular-nums; } /* Action column */ .kpi table.data td:last-child { width: 48px; text-align: center; } .kpi .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--kpi-border); border-radius: 8px; background: transparent; transition: background .2s ease, transform .1s ease; } .kpi .icon-btn:hover { background: color-mix(in oklab, var(--kpi-bg-muted) 85%, transparent); } .kpi .icon-btn:active { transform: scale(.98); } /* Legend chips */ .kpi .legend-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; } .kpi .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border-radius: 999px; border: 1px solid var(--kpi-border); background: var(--kpi-bg-muted); line-height: 1.1; } /* ===== Details / Glossary ================================================= */ .kpi details { border: 1px solid var(--kpi-border); border-radius: var(--kpi-radius-sm); background: var(--kpi-surface-2); padding: .6rem .75rem; } .kpi details + details { margin-top: .6rem; } .kpi summary { cursor: pointer; font-weight: 600; list-style: none; position: relative; } .kpi summary::-webkit-details-marker { display: none; } .kpi summary::after { content: "\f107"; /* font awesome chevron-down */ font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: .25rem; transition: transform .2s ease; } .kpi details[open] summary::after { transform: rotate(180deg); } .kpi .details__content { margin-top: .35rem; color: var(--kpi-text-muted); } /* ===== Bench note ========================================================= */ .kpi .kpi-bench { margin-top: 1rem; background: linear-gradient(180deg, color-mix(in oklab, var(--kpi-accent) 9%, transparent) 0%, transparent 65%), var(--kpi-surface); border-style: dashed; } .kpi .kpi-bench .muted { color: var(--kpi-text-muted); } /* ===== Accessibility niceties ============================================ */ /* Focus-visible refinement for icon-only controls */ .kpi :where(.icon-btn, .btn):focus-visible { box-shadow: var(--kpi-focus); outline: none; } /* Provide helper utility for visually-hidden content (if not in core) */ .kpi .sr-only:not(:focus):not(:active) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== Print =============================================================== */ @media print { .nav, .kpi-hero__actions, .tracker .tracker__toolbar, #themeToggle { display: none !important; } .kpi.container { padding: 0; } .kpi .card { box-shadow: none; border-color: #999; break-inside: avoid; } .kpi table.data { font-size: 12px; min-width: 0; } .kpi table.data thead th, .kpi table.data tbody td { background: #fff !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .kpi table.data thead th { position: static; border-bottom: 1px solid #999; } .kpi table.data th:first-child, .kpi table.data td:first-child { position: static; box-shadow: none; } } /* ===== Small polish / micro-interactions ================================= */ /* Subtle button emphasis for primary inside this page (if .btn exists globally) */ .kpi .btn.btn--primary { box-shadow: 0 2px 0 color-mix(in oklab, var(--kpi-accent) 40%, transparent) inset; } /* Link underline offset for readability */ .kpi a { text-underline-offset: 2px; } /* Headings spacing tweak inside cards */ .kpi .card :where(h3, .h5) { margin: 0 0 .25rem; } /* Animated sticky shadow under table header (only when scrolling) */ @supports selector(:has(*)) { .kpi .table-wrap:has(tbody:hover) thead th { box-shadow: 0 2px 0 rgba(0,0,0,.05); } } /* ===== Responsive helpers for super narrow screens ======================= */ @media (max-width: 380px) { .kpi .kpi-hero__actions .btn { flex: 1 1 100%; } .kpi .section__title { font-size: 1.25rem; } } /* ===== Fine-tuned column sizing hints (optional, safe to ignore) ========= */ /* Slightly narrower "Type" and action columns */ .kpi table.data th:nth-child(2), .kpi table.data td:nth-child(2) { width: 120px; } .kpi table.data th:last-child, .kpi table.data td:last-child { width: 52px; } /* Encourage right-alignment for numeric columns even if free text appears */ .kpi table.data td:nth-child(3), .kpi table.data td:nth-child(4), .kpi table.data td:nth-child(5), .kpi table.data td:nth-child(6), .kpi table.data td:nth-child(7), .kpi table.data td:nth-child(8), .kpi table.data td:nth-child(9), .kpi table.data td:nth-child(10), .kpi table.data td:nth-child(11) { text-align: right; } /* Keep "Notes" comfortable */ .kpi table.data td:nth-child(12) { min-width: 220px; } /* ===== Visual emphasis accents =========================================== */ .kpi .list-checks li::marker { color: var(--kpi-accent); } .kpi .list-checks li i { color: var(--kpi-accent); } .kpi .calc__results > div strong[data-out] { padding: .1rem 0; border-bottom: 2px solid color-mix(in oklab, var(--kpi-accent) 35%, transparent); } /* ===== Helpers for on-page alerts / chips (future-proofing) ============== */ .kpi .chip.is-accent { background: color-mix(in oklab, var(--kpi-accent) 12%, var(--kpi-bg-muted)); border-color: color-mix(in oklab, var(--kpi-accent) 35%, var(--kpi-border)); color: color-mix(in oklab, var(--kpi-accent) 55%, var(--kpi-text)); }