/* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; min-height: 100vh; } /* ============================================================ APP SHELL (dashboard / admin) — uses brand tokens. Lives under so it inherits all the brand custom-properties (--bg, --amber, --rule, etc.). Selectors are kept legacy so existing dashboard/admin templates pick up the new look without any HTML changes. ============================================================ */ /* Push content below the fixed 64-px brand nav. */ .sh-app { padding-top: 64px; } /* Force the brand nav to always look "scrolled" on app pages (no hero video → no transparent state). */ .sh-nav.sh-nav-solid { background: color-mix(in oklch, var(--bg) 94%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--rule); } .sh-nav.sh-nav-solid .sh-nav-menu-inline > .sh-btn { max-width: 14rem; padding-top: 0.55rem; padding-bottom: 0.55rem; padding-left: 1rem; padding-right: 1rem; margin-left: 0; border-width: 1px; opacity: 1; transform: translateX(0); pointer-events: auto; } /* Legacy stub: a few admin redirects might still hit `.app-nav` — keep it invisible if it ever renders. */ .app-nav { display: none; } .spacer { flex: 1; } /* ============================================================ SHARED APP COMPONENTS ============================================================ */ .sh-app .container { max-width: 1000px; margin: 2.2rem auto 3.6rem; padding: 0 1.2rem; } .sh-app h1 { font-size: clamp(1.7rem, 2.2vw, 2.1rem); font-weight: 700; letter-spacing: -0.022em; margin-bottom: 1.6rem; color: var(--text); } .sh-app h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.012em; color: var(--text); margin-bottom: 0.6rem; } .sh-app .card { background: var(--bg-1); border: 1px solid var(--rule); border-radius: 14px; padding: 1.6rem 1.7rem; margin-bottom: 1.4rem; box-shadow: var(--card-elev, none); } .sh-app .glass { background: color-mix(in oklch, var(--bg-1) 70%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid color-mix(in oklch, var(--amber) 28%, var(--rule)); border-radius: 16px; } .sh-app .form-group { margin-bottom: 1rem; } .sh-app label { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.4rem; } .sh-app input[type=text], .sh-app input[type=email], .sh-app input[type=password], .sh-app input[type=date], .sh-app input[type=number], .sh-app select, .sh-app textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 8px; padding: 0.65rem 0.85rem; color: var(--text); font-size: 0.95rem; font-family: var(--sans); transition: border-color 160ms ease, box-shadow 160ms ease; } .sh-app input:focus, .sh-app select:focus, .sh-app textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px color-mix(in oklch, var(--amber) 22%, transparent); } .sh-app .btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.1rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; transition: transform 160ms var(--easeq), background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 200ms var(--easeq); } .sh-app .btn:hover { transform: translateY(-1px); } .sh-app .btn-primary { background: var(--amber); color: oklch(20% 0.06 60); border-color: var(--amber); } .sh-app .btn-primary:hover { background: color-mix(in oklch, var(--amber) 92%, white); box-shadow: 0 6px 24px -8px color-mix(in oklch, var(--amber) 60%, transparent); } .sh-app .btn-danger { background: transparent; color: oklch(82% 0.13 28); border-color: oklch(50% 0.18 28); } .sh-app .btn-danger:hover { background: color-mix(in oklch, oklch(50% 0.18 28) 18%, transparent); color: oklch(92% 0.11 28); } .sh-app .btn-sm { padding: 0.4rem 0.8rem; font-size: 0.68rem; } .sh-app table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .sh-app th { text-align: left; padding: 0.65rem 0.8rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--rule); } .sh-app td { padding: 0.75rem 0.8rem; border-bottom: 1px solid color-mix(in oklch, var(--rule) 50%, transparent); color: var(--text-mid); } .sh-app tr:hover td { background: color-mix(in oklch, var(--bg-1-hi) 50%, transparent); } .sh-app .badge { display: inline-block; padding: 0.22rem 0.65rem; border-radius: 999px; font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .sh-app .badge-green { background: color-mix(in oklch, oklch(58% 0.16 145) 16%, var(--bg-1)); color: oklch(86% 0.14 145); border: 1px solid color-mix(in oklch, oklch(58% 0.16 145) 45%, transparent); } .sh-app .badge-red { background: color-mix(in oklch, oklch(55% 0.20 28) 16%, var(--bg-1)); color: oklch(86% 0.13 28); border: 1px solid color-mix(in oklch, oklch(55% 0.20 28) 45%, transparent); } .sh-app .badge-yellow { background: color-mix(in oklch, var(--amber) 14%, var(--bg-1)); color: var(--amber); border: 1px solid color-mix(in oklch, var(--amber) 45%, transparent); } .sh-app .badge-gray { background: var(--bg-1-hi); color: var(--text-dim); border: 1px solid var(--rule); } .sh-app .tier-badge { display: inline-block; padding: 0.18rem 0.6rem; border-radius: 6px; font-family: var(--mono); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .sh-app .tier-free { background: color-mix(in oklch, var(--teal) 14%, var(--bg-1)); color: var(--teal); border: 1px solid color-mix(in oklch, var(--teal) 38%, transparent); } .sh-app .tier-pro { background: color-mix(in oklch, var(--amber) 14%, var(--bg-1)); color: var(--amber); border: 1px solid color-mix(in oklch, var(--amber) 45%, transparent); } .sh-app .error { color: oklch(82% 0.13 28); font-size: 0.9rem; margin-top: 0.5rem; } .sh-app .info { color: var(--teal-mid); font-size: 0.9rem; } .sh-app .center { text-align: center; } /* ============================================================ DASHBOARD-SPECIFIC COMPONENTS ============================================================ */ .sh-app .flash-card { padding: 1.3rem 1.6rem; margin-bottom: 1.6rem; border-radius: 16px; border: 1px solid color-mix(in oklch, var(--amber) 35%, var(--rule)); background: radial-gradient(ellipse 60% 60% at 0% 0%, color-mix(in oklch, var(--amber) 14%, transparent), transparent 70%), color-mix(in oklch, var(--bg-1) 80%, transparent); } .sh-app .flash-card strong { color: var(--amber); } .sh-app .flash-key-row { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; flex-wrap: wrap; } .sh-app .license-key-display { font-family: var(--mono); font-size: 1.02rem; color: var(--amber); background: var(--bg-2); padding: 0.5rem 0.9rem; border-radius: 8px; letter-spacing: 0.08em; border: 1px solid color-mix(in oklch, var(--amber) 30%, var(--rule)); } .sh-app .howto-steps { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid color-mix(in oklch, var(--rule) 60%, transparent); } .sh-app .howto-steps strong { color: var(--text); } .sh-app .expiry-block { margin-bottom: 0.9rem; } .sh-app .expiry-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.88rem; margin-bottom: 0.45rem; } .sh-app .expiry-label { color: var(--text-mid); } .sh-app .expiry-date { color: var(--text-faint); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; } .sh-app .progress-bar { height: 6px; background: var(--bg-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--rule); } .sh-app .progress-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; } .sh-app .fill-green { background: linear-gradient(90deg, oklch(50% 0.16 145), oklch(76% 0.18 145)); } .sh-app .fill-yellow { background: linear-gradient(90deg, var(--amber-deep), var(--amber)); } .sh-app .fill-red { background: linear-gradient(90deg, oklch(50% 0.20 28), oklch(76% 0.18 28)); } .sh-app .alert-banner { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.88rem; margin-bottom: 0.8rem; border: 1px solid transparent; } .sh-app .alert-red { background: color-mix(in oklch, oklch(50% 0.20 28) 14%, var(--bg-1)); border-color: color-mix(in oklch, oklch(50% 0.20 28) 45%, transparent); color: oklch(86% 0.13 28); } .sh-app .alert-yellow { background: color-mix(in oklch, var(--amber) 14%, var(--bg-1)); border-color: color-mix(in oklch, var(--amber) 45%, transparent); color: var(--amber); } /* ============================================================ DASHBOARD — ADMIN BANNER + SWITCH INSTRUCTIONS ============================================================ */ .sh-app .admin-hint-banner { background: color-mix(in oklch, var(--amber) 10%, var(--bg-1)); border: 1px solid color-mix(in oklch, var(--amber) 30%, var(--rule)); border-radius: 10px; padding: 0.7rem 1.1rem; font-size: 0.85rem; color: var(--text-mid); margin-bottom: 1.6rem; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; } .sh-app .admin-hint-banner a { color: var(--amber); text-decoration: none; font-weight: 600; } .sh-app .admin-hint-banner a:hover { text-decoration: underline; } .sh-app .switch-instructions { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 10px; padding: 0.95rem 1.1rem; margin-top: 0.9rem; font-size: 0.86rem; color: var(--text-mid); } .sh-app .switch-instructions strong { color: var(--text); } .sh-app .switch-instructions ol { margin: 0.5rem 0 0; padding-left: 1.3rem; line-height: 1.8; } /* ============================================================ ADMIN — STATS ============================================================ */ .sh-app .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.9rem; margin-bottom: 1.6rem; } .sh-app .stat-card { background: var(--bg-1); border: 1px solid var(--rule); border-radius: 12px; padding: 1.1rem 1.2rem; text-align: center; } .sh-app .stat-num { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.025em; color: var(--text); line-height: 1; } .sh-app .stat-num.green { color: oklch(82% 0.16 145); } .sh-app .stat-num.yellow { color: var(--amber); } .sh-app .stat-num.accent { color: var(--teal); } .sh-app .stat-label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-top: 0.4rem; } /* Small label tags for HA-detected devices / claim metadata. */ .sh-app .device-ha-tag { display: inline-block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); margin-left: 0.4rem; } .sh-app .admin-key-mini { font-family: var(--mono); font-size: 0.78rem; color: var(--amber); margin-left: auto; } .sh-app .claim-meta { margin-left: 0.5rem; color: var(--text-faint); font-family: var(--mono); font-size: 0.72rem; } /* Filter grid for admin (kept loose, no hard-coded inline widths). */ .sh-app .admin-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem; align-items: end; } /* ============================================================ DASHBOARD V2 — single-license hero card Apple-style: one wide canvas, generous breathing room, stripes separated by hairlines, one big focal point per stripe. ============================================================ */ .dash { max-width: 880px; margin: clamp(2rem, 5vh, 4rem) auto clamp(3rem, 7vh, 5.5rem); padding: 0 1.4rem; } .dash-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.6rem, 4vh, 2.6rem); } .dash-eyebrow { flex: 0 0 100%; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.35rem; } .dash-title { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--text); margin: 0; } .dash-admin-link { margin-left: auto; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--amber); text-decoration: none; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--amber) 40%, transparent); transition: background 160ms ease, transform 160ms var(--easeq); } .dash-admin-link:hover { background: color-mix(in oklch, var(--amber) 10%, transparent); transform: translateY(-1px); } /* ── New-license flash (after first login) ──────────────────── */ .dash-flash { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.4rem; margin-bottom: 1.6rem; border-radius: 16px; background: radial-gradient(ellipse 70% 100% at 0% 0%, color-mix(in oklch, var(--amber) 16%, transparent), transparent 70%), color-mix(in oklch, var(--bg-1) 75%, transparent); border: 1px solid color-mix(in oklch, var(--amber) 30%, var(--rule)); } .dash-flash-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: oklch(20% 0.06 60); background: var(--amber); } .dash-flash-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.012em; color: var(--text); margin: 0 0 0.25rem; } .dash-flash-text { font-size: 0.92rem; line-height: 1.5; color: var(--text-mid); margin: 0; max-width: 56ch; } /* ── Empty state ────────────────────────────────────────────── */ .dash-empty { padding: 4.2rem 2rem; text-align: center; border: 1px dashed color-mix(in oklch, var(--rule) 70%, transparent); border-radius: 20px; background: color-mix(in oklch, var(--bg-1) 40%, transparent); } .dash-empty-mark { display: inline-flex; gap: 6px; margin-bottom: 1.5rem; opacity: 0.55; } .dash-empty-mark span { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); animation: dash-empty-pulse 1.8s var(--easeq) infinite; } .dash-empty-mark span:nth-child(2) { animation-delay: 0.2s; opacity: 0.7; } .dash-empty-mark span:nth-child(3) { animation-delay: 0.4s; opacity: 0.45; } @keyframes dash-empty-pulse { 0%, 100% { transform: scale(0.85); } 50% { transform: scale(1.1); } } .dash-empty h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.022em; color: var(--text); margin: 0 0 0.6rem; } .dash-empty p { color: var(--text-mid); font-size: 0.98rem; line-height: 1.55; max-width: 42ch; margin: 0 auto 1.6rem; } /* ============================================================ LICENSE CARD — the centerpiece ============================================================ */ .lic-card { position: relative; background: radial-gradient(ellipse 60% 30% at 100% 0%, color-mix(in oklch, var(--amber) 10%, transparent), transparent 70%), var(--bg-1); border: 1px solid var(--rule); border-radius: 22px; overflow: hidden; box-shadow: var(--card-elev); margin-bottom: 1.6rem; } .lic-card.is-suspended, .lic-card.is-revoked, .lic-card.is-expired { background: var(--bg-1); /* drop the amber glow when not active */ } /* Hairline separator between every stripe inside a card. */ .lic-card > * + * { border-top: 1px solid color-mix(in oklch, var(--rule) 55%, transparent); } /* ── Stripe: identity ───────────────────────────────────────── */ .lic-identity { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.6rem; padding: clamp(1.6rem, 3.6vw, 2.4rem) clamp(1.6rem, 3.6vw, 2.4rem) clamp(1.4rem, 3vw, 2rem); flex-wrap: wrap; } .lic-identity-main { min-width: 0; } .lic-tier-pill { display: inline-block; font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; padding: 0.28rem 0.65rem; border-radius: 6px; margin-bottom: 0.85rem; } .lic-tier-free { background: color-mix(in oklch, var(--teal) 14%, var(--bg-2)); color: var(--teal); border: 1px solid color-mix(in oklch, var(--teal) 38%, transparent); } .lic-tier-pro { background: color-mix(in oklch, var(--amber) 14%, var(--bg-2)); color: var(--amber); border: 1px solid color-mix(in oklch, var(--amber) 45%, transparent); } .lic-id-title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--text); margin: 0 0 0.4rem; } .lic-id-sub { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--text-faint); margin: 0; } .lic-status { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem 0.4rem 0.75rem; border-radius: 999px; font-family: var(--mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent; white-space: nowrap; } .lic-status-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; } .lic-status.is-active { color: oklch(82% 0.16 145); background: color-mix(in oklch, oklch(58% 0.16 145) 14%, var(--bg-1)); border-color: color-mix(in oklch, oklch(58% 0.16 145) 40%, transparent); } .lic-status.is-active .lic-status-dot { background: oklch(82% 0.16 145); animation: lic-pulse 2.2s ease-in-out infinite; } .lic-status.is-warn { color: var(--amber); background: color-mix(in oklch, var(--amber) 14%, var(--bg-1)); border-color: color-mix(in oklch, var(--amber) 40%, transparent); } .lic-status.is-warn .lic-status-dot { background: var(--amber); } .lic-status.is-error { color: oklch(82% 0.14 28); background: color-mix(in oklch, oklch(55% 0.20 28) 14%, var(--bg-1)); border-color: color-mix(in oklch, oklch(55% 0.20 28) 40%, transparent); } .lic-status.is-error .lic-status-dot { background: oklch(82% 0.14 28); } @keyframes lic-pulse { 0%, 100% { opacity: 0.55; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } } /* ── Stripe: countdown hero ─────────────────────────────────── */ .lic-countdown { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem, 4vw, 2.4rem); align-items: center; padding: clamp(2rem, 4.5vw, 3rem) clamp(1.6rem, 3.6vw, 2.4rem); } .lic-cd-numeric { display: flex; align-items: baseline; gap: 0.45rem; } .lic-cd-num { font-size: clamp(4.2rem, 12vw, 7.5rem); font-weight: 700; letter-spacing: -0.06em; line-height: 0.85; color: var(--text); font-variant-numeric: tabular-nums; } .lic-cd-unit { font-size: 1rem; font-weight: 500; color: var(--text-dim); letter-spacing: -0.005em; } .lic-cd-meta { min-width: 0; } .lic-cd-label { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.3rem; } .lic-cd-date { display: block; font-size: 1.05rem; font-weight: 500; color: var(--text); letter-spacing: -0.012em; margin-bottom: 1.1rem; } .lic-cd-bar { height: 4px; background: color-mix(in oklch, var(--bg-2) 60%, transparent); border-radius: 999px; overflow: hidden; } .lic-cd-fill { height: 100%; background: linear-gradient(90deg, color-mix(in oklch, oklch(60% 0.16 145) 70%, transparent), oklch(82% 0.16 145)); border-radius: 999px; transition: width 0.5s var(--easeq); } .lic-cd-fill.is-soon { background: linear-gradient(90deg, var(--amber-deep), var(--amber)); } .lic-cd-fill.is-urgent { background: linear-gradient(90deg, oklch(50% 0.20 28), oklch(76% 0.18 28)); } /* ── Stripe: banners (expired / suspended) ──────────────────── */ .lic-banner { display: flex; align-items: flex-start; gap: 0.9rem; padding: clamp(1.2rem, 2.5vw, 1.6rem) clamp(1.6rem, 3.6vw, 2.4rem); font-size: 0.95rem; line-height: 1.55; } .lic-banner strong { font-size: 1.04rem; font-weight: 600; letter-spacing: -0.012em; } .lic-banner span { color: var(--text-mid); font-size: 0.88rem; } .lic-banner-mark { flex: 0 0 auto; width: 6px; align-self: stretch; border-radius: 4px; } .lic-banner.is-error { color: oklch(86% 0.13 28); } .lic-banner.is-error .lic-banner-mark { background: oklch(55% 0.20 28); } .lic-banner.is-warn { color: var(--amber); } .lic-banner.is-warn .lic-banner-mark { background: var(--amber); } /* ── Stripe label (shared) ──────────────────────────────────── */ .lic-section-label { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); } /* ── Stripe: license key ────────────────────────────────────── */ .lic-keyblock { padding: clamp(1.6rem, 3.6vw, 2.2rem) clamp(1.6rem, 3.6vw, 2.4rem); } .lic-keyblock .lic-section-label { margin-bottom: 0.85rem; } .lic-key-row { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; } .lic-key { flex: 1 1 22rem; min-width: 0; font-family: var(--mono); font-size: clamp(0.95rem, 1.4vw, 1.15rem); font-weight: 500; letter-spacing: 0.1em; color: var(--amber); background: var(--bg-2); padding: 0.95rem 1.1rem; border-radius: 10px; border: 1px solid color-mix(in oklch, var(--amber) 22%, var(--rule)); word-break: break-all; } .lic-key.is-redacted { color: var(--text-faint); border-color: var(--rule); } .lic-key-note { font-family: var(--mono); font-size: 0.74rem; color: var(--text-faint); } .lic-key-copy { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.8rem 1.1rem; background: var(--amber); color: oklch(20% 0.06 60); border: 1px solid var(--amber); border-radius: 10px; cursor: pointer; font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: transform 160ms var(--easeq), background 160ms ease, box-shadow 200ms var(--easeq); } .lic-key-copy:hover { transform: translateY(-1px); background: color-mix(in oklch, var(--amber) 92%, white); box-shadow: 0 6px 24px -8px color-mix(in oklch, var(--amber) 60%, transparent); } .lic-key-copy.is-copied { background: oklch(82% 0.16 145); border-color: oklch(82% 0.16 145); color: oklch(22% 0.06 145); } .lic-key-copy-ico { flex: 0 0 auto; } .lic-key-hint { margin: 0.85rem 0 0; font-size: 0.82rem; color: var(--text-faint); max-width: 56ch; line-height: 1.5; } /* ── Stripe: devices ────────────────────────────────────────── */ .lic-devices { padding: clamp(1.6rem, 3.6vw, 2.2rem) clamp(1.6rem, 3.6vw, 2.4rem) clamp(1.8rem, 4vw, 2.4rem); } .lic-devices-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; } .lic-devices-count { font-family: var(--mono); font-size: 0.76rem; color: var(--text-dim); letter-spacing: 0.04em; } .lic-devices-count strong { color: var(--text); font-weight: 600; } .lic-devices-empty { margin: 0 0 1.4rem; color: var(--text-faint); font-size: 0.92rem; } .lic-device-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; } .lic-device { display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem; align-items: center; padding: 1.1rem 1.2rem; border-radius: 14px; background: color-mix(in oklch, var(--bg-2) 65%, transparent); border: 1px solid color-mix(in oklch, var(--rule) 65%, transparent); } .lic-device.is-released { opacity: 0.72; } .lic-device-icon { flex: 0 0 auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 11px; color: var(--text); background: color-mix(in oklch, var(--bg-1-hi) 80%, transparent); border: 1px solid var(--rule); } .lic-device-info { min-width: 0; } .lic-device-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.25rem; } .lic-device-name { font-size: 1rem; font-weight: 600; letter-spacing: -0.012em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lic-device-tag { flex: 0 0 auto; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.18rem 0.45rem; border-radius: 4px; background: color-mix(in oklch, var(--amber) 14%, var(--bg-1)); color: var(--amber); border: 1px solid color-mix(in oklch, var(--amber) 40%, transparent); } .lic-device-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-family: var(--mono); font-size: 0.76rem; color: var(--text-faint); margin-bottom: 0.45rem; } .lic-device-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); flex: 0 0 auto; } .lic-device-hb { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .lic-device-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.22rem 0.55rem 0.22rem 0.5rem; border-radius: 999px; border: 1px solid transparent; } .lic-device-pill span { width: 6px; height: 6px; border-radius: 50%; } .lic-device-pill.is-green { color: oklch(82% 0.16 145); background: color-mix(in oklch, oklch(58% 0.16 145) 14%, transparent); border-color: color-mix(in oklch, oklch(58% 0.16 145) 38%, transparent); } .lic-device-pill.is-green span { background: oklch(82% 0.16 145); box-shadow: 0 0 6px oklch(82% 0.16 145); } .lic-device-pill.is-red { color: oklch(82% 0.13 28); background: color-mix(in oklch, oklch(55% 0.20 28) 14%, transparent); border-color: color-mix(in oklch, oklch(55% 0.20 28) 38%, transparent); } .lic-device-pill.is-red span { background: oklch(82% 0.13 28); } .lic-device-hb-time { font-family: var(--mono); font-size: 0.74rem; color: var(--text-faint); } .lic-device-action { flex: 0 0 auto; } .lic-device-release { background: transparent; border: 1px solid var(--rule); color: var(--text-dim); font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.55rem 0.95rem; border-radius: 999px; cursor: pointer; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; } .lic-device-release:hover { border-color: color-mix(in oklch, oklch(55% 0.20 28) 60%, var(--rule)); color: oklch(86% 0.13 28); background: color-mix(in oklch, oklch(55% 0.20 28) 10%, transparent); } /* ── Activation guidance ────────────────────────────────────── */ .lic-howto { margin-top: 1.6rem; padding: 1.4rem 1.5rem 1.55rem; border-radius: 14px; background: color-mix(in oklch, var(--bg-2) 60%, transparent); border: 1px dashed color-mix(in oklch, var(--rule) 80%, transparent); } .lic-howto-head { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 1rem; flex-wrap: wrap; } .lic-howto-eyebrow { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); } .lic-howto-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.012em; color: var(--text); } .lic-howto-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; counter-reset: lic-howto; } .lic-howto-steps li { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; } .lic-howto-n { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-1); border: 1px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.74rem; font-weight: 600; color: var(--text); } .lic-howto-t { color: var(--text-mid); font-size: 0.92rem; line-height: 1.55; padding-top: 0.2rem; } .lic-howto-link { color: var(--accent, #f59e0b); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .lic-howto-link:hover { text-decoration-thickness: 2px; } /* ── Mobile tightening ──────────────────────────────────────── */ @media (max-width: 720px) { .dash { padding: 0 1rem; } .dash-title { font-size: 1.85rem; } .lic-identity { flex-direction: column; gap: 1rem; } .lic-identity-status { align-self: flex-start; } .lic-countdown { grid-template-columns: 1fr; gap: 0.6rem; } .lic-cd-num { font-size: 5.2rem; } .lic-device { grid-template-columns: auto 1fr; row-gap: 0.8rem; } .lic-device-action { grid-column: 1 / -1; justify-self: end; } .lic-key-row { flex-direction: column; align-items: stretch; } .lic-key-copy { justify-content: center; } } /* Small alert variants for the admin pages. */ .sh-app code { font-family: var(--mono); font-size: 0.84em; background: color-mix(in oklch, var(--bg-2) 70%, transparent); padding: 0.1rem 0.35rem; border-radius: 4px; } /* ============================================================ LANDING — TECH PRODUCT, DARK WARM GRAPHITE Computer vision feel: telemetry teal, activation amber. Self-contained: no overlap with dashboard styles. ============================================================ */ .sh { --bg: oklch(10% 0.007 75); --bg-1: oklch(23% 0.014 75); --bg-1-hi: oklch(27% 0.014 75); --bg-2: oklch(7% 0.005 75); --bg-deep: oklch(4% 0.003 75); --rule: oklch(42% 0.018 75); --rule-soft: oklch(32% 0.014 75); --card-elev: inset 0 1px 0 oklch(99% 0.003 80 / 0.10), 0 1px 2px oklch(0% 0 0 / 0.45), 0 4px 10px -2px oklch(0% 0 0 / 0.50), 0 18px 36px -16px oklch(0% 0 0 / 0.62), 0 34px 80px -28px oklch(0% 0 0 / 0.72); /* Premium card elevation: same shape, deeper farthest layer. Use on hero pieces (large photos, comparison table, ESP32 band). */ --card-elev-hi: inset 0 1px 0 oklch(99% 0.003 80 / 0.12), 0 2px 4px oklch(0% 0 0 / 0.55), 0 8px 18px -4px oklch(0% 0 0 / 0.55), 0 24px 48px -18px oklch(0% 0 0 / 0.70), 0 50px 110px -40px oklch(0% 0 0 / 0.85); --text: oklch(99% 0.003 80); --text-mid: oklch(93% 0.010 75); --text-dim: oklch(82% 0.014 75); --text-faint: oklch(72% 0.014 75); --amber: oklch(84% 0.18 75); --amber-mid: oklch(76% 0.16 70); --amber-deep: oklch(68% 0.19 55); --teal: oklch(86% 0.13 200); --teal-mid: oklch(78% 0.12 200); --teal-deep: oklch(62% 0.11 205); --paper: oklch(99% 0.003 80); --paper-2: oklch(96% 0.006 75); --paper-3: oklch(91% 0.008 75); --ink: oklch(13% 0.012 60); --ink-mid: oklch(38% 0.014 60); --ink-dim: oklch(58% 0.014 60); --ink-rule: oklch(85% 0.010 70); --sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, monospace; --easeq: cubic-bezier(0.16, 1, 0.3, 1); background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; overflow-x: hidden; } .sh::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse 60% 40% at 80% 0%, color-mix(in oklch, var(--amber) 8%, transparent) 0%, transparent 60%), radial-gradient(ellipse 50% 35% at 0% 100%, color-mix(in oklch, var(--teal) 6%, transparent) 0%, transparent 65%); z-index: 0; pointer-events: none; } :where(.sh) a { color: inherit; text-decoration: none; } .sh code, .sh pre { font-family: var(--mono); } .sh em { font-style: normal; } /* ============================================================ NAV ============================================================ */ .sh-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; gap: 1.2rem; height: 64px; padding: 0 1.6rem; background: transparent; border-bottom: 1.5px solid transparent; transition: background 260ms ease, border-color 260ms ease, backdrop-filter 260ms ease, -webkit-backdrop-filter 260ms ease; } .sh-nav.is-scrolled { background: color-mix(in oklch, var(--bg) 94%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--rule); } /* Collapse the nav CTA to zero footprint while the bar is transparent over the hero video — Log in (or the last visible link) sits flush against the right edge, no empty slot. When the nav goes solid, the button slides in from the right and pushes the other links left as it expands. Scoped to the inline menu only so the mobile side-panel button (under `.sh-nav-menu` displayed as a slide-in) is never collapsed by this rule. */ .sh-nav-menu-inline > .sh-btn { max-width: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; margin-left: -1.2rem; /* cancel the flex gap before the button */ border-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transform: translateX(18px); pointer-events: none; transition: max-width 380ms cubic-bezier(0.22, 1, 0.36, 1), padding 380ms cubic-bezier(0.22, 1, 0.36, 1), margin 380ms cubic-bezier(0.22, 1, 0.36, 1), border-width 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease 60ms, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .sh-nav.is-scrolled .sh-nav-menu-inline > .sh-btn { max-width: 14rem; padding-top: 0.55rem; padding-bottom: 0.55rem; padding-left: 1rem; padding-right: 1rem; margin-left: 0; border-width: 1px; opacity: 1; transform: translateX(0); pointer-events: auto; } /* Reserve the nav's height as scroll-anchor padding so #anchors don't land underneath the fixed bar. */ html { scroll-padding-top: 64px; } .sh-mark { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.98rem; letter-spacing: -0.005em; color: var(--text); line-height: 1; } .sh-mark-logo { /* Sized to the cap-height of the wordmark so it sits balanced next to it. Stays well within the 64-px nav. The new logo PNG has almost no internal padding, so this height is smaller than the old one to keep the visible mark balanced with the text. */ height: 22px; width: auto; display: block; user-select: none; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); } .sh-mark > .sh-mark-bk, .sh-mark > .sh-mark-w { /* Center-align with the logo (was baseline, which dropped the text below the logo's optical center). */ align-self: center; line-height: 1; } .sh-mark-bk { color: var(--teal-mid); font-family: var(--mono); font-weight: 500; font-size: 0.92rem; } .sh-mark-w { color: var(--text); } .sh-mark-tag { font-family: var(--mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; color: var(--text); padding: 0.24rem 0.6rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg-1); } .sh-nav-spacer { flex: 1; } /* Desktop inline navigation (lives inside