/* -----------------------------------------------------------------------------
* Edge — GT7 Telemetry — shared design system
*
* Tokens + page-shell rules + scrollbar styling shared across every page.
* Visual language is "digit-edge": navy-dominant surfaces, signature blue
* #409ed7 accents, sharp 6 px geometry, Inter throughout. Source of
* truth for the brand tokens lives in
* C:/Users/mihae/Documents/NEW Stream Overalys/Banners/design-systems/
* digit-edge/colors_and_type.css
* The design language was originally proven on the Banners > banner-creator
* tool and is mirrored here so the app and the marketing surfaces feel
* like the same product.
*
* Single-scroll-container rule:
* There is exactly ONE scrollbar per page and it lives on — which
* puts it at the right edge of the viewport. .gt7-main is NOT a scroll
* container. Pages that previously set `overflow:auto` on inner panels
* should not — those create "scrollbars in the middle of the window"
* which is exactly what the user complained about.
*
* The only sanctioned exception is a self-contained side panel (e.g.
* practice.html's drill sidebar) that's side-by-side with main content.
* Even those should be styled with .gt7-scroll so the scrollbar matches.
* -------------------------------------------------------------------------- */
/* Pull Inter from Google so the whole app uses the celeritas-tools-php /
* digit-edge brand face. Loaded via @import in this stylesheet so we don't
* have to add a to every HTML page. Display: swap so the page
* renders in fallback sans-serif while the woff2 streams in.
*
* Mirrors the celeritas digit-edge token:
* --de-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system,
* 'Helvetica Neue', Arial, sans-serif;
* (see celeritas-tools-php/static/css/digit-edge.css). Most pages already
* pulled in Inter via a per-page so this is largely redundant —
* keeping the @import here means a deleted/forgotten won't FOUC. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
/* Paint the digit-edge navy before anything else renders. Without this, the
* browser flashes its default white canvas between tab navigations (each
* tab is a full page load) before Tailwind's `bg-background-dark` utility
* kicks in. Setting it here — loaded in before Tailwind — means the
* very first paint is already the correct color. */
html, body {
background-color: #09162d;
color: #ffffff;
}
/* ── Date inputs — app-wide brand-match ──────────────────────────────
*
* The native browser date popup can only be styled with
* `color-scheme: dark` (gives a dark theme but no brand colours, no
* Inter font, no sharp digit-edge corners). For a fully-branded
* picker we ship our own — gt7-datepicker.js suppresses the native
* popup and renders the popup defined below.
*
* The native calendar-icon indicator is replaced with our own —
* white via `filter: invert` so it actually shows on the navy input.
* Hidden after JS enhancement (.gt7-dp-input) since our popup opens
* on click of the whole input anyway. */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
/* Replace the native black indicator glyph with our own white
* calendar SVG. The `filter: invert(1) brightness(2)` approach
* works in most Chromium versions, but Electron 28 has a quirk
* where the indicator's default rendering uses a paint method
* that's invisible to CSS filter. Setting background-image is
* more reliable — it replaces the native icon outright. The
* SVG is white-stroked at 2 px so it reads cleanly on the navy
* input background. !important on the colour-affecting properties
* to defeat any later Tailwind preflight that might land. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
width: 18px;
height: 18px;
/* Override the default black glyph that would otherwise still show
* underneath the background-image in some Chromium builds. */
color: transparent;
filter: none !important;
opacity: 0.85;
cursor: pointer;
transition: opacity 0.15s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
/* Native calendar-picker indicator stays VISIBLE (so the user has a
* visual cue that the field is a date) with the white-filter from above.
* `pointer-events: none` makes it click-through — the click passes to
* the input, whose mousedown handler fires our custom picker rather
* than the native one. The cursor on the input is already set by the
* page's input class (text/pointer), so the icon doesn't need its own. */
input.gt7-dp-input::-webkit-calendar-picker-indicator {
pointer-events: none;
}
/* Inline edit fields (the "dd / mm / yyyy" placeholder text inside
* the input). Slate-muted so empty state matches other inputs. */
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
color: rgba(226, 232, 240, 0.95);
}
input[type="date"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-text {
color: rgba(148, 163, 184, 0.6);
padding: 0 2px;
}
/* ── Custom date picker popup (driven by gt7-datepicker.js) ───────── */
.gt7-dp-popup {
background: rgba(9, 22, 45, 0.98);
border: 1px solid rgba(64, 158, 215, 0.4);
border-radius: 8px;
padding: 12px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(64, 158, 215, 0.18), 0 0 30px rgba(64, 158, 215, 0.18);
min-width: 268px;
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
color: rgba(226, 232, 240, 0.92);
user-select: none;
-webkit-user-select: none;
}
.gt7-dp-header {
display: flex; align-items: center; gap: 6px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(64, 158, 215, 0.16);
margin-bottom: 8px;
}
.gt7-dp-nav {
background: transparent;
border: 1px solid rgba(64, 158, 215, 0.28);
border-radius: 6px;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
color: rgba(226, 232, 240, 0.85);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
padding: 0;
}
.gt7-dp-nav:hover {
background: rgba(64, 158, 215, 0.18);
border-color: rgba(64, 158, 215, 0.55);
color: #ffffff;
}
.gt7-dp-nav .material-icons { font-size: 18px; line-height: 1; }
.gt7-dp-label {
flex: 1;
text-align: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: #ffffff;
}
.gt7-dp-dow {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: 4px;
}
.gt7-dp-dow span {
text-align: center;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.7);
padding: 4px 0;
}
.gt7-dp-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.gt7-dp-day {
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: rgba(226, 232, 240, 0.88);
cursor: pointer;
padding: 0;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.gt7-dp-day:hover {
background: rgba(64, 158, 215, 0.18);
border-color: rgba(64, 158, 215, 0.5);
color: #ffffff;
}
.gt7-dp-day.is-other {
color: rgba(148, 163, 184, 0.32);
}
.gt7-dp-day.is-today {
border-color: rgba(64, 158, 215, 0.55);
font-weight: 700;
}
.gt7-dp-day.is-selected {
background: #409ed7;
border-color: #409ed7;
color: #ffffff;
font-weight: 800;
box-shadow: 0 0 12px rgba(64, 158, 215, 0.4);
}
.gt7-dp-day.is-selected:hover {
background: #4baddf;
border-color: #4baddf;
}
.gt7-dp-footer {
display: flex;
gap: 8px;
justify-content: space-between;
padding-top: 8px;
border-top: 1px solid rgba(64, 158, 215, 0.16);
margin-top: 8px;
}
.gt7-dp-action {
background: transparent;
border: 1px solid rgba(64, 158, 215, 0.28);
border-radius: 6px;
padding: 5px 14px;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(226, 232, 240, 0.85);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gt7-dp-action:hover {
background: rgba(64, 158, 215, 0.18);
border-color: rgba(64, 158, 215, 0.55);
color: #ffffff;
}
.gt7-dp-action.gt7-dp-action--primary {
background: #409ed7;
border-color: #409ed7;
color: #ffffff;
}
.gt7-dp-action.gt7-dp-action--primary:hover {
background: #4baddf;
border-color: #4baddf;
}
/* App-wide Inter — matches celeritas-tools-php's `--de-font-sans` token
* exactly. Tailwind already has Inter configured per page via fontFamily,
* but this body-level rule with !important guarantees it wins even when
* a child has a stale Montserrat declaration that hasn't been migrated. */
body {
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Cross-document view transitions (Chromium 111+, which Electron uses).
* The browser cross-fades between page navigations so the visible "tabs
* jumping around" effect from each full page load disappears — even
* though we're not a SPA, the user perceives smooth transitions. */
@view-transition {
navigation: auto;
}
/* Reserve the sidebar nav's stacking position across the transition so it
* doesn't briefly reflow / shift on each navigation. Same idea for the
* sticky page header — both elements visually stay put while only the
* main content cross-fades. */
nav.fixed { view-transition-name: gt7-sidebar; }
.gt7-titlebar { view-transition-name: gt7-titlebar; }
/* Bake in critical sidebar link styles so they don't pop in once Tailwind
* loads (Tailwind CDN is async — there's a 50–100 ms gap on slow loads
* where utility classes like `flex flex-col items-center` aren't applied
* yet, which is the "moving" effect you see). These match the existing
* Tailwind output so nothing changes once Tailwind takes over. */
nav.fixed { display: flex; flex-direction: column; align-items: center; }
nav.fixed > div.flex.flex-col { display: flex; flex-direction: column; align-items: center; }
/* Fixed width on every sidebar link so the ACTIVE pill (bg-primary/10 rounded-lg
on the current page's link) is the SAME size on every tab — without this it
sized to each label, so "FAQ" got a small pill and "RECORDING"/"TELEMETRY" a
wide one. */
nav.fixed a { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; padding: 0.5rem; width: 5rem; box-sizing: border-box; color: #64748b; text-decoration: none; }
nav.fixed a span:last-child { white-space: nowrap; }
:root {
/* digit-edge brand colours (from colors_and_type.css). The Tailwind
* config in each HTML page maps `primary` and `background-dark` to
* these same hex values so utilities like `bg-primary/20` match. */
--gt7-bg: #09162d; /* page background — digit-edge navy */
--gt7-bg-elev-1: #0d1c38; /* card on page */
--gt7-bg-elev-2: #112344; /* card on card */
--gt7-bg-inset: #06102a; /* sunken — form inputs, terminal-like */
--gt7-bg-raised: rgba(13, 28, 56, 0.7);
--gt7-primary: #409ed7; /* signature digit-edge blue */
--gt7-primary-soft: rgba(64, 158, 215, 0.12);
--gt7-border: rgba(255, 255, 255, 0.08);
--gt7-border-strong: rgba(64, 158, 215, 0.4);
--gt7-text: #ffffff;
--gt7-text-dim: #b9c6dc;
--gt7-text-faint: #7a8aa6;
--gt7-radius: 6px; /* digit-edge: sharp, geometric */
--gt7-radius-card: 8px;
--gt7-nav-w: 6rem;
--gt7-header-h: 3.5rem;
--gt7-page-pad: 1.25rem;
--gt7-scrollbar: rgba(64, 158, 215, 0.35);
--gt7-scrollbar-hover: rgba(64, 158, 215, 0.6);
}
/* -----------------------------------------------------------------------------
* Themed scrollbars — matches the blue/dark palette instead of default OS grey.
*
* Applied globally so every scrollable element (body, aside, modals, tables)
* gets the same treatment. Keeps the bar narrow and translucent so it doesn't
* draw attention.
* -------------------------------------------------------------------------- */
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: var(--gt7-scrollbar);
border-radius: 8px;
border: 2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background: var(--gt7-scrollbar-hover);
background-clip: padding-box;
border: 2px solid transparent;
}
/* Firefox */
* {
scrollbar-color: var(--gt7-scrollbar) transparent;
scrollbar-width: thin;
}
/* -----------------------------------------------------------------------------
* Page shell — uses the natural document flow so body = scroll container.
*
* html/body: no overflow rules that would trap scroll inside a child. The
* existing per-page `body { overflow-x: hidden }` stays (prevents accidental
* horizontal scroll on narrow viewports) — we only touch overflow-y.
* -------------------------------------------------------------------------- */
html, body {
overflow-y: auto; /* body scrolls → scrollbar on window right edge */
}
/* -----------------------------------------------------------------------------
* .gt7-shell — outer column (right of the fixed sidebar)
*
* All pages put their header + main inside a flex column that starts at the
* left edge of the content area (past the 96px sidebar). This class
* replicates the hand-written `ml-24 flex flex-col min-h-screen` combo so
* pages that opt in get it in one token.
* -------------------------------------------------------------------------- */
.gt7-shell {
margin-left: var(--gt7-nav-w);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* -----------------------------------------------------------------------------
* .gt7-main — standard page content area
*
* Before: had max-width:1400px + margin:auto → content centered with empty
* gutters on wide screens AND the scrollbar appeared in the middle of the
* window when overflow was set. Both fixed by letting main fill the width
* and deferring scrolling to .
*
* We still keep flex-column layout so `.gt7-fill` children expand to
* remaining vertical space on pages like recording.
* -------------------------------------------------------------------------- */
.gt7-main {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
width: 100%;
padding: var(--gt7-page-pad);
gap: 0.75rem;
}
/* .gt7-main--scroll is now a NO-OP shell (body already scrolls) but kept so
* existing class attrs don't fail any expectations. */
.gt7-main--scroll {
/* intentionally empty — body is the scroll container */
}
/* .gt7-main--wide used to turn off the max-width cap; now main is always full
* width so this is also a no-op. Left as a marker class. */
.gt7-main--wide {
/* intentionally empty */
}
/* -----------------------------------------------------------------------------
* .gt7-fill — child that takes the remaining vertical space
*
* For pages with a main content pane (recording's map, dashboard panels)
* that should stretch to fit the viewport instead of pegging to a content
* height. Uses flex:1 + min-height:0 so it plays nicely inside .gt7-main.
* -------------------------------------------------------------------------- */
.gt7-fill {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
}
/* For pages that genuinely need a scrollable inner panel (practice's sticky
* drill sidebar), attach this class so the scrollbar matches the theme. */
.gt7-scroll {
overflow-y: auto;
scrollbar-gutter: stable;
}
/* -----------------------------------------------------------------------------
* Cards / sections — one look across pages.
* -------------------------------------------------------------------------- */
.gt7-card {
background: var(--gt7-bg-raised);
border: 1px solid var(--gt7-border);
border-radius: var(--gt7-radius);
padding: 1rem 1.25rem;
}
.gt7-card--accent {
border-left: 3px solid var(--gt7-primary);
}
.gt7-card-title {
margin: 0 0 0.75rem 0;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--gt7-text-dim);
border-bottom: 1px solid var(--gt7-border);
padding-bottom: 0.5rem;
}
/* -----------------------------------------------------------------------------
* digit-edge utility classes
*
* Mirrors the patterns used by the banner-creator marketing tool so the
* app and the marketing surfaces feel like the same product. Use these
* for new UI work; existing Tailwind utility-based markup keeps working
* unchanged because we only changed the colour TOKENS, not the classes.
* -------------------------------------------------------------------------- */
/* Card with the brand-blue accent rail on the left, mirroring the Tires +
* Telemetry — digit-edge overlay. Padding 18 px / 20 px is the rhythm the
* banner-creator uses on its `.gen-card`. */
.de-card {
position: relative;
background: var(--gt7-bg-elev-1);
border: 1px solid var(--gt7-border);
border-radius: var(--gt7-radius-card);
padding: 18px 20px;
}
.de-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--gt7-primary);
border-radius: var(--gt7-radius-card) 0 0 var(--gt7-radius-card);
}
/* Section heading — small, uppercase, wide-tracked. The visual signature
* of the banner-creator side-panels and our admin section heads. */
.de-heading {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
color: var(--gt7-text-dim);
text-transform: uppercase;
margin: 0 0 0.75rem 0;
}
/* Primary CTA — solid brand blue with navy text. This is the banner
* creator's main "Generate" button styling. */
.de-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 18px;
background: var(--gt7-primary);
color: var(--gt7-bg);
border: 0;
border-radius: 4px;
font-family: inherit;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;
box-shadow: 0 4px 12px rgba(64, 158, 215, 0.25);
}
.de-btn-primary:hover { filter: brightness(1.1); box-shadow: 0 6px 18px rgba(64, 158, 215, 0.45); }
.de-btn-primary:active { transform: translateY(1px); }
.de-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
/* Ghost button — for secondary actions next to a primary. */
.de-btn-ghost {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
background: transparent;
border: 1px solid var(--gt7-border);
border-radius: 4px;
color: var(--gt7-text-dim);
font-family: inherit;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: border-color 120ms ease, color 120ms ease;
}
.de-btn-ghost:hover { border-color: var(--gt7-primary); color: var(--gt7-primary); }
/* Form input — the banner-creator's deep-inset, blue-focus look. Apply
* to ,