/* Home dashboard — "the house, breathing" Native SF Pro Rounded, time-of-day ambient background, tiles that glow when on. */ :root { /* Time-of-day palette is set on by app.js. These are the night defaults so a cold load at 2am isn't a white flash. */ --bg-top: #0b1020; --bg-bottom: #05070f; --text: #f3f5fa; --text-dim: #9aa3b8; --tile: rgba(255, 255, 255, 0.07); --tile-border: rgba(255, 255, 255, 0.10); --tile-on: rgba(255, 255, 255, 0.14); --shadow: rgba(0, 0, 0, 0.45); /* Accents by device kind — the "on" glow colour. */ --glow-light: #ffcf6b; --glow-heat: #ff8a5c; --glow-cool: #5cc4ff; --glow-media: #b78bff; --glow-switch: #7fe0a0; --glow-cover: #8fb8ff; --radius: 22px; --gap: 12px; } :root[data-phase="morning"] { --bg-top: #ffd9a8; --bg-bottom: #ffb27a; --text: #3a2417; --text-dim: #8a6a54; --tile: rgba(255,255,255,0.42); --tile-border: rgba(255,255,255,0.55); --tile-on: rgba(255,255,255,0.72); --shadow: rgba(120,70,40,0.18); } :root[data-phase="day"] { --bg-top: #d7ecff; --bg-bottom: #a9d3f5; --text: #12263a; --text-dim: #4d6b85; --tile: rgba(255,255,255,0.55); --tile-border: rgba(255,255,255,0.7); --tile-on: rgba(255,255,255,0.85); --shadow: rgba(40,80,120,0.15); } :root[data-phase="evening"] { --bg-top: #4a3b6b; --bg-bottom: #2a2140; --text: #f4eefb; --text-dim: #b9aecf; --tile: rgba(255,255,255,0.10); --tile-border: rgba(255,255,255,0.14); --tile-on: rgba(255,255,255,0.18); --shadow: rgba(0,0,0,0.35); } /* night uses :root defaults above */ /* Detail-sheet surface, themed per phase (dark by default, light by day). */ :root { --sheet-bg: #171a26; --sheet-fg: #f3f5fa; --sheet-sub: rgba(255,255,255,0.55); --sheet-el: rgba(255,255,255,0.08); } :root[data-phase="morning"], :root[data-phase="day"] { --sheet-bg: #ffffff; --sheet-fg: #12263a; --sheet-sub: #4d6b85; --sheet-el: rgba(0,0,0,0.05); } :root[data-phase="evening"] { --sheet-bg: #241d38; --sheet-fg: #f4eefb; --sheet-sub: rgba(255,255,255,0.6); --sheet-el: rgba(255,255,255,0.09); } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: var(--text); background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%); background-attachment: fixed; -webkit-font-smoothing: antialiased; transition: color 1.2s ease; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .wrap { max-width: 620px; margin: 0 auto; padding: 22px 16px 60px; } /* Greeting header */ .greeting { margin: 14px 4px 26px; } .greeting h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; } .greeting p { margin: 0; font-size: 16px; color: var(--text-dim); font-weight: 500; } /* Room sections */ .room { margin-bottom: 28px; } .room > h2 { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--text-dim); margin: 0 4px 10px; } .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } /* Tiles */ .tile { position: relative; border: 1px solid var(--tile-border); background: var(--tile); border-radius: var(--radius); padding: 14px 15px 15px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; color: inherit; text-align: left; font: inherit; -webkit-tap-highlight-color: transparent; backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 6px 18px var(--shadow); transition: transform 0.14s ease, background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; overflow: hidden; } .tile:active { transform: scale(0.965); } .tile.wide { grid-column: span 2; } .tile .icon { font-size: 24px; line-height: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(127, 127, 127, 0.14); transition: background 0.4s ease, box-shadow 0.4s ease, color 0.4s ease; } .tile .label { margin-top: auto; } .tile .name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; display: block; } .tile .state { font-size: 13px; font-weight: 500; color: var(--text-dim); display: block; margin-top: 1px; } /* On-state glow — the signature. Colour is set per device kind. */ .tile.on { background: var(--tile-on); border-color: color-mix(in srgb, var(--glow) 45%, transparent); box-shadow: 0 8px 26px var(--shadow), 0 0 32px -6px var(--glow); } .tile.on .icon { background: color-mix(in srgb, var(--glow) 82%, white 8%); color: #1a1205; box-shadow: 0 0 20px -2px var(--glow); } .tile.on .state { color: color-mix(in srgb, var(--glow) 60%, var(--text)); } .tile.pending { opacity: 0.55; } .tile.unavailable { opacity: 0.4; } .tile.unavailable .state { color: var(--text-dim); } /* Set the active glow colour by kind */ .tile[data-kind="light"] { --glow: var(--glow-light); } .tile[data-kind="heat"] { --glow: var(--glow-heat); } .tile[data-kind="cool"] { --glow: var(--glow-cool); } .tile[data-kind="media"] { --glow: var(--glow-media); } .tile[data-kind="switch"] { --glow: var(--glow-switch); } .tile[data-kind="cover"] { --glow: var(--glow-cover); } .tile[data-kind="scene"] { --glow: var(--glow-light); } /* Status / empty / error states */ .notice { margin: 40px 6px; padding: 22px; border-radius: var(--radius); background: var(--tile); border: 1px solid var(--tile-border); color: var(--text-dim); line-height: 1.5; font-size: 15px; } .notice strong { color: var(--text); font-weight: 600; } .notice a { color: inherit; font-weight: 600; } .linkrow { text-align: center; margin-top: 34px; } .linkrow a { color: var(--text-dim); font-size: 13px; text-decoration: none; font-weight: 500; } /* "⋯" detail button on a tile */ .tile .more { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; background: rgba(127,127,127,0.16); color: var(--text); font-size: 17px; line-height: 1; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; opacity: 0.7; } .tile.on .more { background: rgba(0,0,0,0.16); color: #1a1205; opacity: 0.6; } .tile .more:active { transform: scale(0.9); } /* Bottom sheet */ .sheet-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.4); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity 0.25s ease; } .sheet-backdrop.show { opacity: 1; } .sheet { width: 100%; max-width: 560px; background: var(--sheet-bg); color: var(--sheet-fg); border-radius: 26px 26px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 -10px 40px rgba(0,0,0,0.3); } .sheet-backdrop.show .sheet { transform: translateY(0); } .sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--sheet-sub); opacity: 0.4; margin: 0 auto 8px; } .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .sheet-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } .sheet-close { font: inherit; font-weight: 600; font-size: 15px; color: var(--glow-cool); background: none; border: none; cursor: pointer; padding: 6px 2px; } .sheet-body { display: flex; flex-direction: column; gap: 20px; } .sheet-empty { color: var(--sheet-sub); text-align: center; } .bigtoggle { font: inherit; font-weight: 700; font-size: 17px; padding: 16px; border-radius: 16px; border: none; cursor: pointer; background: var(--sheet-el); color: var(--sheet-fg); } .bigtoggle.on { background: color-mix(in srgb, var(--glow-light) 85%, white 6%); color: #1a1205; } .slider-wrap { display: flex; flex-direction: column; gap: 10px; } .slider-label { font-size: 14px; font-weight: 600; color: var(--sheet-sub); display: flex; justify-content: space-between; } .slider-label b { color: var(--sheet-fg); font-weight: 700; font-variant-numeric: tabular-nums; } .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; border-radius: 18px; background: var(--sheet-el); outline: none; margin: 0; } .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.35); cursor: pointer; } .slider::-moz-range-thumb { width: 30px; height: 30px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.35); } .slider:disabled { opacity: 0.45; } .swatches { display: flex; flex-wrap: wrap; gap: 12px; } .swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(127,127,127,0.25); background: var(--sw); cursor: pointer; } .swatch:active { transform: scale(0.9); } .climate-cur { text-align: center; font-size: 46px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .climate-cur span { display: block; font-size: 12px; font-weight: 600; color: var(--sheet-sub); letter-spacing: 0.04em; margin-top: 2px; text-transform: uppercase; } .stepper { display: flex; align-items: center; justify-content: center; gap: 24px; } .stepper > button { width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer; background: var(--sheet-el); color: var(--sheet-fg); font-size: 30px; line-height: 1; } .stepper > button:active { transform: scale(0.92); } .target { min-width: 100px; text-align: center; font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; } .target span { display: block; font-size: 12px; font-weight: 600; color: var(--sheet-sub); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; } .modes { display: flex; gap: 10px; } .modes button { flex: 1; padding: 14px; border-radius: 14px; border: none; cursor: pointer; background: var(--sheet-el); color: var(--sheet-fg); font: inherit; font-weight: 600; font-size: 15px; } .modes button.sel { background: color-mix(in srgb, var(--glow-heat) 82%, white 6%); color: #2a1305; } .media-now { text-align: center; } .media-title { font-size: 18px; font-weight: 700; } .media-artist { font-size: 14px; color: var(--sheet-sub); margin-top: 3px; } .transport { display: flex; align-items: center; justify-content: center; gap: 28px; } .transport button { background: none; border: none; cursor: pointer; color: var(--sheet-fg); font-size: 24px; padding: 6px; } .transport .pp { width: 64px; height: 64px; border-radius: 50%; background: var(--sheet-el); display: grid; place-items: center; } .transport button:active { transform: scale(0.92); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } :focus-visible { outline: 3px solid color-mix(in srgb, var(--glow-light) 80%, white); outline-offset: 3px; }