/* TradeConnect — shared dark/light theming for the marketing site. Two modes: dark (default) and light. The active mode is set as data-theme on (see theme.js). These [data-theme] rules outrank each page's inline :root fallback by specificity, so individual pages don't need their colour values changed. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* ── Dark palette (the site's existing dark look) ── */ :root[data-theme="dark"] { --bg: #0f1115; --surface: #1b1e24; --surface-2: #232730; --text: #f5f5f7; --muted: #b6b9c0; --faint: #8b8f98; --border: rgba(255,255,255,.07); --header-bg: rgba(15,17,21,.72); --card-grad: rgba(27,30,36,.55); --accent: #E8843A; --accent-2: #F5B23C; --accent-soft: rgba(232,132,58,.14); } /* ── Light palette — white background, dark text (matches the app's light mode) ── */ :root[data-theme="light"] { --bg: #ffffff; --surface: #f3f3f7; --surface-2: #ffffff; --text: #14171c; --muted: #54585f; --faint: #8a8e96; --border: rgba(0,0,0,.10); --header-bg: rgba(255,255,255,.78); --card-grad: rgba(243,243,247,.65); --accent: #E8843A; --accent-2: #F5B23C; --accent-soft: rgba(232,132,58,.14); } /* ── Theme toggle button (matches the app's ringed, accent-tinted control) ── */ .tc-theme-toggle { -webkit-appearance: none; appearance: none; cursor: pointer; padding: 0; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--accent); border: 1px solid var(--border); transition: transform .12s ease, background .12s ease, border-color .12s ease; } .tc-theme-toggle:hover { transform: translateY(-1px); border-color: var(--accent); } .tc-theme-toggle svg { width: 19px; height: 19px; } /* In a header that only holds a logo (privacy/terms), push the button right. */ .tc-theme-toggle.in-nav { margin-left: auto; flex: 0 0 auto; } /* On pages with no header (invite/tradie cards), float it top-right. */ .tc-theme-toggle.fixed { position: fixed; top: 16px; right: 16px; z-index: 60; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); }