/* ── Romantik Theme ────────────────────────────────────────────────────────── Inspired by hospitality CRM look: dark navy chrome + bronze accents + cream backgrounds. Activated when . ────────────────────────────────────────────────────────────────────────── */ [data-app-theme="romantik"] { /* Brand palette */ --brand-navy: #0e2b48; --brand-navy-hover: #143655; --brand-bronze: #a16e3c; --brand-bronze-hover:#8a5d2f; --brand-cream: #f5efe6; --brand-cream-input: #f0e7d6; --brand-cream-line: #e3d7c1; --brand-text-on-navy:#ffffff; --brand-icon-on-navy:#d4b896; /* Token overrides */ --bg-primary: #ffffff; --bg-secondary: var(--brand-cream); --bg-tertiary: #ece2cf; --bg-quaternary: #d8c6a4; --accent: var(--brand-bronze); --accent-hover: var(--brand-bronze-hover); --accent-light: rgba(161, 110, 60, 0.14); --text-primary: #14213a; --text-secondary: rgba(20, 33, 58, 0.65); --text-tertiary: rgba(20, 33, 58, 0.40); --text-on-accent: #ffffff; --border: rgba(20, 33, 58, 0.12); --border-strong: rgba(20, 33, 58, 0.22); /* Sidebar uses brand navy instead of frosted-glass */ --sidebar-bg: var(--brand-navy); } /* ── Sidebar ─────────────────────────────────────────────────────────────── */ [data-app-theme="romantik"] .sidebar { background: var(--brand-navy); border-right: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: none; -webkit-backdrop-filter: none; } [data-app-theme="romantik"] .sidebar-icon { color: var(--brand-icon-on-navy); } [data-app-theme="romantik"] .sidebar-icon:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } [data-app-theme="romantik"] .sidebar-icon.active { background: var(--brand-bronze); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30); } [data-app-theme="romantik"] .sidebar-brand { background: var(--brand-bronze); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } [data-app-theme="romantik"] .sidebar-sep { background: rgba(255, 255, 255, 0.10); } [data-app-theme="romantik"] .lang-btn { color: rgba(255, 255, 255, 0.45); } [data-app-theme="romantik"] .lang-btn:hover { background: rgba(255, 255, 255, 0.10); color: #fff; } [data-app-theme="romantik"] .lang-btn.active { background: var(--brand-bronze); color: #fff; } /* ── Tooltip on dark sidebar ─────────────────────────────────────────────── */ [data-app-theme="romantik"] .sidebar-icon::after { background: #fff; color: var(--brand-navy); border-color: var(--brand-cream-line); } /* ── Tables: dark navy header bar ────────────────────────────────────────── */ [data-app-theme="romantik"] thead { background: var(--brand-navy); border-bottom: 1px solid var(--brand-navy); } [data-app-theme="romantik"] thead th { color: #fff; letter-spacing: 0.4px; } [data-app-theme="romantik"] tr:hover td { background: var(--brand-cream); } /* ── Buttons: bronze pills (slightly more rounded) ───────────────────────── */ [data-app-theme="romantik"] .btn-primary { background: var(--brand-bronze); color: #fff; border-radius: var(--radius-md); font-weight: 600; } [data-app-theme="romantik"] .btn-primary:hover { background: var(--brand-bronze-hover); box-shadow: 0 2px 8px rgba(161, 110, 60, 0.30); } /* ── Cards: warm cream tint ─────────────────────────────────────────────── */ [data-app-theme="romantik"] .card { border-color: var(--brand-cream-line); } /* ── Pill-tab component (opt-in, used by templates that adopt .tab-pills) ── */ [data-app-theme="romantik"] .tab-pills { display: flex; gap: var(--space-2); padding: var(--space-3); background: transparent; flex-wrap: wrap; } [data-app-theme="romantik"] .tab-pills > .tab, [data-app-theme="romantik"] .tab-pills > a { padding: 8px 24px; border-radius: var(--radius-md); background: var(--brand-bronze); color: #fff; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } [data-app-theme="romantik"] .tab-pills > .tab:hover, [data-app-theme="romantik"] .tab-pills > a:hover { background: var(--brand-bronze-hover); box-shadow: 0 2px 8px rgba(161, 110, 60, 0.28); } [data-app-theme="romantik"] .tab-pills > .tab.active, [data-app-theme="romantik"] .tab-pills > a.active { background: var(--brand-navy); color: #fff; } /* ── Entity header bar (opt-in, .entity-header) ──────────────────────────── */ [data-app-theme="romantik"] .entity-header { background: var(--brand-navy); color: #fff; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: var(--space-4); } [data-app-theme="romantik"] .entity-header a, [data-app-theme="romantik"] .entity-header .entity-meta { color: #fff; } /* ── Form inputs: warm cream tint to match the look ──────────────────────── */ [data-app-theme="romantik"] input[type="text"], [data-app-theme="romantik"] input[type="email"], [data-app-theme="romantik"] input[type="password"], [data-app-theme="romantik"] input[type="number"], [data-app-theme="romantik"] input[type="tel"], [data-app-theme="romantik"] input[type="url"], [data-app-theme="romantik"] input[type="date"], [data-app-theme="romantik"] input[type="time"], [data-app-theme="romantik"] input[type="datetime-local"], [data-app-theme="romantik"] input[type="search"], [data-app-theme="romantik"] select, [data-app-theme="romantik"] textarea { background: var(--brand-cream-input); border-color: var(--brand-cream-line); } [data-app-theme="romantik"] input:focus, [data-app-theme="romantik"] select:focus, [data-app-theme="romantik"] textarea:focus { border-color: var(--brand-bronze); box-shadow: 0 0 0 3px rgba(161, 110, 60, 0.18); }