/* ─── RSLIP · Shared site footer ───────────────────────────────────────── Single source of truth for the marketing-site footer. Loaded by every public page (index, contact, privacy, terms). Page-specific CSS files should NOT redeclare any of these selectors. Selectors (matching the HTML in each public page): .foot container .wrap inner width wrapper .foot-top 4-column grid: brand + 3 link cols .foot-brand logo + tagline .foot-col vertical link stack .foot-col-title .foot-bottom copyright row + social icons .foot-socials icon row Depends on the design tokens from tokens.css: --bg-2, --ink-2, --ink-3, --ink-4, --line, --accent, --accent-soft, --grad-teal-amber, --mono */ .foot { padding: 64px 0 40px; border-top: 3px solid; border-image: var(--grad-teal-amber) 1; background: var(--bg-2); } .foot .wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; } .foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; } .foot-brand .rs-logo { font-size: 32px; margin-bottom: 14px; } .foot-brand p { font-size: 13px; color: var(--ink-3); line-height: 1.6; max-width: 28ch; } .foot-col-title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px; } .foot-col a { display: block; font-size: 13px; color: var(--ink-2); padding: 4px 0; transition: color 0.15s; border-bottom: 0; } .foot-col a:hover { color: var(--accent); } .foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--ink-4); } .foot-bottom a { color: var(--ink-3); transition: color 0.15s; border-bottom: 0; } .foot-bottom a:hover { color: var(--accent); } .foot-socials { display: flex; gap: 12px; } .foot-socials a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-3); transition: all 0.15s; padding: 0; } .foot-socials a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .foot-socials svg { width: 14px; height: 14px; } /* ─── Responsive ───────────────────────────────────────────────────────── Below 900 px: drop to a clean 2-col grid. Below 560 px: copyright row stacks vertically; padding tightens. No tap-target inflation here — keep the visual rhythm tight; mobile users get the same density as desktop. */ @media (max-width: 900px) { .foot .wrap { padding: 0 20px; } .foot-top { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 560px) { .foot .wrap { padding: 0 16px; } .foot-top { grid-template-columns: 1fr 1fr; gap: 20px; } .foot-bottom { flex-direction: column; align-items: flex-start; gap: 14px; } } /* ─── MOBILE APP ONLY (Capacitor) ──────────────────────────────────────── Applied only when is set (inside the APK, where the bundled contact/privacy/terms pages are served from https://localhost). The sticky .nav sits at top:0 and would otherwise slide under the device status bar; pad it down by the real safe-area inset so the rslip logo clears the notification strip. env() resolves to 0 on the web, so rslip.com is unaffected. */ body.is-native .nav { padding-top: calc(env(safe-area-inset-top) + 18px); }