/* * ||NAM shared website theme. * * Canonical colour, radius, shadow and font tokens are ported verbatim from * the authoritative app theme at NamApp/src/theme.js (COLORS, FONTS, RADIUS, * SHADOW). Do not invent new colour values here — add new tokens only by * porting another exact value from that file. * * Compatibility aliases: influencer-login.html, influencer-admin.html, * influencer-terms.html and the eight legal/support pages (privacy.html, * terms.html, community-guidelines.html, delete-account.html, * paia-manual.html, support.html, report-illegal-content.html, * child-safety.html) each already used their own local CSS custom-property * names for these same colours before migration. To move their token * declarations here without rewriting every existing `var(--x)` reference in * those files' component CSS, this file also defines those exact legacy * names as aliases of the canonical tokens below. All aliases resolve to the * same verified values — no alias introduces a new or different colour. * * Web-only warning tokens (--web-warning-*, declared below): the app theme * (NamApp/src/theme.js) has no amber/caution colour at all. The three * warning values below are a documented, deliberate web-only exception, * carried over unchanged from the legal pages' pre-existing accessible * warning treatment. They are intentionally NOT named --nam-* and must not * be used for success, ordinary information, or destructive/error states — * those remain on the accent and danger families above. * * .legal-page scoping: shared header/wordmark/footer rules for the nine * legal/support pages are scoped under a `.legal-page` ancestor selector * (applied to each page's element, not — report-illegal- * content.html's language-toggle script reassigns `document.body.className` * wholesale, which would silently strip a body-level class; scoping via * avoids that collision without touching any JavaScript). This * selector is never applied to influencer-login.html, influencer-admin.html * or influencer-terms.html, so these rules cannot affect those pages. */ *, *::before, *::after { box-sizing: border-box; } :root { /* Canonical tokens (NamApp/src/theme.js) */ --nam-background: #FDF6EE; --nam-background-alt: #F5EDE0; --nam-white: #FFFFFF; --nam-text-dark: #3D2B1F; --nam-text-mid: #8B6B5A; --nam-text-light: #B08070; --nam-primary: #C4956A; --nam-primary-light: #E8A598; --nam-accent: #8BAF9A; --nam-accent-dark: #6F8F7E; --nam-danger: #D9534F; --nam-border: rgba(176, 128, 112, 0.18); --nam-accent-bg-10: rgba(139, 175, 154, 0.10); --nam-primary-bg-12: rgba(196, 149, 106, 0.12); --nam-danger-bg-08: rgba(181, 82, 82, 0.08); --nam-radius-sm: 10px; --nam-radius-md: 16px; --nam-radius-lg: 24px; --nam-radius-full: 999px; --nam-shadow-card: 0 8px 24px rgba(61, 43, 31, 0.10); --nam-shadow-button: 0 6px 14px rgba(196, 149, 106, 0.30); /* Retained website system sans-serif stack (typography redesign deferred) */ --nam-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* --- Compatibility aliases: influencer-login.html / influencer-admin.html --- */ --brand: var(--nam-primary); --brand-light: var(--nam-background-alt); --accent: var(--nam-accent); --accent-dark: var(--nam-accent-dark); --text: var(--nam-text-dark); --muted: var(--nam-text-mid); --text-light: var(--nam-text-light); --border: var(--nam-border); --bg: var(--nam-white); --page: var(--nam-background); --success: var(--nam-accent-dark); --success-bg: var(--nam-accent-bg-10); --warning: var(--nam-text-mid); --warning-bg: var(--nam-primary-bg-12); --danger: var(--nam-danger); --danger-bg: var(--nam-danger-bg-08); --radius: var(--nam-radius-md); --shadow: var(--nam-shadow-card); --font: var(--nam-font); /* --- Compatibility aliases: influencer-terms.html (same colours, different names) --- */ --primary: var(--nam-primary); --text-secondary: var(--nam-text-mid); --page-bg: var(--nam-background); --bg-alt: var(--nam-background-alt); /* --- Web-only warning exception (not app theme tokens — see header comment) --- */ --web-warning-bg: #fff3cd; --web-warning-border: #ffc107; --web-warning-text: #856404; } /* * Shared legal/support-page components, scoped to `.legal-page` (applied to * each of the nine pages' element). Only rules that are byte-identical * in intent across all nine pages once colours are tokenised are shared here; * everything else (main layout, headings, forms, page-specific components) * stays inline per page, since delete-account.html and report-illegal- * content.html use different widths/structure that a generic tag selector * (e.g. a shared `main{...}`) would otherwise incorrectly override. */ .legal-page header { background: var(--bg); border-bottom: 1px solid var(--border); padding: 20px 24px; } .legal-page .wordmark { color: var(--brand); font-size: 22px; font-weight: 700; letter-spacing: -0.3px; text-decoration: none; } .legal-page footer { background: var(--bg); border-top: 1px solid var(--border); padding: 24px 20px; text-align: center; color: var(--text-light); font-size: 13px; } .legal-page .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 9px; margin-bottom: 10px; } .legal-page .footer-links a, .legal-page .footer-meta a { color: var(--brand); text-decoration: none; } .legal-page .footer-meta { margin: 4px 0; }