/* --------------------------------------------------------------- OpenMV Cloud — site styles. Theme variables, the theme toggle, and the language switcher are ported from openmv-swd-ids (static/css/style.css) so both sites share the same look. Light is the default; dark is applied via (set pre-paint by the bootstrap script in templates/base.html, cycled by static/js/theme.js). --------------------------------------------------------------- */ :root { color-scheme: light; --bg: #f3f4f6; --surface: #ffffff; --surface-hover: rgba(0, 0, 0, 0.02); --border: #d1d5db; --border-strong: #9ca3af; --text: #111827; --text-muted: #6b7280; --heading: #111827; --accent: #2563eb; --focus-ring: rgba(37, 99, 235, 0.25); --shadow: rgba(0, 0, 0, 0.1); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0f172a; --surface: #1e293b; --surface-hover: rgba(255, 255, 255, 0.04); --border: #475569; --border-strong: #64748b; --text: #f1f5f9; --text-muted: #94a3b8; --heading: #f8fafc; --accent: #60a5fa; --focus-ring: rgba(96, 165, 250, 0.35); --shadow: rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; margin: 0; } /* Smooth theme transition */ body, .theme-toggle, .lang-menu { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); display: flex; align-items: center; justify-content: center; } /* --------------------------------------------------------------- Landing page --------------------------------------------------------------- */ .landing { width: min(920px, 100% - 2rem); padding: 3.5rem 0 2rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; } .landing .logo { width: min(320px, 70%); height: auto; } /* Blue logo in light mode (the default above), white logo in dark mode. */ :root[data-theme="dark"] img.logo { content: url("/static/img/logo-dark.png"); } .landing h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: 0.02em; color: var(--heading); } .landing .tagline { color: var(--text-muted); font-size: clamp(1rem, 2vw, 1.15rem); } .landing .hero { width: 100%; height: auto; border-radius: 24px; box-shadow: 0 24px 60px var(--shadow); } .landing footer { margin-top: 1rem; color: var(--text-muted); font-size: 0.85rem; } /* --------------------------------------------------------------- Theme toggle button (cycles Auto → Light → Dark) --------------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: 0; padding: 0; font-size: inherit; font-weight: normal; background: transparent; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); cursor: pointer; flex-shrink: 0; } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-hover); } .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); } .theme-toggle svg { width: 1rem; height: 1rem; display: none; } /* Show the icon that matches the user's preference */ :root[data-theme-pref="auto"] .theme-toggle .icon-auto, :root[data-theme-pref="light"] .theme-toggle .icon-light, :root[data-theme-pref="dark"] .theme-toggle .icon-dark { display: block; } /* Floating theme toggle in the top-right corner, rendered on every page. */ .theme-toggle--floating { position: fixed; top: 1rem; right: 1rem; z-index: 100; width: 2.25rem; height: 2.25rem; background: var(--surface); box-shadow: 0 1px 3px var(--shadow); } /* --------------------------------------------------------------- Language switcher (globe button + dropdown), sits to the LEFT of the theme toggle. The button reuses .theme-toggle styling; the wrapper positions it and anchors the dropdown menu. --------------------------------------------------------------- */ /* The globe SVG has no icon-auto/light/dark class, so the base `.theme-toggle svg { display: none }` rule would hide it — show it here. */ .lang-toggle svg { display: block; } /* Floating switcher: fixed in the top-right, just left of the floating theme toggle (which is at right:1rem, width:2.25rem; gap 0.5rem between them). */ .lang-switcher--floating { position: fixed; top: 1rem; right: calc(1rem + 2.25rem + 0.5rem); z-index: 100; } .lang-switcher--floating .lang-toggle { width: 2.25rem; height: 2.25rem; background: var(--surface); box-shadow: 0 1px 3px var(--shadow); } /* Dropdown menu, anchored to its switcher wrapper, dropping down right-aligned. */ .lang-menu { position: absolute; top: calc(100% + 0.375rem); right: 0; z-index: 200; min-width: 11rem; max-height: 70vh; overflow-y: auto; margin: 0; padding: 0.25rem; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: 0 4px 12px var(--shadow); } .lang-menu[hidden] { display: none; } .lang-menu li { margin: 0; padding: 0; } .lang-option { display: block; width: 100%; margin: 0; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: normal; font-family: var(--font); text-align: left; background: transparent; border: none; border-radius: 0.375rem; color: var(--text); cursor: pointer; } .lang-option:hover { background: var(--surface-hover); } .lang-option[aria-current="true"] { font-weight: 600; color: var(--accent); }