/* gipity-theme.css — the canonical Gipity brand + polish layer for Water.css apps. SINGLE SOURCE OF TRUTH: registry/templates/_shared/css/gipity-theme.css. The per-template copies are synced by scripts/sync-registry.ts — DON'T edit a copy; edit the source and re-run `npx tsx scripts/sync-registry.ts`. How it works: the page forces dark (Water's dark.css build) and this file maps the Gipity brand onto Water.css's OWN variables, so every plain element (links, buttons, inputs, tables…) is on-brand with zero per-element CSS. The --background-body / --text-main / --links / etc. names below are Water.css's; loaded after water.css, they recolor the whole classless page. App-specific and agent-added styles belong in the template's own styles.css (loaded after this). To rebrand the accent, change --primary in one place. */ :root { color-scheme: dark; accent-color: var(--primary); /* native checkboxes, radios, range, progress */ /* Gipity brand palette — ONE knob: every orange below derives from --primary. */ --primary: #fea60b; --primary-hover: color-mix(in srgb, var(--primary) 82%, white); /* Surface colors (custom components + Water's panels/inputs/code) */ --surface: #202020; --surface-alt: #191919; --text-muted: #a8a29e; /* Map the brand onto Water.css's variables (left = Water's name) */ --background-body: #0d0d0d; /* page background (Gipity black) */ --background: var(--surface); /* inputs, code, table stripe */ --background-alt: var(--surface-alt); --text-main: #e6e6f0; /* body text (Gipity cream) */ --text-bright: #fffeff; /* headings, button text */ --links: var(--primary); /* links */ --focus: color-mix(in srgb, var(--primary) 60%, transparent); /* focus ring */ --border: #333333; --button-base: var(--primary); /* buttons → orange */ --button-hover: var(--primary-hover); --form-text: #e6e6f0; --form-placeholder: #6f6f78; --selection: color-mix(in srgb, var(--primary) 40%, transparent); /* text selection */ --code: color-mix(in srgb, var(--primary) 55%, white); /* inline / preformatted code */ --scrollbar-thumb: #333333; --scrollbar-thumb-hover: #444444; /* Spacing scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 2rem; --space-xl: 4rem; /* Type-size scale (the Gipity "5 sizes only" convention). Use these for font-size; don't invent new sizes. Note --text-xs/sm/base/lg/xl are SIZES, while --text-main/--text-bright/--text-muted above are COLORS. */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.75rem; /* 28px */ /* Shape */ --radius: 8px; --shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } /* ── Themes ──────────────────────────────────────────────────────────────── :root above is the default (dark). Set data-theme="light" | "blue" on to switch — the palettes below override only the color tokens (Water's own vars + the brand). An app can hardcode , or use the SDK: Gipity.setTheme('light') flips + persists it (with a pre-paint snippet in the template head there's no flash), and Gipity.theme({primary:'#…'}) sets a custom brand accent on top of any theme. Structure (spacing/type/radius) is shared, so it lives only in :root. */ :root[data-theme="light"] { color-scheme: light; accent-color: #e85d1a; --primary: #e85d1a; --primary-hover: #cf4f12; --surface: #ffffff; --surface-alt: #f1efea; --text-muted: #6b6660; --background-body: #faf9f7; --text-main: #1c1a17; --text-bright: #14110e; --focus: rgba(232, 93, 26, 0.5); --border: #e4e0d8; --form-text: #1c1a17; --form-placeholder: #9a948c; --selection: rgba(232, 93, 26, 0.22); --code: #b23c0a; --scrollbar-thumb: #cfc9be; --scrollbar-thumb-hover: #b8b1a4; } :root[data-theme="blue"] { color-scheme: dark; accent-color: #4c8dff; --primary: #4c8dff; --primary-hover: #6ba1ff; --surface: #131a2e; --surface-alt: #0f1626; --text-muted: #9aa6c0; --background-body: #0a0f1e; --text-main: #e6ebf5; --text-bright: #ffffff; --focus: rgba(76, 141, 255, 0.6); --border: #263151; --form-text: #e6ebf5; --form-placeholder: #667092; --selection: rgba(76, 141, 255, 0.4); --code: #9ec5ff; --scrollbar-thumb: #263151; --scrollbar-thumb-hover: #35426a; } /* Make the HTML `hidden` attribute always win. Author CSS beats the UA's `[hidden] { display: none }`, so a rule like `#overlay { display: flex }` on a hidden-toggled element silently breaks `el.hidden = true` — stuck fullscreen overlays, "loading…" placeholders that never clear. This guard makes any `display:` rule safe to write on elements toggled via the hidden attribute. */ [hidden] { display: none !important; } /* Brand the two native elements Water's vars + accent-color don't reach. */ mark { background-color: color-mix(in srgb, var(--primary) 55%, white); /* pale Gipity orange highlighter */ color: #1a1a1a; /* dark text for contrast on the highlight */ } meter::-webkit-meter-bar { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); } meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--primary); } meter::-moz-meter-bar { background: var(--primary); } /* Modern polish: unified radius + smooth interactions. Pure cosmetic token tweaks on Water's native elements - no layout change. */ button, input, select, textarea { border-radius: var(--radius); transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } /* Pill buttons — the standard Gipity button shape (matches the gipity.ai login page and the Sign-in-with-Gipity pages). Extra horizontal padding so labels don't crowd the rounded ends. */ button, input[type="submit"], input[type="button"], input[type="reset"] { font-weight: 600; border-radius: 999px; padding-left: 18px; padding-right: 18px; } /* Water's dark build HARDCODES button:hover to near-black (#040a0f) instead of honoring its own --button-hover variable, so the orange rebrand above vanishes on hover (buttons flip orange -> black). Re-assert the brand hover so it applies. */ button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover { background: var(--button-hover); } pre { border-radius: var(--radius); } code, kbd { border-radius: 5px; } /* Pill-shaped gauges. Styling a progress pseudo-element opts out of accent-color, so the orange fill must be re-asserted here. */ progress, meter { border-radius: 999px; } progress::-webkit-progress-bar { background: var(--surface-alt); border-radius: 999px; } progress::-webkit-progress-value { background: var(--primary); border-radius: 999px; } progress::-moz-progress-bar { background: var(--primary); } meter::-webkit-meter-bar, meter::-webkit-meter-optimum-value { border-radius: 999px; } /* Range sliders. Water's dark.css paints the track with --background (#202020) and the thumb with --border (#333) — both near-black on the #0d0d0d page, so the control reads as invisible and (being explicitly styled) never picks up the orange accent-color either. Re-assert a visible track + a Gipity-orange thumb, same reason progress/meter above must re-declare their fill. */ input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: var(--border); border-radius: 999px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; /* center the 18px thumb on the 6px track */ background: var(--primary); border: 2px solid var(--background-body); border-radius: 50%; box-shadow: var(--shadow); } input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus::-webkit-slider-thumb { background: var(--primary-hover); } input[type="range"]::-moz-range-track { height: 6px; background: var(--border); border-radius: 999px; } input[type="range"]::-moz-range-progress { height: 6px; background: var(--primary); border-radius: 999px; } input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--primary); border: 2px solid var(--background-body); border-radius: 50%; box-shadow: var(--shadow); } input[type="range"]:hover::-moz-range-thumb, input[type="range"]:focus::-moz-range-thumb { background: var(--primary-hover); } h1, h2 { letter-spacing: -0.02em; /* subtle modern tightening on large headings */ }