/* portal/static/portal/site.css — public marketing front-end (logged-out). Modern dark theme with an amber accent (a nod to the "Amber" gateways), plus a light theme that auto-switches on prefers-color-scheme. Self-contained, no external fonts/CDNs (same-origin / PWA-clean). Theming rules: - Never hardcode a surface/ink colour in a template — use the variables. - --amber/--amber-soft/--amber-deep are overridden per brand by portal/templates/portal/_brand_head.html (see portal/branding.py). - --accent-ink / --accent-strong are the READABLE accent for text/icons: the soft/bright accent on dark, the deep accent on light. Theme resolution (manual override beats browser setting): - default → dark palette (:root) - OS prefers light → light palette, UNLESS - → light palette regardless of the OS The data-theme attribute is set before first paint by the small script in _brand_head.html from localStorage('cw-theme'); absent = follow the OS. The LIGHT PALette block therefore exists twice (media query + attribute) — keep both copies identical when editing. */ :root { color-scheme: dark; --bg: #0a1521; --bg-2: #0c1c2e; --ink: #eaf1f8; --muted: #9db0c4; --muted-2: #6f8298; --amber: #f6a821; --amber-soft: #ffce6b; --amber-deep: #9a6c07; --on-accent: #1a1205; --accent-ink: var(--amber-soft); --accent-strong: var(--amber); --grad-a: var(--amber-soft); --grad-b: var(--amber); --card: rgba(255, 255, 255, 0.04); --card-hover: rgba(255, 255, 255, 0.055); --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.14); --field-bg: #0a1521; --header-bg: rgba(10, 21, 33, 0.72); --hover-bg: rgba(255, 255, 255, 0.05); --tint-bg: rgba(255, 255, 255, 0.015); --error-ink: #ff9a9a; --warn-ink: #f6c760; --ok: #34d399; --shadow-strong: rgba(0, 0, 0, 0.6); --radius: 16px; --maxw: 1180px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Browser says light AND no manual dark override. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #f5f7fa; --bg-2: #e9eef5; --ink: #17293b; --muted: #4a5d70; --muted-2: #64788c; --accent-ink: var(--amber-deep); --accent-strong: var(--amber-deep); --grad-a: var(--amber-deep); --grad-b: var(--amber); --card: rgba(13, 36, 60, 0.045); --card-hover: rgba(13, 36, 60, 0.07); --line: rgba(13, 36, 60, 0.11); --line-2: rgba(13, 36, 60, 0.18); --field-bg: #ffffff; --header-bg: rgba(245, 247, 250, 0.8); --hover-bg: rgba(13, 36, 60, 0.05); --tint-bg: rgba(13, 36, 60, 0.03); --error-ink: #b3261e; --warn-ink: #9a6700; --ok: #0f7a4d; --shadow-strong: rgba(9, 30, 50, 0.22); } } /* Manual light override — identical to the media-query block above. */ :root[data-theme="light"] { color-scheme: light; --bg: #f5f7fa; --bg-2: #e9eef5; --ink: #17293b; --muted: #4a5d70; --muted-2: #64788c; --accent-ink: var(--amber-deep); --accent-strong: var(--amber-deep); --grad-a: var(--amber-deep); --grad-b: var(--amber); --card: rgba(13, 36, 60, 0.045); --card-hover: rgba(13, 36, 60, 0.07); --line: rgba(13, 36, 60, 0.11); --line-2: rgba(13, 36, 60, 0.18); --field-bg: #ffffff; --header-bg: rgba(245, 247, 250, 0.8); --hover-bg: rgba(13, 36, 60, 0.05); --tint-bg: rgba(13, 36, 60, 0.03); --error-ink: #b3261e; --warn-ink: #9a6700; --ok: #0f7a4d; --shadow-strong: rgba(9, 30, 50, 0.22); } * { box-sizing: border-box; margin: 0; padding: 0; } /* The hidden attribute must ALWAYS win: any class that sets `display` (.btn's inline-flex, …) silently overrides the browser's built-in [hidden] → display:none, so `el.hidden = true` became a no-op on buttons — live-debugged 2026-07-23 (session buttons never hid, toggles looked dead, and clicking a not-enabled button died with close code 1006). */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(246, 168, 33, 0.06); } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(246,168,33,0.6); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(246,168,33,0.5); } 70% { box-shadow: 0 0 0 8px rgba(246,168,33,0); } 100% { box-shadow: 0 0 0 0 rgba(246,168,33,0); } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 0.98rem; font-weight: 600; line-height: 1; padding: 14px 22px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn-primary { background: var(--amber); color: var(--on-accent); box-shadow: 0 10px 30px -10px rgba(246, 168, 33, 0.6); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(246, 168, 33, 0.75); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { background: var(--hover-bg); border-color: var(--ink); } .btn-sm { padding: 10px 16px; font-size: 0.9rem; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: var(--header-bg); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; } /* CannyWare logo — "cloud + live pulse" mark (favicon yellow #f8f808) in a dark tile, with the italic wordmark + "CAN bus in the cloud" tagline (concept 03). */ .brand { display: flex; align-items: center; gap: 12px; } /* The tile stays dark in BOTH themes — the bright brand mark needs the dark plate (it's part of the logo identity, like a favicon), not a themed surface. */ .logo-tile { width: 42px; height: 42px; border-radius: 11px; flex: none; display: grid; place-items: center; background: #0c1b2a; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.6); } .logo-tile.sm { width: 30px; height: 30px; border-radius: 8px; } .logo-stack { display: flex; flex-direction: column; gap: 2px; line-height: 1; } .logo-word { font-style: italic; font-weight: 800; font-size: 1.16rem; letter-spacing: -0.02em; transform: skewX(-5deg); transform-origin: left center; color: var(--ink); white-space: nowrap; } .logo-word.sm { font-size: 1rem; } .logo-tag { font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); } .site-footer .logo-word { color: var(--muted); } .nav { display: flex; align-items: center; gap: 28px; } .nav a.link { color: var(--muted); font-size: 0.94rem; font-weight: 500; transition: color .15s; } .nav a.link:hover { color: var(--ink); } .nav a.link.active { color: var(--ink); font-weight: 600; } /* App-nav fallback items (portal/_app_nav.html): the top-level page links repeated inside the user menu, shown ONLY when the inline links are hidden by the mobile breakpoint below. */ .user-menu-panel .menu-item.nav-fallback { display: none; } @media (max-width: 860px) { .user-menu-panel .menu-item.nav-fallback { display: block; } } /* Page title + actions on one line (partner Dashboards "Edit in Grafana", Devices health links — 2026-07-06). Flex only; the h1 keeps its own .page-title styling. Wraps gracefully on narrow screens. */ .page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; /* .page-title's own gap */ } .page-title-row .page-title { margin-bottom: 0; } .health-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .health-links-footer { margin-top: 16px; } .health-links .btn.active { background: var(--amber); border-color: var(--amber); color: var(--on-accent); font-weight: 700; } .nav-toggle { display: none; } /* language picker */ .lang-picker { display: inline-flex; align-items: center; gap: 6px; margin: 0; } .lang-globe { display: inline-flex; color: var(--muted); } .lang-picker select { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid var(--line-2); color: var(--ink); border-radius: 8px; padding: 7px 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit; } .lang-picker select:hover { border-color: var(--ink); } .lang-picker option { background: var(--field-bg); color: var(--ink); } @media (max-width: 860px) { .nav a.link { display: none; } } /* ---------- hero ---------- */ .hero { position: relative; padding: 84px 0 72px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(1100px 540px at 78% -8%, rgba(246, 168, 33, 0.16), transparent 60%), radial-gradient(900px 600px at 10% 110%, rgba(38, 110, 180, 0.18), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.4; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(900px 500px at 70% 10%, #000, transparent 75%); -webkit-mask-image: radial-gradient(900px 500px at 70% 10%, #000, transparent 75%); } .hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; margin: 22px 0 18px; } .hero h1 .grad { background: linear-gradient(120deg, var(--grad-a), var(--grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lead { font-size: 1.16rem; color: var(--muted); max-width: 36ch; } .hero .cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; } .hero .micro { margin-top: 22px; display: flex; gap: 20px; flex-wrap: wrap; color: var(--muted-2); font-size: 0.86rem; } .hero .micro span { display: inline-flex; align-items: center; gap: 7px; } .hero .micro b { color: var(--ink); font-weight: 600; } @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; } .hero p.lead { max-width: none; } } /* ---------- app window (the embedded Grafana demo) ---------- */ .window { border-radius: var(--radius); overflow: hidden; background: #ffffff; border: 1px solid var(--line-2); box-shadow: 0 40px 80px -30px var(--shadow-strong), 0 0 0 1px rgba(255,255,255,0.04); transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg); transition: transform .4s ease; } .window:hover { transform: perspective(1400px) rotateY(0) rotateX(0); } .window .chrome { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #0f1c2b; border-bottom: 1px solid rgba(255,255,255,0.06); } .window .chrome .dot { width: 11px; height: 11px; border-radius: 50%; background: #33465c; } .window .chrome .dot:nth-child(1) { background: #ff5f57; } .window .chrome .dot:nth-child(2) { background: #febc2e; } .window .chrome .dot:nth-child(3) { background: #28c840; } .window .chrome .url { margin-left: 10px; flex: 1; font-size: 0.74rem; color: #8aa0b6; background: #0a1521; border: 1px solid rgba(255,255,255,0.06); border-radius: 7px; padding: 5px 12px; display: flex; align-items: center; gap: 8px; } .window .chrome .url .live { width: 7px; height: 7px; border-radius: 50%; background: #28c840; } .window .frame { display: block; width: 100%; height: 380px; border: 0; background: #fff; } .window-cap { text-align: center; margin-top: 14px; font-size: 0.82rem; color: var(--muted-2); } /* ---------- section scaffold ---------- */ section.block { padding: 84px 0; position: relative; } .section-head { max-width: 640px; margin: 0 auto 52px; text-align: center; } .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -0.02em; font-weight: 800; } .section-head p { color: var(--muted); margin-top: 14px; font-size: 1.06rem; } /* trust strip */ .trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--tint-bg); } .trust .wrap { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: center; padding: 22px 24px; } .trust .item { color: var(--muted); font-size: 0.92rem; font-weight: 500; display: inline-flex; gap: 9px; align-items: center; } .trust .item svg { color: var(--accent-strong); } /* features */ .grid { display: grid; gap: 20px; } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .grid-4, .grid-3 { grid-template-columns: 1fr; } } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; transition: transform .18s ease, border-color .18s ease, background .18s ease; } .card:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--card-hover); } .card .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(246, 168, 33, 0.12); color: var(--accent-ink); margin-bottom: 18px; border: 1px solid rgba(246, 168, 33, 0.25); } .card h3 { font-size: 1.12rem; letter-spacing: -0.01em; margin-bottom: 8px; } .card p { color: var(--muted); font-size: 0.96rem; } /* steps */ .steps { counter-reset: step; } .step { position: relative; padding-left: 18px; } .step .num { font-size: 0.82rem; font-weight: 700; color: var(--accent-strong); letter-spacing: 0.1em; display: inline-block; margin-bottom: 12px; } .step h3 { font-size: 1.18rem; margin-bottom: 8px; letter-spacing: -0.01em; } .step p { color: var(--muted); } .step::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: linear-gradient(var(--amber), transparent); border-radius: 2px; } /* use cases */ .cases { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .case { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-weight: 600; font-size: 0.98rem; } .case:hover { border-color: var(--amber); } .case svg { color: var(--accent-strong); } /* CTA band */ .cta-band { text-align: center; } .cta-band .inner { border: 1px solid var(--line-2); border-radius: 24px; padding: 56px 32px; background: radial-gradient(600px 300px at 50% -40%, rgba(246,168,33,0.18), transparent 70%), linear-gradient(180deg, var(--card), transparent); } .cta-band h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -0.02em; margin-bottom: 14px; } .cta-band p { color: var(--muted); max-width: 52ch; margin: 0 auto 28px; font-size: 1.08rem; } /* footer */ .site-footer { border-top: 1px solid var(--line); padding: 40px 0; color: var(--muted-2); } .site-footer .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .site-footer .brand { font-size: 1rem; color: var(--muted); } .site-footer a { color: var(--muted); font-size: 0.9rem; } .site-footer a:hover { color: var(--ink); } .site-footer .small { font-size: 0.82rem; } /* entrance animation — pure CSS so content is NEVER stuck hidden if JS/IO doesn't run (the .in class from the optional script is a harmless no-op). */ @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .reveal { animation: rise .6s ease both; } @media (prefers-reduced-motion: reduce) { .reveal { animation: none; } .window { transform: none; } } /* ---------- user menu (dashboard header) ---------- */ .user-menu { position: relative; } .user-menu-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } .user-menu-btn .chev { transition: transform .15s ease; } .user-menu.open .user-menu-btn .chev { transform: rotate(180deg); } .user-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; z-index: 60; background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 24px 48px -18px var(--shadow-strong); padding: 8px; display: none; } .user-menu.open .user-menu-panel { display: block; } .user-menu-panel .menu-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); padding: 6px 10px 4px; } .user-menu-panel .menu-item { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; border: 0; background: transparent; color: var(--ink); font-size: 0.9rem; font-family: var(--font); cursor: pointer; } .user-menu-panel .menu-item:hover { background: var(--hover-bg); } .user-menu-panel hr { border: 0; border-top: 1px solid var(--line); margin: 7px 4px; } .theme-seg { display: flex; gap: 4px; padding: 2px 6px 6px; } .theme-seg button { flex: 1; padding: 7px 0; border-radius: 8px; border: 1px solid var(--line-2); background: var(--field-bg); color: var(--muted); font-size: 0.82rem; font-weight: 600; font-family: var(--font); cursor: pointer; } .theme-seg button:hover { border-color: var(--amber); } .theme-seg button.active { background: var(--amber); border-color: var(--amber); color: var(--on-accent); font-weight: 700; } /* Legal pages (privacy / terms) — section headings within copied legal text. */ .legal-h { color: var(--ink); font-size: 1.05rem; font-weight: 600; margin: 26px 0 6px; } .legal p { margin: 0 0 12px; } /* Hero live-demo panel — same-origin ECharts rendering of a frozen engine snapshot (replaces the old cross-origin Grafana iframe; GAP 2). The window content deliberately stays DARK in the light theme too: it is a "product screenshot" of the telemetry app, not a themed page surface. */ .window .demo { background: #0a1521; padding: 12px 12px 14px; } .demo-stats { display: flex; gap: 8px; margin-bottom: 8px; } /* Colours hardcoded to the dark palette (NOT the theme vars): the demo window is a dark product screenshot in both themes — themed ink would vanish here. */ .demo-stat { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; padding: 7px 11px; } .demo-stat .v { font-size: 1.05rem; font-weight: 700; color: #eaf1f8; line-height: 1.2; } .demo-stat .v small { font-size: 0.66rem; font-weight: 600; color: #6f8298; margin-left: 3px; } .demo-stat .l { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6f8298; margin-top: 2px; } .demo-chart { width: 100%; } #demoChart1 { height: 208px; } #demoChart2 { height: 116px; } /* Screen-reader-only utility (2026-07-07 a11y): visually hidden, still announced. Used for status text behind color-only indicators. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Shared empty-state + toolbar (2026-07-11): device.css and partner.css both document these as "reused verbatim from site.css", and the dashboard/audit toolbar and the empty states on device_status, api_keys and every partner page reference them — but they were only ever defined inline in dashboard.html, so those pages rendered them unstyled. Promoted to the canonical home. */ .state-msg { padding: 3rem 1rem; text-align: center; color: var(--muted-2); } .dash-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .dash-toolbar .spacer { flex: 1; } .dash-toolbar label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-2); display: flex; align-items: center; gap: 8px; } .dash-toolbar select { padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--field-bg); color: var(--ink); font-size: 0.92rem; font-family: var(--font); } .dash-toolbar select:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }