/* H2O SHARED RUNTIME: Shared runtime · used across many tools — do not move */ /*! * h2o-ui.css — H2O Professional Services shared design system * "Shop-grade: porcelain & copper" * * One file, every page. Light-first (garage / sunlight readability), * dark available via . * * Rules of the system: * - Barlow Condensed = titles only (truck-door lettering). Inter = everything else. * - IBM Plex Mono ONLY for data the eye must align: IPN, codes, quantities. * - Copper is semantic, not decorative: money/cost figures + the brand seam. * - No glows, no grid overlays, no letterspaced-uppercase micro-labels. * - Touch: 56px min controls, 72px tiles, :active press states (iPads don't hover). */ /* ── Tokens ─────────────────────────────────────────────────────────── */ :root { /* surfaces */ --bg: #f6f8fb; /* porcelain */ --surface: #ffffff; --inset: #eef2f7; /* inputs, wells */ --line: #d9e2eb; /* real visible borders, no glow */ --line-strong: #b9c8d6; /* ink */ --ink: #142a3b; /* deep-water navy */ --ink-2: #4b6275; /* secondary */ --ink-3: #8195a7; /* hints / placeholders */ /* action */ --brand: #1d6fa8; /* H2O blue, deepened for white-background contrast */ --brand-down:#15578a; /* pressed */ --brand-soft:#e3eff8; /* selected / tinted fills */ /* the signature */ --copper: #b26b2c; /* trade metal: cost figures, seam, attention */ --copper-soft:#f7ece0; /* status — safety-sign clarity */ --ok: #1a8f5c; --ok-soft: #e3f3eb; --warn: #b26b2c; /* copper doubles as "warning" warmth */ --danger: #c23b2e; --danger-soft:#f9e8e6; /* shape & depth */ --radius: 4px; --radius-lg: 6px; --shadow: 0 1px 2px rgba(20,42,59,.06), 0 4px 14px rgba(20,42,59,.05); /* type */ --font-ui: 'Inter', -apple-system, system-ui, sans-serif; --font-display: 'Barlow Condensed', var(--font-ui); --font-data: 'IBM Plex Mono', ui-monospace, monospace; } :root[data-theme="dark"] { /* Field Spec Sheet — gunmetal body, blueprint-cyan brand, hi-vis amber accent */ --bg: #0b0f12; --surface: #141a1e; --inset: #1b2329; --line: #28323b; --line-strong: #3c5d6b; --ink: #e6edf1; --ink-2: #8492a0; --ink-3: #4c5a66; --brand: #3FB6CE; /* blueprint cyan */ --brand-down:#2c93a8; --brand-soft:#16242b; --copper: #F5A623; /* hi-vis amber — cost figures / attention */ --copper-soft:#241a0b; --ok: #3DD68C; --ok-soft: #102a1d; --danger: #e9573f; --danger-soft:#2c150f; --shadow: 0 1px 2px rgba(0,0,0,.34), 0 4px 14px rgba(0,0,0,.28); } /* ── Base ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 17px; line-height: 1.5; /* readable at arm's length */ -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; } h1, h2, h3, .h2o-display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .015em; line-height: 1.05; margin: 0; color: var(--ink); } h1 { font-size: 2.1rem; } h2 { font-size: 1.55rem; } h3 { font-size: 1.25rem; } small, .h2o-hint { font-size: .85rem; color: var(--ink-2); } a { color: var(--brand); } /* data values: the ONLY place mono lives */ .h2o-data { font-family: var(--font-data); font-size: .95em; } /* cost figures: copper, semantically */ .h2o-cost { font-family: var(--font-data); color: var(--copper); font-weight: 500; } /* the brand seam — copper joint line under the wordmark / section heads */ .h2o-seam { height: 3px; width: 64px; background: var(--copper); border-radius: 2px; margin-top: .5rem; } /* ── Cards & tiles ──────────────────────────────────────────────────── */ .h2o-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.1rem 1.25rem; } .h2o-tile { display: flex; align-items: center; gap: .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: .85rem 1rem; min-height: 64px; color: inherit; text-decoration: none; transition: transform .1s ease, background .15s ease, border-color .15s ease; } .h2o-tile:active { transform: scale(.98); background: var(--inset); border-color: var(--line-strong); } .h2o-tile > div { min-width: 0; } /* let the text column shrink instead of overflowing */ .h2o-tile-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 21px; } .h2o-tile-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; line-height: 1; } .h2o-tile-desc { font-size: .85rem; color: var(--ink-2); margin-top: .2rem; } /* tablet+ restores the roomier tile (desktop pages may scale further) */ @media (min-width: 768px) { .h2o-tile { gap: 1rem; padding: 1.05rem 1.2rem; min-height: 76px; } .h2o-tile-icon { width: 52px; height: 52px; font-size: 24px; } .h2o-tile-title { font-size: 1.45rem; } .h2o-tile-desc { font-size: .9rem; margin-top: .25rem; } } /* ── Buttons (56px floor — gloved thumbs) ───────────────────────────── */ .h2o-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 56px; padding: 0 1.4rem; font: 600 1.05rem var(--font-ui); letter-spacing: .01em; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .08s ease, background .15s ease; } .h2o-btn:active { transform: scale(.97); } .h2o-btn-primary { background: var(--brand); color: #fff; } .h2o-btn-primary:active { background: var(--brand-down); } .h2o-btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line-strong); } .h2o-btn-quiet:active { background: var(--inset); } .h2o-btn-danger { background: var(--danger); color: #fff; } .h2o-btn-sm { min-height: 44px; padding: 0 1rem; font-size: .95rem; } /* ── Inputs ─────────────────────────────────────────────────────────── */ .h2o-input, .h2o-select, .h2o-textarea { width: 100%; min-height: 56px; padding: .8rem 1rem; font: 400 1.05rem var(--font-ui); color: var(--ink); background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); outline: none; transition: border-color .15s ease, background .15s ease; } .h2o-input:focus, .h2o-select:focus, .h2o-textarea:focus { border-color: var(--brand); background: var(--surface); } .h2o-label { display: block; font: 600 .95rem var(--font-ui); color: var(--ink-2); margin: 0 0 .35rem .1rem; } /* ── Badges & status ────────────────────────────────────────────────── */ .h2o-badge { display: inline-flex; align-items: center; gap: .4rem; font: 600 .85rem var(--font-ui); padding: .3rem .7rem; border-radius: 999px; } .h2o-badge-ok { background: var(--ok-soft); color: var(--ok); } .h2o-badge-warn { background: var(--copper-soft); color: var(--copper); } .h2o-badge-danger { background: var(--danger-soft); color: var(--danger); } .h2o-badge-info { background: var(--brand-soft); color: var(--brand); } .h2o-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } /* ── Tables (reports) ───────────────────────────────────────────────── */ .h2o-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; } .h2o-table th { text-align: left; font: 600 .9rem var(--font-ui); color: var(--ink-2); padding: .7rem .9rem; border-bottom: 2px solid var(--line-strong); background: var(--inset); } .h2o-table td { padding: .8rem .9rem; border-bottom: 1px solid var(--line); font-size: 1rem; } .h2o-table td.num { font-family: var(--font-data); text-align: right; } /* ── Responsive layout system ─────────────────────────────────────────── * Mobile-FIRST: base styles are the phone layout; media queries only ADD * for bigger screens. Two breakpoints, used identically on every page: * ≥768px = tablet (iPad portrait) * ≥1024px = desktop (iPad landscape / Mac) * Never key layout on "is it an iPhone" — key it on available width. */ /* container: page column that widens with the screen */ .h2o-container { width: 100%; max-width: 560px; margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 768px) { .h2o-container { max-width: 760px; padding-inline: 1.5rem; } } @media (min-width: 1024px) { .h2o-container { max-width: 1020px; padding-inline: 2rem; } } /* grid: declare the arrangement instead of letting content decide. * .h2o-grid 1 column always (phones) * .h2o-grid.cols-2 1 col on phone → 2 cols ≥768px * .h2o-grid.cols-3 1 col → 2 cols ≥768px → 3 cols ≥1024px * .h2o-grid.pair 2 equal columns at EVERY size (side-by-side guaranteed) */ .h2o-grid { display: grid; gap: .8rem; grid-template-columns: 1fr; } .h2o-grid.pair { grid-template-columns: 1fr 1fr; } @media (min-width: 768px) { .h2o-grid.cols-2, .h2o-grid.cols-3 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .h2o-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } } /* show/hide helpers for the rare phone-vs-desktop difference */ .h2o-mobile-only { display: initial; } .h2o-desktop-only { display: none; } @media (min-width: 1024px) { .h2o-mobile-only { display: none; } .h2o-desktop-only { display: initial; } } /* ── Hover affordances (mouse only — touch devices skip this entirely) ── * @media (hover:hover) is the honest test for "a real pointer exists". * Phones/iPads keep press-down :active states; desktops get lift + shade. */ @media (hover: hover) { .h2o-tile:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(20,42,59,.08), 0 10px 28px rgba(20,42,59,.08); } .h2o-btn-primary:hover { background: var(--brand-down); } .h2o-btn-quiet:hover { background: var(--inset); border-color: var(--brand); } .h2o-btn-danger:hover { filter: brightness(.93); } } /* ── Motion discipline ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ────────────────────────────────────────────────────────────────────────── H2O custom scrollbar — app-wide. Uses theme vars so it adapts to light/dark. Slim, rounded, brand-blue gradient thumb that floats inside a transparent track (the 3px transparent border + background-clip gives the inset look). ────────────────────────────────────────────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: var(--brand) transparent; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--brand), var(--brand-down)); background-clip: padding-box; border: 3px solid transparent; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--brand-down), var(--brand)); background-clip: padding-box; border: 2px solid transparent; /* thumb fattens slightly on hover */ } ::-webkit-scrollbar-thumb:active { background: var(--brand-down); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; }