/* Caelowx design tokens. Loaded after design-system.css and app.css, and deliberately last: part of what this file does is reconcile the two token systems that were already here. THE TWO SYSTEMS, AND WHY THIS BRIDGES THEM ------------------------------------------ design-system.css declares --app-* on :root and body.theme-*, and the .app-* primitives (.app-input, .app-button, .app-badge, .app-message) are built from them. app.css declares a parallel --bg/--surface/--accent set on .weather-shell, and every shell page is built from those. They hold near-identical values and are declared twice, so a page using an .app-* primitive inside a .weather-shell was resolving colour from body while everything around it resolved from the shell. The two happened to agree; nothing made them. The bridge at the bottom of each theme block points --app-* at the shell's own values, so a shared primitive is correct wherever it is used and there is one place to change a colour. WHAT BELONGS HERE ----------------- Scales that are theme-independent (spacing, radius, type, control heights, motion) are declared once on :root. Colour is declared per theme, and only as *semantic* names - what a colour means, never what it looks like. A component asks for --cx-measurement-rainfall or --cx-balance-deficit; it does not ask for blue or red, and it does not carry a hex value of its own. Namespaces are separate even where they resolve to the same underlying colour, because the meanings move independently: Alert.Warning and Measurement.Solar are both amber today and there is no reason they must stay that way. */ /* ============================================================ scales, one copy */ :root { /* Spacing. Four steps of 4 and then a coarser tail, which is enough for a page header, a toolbar, card padding and the gaps between cards without every surface inventing a value. */ --cx-space-1: 4px; --cx-space-2: 6px; --cx-space-3: 8px; --cx-space-4: 10px; --cx-space-5: 12px; --cx-space-6: 16px; --cx-space-7: 20px; --cx-space-8: 24px; --cx-space-9: 32px; /* Radius. --cx-radius-md is the control radius and matches the platform's existing inputs; --cx-radius-lg is the card and panel radius. */ --cx-radius-sm: 8px; --cx-radius-md: 10px; --cx-radius-lg: 13px; --cx-radius-pill: 999px; /* Type. Taken from the Dashboard rather than invented, because the Dashboard is the baseline the rest of the application is being aligned to: --cx-text-display is its station heading, --cx-text-eyebrow its kicker, --cx-text-xs its subtitle. Nothing here is larger than what the Dashboard already uses. */ --cx-text-eyebrow: .56rem; --cx-text-2xs: .58rem; --cx-text-xs: .64rem; --cx-text-sm: .68rem; --cx-text-md: .72rem; --cx-text-lg: .82rem; --cx-text-xl: .95rem; --cx-text-display: 1.55rem; --cx-leading-tight: 1.25; --cx-leading: 1.45; --cx-weight-regular: 400; --cx-weight-medium: 500; --cx-weight-semibold: 650; --cx-weight-bold: 750; --cx-weight-heavy: 800; --cx-tracking-eyebrow: .11em; --cx-tracking-display: -.04em; /* The page gutter, taken from the Dashboard's own .dashboard-main so a reader moving between it and Reports does not see the content shift in from the edges. Named here so a third surface adopts it rather than measuring it. */ --cx-page-pad-top: 14px; --cx-page-pad-x: 18px; --cx-page-pad-bottom: 28px; --cx-page-pad-x-phone: 13px; --cx-page-pad-bottom-phone: 26px; /* Mobile shell chrome. The bars own their dimensions and the shell reserves clearance from these, so a bar's height and the space kept for it cannot drift apart. */ --cx-mobile-bar-height: 56px; --cx-bottom-bar-height: 68px; /* One compact desktop chrome dimension: the collapsed navigation rail and artwork-free app top meet in a square logo zone. */ --cx-compact-chrome-size: 60px; --cx-rail-button-size: 48px; --cx-rail-divider-size: 1px; --cx-rail-gutter: calc( (var(--cx-compact-chrome-size) - var(--cx-rail-button-size) - var(--cx-rail-divider-size)) / 2); /* What a phone page must keep clear at the bottom: the fixed bar, the device's own inset, and a little air so the last item is not flush against the bar. */ --cx-bottom-bar-clearance: calc( var(--cx-bottom-bar-height) + env(safe-area-inset-bottom) + var(--cx-space-3)); /* ------------------------------------------------------------------ layering One ordering, named, because the alternative is what was here: a bottom bar at 5000 that painted over the Reports Export menu at 810, and no way to see that from either file. Chrome is deliberately the lowest. A menu the reader has just opened should cover the navigation, not be covered by it. */ --cx-z-chrome: 100; --cx-z-popover-backdrop: 800; --cx-z-popover: 810; --cx-z-menu: 1000; --cx-z-dialog: 3000; /* Controls. One height for anything that sits in a toolbar row - a search box, a select, an icon button - so they read as one family however wide they are. */ --cx-control-height: 38px; --cx-control-height-sm: 30px; --cx-control-padding-x: 11px; /* The Reports frame's two reserved rows. The navigation row's height follows the tallest thing in it - the primary action, at --cx-control-height plus its own bottom padding - and Report View puts a breadcrumb in the same place. Reserving it here means every Reports surface begins its content at the same y, whatever it happens to contain. */ --cx-reports-row-height: 48px; --cx-reports-row-height-phone: 92px; /* Interaction. One focus ring and one transition, so hover and focus feel the same on a tab, a card, a pill and a toolbar control. */ --cx-focus-width: 2px; --cx-focus-offset: 2px; --cx-transition: 120ms ease; /* How strongly a surface reacts to a pointer. Kept as tokens because the Library's selected card was visibly heavier than anything on the Dashboard, and "heavier" is a number somebody has to be able to find. */ --cx-hover-lift: color-mix(in srgb, var(--cx-ink) 4%, transparent); --cx-selected-border: color-mix(in srgb, var(--cx-accent) 55%, var(--cx-line)); } /* ==================================================================== dark theme */ :root, body.theme-dark, .weather-shell.theme-dark.theme-caelowx { /* The two structural colours the tokens above refer back to. */ --cx-ink: #ffffff; --cx-line: #3b3b3b; --cx-accent: #49b6e8; /* --- Measurement: what is being measured -------------------------------- */ /* Rainfall and water are the Water Balance's accepted inflow and outflow, and they are the reason this namespace exists: those two colours were already decided by a live review and had to become the platform's names for them rather than two literals inside one chart. */ --cx-measurement-rainfall: #1687e8; --cx-measurement-water: #e0a92e; --cx-measurement-temperature: #f0895f; --cx-measurement-humidity: #5fc9c0; --cx-measurement-wind: #9aa7b8; --cx-measurement-solar: #f5c451; --cx-measurement-pressure: #8b6ce8; --cx-measurement-air-quality: #7fcf7f; --cx-measurement-conditions: #9db4d0; --cx-measurement-lightning: #f5c451; /* --- Alert: how serious something is ------------------------------------ */ --cx-alert-info: #50c3e5; --cx-alert-success: #42c77a; --cx-alert-warning: #f29f3d; --cx-alert-danger: #e84b63; /* --- Status: whether a thing is working --------------------------------- */ --cx-status-ok: #42c77a; --cx-status-degraded: #f29f3d; --cx-status-offline: #e84b63; --cx-status-unknown: #9d9d9d; /* --- Delta: which way a value moved ------------------------------------- */ /* Aliases, deliberately. A change going up is not the same idea as a healthy status or a surplus of water, and the day one of those moves this should not follow it - but there is no new colour here, only an existing one given the name of what it means in a report. */ --cx-delta-positive: var(--cx-alert-success); --cx-delta-negative: var(--cx-alert-danger); --cx-delta-neutral: var(--cx-status-unknown); /* --- Balance: which side of zero ---------------------------------------- */ /* The accepted Water Balance semantics: red below the line, green above, neutral for a span the report could not compute and will not claim a sign for. Mirrored in CaelowxChart.Palette, which Syncfusion needs as literals - CaelowxSemanticColourTests pins the two together. */ --cx-balance-deficit: #e84b63; --cx-balance-surplus: #42c77a; --cx-balance-neutral: #8b97a8; /* --- Condition: what the sky is doing ----------------------------------- */ --cx-condition-clear: #f5c451; --cx-condition-cloud: #9db4d0; --cx-condition-precipitation: #1687e8; --cx-condition-severe: #f36b3f; } /* =================================================================== light theme */ body.theme-light, .weather-shell.theme-light { --cx-ink: #000000; --cx-line: #d1d1d1; --cx-accent: #1677a5; --cx-measurement-rainfall: #1c7ed6; --cx-measurement-water: #b3760c; --cx-measurement-temperature: #c2551f; --cx-measurement-humidity: #17827a; --cx-measurement-wind: #5f6d80; --cx-measurement-solar: #9a6700; --cx-measurement-pressure: #6d43b8; --cx-measurement-air-quality: #2f8a3f; --cx-measurement-conditions: #4a6480; --cx-measurement-lightning: #9a6700; --cx-alert-info: #1677a5; --cx-alert-success: #237d43; --cx-alert-warning: #9a6700; --cx-alert-danger: #b52343; --cx-status-ok: #2f9e56; --cx-status-degraded: #d28b3e; --cx-status-offline: #d4635a; --cx-status-unknown: #626262; /* --- Delta: which way a value moved ------------------------------------- */ /* Aliases, deliberately. A change going up is not the same idea as a healthy status or a surplus of water, and the day one of those moves this should not follow it - but there is no new colour here, only an existing one given the name of what it means in a report. */ --cx-delta-positive: var(--cx-alert-success); --cx-delta-negative: var(--cx-alert-danger); --cx-delta-neutral: var(--cx-status-unknown); --cx-balance-deficit: #d63a3a; --cx-balance-surplus: #1f9e57; --cx-balance-neutral: #7a8798; --cx-condition-clear: #9a6700; --cx-condition-cloud: #4a6480; --cx-condition-precipitation: #1c7ed6; --cx-condition-severe: #b52343; } /* ====================================================== the bridge, both themes */ /* --app-* inside a shell resolves from the shell rather than from body, so a shared .app-* primitive used on a shell page is theme-correct by construction instead of by the two palettes happening to match. */ .weather-shell { --app-bg: var(--bg); --app-surface: var(--surface); --app-surface-2: var(--surface-2); --app-surface-3: var(--surface-3); --app-border: var(--border); --app-text: var(--text); --app-muted: var(--muted); --app-accent: var(--accent); --app-accent-soft: var(--accent-soft); --app-success: var(--success); --app-warning: var(--warning); --app-danger: var(--danger); --app-radius-sm: var(--cx-radius-sm); --app-radius-md: var(--cx-radius-md); --app-radius-lg: var(--cx-radius-lg); --app-on-accent: var(--on-accent, #ffffff); } /* Rainfall had two blues: --rain, used by the Dashboard's rain and humidity glyphs, and the Water Balance's inflow. One measurement cannot have two colours, and the accepted chart is the one that was reviewed - so --rain now resolves to the semantic name. Declared at .theme-* specificity so it wins over app.css's own two declarations without either being deleted. */ .weather-shell.theme-dark.theme-caelowx, .weather-shell.theme-light { --rain: var(--cx-measurement-rainfall); } /* ======================================================= shared state surfaces */ /* Empty, loading and error look the same wherever they appear. They used to be page-local paragraphs, so an empty Library and an empty Templates shelf were two different-looking apologies. CaelowxState renders these. */ .cx-state { align-items: center; background: var(--surface, var(--app-surface)); border: 1px dashed var(--border, var(--app-border)); border-radius: var(--cx-radius-lg); display: flex; flex-direction: column; gap: var(--cx-space-3); justify-content: center; padding: var(--cx-space-9) var(--cx-space-7); text-align: center; } .cx-state-icon { align-items: center; background: var(--accent-soft, var(--app-accent-soft)); border-radius: var(--cx-radius-lg); color: var(--accent, var(--app-accent)); display: inline-flex; height: 44px; justify-content: center; width: 44px; } .cx-state-title { font-size: var(--cx-text-xl); font-weight: var(--cx-weight-semibold); margin: 0; } .cx-state-body { color: var(--muted, var(--app-muted)); font-size: var(--cx-text-md); line-height: var(--cx-leading); margin: 0; max-width: 52ch; } .cx-state-actions { display: flex; flex-wrap: wrap; gap: var(--cx-space-3); justify-content: center; margin-top: var(--cx-space-2); } /* An error is the same shape, said in the alert namespace. A solid border rather than a dashed one: dashed reads as "nothing here yet", which a failure is not. */ .cx-state-error { border-style: solid; border-color: color-mix(in srgb, var(--cx-alert-danger) 38%, var(--border, var(--app-border))); } .cx-state-error .cx-state-icon { background: color-mix(in srgb, var(--cx-alert-danger) 12%, transparent); color: var(--cx-alert-danger); } /* Loading says so quietly and does not pretend to be a result. */ .cx-state-loading { border-style: solid; } .cx-state-loading .cx-state-icon { animation: cx-state-pulse 1.4s ease-in-out infinite; } @keyframes cx-state-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cx-state-loading .cx-state-icon { animation: none; } } /* ================================================= CaeloWX Dark foundation Dark is the first branded theme slice. Light intentionally keeps its existing palette and identity until its own approved conversion. Geometry, card anatomy, responsive rules and interaction behavior remain owned by their existing files. */ @font-face { font-display: swap; font-family: "Manrope"; font-style: normal; font-weight: 400 800; src: url("fonts/manrope-latin-400-800.woff2") format("woff2"); } .weather-shell.theme-light.theme-caelowx { /* The logo's medium wave blue, desaturated into working surfaces. This is daylight, not white paper: every layer retains a visible blue identity. */ --cx-background: #bdd4e2; --cx-surface: #d5e5ee; --cx-card: #e4eff5; --cx-elevated: #c7dce8; --cx-border: #86abc0; --cx-text-primary: #06172f; --cx-text-secondary: #294f69; --cx-text-muted: #486b81; --cx-primary: #0879c9; --cx-brand-accent: #50c3e5; --bg: var(--cx-background); --surface: var(--cx-surface); --surface-2: var(--cx-card); --surface-3: var(--cx-elevated); --border: var(--cx-border); --text: var(--cx-text-primary); --muted: var(--cx-text-muted); --accent: var(--cx-primary); --accent-soft: color-mix(in srgb, var(--cx-primary) 12%, transparent); --on-accent: #ffffff; --text-secondary: var(--cx-text-secondary); --cx-ink: var(--cx-text-primary); --cx-line: var(--cx-border); --cx-accent: var(--cx-primary); font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; } .weather-shell.theme-light.theme-caelowx.dashboard-hero-header .dashboard-main { background: radial-gradient(circle at 42% -12%, color-mix(in srgb, var(--cx-brand-accent) 16%, transparent), transparent 34rem), linear-gradient(180deg, #c9e0ea 0%, var(--cx-background) 48rem); } .weather-shell.theme-light.theme-caelowx.dashboard-hero-header .wpdn-grid .wpc-card { background: linear-gradient(148deg, #edf5f8 0%, var(--cx-card) 60%, #d6e6ee 100%); border-color: color-mix(in srgb, var(--cx-border) 78%, var(--cx-primary)); box-shadow: 0 9px 22px rgba(6, 23, 47, .14), inset 0 1px 0 rgba(255, 255, 255, .68); } .weather-shell.theme-light.theme-caelowx.dashboard-hero-header .wpdn-grid .wpc-tile { background: linear-gradient(180deg, #dceaf1 0%, #c8dde8 100%); border-color: color-mix(in srgb, var(--cx-border) 82%, var(--cx-primary)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 12px rgba(6, 23, 47, .11); } .weather-shell.theme-dark.theme-caelowx { --cx-background: #06172f; --cx-surface: #081d38; --cx-card: #0b2442; --cx-elevated: #103054; --cx-border: #1b3f6b; --cx-text-primary: #f5fbfd; --cx-text-secondary: #a9c3d9; --cx-text-muted: #7ea0bd; --cx-primary: #1687e8; --cx-brand-accent: #50c3e5; /* Existing components already consume these stable shell names. Mapping the approved tokens here reaches the shell without changing component contracts. */ --bg: var(--cx-background); --surface: var(--cx-surface); --surface-2: var(--cx-card); --surface-3: var(--cx-elevated); --border: var(--cx-border); --text: var(--cx-text-primary); --muted: var(--cx-text-muted); --accent: var(--cx-primary); --accent-soft: color-mix(in srgb, var(--cx-primary) 16%, transparent); --on-accent: #ffffff; --success: var(--cx-alert-success); --warning: var(--cx-alert-warning); --danger: var(--cx-alert-danger); --success-indicator: var(--cx-status-ok); --warning-indicator: var(--cx-status-degraded); --danger-indicator: var(--cx-status-offline); --text-secondary: var(--cx-text-secondary); --cx-ink: var(--cx-text-primary); --cx-line: var(--cx-border); --cx-accent: var(--cx-primary); font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; } /* CaeloWX Nightshade keeps every approved Dark component, dimension and semantic weather color, then deepens only the structural layers to the V2 Night/OLED palette. This must follow the Dark foundation so its more-specific structural values remain the final word in the cascade. */ .weather-shell.theme-dark.theme-oled.theme-caelowx { --cx-background: #3a3a3a; --cx-surface: #303030; --cx-card: #242424; --cx-elevated: #303030; --cx-border: #565656; --cx-text-primary: #f5fbfd; --cx-text-secondary: #d3d3d3; --cx-text-muted: #ababab; --cx-primary: #d8d8d8; --cx-brand-accent: #f0f0f0; /* NIGHTSHADE'S ACCENT IS A LIGHT GREY, so white on it is not a colour choice - it is an unreadable one. Measured on a primary button: #ffffff on #d8d8d8 is about 1.4:1. This is the one theme where the foreground has to invert, and naming it here rather than at each call site is what keeps the other three themes from having to know. #242424 is the card layer, so the pairing stays inside the palette; it reads at roughly 10.9:1. */ --on-accent: #242424; } /* Cards are the third level in the approved hierarchy. This changes only their skin; footprints, placement, padding, internal anatomy and states are untouched. `.app-card` USED TO BE IN THIS SELECTOR AND IS DELIBERATELY NOT ANY MORE. It pinned the shared card to --cx-card, which IS --surface-2 - the same token every surface designed to sit INSIDE a card asks for. So in Administration a card and the things nested in it resolved to one colour, #0b2442 on #0b2442, and the ladder the theme defines collapsed to a single step separated only by a 1px border: the Overview's area tiles, the Cases create panel and agent gate, the AI recommendation body, the group cards and the thread entries all read as flat against their own parents. Removing it costs the Dashboard nothing, which is the reason this is safe rather than a trade. The Dashboard draws no `.app-card` at all - it is a `.wpc-card` surface, and on /dashboard-next even those take the hero gradient rather than this background-color. The live consumers are Administration and the capture-preview dialog, and both want the ladder. `.app-card` now resolves to its own `var(--app-surface)` as design-system.css declares, so the steps are --bg -> --surface -> --surface-2 again. */ .weather-shell.theme-dark.theme-caelowx .wpc-card { background-color: var(--cx-card); } /* The reference dashboard is not a stack of flat navy rectangles. Its depth comes from three quiet cues used together: a lifted top-left sheen, a deeper lower edge, and a cool border that catches the surrounding blue light. Dashboard owns the composition; the shared card system still owns every footprint and region. */ .weather-shell.theme-dark.theme-caelowx.dashboard-hero-header .dashboard-main { background: radial-gradient( circle at 42% -12%, color-mix(in srgb, var(--cx-primary) 12%, transparent), transparent 34rem ), linear-gradient( 180deg, color-mix(in srgb, var(--cx-background) 86%, var(--cx-card)) 0%, var(--cx-background) 48rem ); } .weather-shell.theme-dark.theme-caelowx.dashboard-hero-header .wpdn-grid .wpc-card { background: radial-gradient( ellipse at 16% -8%, color-mix(in srgb, var(--cx-brand-accent) 10%, transparent) 0%, transparent 44% ), linear-gradient( 148deg, color-mix(in srgb, var(--cx-card) 88%, var(--cx-elevated)) 0%, var(--cx-card) 58%, color-mix(in srgb, var(--cx-card) 82%, var(--cx-background)) 100% ); border-color: color-mix(in srgb, var(--cx-border) 78%, var(--cx-brand-accent)); box-shadow: 0 10px 24px color-mix(in srgb, var(--cx-background) 48%, transparent), inset 0 1px 0 color-mix(in srgb, var(--cx-text-primary) 7%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--cx-background) 44%, transparent); } /* Forecast periods read as individual pieces of glass inside their parent card, matching the mockup without changing rail width, scrolling or selection logic. */ .weather-shell.theme-dark.theme-caelowx.dashboard-hero-header .wpdn-grid .wpc-tile { background: linear-gradient( 180deg, color-mix(in srgb, var(--cx-elevated) 38%, var(--cx-card)) 0%, color-mix(in srgb, var(--cx-card) 86%, var(--cx-background)) 100% ); border-color: color-mix(in srgb, var(--cx-border) 82%, var(--cx-brand-accent)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cx-text-primary) 6%, transparent), 0 4px 12px color-mix(in srgb, var(--cx-background) 32%, transparent); } .weather-shell.theme-dark.theme-caelowx.dashboard-hero-header .wpdn-grid .wpc-title, .weather-shell.theme-dark.theme-caelowx.dashboard-hero-header .wpdn-grid .wpc-stat-label { text-shadow: 0 1px 10px color-mix(in srgb, var(--cx-background) 72%, transparent); } .weather-shell.theme-dark.theme-caelowx.dashboard-hero-header .wpdn-grid .wpc-stat-label, .weather-shell.theme-dark.theme-caelowx.dashboard-hero-header .wpdn-grid .wpc-meta { color: color-mix(in srgb, var(--cx-text-secondary) 82%, var(--cx-text-primary)); } /* Keep the dark basemap and radar sweep inside the same luminous frame as the surrounding cards. Leaflet remains responsible for all map interaction. */ .weather-shell.theme-dark.theme-caelowx.dashboard-hero-header .radar-map { border-color: color-mix(in srgb, var(--cx-border) 72%, var(--cx-brand-accent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cx-text-primary) 5%, transparent), 0 8px 20px color-mix(in srgb, var(--cx-background) 38%, transparent); } /* The station identifies the dashboard; it is not the dashboard's hero content. Keep it clearly above card headings without letting it overpower the readings. */ .weather-shell.theme-dark.theme-caelowx .station-heading h1 { font-size: 1.3rem; letter-spacing: -.025em; } /* Temperature and UV keep the card system's established thresholds and class names. Only the Dark presentation changes: heat runs through amber, orange and red; cold runs through cyan, blue and purple. The UV card intentionally reads the same bands, producing Low green, Moderate amber, High orange, and Very High/Extreme red without introducing a second category table. */ .weather-shell.theme-dark.theme-caelowx .wpc-card { --wpc-temp-extreme-hot: color-mix(in srgb, var(--cx-alert-danger) 80%, var(--cx-text-primary)); --wpc-temp-hot: var(--cx-alert-danger); --wpc-temp-warm: var(--cx-condition-severe); --wpc-temp-mild: var(--cx-alert-warning); --wpc-temp-comfortable: var(--cx-alert-success); --wpc-temp-neutral: var(--cx-text-secondary); --wpc-temp-cool: var(--cx-brand-accent); --wpc-temp-cold: var(--cx-primary); --wpc-temp-freezing-risk: color-mix(in srgb, var(--cx-primary) 70%, var(--cx-measurement-pressure)); --wpc-temp-very-cold: color-mix(in srgb, var(--cx-primary) 35%, var(--cx-measurement-pressure)); --wpc-temp-extreme-cold: var(--cx-measurement-pressure); } /* Preserve the existing Weather Platform identity in Light. Dark swaps in exact package artwork; the compact rail uses the approved full-colour C mark. */ .brand-caelowx-lockup, .brand-caelowx-lockup-light, .brand-caelowx-lockup-nightshade, .brand-caelowx-mark, .brand-caelowx-composite { display: none; } /* THE THREE THEME VARIANTS START HIDDEN, IN EVERY BAND. They were hidden only inside the >=901px rail block, so on a phone all three rendered at once: the desktop band's `display: none` never applied, and the <=640px block only ever turned the matching one ON. The light and nightshade lockups therefore sat in the mobile bar at their intrinsic 401 x 129 - measured in Chrome at 390px, the composite came out 901.5px wide inside a 390px bar - and the ™ anchored to the wrong one of them. This is a Batch B gap rather than anything the trademark work introduced; it is fixed here because the anchors cannot be correct while the box is wrong. Hiding them at the base, where the rest of the brand artwork is already hidden, is what makes every band opt in explicitly - which is what the rail band was doing all along. */ .brand-caelowx-composite-light-static, .brand-caelowx-composite-dark-static, .brand-caelowx-composite-nightshade-static { display: none; } .brand-tm { display: none; } /* ============================================================ CaeloWX(TM) ONE TREATMENT FOR EVERY PRIMARY FULL WORDMARK, ANCHORED TO THE FINAL "X" RATHER THAN TO THE LOGO BOX. The first implementation positioned the mark at `right: -7px; top: 0` of `.brand-caelowx-composite` - the whole lockup container - and that is the wrong box in two ways. The container is 174 x 48 on the desktop rail while the artwork renders 174 x 56 and overflows it, so `top: 0` is not even the image's top; and the wordmark's final glyph ends well inside the artwork, so the container's right edge is not the glyph's right edge. The mark therefore floated up and away from the wordmark it belongs to. Measured: on the expanded lockup the mark sat about 28px above the "X" it should touch. SO THE ANCHORS ARE THE ARTWORK'S OWN COORDINATES, measured off the PNGs' alpha channel and expressed as percentages of the rendered image box. Percentages rather than pixels because every surface renders these lockups at a different size - 174px on the rail, ~99px in the phone bar, 260px on the marketing header - and a percentage is the same optical position at all of them. The approved artwork is NOT modified; nothing here touches a PNG. artwork final-X right edge X cap top cap height expanded lockup 401 x 129 99.00% 56.59% 10.97% compact header dark 512 x 195 90.43% 41.54% 6.25% compact header light 512 x 145 97.46% 38.62% 7.81% (cap height as a percentage of WIDTH, which is what makes it usable as a `cqw` font size.) THE SIZE IS THE WORDMARK'S CAP HEIGHT. `--cx-tm-size` is each artwork's cap height at the size that artwork is actually rendered, because a ™ glyph occupies roughly 0.42em and the wanted mark is roughly 0.42 of a capital - so font size and cap height come out the same number, which is an easy thing to keep right. The old `font-size: .5rem` was 8px on every surface, which read as a speck beside a 176px marketing lockup and was the "too small" half of the reported defect. WHY THE SIZE IS NOT A CONTAINER QUERY, which was the first attempt. `cqw` would make it proportional with no per-surface number at all, but it requires `container-type: inline-size` on the wrapper, and an inline-size container is sized as if it had NO CONTENTS - so a shrink-wrapped wrapper collapses to zero width and takes the lockup with it. The wrapper has to hug the artwork for the position percentages to mean anything, so hugging wins and the size is a length. POSITION is still fully proportional: a percentage resolves against the wrapper's own box and needs no containment, so the anchors hold at every rendered size. */ .brand-tm-lockup { display: inline-block; line-height: 0; position: relative; } /* The image defines the wrapper's box, which is the whole point - the wrapper shrink-wraps the artwork, so the percentages above land on the glyph. THERE IS DELIBERATELY NO `display` RULE FOR THE IMAGE HERE, and that is a correction rather than an omission. A `.brand-tm-lockup > img { display: block }` was written first and it broke AppBrand: the composite holds three theme-gated lockups hidden by `.brand-caelowx-composite-*-static { display: none }` at (0,1,0), and a child selector at (0,1,1) in this stylesheet - which loads last - outranked it and showed all three at once. The composite then took its height from a 401px-wide intrinsic image, so the ™ anchors resolved against a 129px box and the mark landed 73px below the lockup's top. Every call site already sets `display: block` on its own lockup image (`.auth-caelowx-logo`, `.marketing-logo img`, `.footer-logo img`, and the composite's own per-theme rules), so the rule was redundant as well as harmful. The wrapper's `line-height: 0` is what removes the inline descender gap. */ /* THE ANCHORS ARE INK-TO-INK, NOT BOX-TO-BOX, AND THE `em` CORRECTIONS ARE WHY. `--cx-tm-x` / `--cx-tm-y` are the artwork's measured glyph edges. Setting `top` to them directly puts the mark's EM BOX top on the cap line, which is not the same as putting the GLYPH there: Manrope leaves dead space above the ™, measured on the rendered rail at 2.40px of a 17px mark, so the mark landed 2.4px BELOW the "WX" cap line - close enough to look almost right and wrong enough to read as detached. Horizontally the mark's ink starts about 1.02px LEFT of its box at that size, so a box placed exactly at the glyph edge left a 0.10px gap: the ™ touched the "X". Both corrections are stated in `em`, so they resolve against the mark's own font size and stay exact at every surface's scale rather than being re-derived per breakpoint: -0.134em removes the dead space above the glyph, putting the INK top on the cap line. This one belongs in `em`: the dead space is a property of the face, so it scales with the mark. Measured, not guessed - Manrope leaves 0.134em above the ™, and the mark's own left bearing is a further 0.055em, which the gap below absorbs. +--cx-tm-gap the visual gap, as a percentage of the LOCKUP. Deliberately NOT in `em`: a gap that scales with the mark re-spaces the lockup every time the mark is resized, which is how one pass ended up with the ™ touching the "X" and the next with it drifting 4.4px away. Verified by pixel measurement of the running Dev render, not by inspection. NOT `right`, deliberately: `right` would anchor the mark's RIGHT edge, so it would hang a fixed distance from the logo box's edge - which is the defect being fixed. `left` anchors where the wordmark ENDS and lets the mark sit just past it. */ .brand-tm-lockup > .brand-tm { color: currentColor; display: block; font-size: var(--cx-tm-size); font-weight: 600; left: calc(var(--cx-tm-x) + var(--cx-tm-gap)); line-height: 1; opacity: .72; position: absolute; top: calc(var(--cx-tm-y) - 0.134em); /* A carries a vertical-align shift and a UA font-size reduction. The measured anchors already place the mark, so the shift is neutralised rather than corrected for a second time. */ vertical-align: baseline; } /* The three anchor sets: the artwork's measured glyph edges, nothing else. The optical gap and the ink corrections live once in the rule above. THE SIZE TARGETS THE MARK'S INK AT ABOUT 45% OF THE WORDMARK'S CAP HEIGHT, which is what a trademark mark reads as. The ratio was measured on the render, and the first measurement was WRONG in a way worth recording: the mark's ink box was scanned with a few pixels of slack around the element, and because the mark was then touching the "X" (0.10px of gap), the scan swallowed part of the X and reported the ™ as 0.835em of ink. It is actually **0.367em**. Sizing off the bad figure produced a mark 20% of cap height - a speck. So: font size = 0.45 x cap height / 0.367 = 1.226 x cap height, and cap height is 10.97% of the lockup width, giving size = 0.134 x lockup width. Re-measured after. */ .brand-tm-lockup.is-expanded-lockup { --cx-tm-x: 99%; --cx-tm-y: 56.59%; --cx-tm-gap: 0.9%; /* 176px marketing lockup: cap 19.3px, so a 23.6px mark carries 8.7px of ink. */ --cx-tm-size: 24px; } .brand-tm-lockup.is-compact-header-dark { --cx-tm-x: 90.43%; --cx-tm-y: 41.54%; --cx-tm-gap: 0.9%; /* 214px auth hero lockup: cap 13.4px, so a 16.4px mark carries 6.0px of ink. */ --cx-tm-size: 16px; } /* DECLARED BUT NOT CURRENTLY USED BY ANY SURFACE, deliberately and pending an owner decision. `caelowx-compact-header-light-512.png` is not the bare wordmark - it reads **caelowx.com**, a domain lockup - so a mark placed at its final glyph produces "caelowx.com™", which claims the domain rather than the name. The stated requirement is that a primary full wordmark reads "CaeloWX™", and this artwork does not read that at all, which puts it in the same bucket as the C-mark-only presentations the requirement excludes. So the auth cards' mobile header (Login, Register, BetaApply) carries no ™ today - unchanged from before this pass - while their desktop hero lockup, which IS the bare wordmark, does. The anchors below are measured and ready: if the owner wants the domain lockup marked, the only change is adding `` around that image plus the ``, exactly as the dark hero does it. */ .brand-tm-lockup.is-compact-header-light { --cx-tm-x: 97.46%; --cx-tm-y: 38.62%; --cx-tm-gap: 0.9%; --cx-tm-size: 14px; } /* AppBrand's composite IS the wrapper - it already holds the three theme-gated lockups and the mark, and it is already the element the theme rules show and hide, so wrapping it again would add a box for nothing and a second ™ for each hidden variant. It takes the expanded-lockup anchors and the shared positioning above; `container-type` comes from `.brand-tm-lockup` on the same element. The mark stays gated with the composite, so the collapsed C-mark rail still carries no floating ™ - a C-mark is not a full wordmark. */ .brand-caelowx-composite.brand-tm-lockup { --cx-tm-x: 99%; --cx-tm-y: 56.59%; --cx-tm-gap: 0.9%; --cx-tm-size: 20px; } .weather-shell.theme-caelowx .brand-caelowx-composite > .brand-tm { display: block; } .weather-shell.theme-dark.theme-caelowx .brand-legacy { display: none; } .weather-shell.theme-light.theme-caelowx .brand-legacy { display: none; } .weather-shell.theme-light.theme-caelowx .brand-caelowx-lockup-light { display: block; height: auto; max-width: 100%; object-fit: contain; width: 180px; } .weather-shell.theme-light.theme-caelowx.sidebar-collapsed .brand-caelowx-lockup-light { display: none; } .weather-shell.theme-light.theme-caelowx.sidebar-collapsed .brand-caelowx-mark { background: transparent; border: 0; border-radius: 0; box-sizing: border-box; display: block; height: 42px; object-fit: contain; transform: translateY(12px); width: 42px; } .weather-shell.theme-dark.theme-caelowx .brand-caelowx-lockup { display: block; height: auto; max-width: 100%; object-fit: contain; width: 180px; } .weather-shell.theme-dark.theme-caelowx.sidebar-collapsed .brand-caelowx-lockup { display: none; } .weather-shell.theme-dark.theme-caelowx.sidebar-collapsed .brand-caelowx-mark { background: transparent; border: 0; border-radius: 0; box-sizing: border-box; display: block; height: 42px; object-fit: contain; transform: translateY(12px); width: 42px; } /* On an expanded desktop rail, the first destination shares the dashboard's content datum. The logo still clears it by 6px; only the old empty gap is removed. */ /* ============================================================ THE COLLAPSED RAIL CARRIES NO ™ THE COMPOSITE IS ONLY EVER SHOWN CONDITIONALLY AND WAS NEVER HIDDEN, which is the whole defect. Every rule that reveals the expanded lockup is written `...:not(.sidebar-collapsed) .brand-caelowx-composite`, so collapsing the rail simply stops those rules applying - it does not remove the container. The span stays in the layout at 0 x 0, and `.brand-tm-lockup > .brand-tm` turns the mark on UNCONDITIONALLY and positions it `left: calc(var(--cx-tm-x) + var(--cx-tm-gap))` of its parent. Against a zero-width parent that resolves to the parent's own origin, so the ™ floated beside the compact C-mark with no wordmark to belong to. Measured in Chrome at 1440: rail 60px wide, composite 0 x 0 at x 57, and the mark still painted at x 57. AppBrand's own comment already said the mark was "hidden with the composite, so the collapsed C-mark rail carries no floating mark". That was the intent; nothing implemented it. OUTSIDE THE 901px MEDIA QUERY ON PURPOSE. The reveal rules live in one, but the rail collapses from 641px up (see `.weather-shell.sidebar-collapsed` in app.css), so between 641 and 900 the lockup was never shown AND the mark still rendered - the same defect, with even less to attach to. Hiding it is not viewport-dependent. SCOPED TO `.sidebar`, ALSO ON PURPOSE. The phone header renders the same `AppBrand`, and its lockup is not the rail's; an unscoped rule would blank the phone wordmark whenever the shell happened to be carrying the collapsed class. */ .weather-shell.sidebar-collapsed .sidebar .brand-caelowx-composite { display: none; } /* ============================================================ SCROLLBARS THE APPLICATION'S OWN SCROLLBAR, EVERYWHERE, not per pane. `.wp-scroll` in report-controls.css already established this treatment - thin, rounded, transparent track, `--muted` at rest and `--text` while dragging - but it is opt-in, so every surface nobody remembered to mark kept the operating system's bright rail. On a dark application that rail is the loudest thing on the page. This is the same design promoted to the default, and `.wp-scroll` stays as the pane-level variant that also reserves its gutter. NO NEW COLOUR - AND THE TOKEN FAMILY MATTERS HERE. The pane version uses `--muted`, which is declared on `.weather-shell`. The document's own scrollbar is painted from , which is OUTSIDE that element, so a rule written against `--muted` resolves to nothing exactly where the bright rail is most visible. Measured: `scrollbar-color` computed `auto` on the root. `--app-muted` and `--app-text` are declared on `:root`, so they reach the document bar and every pane beneath it alike. ONE KNOWN LIMIT. The light theme redefines `--app-*` on `body.theme-light`, and custom properties do not travel upwards, so the DOCUMENT bar keeps the dark values under a light theme; panes inside the shell inherit correctly either way. Hoisting those overrides to the root would fix it and is a change to the theme's structure rather than to this treatment. DELIBERATELY NOT `scrollbar-gutter: stable` GLOBALLY. `.wp-scroll` reserves the track because a results pane that gains a scrollbar must not shift sideways; imposing that on every element in the product would change layouts that are currently correct. THE OPT-OUTS STILL WIN. Several surfaces hide their scrollbar on purpose - the Reports tab strip, the alerts and dynamic-alerts card panes. Those are class selectors, most of them `!important`, and the base here is the universal selector, which loses to all of them. That is why this is safe to make global rather than a sweep of per-surface edits. */ /* Firefox and the standard property. Inherited, so the root covers the document and every pane under it; the two-value form is thumb then track. */ :root { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--app-muted) 42%, transparent) transparent; } :root:hover { scrollbar-color: color-mix(in srgb, var(--app-muted) 60%, transparent) transparent; } /* WebKit. A 10px track carrying a 4px thumb: the 3px transparent border plus `background-clip: padding-box` is what makes it slim without being hard to grab. */ *::-webkit-scrollbar { height: 10px; width: 10px; } *::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; } *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--app-muted) 42%, transparent); background-clip: padding-box; border: 3px solid transparent; border-radius: 999px; min-height: 36px; } *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--app-muted) 68%, transparent); background-clip: padding-box; } *::-webkit-scrollbar-thumb:active { background: color-mix(in srgb, var(--app-text) 55%, transparent); background-clip: padding-box; } /* ---------------------------------------------------------------- the chevrons STYLING `::-webkit-scrollbar-button` IS WEBKIT-ONLY, and that is the whole reason it is safe to use: Firefox ignores these rules entirely and simply shows the thin thumb above, which is the graceful fallback rather than a missing feature. No JavaScript is involved and scrolling stays native - these are the browser's own buttons, given the application's face. DRAWN WITH A MASK, NOT A BACKGROUND IMAGE. A chevron baked into a data URI carries its colour with it, and this palette is a token. Masking a shape and filling it with `background-color` keeps the arrow on `--muted` and lets it brighten with the same steps the thumb uses. CHROME RENDERS FOUR BUTTON SLOTS PER AXIS - a decrement and an increment at BOTH ends. Only the outer pair is wanted; the phantom inner pair is hidden, or every bar grows a second chevron pointing the wrong way in the middle of nowhere. */ *::-webkit-scrollbar-button { background-color: color-mix(in srgb, var(--app-muted) 42%, transparent); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 9px 9px; display: block; } *::-webkit-scrollbar-button:hover { background-color: color-mix(in srgb, var(--app-muted) 68%, transparent); } *::-webkit-scrollbar-button:active { background-color: color-mix(in srgb, var(--app-text) 55%, transparent); } *::-webkit-scrollbar-button:vertical { height: 12px; width: 10px; } *::-webkit-scrollbar-button:horizontal { height: 10px; width: 12px; } *::-webkit-scrollbar-button:vertical:start:decrement { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 7.25 6 3.75l3.5 3.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } *::-webkit-scrollbar-button:vertical:end:increment { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.75 6 8.25l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } *::-webkit-scrollbar-button:horizontal:start:decrement { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M7.25 2.5 3.75 6l3.5 3.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } *::-webkit-scrollbar-button:horizontal:end:increment { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.75 2.5 8.25 6l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* The phantom inner pair. Chrome reserves them whether or not they are wanted. */ *::-webkit-scrollbar-button:vertical:start:increment, *::-webkit-scrollbar-button:vertical:end:decrement, *::-webkit-scrollbar-button:horizontal:start:increment, *::-webkit-scrollbar-button:horizontal:end:decrement { display: none; } /* ============================================================ SINGLE SELECT The platform's own dropdown, for `CaelowxSelect`. A native