/* TempoLife privacy.php + terms.php public-shell skin — v3 design (2026-09-18). The two legal pages share this skin behind their own tl-app-feel class. It reads --v3s-* / --v3k-* / --v3i-* tokens, which in the app live in tl-dash-v3.skin.css. These authless pages must not pull the full app skin, so the exact token subset used here is mirrored below (light / dark / black / auto-dark — values copied from tl-dash-v3.skin.css; the --v3k-* accents are theme-constant by design). The sup-* shell mirrors support.css so every public surface shares one header language (40px round back, language pills, open-app CTA). E5-safe: no blur backdrops. */ :root { color-scheme: light dark; } /* ── v3 tokens (minimal mirror of tl-dash-v3.skin.css) ───────── */ html.tl-app-feel { --v3s-canvas: #F2F4F8; --v3s-card: #FFFFFF; --v3s-card-grad: none; --v3s-card-2: #F4F6FA; --v3s-line: rgba(15,23,42,.07); --v3s-line-2: rgba(15,23,42,.05); --v3s-shadow: 0 1px 2px rgba(15,23,42,.05), 0 12px 28px -18px rgba(15,23,42,.22); --v3s-t1: #0B1220; --v3s-t2: #3F4B5F; --v3s-t3: #64748B; --v3s-t4: #94A3B8; --v3s-track: rgba(15,23,42,.08); --v3s-pos: #059669; --v3s-neg: #E11D48; --v3k-bmi: #0284C7; --v3k-gold: #D97706; --v3i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); } html.tl-app-feel[data-theme="dark"] { --v3s-canvas: #07090F; --v3s-card: #0F131D; --v3s-card-grad: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 55%); --v3s-card-2: rgba(255,255,255,.05); --v3s-line: rgba(255,255,255,.075); --v3s-line-2: rgba(255,255,255,.055); --v3s-shadow: 0 1px 0 rgba(0,0,0,.35), 0 16px 36px -20px rgba(0,0,0,.85); --v3s-t1: #F3F6FC; --v3s-t2: #B7C1D3; --v3s-t3: #8691A7; --v3s-t4: #5D687E; --v3s-track: rgba(255,255,255,.08); --v3s-pos: #34D399; --v3s-neg: #FB7185; } html.tl-app-feel[data-theme="black"] { --v3s-canvas: #0B0C10; --v3s-card: #12141A; --v3s-card-grad: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 55%); --v3s-card-2: rgba(255,255,255,.05); --v3s-line: rgba(255,255,255,.08); --v3s-line-2: rgba(255,255,255,.055); --v3s-shadow: 0 1px 0 rgba(0,0,0,.35), 0 16px 36px -20px rgba(0,0,0,.85); --v3s-t1: #F3F4F6; --v3s-t2: #B6BCC6; --v3s-t3: #8B93A0; --v3s-t4: #5F6673; --v3s-track: rgba(255,255,255,.08); --v3s-pos: #34D399; --v3s-neg: #FB7185; } @media (prefers-color-scheme: dark) { html.tl-app-feel:not([data-theme-manual])[data-theme="light"], html.tl-app-feel[data-theme="auto"] { --v3s-canvas: #07090F; --v3s-card: #0F131D; --v3s-card-grad: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 55%); --v3s-card-2: rgba(255,255,255,.05); --v3s-line: rgba(255,255,255,.075); --v3s-line-2: rgba(255,255,255,.055); --v3s-shadow: 0 1px 0 rgba(0,0,0,.35), 0 16px 36px -20px rgba(0,0,0,.85); --v3s-t1: #F3F6FC; --v3s-t2: #B7C1D3; --v3s-t3: #8691A7; --v3s-t4: #5D687E; --v3s-track: rgba(255,255,255,.08); --v3s-pos: #34D399; --v3s-neg: #FB7185; } } /* ── Shell ── */ html.tl-app-feel body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; background: var(--v3s-canvas); color: var(--v3s-t1); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.7; -webkit-font-smoothing: antialiased; } html.tl-app-feel .sup-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: var(--v3s-canvas); border-bottom: 1px solid var(--v3s-line); position: sticky; top: 0; z-index: 20; } /* Edge-to-edge safe area: env() covers iOS + notched browsers; on the Android WebView env() resolves to its fallback, so html.is-apk (set by the page bootstrap when window.Capacitor exists) adds the app shell's own 28px fallback until native insets arrive — the page asks for them with notifyPageReady (2026-09-19: the floor alone left the header under a tall status bar, as on support.php). Same pattern as index.php's .app. */ html.tl-app-feel .sup-header { padding-top: calc(12px + env(safe-area-inset-top, 0px)); } html.tl-app-feel.is-apk .sup-header { padding-top: calc(8px + max(env(safe-area-inset-top, 0px), var(--tl-safe-top, 0px), 28px)); } html.tl-app-feel.is-apk.native-insets-ready .sup-header { padding-top: calc(8px + max(env(safe-area-inset-top, 0px), var(--tl-safe-top, 0px))); } /* Already inside the app: "Open the app" only reloaded the app's home and pushed the sticky header onto a second row. The back button covers it. */ html.tl-app-feel.is-apk .sup-open { display: none; } /* Narrow phones: the wordmark would push the language pills onto a second sticky row; the icon alone keeps the header one row (aria-label stays). */ @media (max-width: 380px) { html.tl-app-feel .sup-logo span { display: none; } } /* Round v3 back button — same pattern as support.php and the in-app header back (40px circle, card-grad surface, --v3i-back mask). */ html.tl-app-feel .sup-back { position: relative; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; font-size: 0; cursor: pointer; color: var(--v3s-t1); background: var(--v3s-card-grad), var(--v3s-card); box-shadow: 0 0 0 1px var(--v3s-line), var(--v3s-shadow); } html.tl-app-feel .sup-back::before { content: ""; position: absolute; inset: 11px; background: currentColor; -webkit-mask: var(--v3i-back) center / contain no-repeat; mask: var(--v3i-back) center / contain no-repeat; } html.tl-app-feel .sup-back:active { transform: scale(.92); } html.tl-app-feel .sup-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--v3s-t1); font-weight: 800; font-size: 16px; letter-spacing: -.02em; } html.tl-app-feel .sup-logo .sup-logo-ico { width: 30px; height: 30px; border-radius: 9px; display: block; object-fit: cover; } html.tl-app-feel .sup-langs { display: inline-flex; gap: 4px; margin-left: auto; } html.tl-app-feel .sup-langs a { min-width: 40px; min-height: 36px; padding: 7px 11px; border: 0; border-radius: 999px; cursor: pointer; background: var(--v3s-card-grad), var(--v3s-card); color: var(--v3s-t3); box-shadow: 0 0 0 1px var(--v3s-line); font-size: 12px; font-weight: 700; font-family: inherit; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } html.tl-app-feel .sup-langs a.on { color: var(--v3s-t1); background: var(--v3s-card-2); box-shadow: 0 0 0 1px var(--v3s-line-2), var(--v3s-shadow); } html.tl-app-feel .sup-langs a:active { transform: scale(.95); } html.tl-app-feel .sup-open { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; background: var(--v3k-bmi); color: #fff; border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 750; min-height: 40px; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--v3k-bmi) 70%, transparent); } html.tl-app-feel .sup-open:active { transform: scale(.97); } html.tl-app-feel .sup-main { flex: 1; width: 100%; max-width: 740px; margin: 0 auto; padding: 18px 14px 40px; box-sizing: border-box; } html.tl-app-feel .sup-hero { padding: 6px 4px 14px; } html.tl-app-feel .sup-hero h1 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--v3s-t1); } html.tl-app-feel .sup-hero .updated { margin: 0; color: var(--v3s-t3); font-size: 13px; font-weight: 500; } /* ── Legal content (section cards) ── */ html.tl-app-feel .legal-card { background: var(--v3s-card-grad), var(--v3s-card); border-radius: 22px; box-shadow: 0 0 0 1px var(--v3s-line), var(--v3s-shadow); padding: 22px 22px 24px; margin-bottom: 14px; } html.tl-app-feel .legal-card h2 { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--v3s-line-2); font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--v3s-t1); } html.tl-app-feel .legal-card h3 { font-size: 15px; font-weight: 700; color: var(--v3s-t1); margin: 18px 0 8px; } html.tl-app-feel .legal-card p { font-size: 15px; color: var(--v3s-t2); margin: 0 0 12px; } html.tl-app-feel .legal-card ul { padding-left: 22px; margin: 0 0 12px; } html.tl-app-feel .legal-card li { font-size: 15px; color: var(--v3s-t2); margin-bottom: 6px; } html.tl-app-feel .legal-card a { color: var(--v3k-bmi); text-decoration: none; font-weight: 600; } html.tl-app-feel .legal-card a:hover { text-decoration: underline; } html.tl-app-feel .legal-card strong { color: var(--v3s-t1); } html.tl-app-feel .legal-card code { background: var(--v3s-card-2); padding: 1px 6px; border-radius: 6px; font-size: 13px; color: var(--v3s-t1); } /* Tables (the old inline #f0f4f8/#e8edf4 styles are gone; these classes carry the same grid, now token-driven so dark themes stay readable). */ html.tl-app-feel .legal-card table.tl-tbl { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0; display: block; overflow-x: auto; } html.tl-app-feel .legal-card table.tl-tbl-sm { font-size: 13px; } html.tl-app-feel .legal-card table.tl-tbl thead th { text-align: left; padding: 8px; background: var(--v3s-card-2); border-bottom: 2px solid var(--v3s-line); font-weight: 700; color: var(--v3s-t1); white-space: nowrap; } html.tl-app-feel .legal-card table.tl-tbl td { padding: 8px; border-bottom: 1px solid var(--v3s-line-2); color: var(--v3s-t2); vertical-align: top; } html.tl-app-feel .legal-card table.tl-tbl td.tl-td-flat { border-bottom: 0; } /* Callouts (terms.php warning/liability boxes, one pair per language). */ html.tl-app-feel .legal-card .tl-note { background: rgba(217,119,6,.08); border-left: 4px solid var(--v3k-gold); padding: 12px 16px; border-radius: 8px; color: var(--v3s-t1); } html.tl-app-feel .legal-card .tl-warn { background: rgba(225,29,72,.08); border-left: 4px solid var(--v3s-neg); padding: 12px 16px; border-radius: 8px; color: var(--v3s-t1); } /* ── Footer ── */ html.tl-app-feel .sup-foot { border-top: 1px solid var(--v3s-line); background: var(--v3s-canvas); padding: 18px 16px; text-align: center; font-size: 12px; font-weight: 500; color: var(--v3s-t3); line-height: 2.1; } html.tl-app-feel .sup-foot { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } html.tl-app-feel.is-apk .sup-foot { padding-bottom: calc(18px + max(env(safe-area-inset-bottom, 0px), var(--tl-safe-bottom, 0px))); } html.tl-app-feel .sup-foot a { color: var(--v3k-bmi); text-decoration: none; font-weight: 650; } html.tl-app-feel .sup-foot a:hover { text-decoration: underline; } html.tl-app-feel .sup-foot .sup-legal { font-size: 12.5px; font-weight: 600; color: var(--v3s-t2); } html.tl-app-feel .sup-foot button { border: 0; background: none; color: var(--v3k-bmi); font: inherit; font-weight: 650; text-decoration: underline; cursor: pointer; padding: 0; } @media (max-width: 600px) { html.tl-app-feel .sup-hero h1 { font-size: 22px; } html.tl-app-feel .legal-card { padding: 18px 16px 20px; border-radius: 16px; } html.tl-app-feel .legal-card table.tl-tbl { font-size: 12.5px; } } /* Touch targets on the public page's own controls. */ @media (pointer: coarse) { html.tl-app-feel .sup-langs a { min-height: 40px; } } @media (prefers-reduced-motion: reduce) { html.tl-app-feel .sup-back:active, html.tl-app-feel .sup-open:active, html.tl-app-feel .sup-langs a:active { transform: none; } }