/* Shared framework styles. Load after tokens.css. Dark theme is the default; legal pages opt into light with . */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; } body.theme-light { background: var(--light-bg); color: var(--light-body); } h1, h2, h3 { font-family: var(--font-display); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; border: 1px solid transparent; border-radius: var(--radius-btn); font-size: 14px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease; } .btn-primary { background: var(--app-accent); color: #090d16; } .btn-primary:hover { filter: brightness(1.12); } .btn-secondary { border-color: var(--line); color: var(--text); background: rgba(255, 255, 255, 0.04); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--muted); } /* Official Google Play badge (self-hosted at /images/google-play-badge.png, artwork unmodified). The PNG has built-in clear space, so 60px tall aligns with 48px buttons. */ .play-badge { display: inline-flex; flex-shrink: 0; } .play-badge img { display: block; width: 155px; height: 60px; transition: transform 0.2s ease, filter 0.2s ease; } .play-badge:hover img, .play-badge:focus-visible img { transform: scale(1.03); filter: brightness(1.18); } @media (prefers-reduced-motion: reduce) { .play-badge img { transition: none; } .play-badge:hover img, .play-badge:focus-visible img { transform: none; } } /* Footer */ .site-footer { text-align: center; padding: 32px 24px; border-top: 1px solid var(--line); } .site-footer p { margin: 0; font-size: 13px; color: var(--muted); } /* Footer is a framework element: links stay brand purple on every page, regardless of the page's --app-accent. */ .site-footer a { color: var(--brand-accent); text-decoration: none; } .site-footer a:hover { text-decoration: underline; } body.theme-light .site-footer { border-top-color: var(--light-line); } body.theme-light .site-footer p { color: var(--light-muted); } body.theme-light .site-footer a { color: var(--light-link); }