/* "Aerion" theme for the iPhone build: dark mission-control look.
Smoky slate background, glass panels with hairline borders, a wide
technical display face for headings and figures, orange accents for
decoration. Glucose values keep the iCan zone colours. Loaded after
app.css only when . */
@font-face {
font-family: "Michroma";
src: url("fonts/michroma-latin-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root[data-theme="aerion"] {
color-scheme: dark;
--bg: #0b1013;
--bg-deep: #0a0f12;
--panel: rgba(40, 47, 53, 0.66);
--panel-top: rgba(58, 66, 73, 0.6);
--cell: rgba(255, 255, 255, 0.04);
--line: rgba(255, 255, 255, 0.085);
--line-strong: rgba(255, 255, 255, 0.16);
--card: var(--panel);
--card-2: rgba(255, 255, 255, 0.05);
--label: #eef2f4;
--label-2: rgba(222, 230, 235, 0.56);
--label-3: rgba(222, 230, 235, 0.28);
--sep: rgba(255, 255, 255, 0.07);
--fill: rgba(255, 255, 255, 0.06);
--fill-2: rgba(255, 255, 255, 0.12);
--accent: #ff6b35;
--accent-soft: rgba(255, 107, 53, 0.16);
--blue: var(--accent);
--green: #3ee07f;
--yellow: #ffd23f;
--yellow-ink: #ffd23f;
--orange: #ff9f1a;
--red: #ff4d45;
--purple: #d36bff;
--pink: #ff5c8a;
--indigo: #8b8cff;
--gray: #8a949a;
--glass-bg: rgba(20, 25, 29, 0.74);
--glass-edge: rgba(255, 255, 255, 0.1);
--glass-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
--lens: rgba(255, 255, 255, 0.08);
--shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 32px rgba(0, 0, 0, 0.32);
--font-tech: "Michroma", var(--font-display);
--radius-card: 22px;
--radius-row: 22px;
--art-1: #56616a;
--art-2: #2c3338;
--art-3: #171c20;
--art-edge: rgba(255, 255, 255, 0.16);
--art-core: #ff6b35;
}
/* ---------- Atmosphere ---------- */
[data-theme="aerion"] body {
background:
radial-gradient(130% 55% at 50% -12%, #2a3640 0%, rgba(42, 54, 64, 0) 62%),
radial-gradient(90% 38% at 78% 104%, rgba(255, 107, 53, 0.13), rgba(255, 107, 53, 0) 70%),
linear-gradient(180deg, #131b21 0%, #0c1115 42%, #080b0d 100%);
background-attachment: fixed;
color: var(--label);
}
[data-theme="aerion"] #ambient {
height: 100vh;
background:
radial-gradient(70% 30% at 50% 22%, color-mix(in srgb, var(--zone) 12%, transparent), transparent 72%),
radial-gradient(140% 26% at 50% 60%, rgba(160, 180, 190, 0.05), transparent 70%);
}
[data-theme="aerion"] #ambient::before {
/* distant ridges with a faint warm rim, like the dusk landscape in the reference */
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 38vh;
opacity: 0.55;
background: url("data:image/svg+xml;utf8,") bottom / 100% 100% no-repeat;
}
[data-theme="aerion"] #ambient::after {
/* film grain */
content: "";
position: fixed;
inset: 0;
opacity: 0.07;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
}
[data-theme="aerion"] body[data-zone="none"] #ambient { opacity: 1; }
/* ---------- Typography ---------- */
[data-theme="aerion"] .app { overflow-x: clip; }
[data-theme="aerion"] .navbar { min-width: 0; }
[data-theme="aerion"] .navbar h1 {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
font-family: var(--font-tech);
font-weight: 400;
font-size: clamp(15px, 4.6vw, 20px);
line-height: 30px;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="aerion"] .navbar .actions { flex: none; gap: 6px; }
[data-theme="aerion"] .navbar .glass-btn { height: 40px; min-width: 40px; padding: 0 10px; }
[data-theme="aerion"] .navbar .demo-pill { padding: 0 8px; font-size: 9.5px; }
[data-theme="aerion"] .navbar h1 { gap: 8px; }
[data-theme="aerion"] .navbar .brand-mark { width: 22px; height: 22px; }
[data-theme="aerion"] .navbar .btn-label { display: none; }
[data-theme="aerion"] .brand-mark { width: 26px; height: 26px; color: var(--accent); flex: none; filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.45)); }
[data-theme="aerion"] .compactbar {
font-family: var(--font-tech);
font-weight: 400;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
background: linear-gradient(to bottom, rgba(11, 16, 19, 0.92), rgba(11, 16, 19, 0.6) 70%, transparent);
}
[data-theme="aerion"] .section-title,
[data-theme="aerion"] .tile-label,
[data-theme="aerion"] .metric .k,
[data-theme="aerion"] .chart-head .tile-label {
font-family: var(--font-tech);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--label);
}
[data-theme="aerion"] .num,
[data-theme="aerion"] .tile-value,
[data-theme="aerion"] .metric .v { font-family: var(--font-display); }
/* ---------- Panels ---------- */
[data-theme="aerion"] .card,
[data-theme="aerion"] .list {
background: linear-gradient(180deg, var(--panel-top), var(--panel));
border: 1px solid var(--line);
box-shadow: var(--shadow-card);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
}
/* A section title followed by its list reads as one panel with the title inside. */
[data-theme="aerion"] .section-title {
margin: 0 16px;
padding: 15px 16px 9px;
border-radius: 22px 22px 0 0;
background: var(--panel-top);
border: 1px solid var(--line);
border-bottom: 0;
}
[data-theme="aerion"] .section-title + .section > .list:first-child,
[data-theme="aerion"] .section-title + .section > .card:first-child,
[data-theme="aerion"] .section-title + .section > .metrics:first-child .card {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: 0;
background: var(--panel-top);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}
[data-theme="aerion"] .section-title + .section > .metrics:first-child { gap: 10px; }
[data-theme="aerion"] .section-footer { color: var(--label-2); }
/* Rows become inset cells, like the fleet list. */
[data-theme="aerion"] .list { padding: 8px 0 2px; }
[data-theme="aerion"] .list .row,
[data-theme="aerion"] .list .field {
margin: 0 10px 8px;
width: calc(100% - 20px);
min-height: 46px;
padding: 9px 12px;
border-radius: 12px;
background: var(--cell);
border: 1px solid rgba(255, 255, 255, 0.06);
}
[data-theme="aerion"] .row + .row::before { display: none; }
[data-theme="aerion"] .field + .field { border-top: 1px solid rgba(255, 255, 255, 0.06); }
[data-theme="aerion"] button.row:active { background: rgba(255, 255, 255, 0.09); }
[data-theme="aerion"] .row .detail { color: var(--label-2); }
[data-theme="aerion"] .row.link { color: var(--accent); }
[data-theme="aerion"] .row.destructive { color: var(--red); }
[data-theme="aerion"] .row .title small { color: var(--label-2); }
[data-theme="aerion"] .row-icon {
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--c, var(--gray));
}
[data-theme="aerion"] .row-icon svg.icon { stroke-width: 1.8; }
/* ---------- Home ---------- */
[data-theme="aerion"] .telemetry {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 0 16px 14px;
}
[data-theme="aerion"] .tchip {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 8px 8px 9px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--line);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
[data-theme="aerion"] .tchip svg.icon {
flex: none;
width: 22px;
height: 22px;
padding: 3px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.35);
stroke-width: 1.8;
}
[data-theme="aerion"] .tchip small { display: block; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label-2); line-height: 12px; }
[data-theme="aerion"] .tchip > span { min-width: 0; }
[data-theme="aerion"] .tchip b { display: block; font-family: var(--font-tech); font-weight: 400; font-size: 10.5px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 15px; }
[data-theme="aerion"] .hero::after { display: none; }
[data-theme="aerion"] .hero-aerion { padding: 16px 16px 18px; text-align: center; }
[data-theme="aerion"] .hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
[data-theme="aerion"] .hero-status { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
[data-theme="aerion"] .hero-aerion .trend-disc {
width: 46px;
height: 46px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--line-strong);
color: var(--zone);
box-shadow: 0 0 26px color-mix(in srgb, var(--zone) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="aerion"] body[data-zone="high"] .hero-aerion .trend-disc { color: var(--zone); }
[data-theme="aerion"] .hero-aerion .trend-disc svg { width: 26px; height: 26px; stroke-width: 2.4; }
[data-theme="aerion"] .hero-stage { position: relative; height: 196px; margin-top: 2px; }
[data-theme="aerion"] .hero-stage .hero-value {
position: absolute;
z-index: 2;
top: 10px;
left: 0;
right: 0;
flex-direction: column;
align-items: center;
gap: 10px;
}
[data-theme="aerion"] .hero-stage .value {
font-family: var(--font-tech);
font-weight: 400;
font-size: clamp(52px, 17vw, 66px);
letter-spacing: 0.02em;
line-height: 1.2;
color: #fff;
text-shadow: 0 0 34px color-mix(in srgb, var(--zone) 45%, transparent), 0 2px 10px rgba(0, 0, 0, 0.6);
}
[data-theme="aerion"] .hero-stage .value.word { font-size: clamp(40px, 13vw, 52px); }
[data-theme="aerion"] .hero-stage .unit { font-family: var(--font-tech); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--label-2); }
[data-theme="aerion"] .holo-ring {
position: absolute;
left: 50%;
bottom: -4px;
width: 112%;
max-width: 440px;
transform: translateX(-50%);
overflow: visible;
}
[data-theme="aerion"] .holo-line { fill: none; stroke: color-mix(in srgb, var(--zone) 55%, transparent); stroke-width: 1; }
[data-theme="aerion"] .holo-inner { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; stroke-dasharray: 2 4; }
[data-theme="aerion"] .holo-ticks { fill: none; stroke: rgba(230, 238, 242, 0.38); stroke-width: 1; }
[data-theme="aerion"] .holo-beam { stroke: var(--zone); stroke-width: 1.2; stroke-dasharray: 2 3; opacity: 0.75; }
[data-theme="aerion"] body[data-zone="none"] .holo-ring,
[data-theme="aerion"] .hero.stale .holo-ring { filter: grayscale(1); opacity: 0.4; }
[data-theme="aerion"] .hero.stale .value { color: var(--label-3); text-shadow: none; }
[data-theme="aerion"] .hero-aerion .hero-sub { justify-content: center; margin-top: 10px; }
[data-theme="aerion"] .pill {
height: 26px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--line);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
[data-theme="aerion"] .pill.zone { color: var(--zone); background: color-mix(in srgb, var(--zone) 10%, transparent); border-color: color-mix(in srgb, var(--zone) 40%, transparent); }
[data-theme="aerion"] .demo-pill { background: rgba(211, 107, 255, 0.18); border-color: rgba(211, 107, 255, 0.5); color: #ecc4ff; }
[data-theme="aerion"] .hero-empty h2 { font-family: var(--font-tech); font-weight: 400; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; }
[data-theme="aerion"] .sensor-art { filter: drop-shadow(0 0 18px rgba(255, 107, 53, 0.25)); }
[data-theme="aerion"] .tile-value { color: var(--green); font-weight: 500; }
[data-theme="aerion"] .tile-value small { color: var(--label-2); font-weight: 500; }
[data-theme="aerion"] .tile .bar,
[data-theme="aerion"] .bar {
height: 7px;
border-radius: 2px;
background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 3px, transparent 3px 5px);
}
[data-theme="aerion"] .bar > i {
border-radius: 2px;
background: repeating-linear-gradient(90deg, var(--c, var(--green)) 0 3px, transparent 3px 5px);
filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c, var(--green)) 60%, transparent));
}
[data-theme="aerion"] .tir-bar { position: relative; border-radius: 4px; }
[data-theme="aerion"] .tir-bar::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(90deg, rgba(10, 15, 18, 0.55) 0 1px, transparent 1px 4px);
}
[data-theme="aerion"] .banner-card h3 { font-family: var(--font-tech); font-weight: 400; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
/* ---------- Chart ---------- */
[data-theme="aerion"] .chart .grid { stroke: rgba(255, 255, 255, 0.06); }
[data-theme="aerion"] .chart .grid.dash { stroke-dasharray: 1 5; }
[data-theme="aerion"] .chart .axis { fill: rgba(222, 230, 235, 0.45); font-size: 10px; letter-spacing: 0.04em; }
[data-theme="aerion"] .chart .band { fill: rgba(62, 224, 127, 0.045); }
[data-theme="aerion"] .chart .now-line { stroke: rgba(255, 255, 255, 0.1); }
[data-theme="aerion"] .chart .event-dot { stroke: var(--bg-deep); }
[data-theme="aerion"] .chart .finger { stroke: var(--bg-deep); }
[data-theme="aerion"] .chart .scrub-line { stroke: #fff; opacity: 0.4; }
[data-theme="aerion"] .chart .scrub-dot { fill: var(--bg-deep); stroke: var(--accent); }
[data-theme="aerion"] .chart .agp-outer { fill: rgba(255, 255, 255, 0.07); }
[data-theme="aerion"] .chart .agp-inner { fill: rgba(255, 255, 255, 0.17); }
[data-theme="aerion"] .chart .agp-median { stroke: #ffffff; stroke-width: 2; }
[data-theme="aerion"] .chart-readout b { color: #fff; font-family: var(--font-display); }
/* ---------- Controls ---------- */
[data-theme="aerion"] .segmented { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 14px; }
[data-theme="aerion"] .segmented .thumb { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 11px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
[data-theme="aerion"] .segmented button { border-radius: 11px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label-2); }
[data-theme="aerion"] .segmented button[aria-pressed="true"] { color: #fff; }
[data-theme="aerion"] .btn { border-radius: 14px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
[data-theme="aerion"] .btn.primary {
background: linear-gradient(180deg, #ff7c4a, #f0561f);
border: 1px solid rgba(255, 170, 130, 0.5);
box-shadow: 0 10px 26px rgba(255, 107, 53, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
[data-theme="aerion"] .btn.secondary { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-strong); color: var(--label); }
[data-theme="aerion"] .btn.danger { background: rgba(255, 77, 69, 0.1); border: 1px solid rgba(255, 77, 69, 0.4); color: #ff7a73; }
[data-theme="aerion"] .btn.small { border-radius: 11px; font-size: 12px; }
[data-theme="aerion"] .glass-btn { border-radius: 14px; }
[data-theme="aerion"] .navbar .glass-btn.glass { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-strong); box-shadow: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
[data-theme="aerion"] .glass::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 30%); mix-blend-mode: normal; }
[data-theme="aerion"] .switch .track { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line-strong); }
[data-theme="aerion"] .switch .knob { background: #c9d1d6; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
[data-theme="aerion"] .switch input:checked ~ .track { background: rgba(62, 224, 127, 0.22); border-color: rgba(62, 224, 127, 0.65); }
[data-theme="aerion"] .switch input:checked ~ .knob { background: var(--green); box-shadow: 0 0 12px rgba(62, 224, 127, 0.6); }
[data-theme="aerion"] .stepper { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 11px; }
[data-theme="aerion"] .stepper button + button { border-left: 1px solid var(--line); }
[data-theme="aerion"] .textfield,
[data-theme="aerion"] .sheet .textfield { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong); border-radius: 12px; color: #fff; }
[data-theme="aerion"] .dot.on { background: var(--green); box-shadow: 0 0 0 4px rgba(62, 224, 127, 0.18), 0 0 10px rgba(62, 224, 127, 0.7); }
/* ---------- Navigation ---------- */
[data-theme="aerion"] .tabbar-wrap::before { background: linear-gradient(to top, rgba(8, 11, 13, 0.92), transparent); }
[data-theme="aerion"] .tabbar {
border-radius: 22px;
background: rgba(18, 23, 27, 0.8);
border: 1px solid var(--line);
}
[data-theme="aerion"] .tab {
border-radius: 16px;
color: var(--label-2);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.01em;
}
[data-theme="aerion"] .tab svg.icon { width: 23px; height: 23px; stroke-width: 1.8; }
[data-theme="aerion"] .tab[aria-selected="true"] { color: #fff; }
[data-theme="aerion"] .tab-lens {
border-radius: 16px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
}
[data-theme="aerion"] .tab-lens::after {
content: "";
position: absolute;
left: 30%;
right: 30%;
bottom: 3px;
height: 2px;
border-radius: 1px;
background: var(--accent);
box-shadow: 0 0 10px var(--accent);
}
[data-theme="aerion"] .fab { border-radius: 20px; background: rgba(18, 23, 27, 0.8); border: 1px solid var(--line); color: var(--accent); }
/* ---------- Sheets, dialogs, banners ---------- */
[data-theme="aerion"] .backdrop { background: rgba(0, 0, 0, 0.55); }
[data-theme="aerion"] .sheet { background: linear-gradient(180deg, #1a2126, #0f1417); border-top: 1px solid var(--line-strong); box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6); }
[data-theme="aerion"] .sheet .list,
[data-theme="aerion"] .sheet .card { background: rgba(255, 255, 255, 0.035); }
[data-theme="aerion"] .sheet-head h2 { font-family: var(--font-tech); font-weight: 400; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
[data-theme="aerion"] .sheet-head .glass-btn { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); font-size: 13px; }
[data-theme="aerion"] .sheet-head .glass-btn.confirm { background: linear-gradient(180deg, #ff7c4a, #f0561f); border-color: rgba(255, 170, 130, 0.5); }
[data-theme="aerion"] .sheet-intro h3 { font-family: var(--font-tech); font-weight: 400; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; }
[data-theme="aerion"] .sheet-intro > .row-icon { box-shadow: 0 0 26px color-mix(in srgb, var(--c) 30%, transparent); }
[data-theme="aerion"] .dialog.glass { background: rgba(26, 32, 37, 0.94); border: 1px solid var(--line-strong); }
[data-theme="aerion"] .alert-banner.glass,
[data-theme="aerion"] .toast.glass { background: rgba(26, 32, 37, 0.92); border: 1px solid var(--line-strong); }
[data-theme="aerion"] .type-grid button {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
border-radius: 16px;
color: var(--label-2);
font-size: 11.5px;
font-weight: 500;
}
[data-theme="aerion"] .type-grid button .row-icon { border-radius: 50%; width: 42px; height: 42px; border-color: rgba(255, 255, 255, 0.16); }
[data-theme="aerion"] .type-grid button[aria-pressed="true"] { color: #fff; border-color: rgba(255, 107, 53, 0.6); box-shadow: 0 0 0 1px rgba(255, 107, 53, 0.35), 0 0 22px rgba(255, 107, 53, 0.18); }
[data-theme="aerion"] .warmup-ring .bg { stroke: rgba(255, 255, 255, 0.08); stroke-dasharray: 2 4; }
[data-theme="aerion"] .warmup-ring .fg { stroke: var(--accent); filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6)); }
[data-theme="aerion"] .warmup-ring .label b { font-family: var(--font-tech); font-weight: 400; font-size: 22px; }
[data-theme="aerion"] .warmup-ring .label span { letter-spacing: 0.16em; }
[data-theme="aerion"] .step-row .state { color: var(--label-2); }
[data-theme="aerion"] .step-row.active .state::before { border-top-color: var(--accent); }
[data-theme="aerion"] .step-num { background: var(--accent); }
[data-theme="aerion"] .log-view { color: rgba(222, 230, 235, 0.7); }
[data-theme="aerion"] .date-nav button.arrow { color: var(--accent); }
[data-theme="aerion"] .empty svg.icon { color: rgba(255, 255, 255, 0.25); }
[data-theme="aerion"] .empty h3 { font-family: var(--font-tech); font-weight: 400; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
@media (prefers-reduced-transparency: reduce) {
[data-theme="aerion"] .card,
[data-theme="aerion"] .list,
[data-theme="aerion"] .section-title { background: #1d2429; -webkit-backdrop-filter: none; backdrop-filter: none; }
}