/* Vendz Guest Wi-Fi captive portal — static client. Every asset is same-origin (walled garden): self-hosted fonts, no CDNs. */ /* ---------- Fonts (self-hosted woff2, latin) ---------- */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-600.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); } /* DM Sans ships as a variable font — one file covers 400/500/700. */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-sans.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-sans.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/dm-sans.woff2') format('woff2'); } @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-mono-500.woff2') format('woff2'); } /* ---------- Theme tokens ---------- */ :root { --accent: #FD7E14; --accent-hover: #FF9A43; --on-accent: #161514; --bg: #F7F7F8; --surface: #FFFFFF; --border: #E8E8EA; --ink: #111113; --muted: #6B7280; --faint: #9CA3AF; --pill: #FDEBD9; --soft: #FDEBD9; --home: #D4D4D8; --tick: #FFFFFF; --off: #EDEDEF; --error: #DC2626; } @media (prefers-color-scheme: dark) { :root { --bg: #0D0C0C; --surface: #1A1817; --border: #2A2725; --ink: #FFFFFF; --muted: #9A938C; --faint: #6A635C; --pill: #241C15; --soft: #3A200C; --home: #3A3634; --tick: #161514; --off: #232120; --error: #F87171; } } /* Manual override seam (no toggle UI in v1 — set data-theme on ). */ :root[data-theme="light"] { --bg: #F7F7F8; --surface: #FFFFFF; --border: #E8E8EA; --ink: #111113; --muted: #6B7280; --faint: #9CA3AF; --pill: #FDEBD9; --soft: #FDEBD9; --home: #D4D4D8; --tick: #FFFFFF; --off: #EDEDEF; --error: #DC2626; } :root[data-theme="dark"] { --bg: #0D0C0C; --surface: #1A1817; --border: #2A2725; --ink: #FFFFFF; --muted: #9A938C; --faint: #6A635C; --pill: #241C15; --soft: #3A200C; --home: #3A3634; --tick: #161514; --off: #232120; --error: #F87171; } /* ---------- Base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { background: var(--bg); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background .15s ease, color .15s ease; } [hidden] { display: none !important; } a { color: var(--accent); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--accent-hover); text-decoration: underline; } /* ---------- Screen shell (fills the real viewport — no device frame) ---------- */ .screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* ---------- Status bar ---------- */ .status-bar { height: 54px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 30px 6px; font-size: 14px; font-weight: 700; color: var(--ink); } .status-ssid { font-size: 12px; font-weight: 500; color: var(--faint); } .status-connected { font-size: 12px; font-weight: 700; color: var(--accent); } /* ---------- Welcome: hero ---------- */ .hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 34px; text-align: center; gap: 22px; } .logo { width: 96px; height: auto; display: block; } .title { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); text-wrap: pretty; } .subtitle { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 290px; text-wrap: pretty; } .session-pill { display: flex; align-items: center; gap: 12px; background: var(--pill); border-radius: 999px; padding: 11px 20px; transition: background .15s ease; } .pill-label { font-family: 'DM Mono', monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .pill-value { font-family: 'DM Mono', monospace; font-weight: 500; font-size: 13px; color: var(--ink); } /* ---------- Welcome: actions ---------- */ .actions { padding: 0 30px 16px; display: flex; flex-direction: column; gap: 18px; } .error { font-size: 14px; line-height: 1.45; color: var(--error); text-align: center; text-wrap: pretty; } .terms-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; -webkit-tap-highlight-color: transparent; } .checkbox { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; margin-top: 1px; border: 2px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; transition: all .15s ease; } .terms-row[aria-checked="true"] .checkbox { border-color: var(--accent); background: var(--accent); } .tick { width: 10px; height: 5px; border-left: 2.5px solid var(--tick); border-bottom: 2.5px solid var(--tick); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; transition: opacity .15s ease; } .terms-row[aria-checked="true"] .tick { opacity: 1; } .terms-text { font-size: 14px; line-height: 1.45; color: var(--muted); text-align: left; text-wrap: pretty; } .connect-btn { position: relative; width: 100%; border: 0; padding: 17px; border-radius: 18px; font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: 17px; text-align: center; background: var(--off); color: var(--faint); cursor: not-allowed; transition: all .15s ease; -webkit-tap-highlight-color: transparent; } .connect-btn:not(:disabled) { background: var(--accent); color: var(--on-accent); cursor: pointer; } /* Keep the accent surface while the request is in flight. */ .connect-btn.is-loading { background: var(--accent); color: var(--on-accent); cursor: wait; } .connect-btn.is-loading .btn-label { visibility: hidden; } .btn-spinner { display: none; } .connect-btn.is-loading .btn-spinner { display: block; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2.5px solid rgba(22, 21, 20, 0.25); border-top-color: var(--on-accent); border-radius: 50%; animation: portal-spin .7s linear infinite; } @keyframes portal-spin { to { transform: rotate(360deg); } } .disclaimer { font-size: 12px; line-height: 1.5; color: var(--faint); text-align: center; text-wrap: pretty; } /* ---------- Welcome: language pills ---------- */ .lang-pills { display: flex; justify-content: center; gap: 6px; padding: 0 30px calc(26px + env(safe-area-inset-bottom)); } .lang-pill { padding: 7px 13px; border-radius: 999px; font-family: inherit; font-size: 12px; font-weight: 500; background: transparent; border: 1px solid var(--border); color: var(--faint); cursor: pointer; transition: all .15s ease; -webkit-tap-highlight-color: transparent; } .lang-pill.is-active { border-color: var(--accent); color: var(--accent); } /* ---------- Connected ---------- */ .connected-header { padding: 34px 30px 30px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } .check-badge { width: 52px; height: 52px; border-radius: 50%; background: var(--soft); display: flex; align-items: center; justify-content: center; transition: background .15s ease; } .check-glyph { width: 19px; height: 10px; border-left: 3.5px solid var(--accent); border-bottom: 3.5px solid var(--accent); transform: rotate(-45deg) translate(2px, -3px); } .connected-title { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: 36px; line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); text-wrap: pretty; } .connected-sub { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 295px; text-wrap: pretty; } .details { padding: 0 30px; display: flex; flex-direction: column; gap: 14px; } .detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .detail-label { font-size: 13px; color: var(--faint); } .detail-network { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); } .detail-time { font-family: 'DM Mono', monospace; font-weight: 500; font-size: 15px; color: var(--ink); } .divider { height: 1px; background: var(--border); } .spacer { flex: 1; } /* ---------- Promo card ---------- */ .promo-card { margin: 0 20px calc(34px + env(safe-area-inset-bottom)); background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 20px; display: flex; flex-direction: column; gap: 16px; transition: background .15s ease, border-color .15s ease; } .promo-image { height: 150px; width: 100%; border-radius: 18px; object-fit: cover; display: block; } .promo-copy { display: flex; flex-direction: column; gap: 6px; } .promo-title { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: 19px; color: var(--ink); text-wrap: pretty; } .promo-body { font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; } .promo-cta { align-self: flex-start; font-weight: 700; font-size: 14px; color: var(--accent); cursor: pointer; } .promo-cta:hover { color: var(--accent-hover); } /* ---------- Home indicator ---------- */ .home-indicator { position: fixed; left: 50%; bottom: calc(9px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: 132px; height: 5px; border-radius: 3px; background: var(--home); pointer-events: none; }