/* ═══════════════════════════════════════════════════════════════ Kinner Properties — brand color, ONE place to change it. Edit --brand-accent (and its three derived shades) and every page, button, link, chip, popup and app follows on next deploy. Backgrounds stay pure #FFFFFF; ink/gray chrome is neutral and independent of the accent. Rating stars stay gold on purpose. Current: bright lime (Adam, Sep 5 2026). A very light accent — text ON accent fills must use --brand-on-accent (dark), never white. Previous: cobalt #3B6CF6 / #2554E0 / #E8F0FE / #8FB4F9 / #BDD4FB (on-accent #FFFFFF) Previous: evergreen #1F4230 / #2A573F / #E7EFE7 / #9DBBA5 / #BDD4FB ═══════════════════════════════════════════════════════════════ */ :root { --brand-accent: #66FF07; /* buttons, links, active chips */ --brand-accent-dark: #4FD400; /* hover state */ --brand-tint: #EEFFE0; /* soft fills, badges, image placeholders */ --brand-on-dark: #7DFF2E; /* accent text ON dark/ink bands */ --brand-on-dark-light: #B8FFA0; /* brighter on-dark accents (italic serifs) */ --brand-on-accent: #0B2003; /* text/icons ON accent fills (dark for lime; was white for cobalt/navy) */ } /* ═══ Rainbow mode (marketing pages only) ═══════════════════════ Pages opt in with . The accent drifts through hand-picked BRIGHT colors only — every stop keeps the dark --brand-on-accent text ≥6:1 legible, which a raw hue-wheel spin would not (pure blue/red get too dark). Derived shades are recomputed live via color-mix so hovers/tints/on-dark follow. Transactional pages (booking, invoice, check-in, admin…) never get the class and stay pinned to the static color above. Kill switch: remove the animation line, or the class per page. */ @property --brand-accent { syntax: ''; inherits: true; initial-value: #66FF07; } @keyframes kp-rainbow { 0% { --brand-accent: #66FF07; } /* lime */ 20% { --brand-accent: #00E5FF; } /* cyan */ 40% { --brand-accent: #FF3EC8; } /* hot pink */ 60% { --brand-accent: #FF9500; } /* orange */ 80% { --brand-accent: #FFD500; } /* yellow */ 100% { --brand-accent: #66FF07; } } html.kp-rainbow { animation: kp-rainbow 45s linear infinite; --brand-accent-dark: color-mix(in srgb, var(--brand-accent) 78%, #000000); --brand-tint: color-mix(in srgb, var(--brand-accent) 14%, #FFFFFF); --brand-on-dark: var(--brand-accent); --brand-on-dark-light: color-mix(in srgb, var(--brand-accent) 55%, #FFFFFF); } @media (prefers-reduced-motion: reduce) { html.kp-rainbow { animation: none; } }