/* ============================================================================ Dayv Home — "Redesign Smart Home" UI Dark hero theme + light variant. Vanilla CSS, no build step. Theme is switched via [data-theme] on ; default follows the system. ============================================================================ */ /* ---- Tokens: dark hero (default) ---- */ :root { color-scheme: dark; --canvas: #0e0f12; --canvas-2: #131418; --surface: #1a1c20; --surface-2: #212429; --surface-hi: #2a2e35; --line: #2c2f36; --line-soft: #23262c; --text: #e7e7ea; --text-muted: #a3a4a7; --text-faint: #71747b; --accent: #3a47ff; /* electric blue, lifted for contrast on dark */ --accent-deep: #1c23aa; --accent-ink: #ffffff; --accent-tint: color-mix(in srgb, var(--accent) 18%, var(--surface)); --accent-glow: color-mix(in srgb, var(--accent) 40%, transparent); --warm: #ff5a2c; /* orange — alerts, unlock */ --warm-deep: #c43b0a; --warm-tint: color-mix(in srgb, var(--warm) 16%, var(--surface)); --good: #46c98b; /* muted green — on / comfortable */ --good-tint: color-mix(in srgb, var(--good) 16%, var(--surface)); --danger: #ff5a5a; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 30px; --r-pill: 999px; --sp-1: 6px; --sp-2: 10px; --sp-3: 14px; --sp-4: 20px; --sp-5: 28px; --sp-6: 40px; --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-2: 0 10px 30px rgb(0 0 0 / 0.45); --shadow-tile: 0 6px 18px rgb(0 0 0 / 0.35); --nav-h: 72px; --rail-w: 232px; --content-max: 1180px; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---- Tokens: light variant ---- */ :root[data-theme="light"] { color-scheme: light; --canvas: #eef0f4; --canvas-2: #e7eaef; --surface: #ffffff; --surface-2: #f5f6f9; --surface-hi: #eef0f4; --line: #e2e5ea; --line-soft: #eceef2; --text: #14151a; --text-muted: #5b5f6a; --text-faint: #8b8f99; --accent: #2a35e6; --accent-deep: #1c23aa; --accent-ink: #ffffff; --accent-tint: color-mix(in srgb, var(--accent) 12%, var(--surface)); --accent-glow: color-mix(in srgb, var(--accent) 28%, transparent); --warm: #e0470f; --warm-deep: #c43b0a; --warm-tint: color-mix(in srgb, var(--warm) 12%, var(--surface)); --good: #16a36b; --good-tint: color-mix(in srgb, var(--good) 12%, var(--surface)); --danger: #d92d2d; --shadow-1: 0 1px 2px rgb(15 23 42 / 0.08); --shadow-2: 0 16px 40px rgb(15 23 42 / 0.14); --shadow-tile: 0 8px 22px rgb(15 23 42 / 0.08); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.45; color: var(--text); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* soft ambient backdrop, very subtle */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(900px 500px at 12% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), radial-gradient(700px 500px at 100% 0%, color-mix(in srgb, var(--warm) 8%, transparent), transparent 55%); z-index: 0; } h1, h2, h3, p { margin: 0; } button { font-family: inherit; } .hidden { display: none !important; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ============================================================================ App shell ============================================================================ */ #app { position: relative; z-index: 1; min-height: 100dvh; display: grid; grid-template-columns: 1fr; } #app[data-state="loading"] .content { opacity: 0.5; } .layout { display: contents; } /* Content column */ .content { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: max(env(safe-area-inset-top), var(--sp-4)) var(--sp-4) calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-5)); transition: opacity 0.2s var(--ease); } /* ---- Topbar ---- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .greeting { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .greeting .hello { font-size: clamp(22px, 4.5vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .greeting .sub { color: var(--text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-actions { display: flex; align-items: center; gap: var(--sp-2); } .icon-btn { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: var(--r-pill); cursor: pointer; transition: background 0.15s var(--ease), transform 0.1s var(--ease), border-color 0.15s var(--ease); } .icon-btn:hover { background: var(--surface-hi); } .icon-btn:active { transform: scale(0.94); } .icon-btn svg { width: 19px; height: 19px; } /* Connection pill */ .pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); } .pill[data-status="connected"] { color: var(--good); } .pill[data-status="connected"] .pill-dot { background: var(--good); box-shadow: 0 0 0 3px var(--good-tint); } .pill[data-status="connecting"] .pill-dot { background: var(--warm); animation: pulse 1.1s ease-in-out infinite; } .pill[data-status="disconnected"] { color: var(--danger); } .pill[data-status="disconnected"] .pill-dot { background: var(--danger); } @keyframes pulse { 50% { opacity: 0.3; } } /* ============================================================================ Sections, grids ============================================================================ */ .section { margin-top: var(--sp-5); } .section:first-of-type { margin-top: var(--sp-3); } .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); } .section-header h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .section-header .meta { color: var(--text-faint); font-size: 12px; font-weight: 600; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); } @media (min-width: 640px) { .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); } } /* ============================================================================ Tiles (device cards) ============================================================================ */ .tile { position: relative; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-tile); overflow: hidden; transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.1s var(--ease), box-shadow 0.2s var(--ease); } .tile-body { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; min-height: 132px; padding: var(--sp-4); text-align: left; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; } div.tile-body { cursor: default; } .tile:has(.tile-body:active) { transform: scale(0.98); } .tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); } .tile-icon { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--r-md); background: var(--surface-hi); color: var(--text-muted); flex: none; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .tile-icon svg { width: 22px; height: 22px; } .tile-meta { color: var(--text-faint); font-size: 11px; font-weight: 600; white-space: nowrap; } .tile-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tile-name { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile-state { font-size: 12.5px; color: var(--text-muted); } /* On / active state */ .tile[data-on="true"] { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .tile[data-on="true"] .tile-icon { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px var(--accent-glow); } .tile[data-on="true"] .tile-state { color: color-mix(in srgb, var(--accent) 65%, var(--text)); } /* Unavailable */ .tile[data-unavailable="true"] { opacity: 0.55; } .tile[data-unavailable="true"] .tile-icon { background: var(--surface-hi); color: var(--text-faint); } /* Status dot top-right for on-state (color-independent cue) */ .tile-flag { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); flex: none; margin-top: 4px; } .tile[data-on="true"] .tile-flag { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); } /* Sensor value tile */ .tile-value { font-size: clamp(26px, 7vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .tile-value .unit { font-size: 0.5em; font-weight: 600; color: var(--text-muted); margin-left: 3px; } /* Inline chip controls inside a tile */ .tile-actions { display: flex; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-4); } .chip { flex: 1; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s var(--ease), transform 0.1s var(--ease); } .chip:hover { background: var(--surface-hi); } .chip:active { transform: scale(0.95); } .chip svg { width: 17px; height: 17px; } .chip.chip-icon { flex: none; width: 46px; } .chip.chip-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .chip.chip-danger { background: var(--warm-tint); border-color: color-mix(in srgb, var(--warm) 45%, var(--line)); color: var(--warm); } /* ---- Scene cards ---- */ .scene-rail { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); margin: 0 calc(-1 * var(--sp-4)); padding-left: var(--sp-4); padding-right: var(--sp-4); scrollbar-width: none; } .scene-rail::-webkit-scrollbar { display: none; } .scene-card { scroll-snap-align: start; flex: 0 0 auto; width: 156px; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(150deg, var(--surface-2), var(--surface)); color: var(--text); text-align: left; cursor: pointer; transition: transform 0.12s var(--ease), border-color 0.15s var(--ease), box-shadow 0.2s var(--ease); } .scene-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-tile); } .scene-card:active { transform: scale(0.97); } .scene-card.scene-card--grid { width: auto; } .scene-card .tile-icon { background: var(--accent-tint); color: var(--accent); } .scene-card .scene-name { font-size: 15px; font-weight: 650; } .scene-card .scene-sub { font-size: 12px; color: var(--text-muted); } /* ============================================================================ Primary navigation — bottom bar (mobile) / side rail (wide) ============================================================================ */ .nav { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 14px); display: flex; gap: 4px; padding: 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-2); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); } .nav-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 16px; border: 0; background: transparent; color: var(--text-muted); border-radius: var(--r-pill); font-size: 10.5px; font-weight: 600; cursor: pointer; transition: color 0.15s var(--ease), background 0.15s var(--ease); } .nav-btn svg { width: 21px; height: 21px; } .nav-btn[aria-selected="true"] { color: var(--accent-ink); background: var(--accent); } .nav-btn:not([aria-selected="true"]):hover { color: var(--text); } @media (min-width: 920px) { #app { grid-template-columns: var(--rail-w) 1fr; } .nav { position: sticky; top: 0; left: 0; transform: none; height: 100dvh; flex-direction: column; gap: 6px; align-items: stretch; justify-content: flex-start; width: var(--rail-w); padding: var(--sp-4) var(--sp-3); border-radius: 0; border: 0; border-right: 1px solid var(--line); background: var(--canvas-2); box-shadow: none; backdrop-filter: none; } .nav .nav-brand { display: flex; align-items: center; gap: 10px; padding: var(--sp-2) var(--sp-3) var(--sp-4); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } .nav-btn { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px var(--sp-3); border-radius: var(--r-md); font-size: 14px; } .content { padding-bottom: var(--sp-6); } } @media (max-width: 919px) { .nav .nav-brand { display: none; } } /* brand mark */ .brand-mark { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-ink); flex: none; } .brand-mark svg { width: 18px; height: 18px; } /* ============================================================================ Segmented control (Devices filter, room selector) ============================================================================ */ .segmented { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .segmented::-webkit-scrollbar { display: none; } .seg { flex: 1 0 auto; white-space: nowrap; padding: 9px 16px; border: 0; background: transparent; color: var(--text-muted); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .seg[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); } .seg .seg-count { opacity: 0.7; margin-left: 5px; font-variant-numeric: tabular-nums; } /* Room chips (cards) */ .room-rail { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--sp-4); } .room-rail::-webkit-scrollbar { display: none; } .room-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text-muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease); } .room-chip svg { width: 18px; height: 18px; } .room-chip[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* ============================================================================ Empty / missing states ============================================================================ */ .empty { grid-column: 1 / -1; text-align: center; padding: var(--sp-6) var(--sp-4); color: var(--text-muted); border: 1px dashed var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 50%, transparent); } .empty .tile-icon { margin: 0 auto var(--sp-3); } .empty h3 { font-size: 16px; color: var(--text); margin-bottom: 4px; } .empty p { font-size: 13px; } /* ============================================================================ Toast ============================================================================ */ .toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px); transform: translate(-50%, 20px); z-index: 60; max-width: min(92vw, 420px); padding: 12px 18px; border-radius: var(--r-pill); background: var(--surface-hi); border: 1px solid var(--line); color: var(--text); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.error { background: var(--warm-tint); border-color: color-mix(in srgb, var(--warm) 50%, var(--line)); color: var(--warm); } @media (min-width: 920px) { .toast { bottom: 32px; } } /* ============================================================================ Dialogs: login + light sheet ============================================================================ */ dialog { color: var(--text); } dialog::backdrop { background: rgb(0 0 0 / 0.55); backdrop-filter: blur(3px); } .login { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-5); width: min(92vw, 360px); box-shadow: var(--shadow-2); } .login[open] { animation: pop 0.18s var(--ease); } .login h2 { font-size: 20px; font-weight: 700; margin-bottom: 6px; } .login .muted { color: var(--text-muted); font-size: 13px; margin-bottom: var(--sp-4); } .login form { display: flex; flex-direction: column; gap: var(--sp-3); } input[type="password"], input[type="text"] { width: 100%; padding: 13px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 15px; } input::placeholder { color: var(--text-faint); } .btn-primary { padding: 13px 18px; border: 0; border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 650; cursor: pointer; transition: filter 0.15s var(--ease), transform 0.1s var(--ease); } .btn-primary:hover { filter: brightness(1.08); } .btn-primary:active { transform: scale(0.98); } .btn-secondary { padding: 13px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; } .error { color: var(--danger); font-size: 13px; font-weight: 600; } /* ---- Light sheet (bottom) ---- */ .sheet { margin: 0; margin-top: auto; width: 100%; max-width: 460px; inset-inline: 0; margin-inline: auto; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface); padding: var(--sp-4) var(--sp-4) calc(env(safe-area-inset-bottom) + var(--sp-5)); box-shadow: var(--shadow-2); } .sheet[open] { animation: slide-up 0.24s var(--ease); } @media (min-width: 560px) { .sheet { margin-block: auto; border-radius: var(--r-xl); border-bottom: 1px solid var(--line); } .sheet[open] { animation: pop 0.2s var(--ease); } } .sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto var(--sp-4); } .sheet-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .sheet-header h3 { font-size: 18px; font-weight: 700; } .sheet-header .muted { color: var(--text-muted); font-size: 13px; } /* circular dial */ .dial-wrap { display: grid; place-items: center; padding: var(--sp-3) 0 var(--sp-4); } .dial { position: relative; width: min(72vw, 240px); aspect-ratio: 1; touch-action: none; cursor: pointer; user-select: none; } .dial svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; } .dial .dial-track { fill: none; stroke: var(--surface-hi); } .dial .dial-fill { fill: none; stroke: var(--accent); stroke-linecap: round; filter: drop-shadow(0 0 6px var(--accent-glow)); transition: stroke-dashoffset 0.12s var(--ease); } .dial-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; } .dial-pct { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .dial-pct .pct-sign { font-size: 0.45em; font-weight: 600; color: var(--text-muted); } .dial-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 600; } .sheet-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); } .sheet-actions > * { flex: 1; } @keyframes pop { from { transform: scale(0.94); opacity: 0; } } @keyframes slide-up { from { transform: translateY(24px); opacity: 0; } } /* ============================================================================ Skeleton loading ============================================================================ */ .skeleton { color: transparent !important; } .skeleton .tile { background: var(--surface); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }