/* ============================================================ ROOM BOOM UI — Design-Guide v2.0 (Charts Version) Token- und Komponenten-Basis, gemeinsam genutzt von login.html, signup.html und index.html. ============================================================ */ :root { /* Backgrounds */ --bg-primary: #EDEDEF; --bg-secondary: #FFFFFF; --bg-tertiary: #21212D; --bg-quaternary: #15141A; /* Charts (Grün-Schema, Standard) */ --chart-primary: #C7FC3D; --chart-secondary: #15141A; --chart-tertiary: #D9D9D9; --chart-line: #D9D9D9; --chart-data: #65C800; --on-accent: #15141A; /* Buttons */ --btn-black: #15141A; --btn-black-hover: #2B283A; --btn-black-pressed: #2B283A; --btn-grey: #F0F1F5; --btn-grey-hover: #E3E6EE; --btn-grey-pressed: #F0F1F5; --btn-white: #FFFFFF; --btn-white-hover: #F7F8F9; --btn-white-pressed: #F0F1F5; /* System */ --success: #65C800; --error: #FE3332; --info: #FFDC5F; /* Text & Icons */ --font-black: #15141A; --font-grey: #7B85A5; --font-white: #FFFFFF; --font-disabled: #C6CAD6; --footer-link: #C8C8CE; --icon-black: #15141A; --icon-grey: #7B85A5; --icon-white: #FFFFFF; /* Geometrie */ --r-card: 24px; --r-pill: 999px; --r-bar: 8px; --gap-grid: 24px; --pad-card: 24px; --shadow-panel: 0 8px 24px rgba(21, 20, 26, 0.08); } /* Dark Mode (Abschnitt 11) — Erweiterung, Akzent/System-Farben unveraendert. Zwei Wege dahin: automatisch per OS-Praeferenz, ODER manuell per Switcher im Header (setzt [data-theme] auf und ueberschreibt damit die OS-Praeferenz in beide Richtungen). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-primary: #21212D; --bg-secondary: #15141A; --icon-circle-on-card: #2B283A; --font-black: #FFFFFF; --font-grey: #C8C8CE; --chart-tertiary: #3A3944; --chart-line: #3A3944; } } :root[data-theme="dark"] { --bg-primary: #21212D; --bg-secondary: #15141A; --icon-circle-on-card: #2B283A; --font-black: #FFFFFF; --font-grey: #C8C8CE; --chart-tertiary: #3A3944; --chart-line: #3A3944; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg-primary); color: var(--font-black); font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } body { font: 300 16px/24px 'Outfit'; letter-spacing: .01em; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; } a { color: inherit; } /* ---- Schraffuren ---- */ .hatch-neutral { background: repeating-linear-gradient(45deg, #D9D9D9 0 1.5px, transparent 1.5px 6px); } .hatch-accent { background: repeating-linear-gradient(45deg, var(--chart-primary) 0 1.5px, transparent 1.5px 6px); } .hatch-black { background: repeating-linear-gradient(45deg, #15141A 0 1.5px, transparent 1.5px 6px); } /* Kuerzel in runden Icons (Logo, Avatar, Objekt-Tiles): immer die eine Markenfarbe, keine Zweitfarben. */ .tile-accent { background: var(--chart-primary); color: var(--on-accent); } /* ---- Light/Dark-Switcher (Abschnitt 7.5, im dunklen Header) ---- */ .theme-switch { width: 52px; height: 28px; border-radius: var(--r-pill); border: none; cursor: pointer; background: var(--bg-tertiary); position: relative; padding: 0; flex: none; } .theme-switch .knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--chart-primary); color: var(--on-accent); transition: transform .2s ease-out; display: flex; align-items: center; justify-content: center; font-size: 12px; } .theme-switch.is-dark .knob { transform: translateX(24px); } /* ---- Karten (Abschnitt 6) ---- */ .card { background: var(--bg-secondary); border-radius: var(--r-card); padding: var(--pad-card); } /* ---- Buttons (Abschnitt 7.1) ---- */ .btn { border: none; cursor: pointer; font: 300 16px/24px 'Outfit'; letter-spacing: .16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-pill); white-space: nowrap; } .btn--regular { height: 48px; padding: 12px 20px; } .btn--medium { height: 40px; padding: 8px 16px; } .btn--small { height: 32px; padding: 4px 16px; font-size: 15px; } .btn--black { background: var(--btn-black); color: var(--font-white); } .btn--black:hover { background: var(--btn-black-hover); } .btn--black:active { background: var(--btn-black-pressed); box-shadow: 0 0 0 1.5px #C6CAD6; } .btn--black:disabled { opacity: .25; cursor: default; } /* --btn-grey/--btn-white sind System-Farben und bleiben laut Guide in beiden Themes fest (nur Flaechen/Text/Akzent sind theme-abhaengig) - die Buttons behalten deshalb bewusst FESTES dunkles Text auf ihrem FESTEN hellen Hintergrund statt var(--font-black), sonst wird das im Dark Mode zu weissem Text auf hellgrauem/weissem Grund und unlesbar. */ .btn--grey { background: var(--btn-grey); color: #15141A; } .btn--grey:hover { background: var(--btn-grey-hover); } .btn--grey:active { background: var(--btn-grey-pressed); box-shadow: 0 0 0 1.5px var(--btn-black); } .btn--grey:disabled { color: #B9BFCE; cursor: default; } /* Akzent-Button: fuer positive Bestaetigungs-Aktionen (z.B. "Erledigt") und Steuerelemente, die als "Akzent" gelten sollen (z.B. Filter-Buttons). Faerbt sich in beiden Themes gleich ein (Akzentfarbe ist theme-fest), dadurch immer gut lesbar - anders als Hellgrau auf dunklem Grund. */ .btn--accent { background: var(--chart-primary); color: var(--on-accent); } .btn--accent:hover { filter: brightness(1.06); } .btn--accent:active { box-shadow: 0 0 0 1.5px var(--btn-black); } .btn--accent.is-active { box-shadow: 0 0 0 1.5px var(--btn-black); } .btn--white { background: var(--btn-white); color: #15141A; } .btn--white:hover { background: var(--btn-white-hover); } .btn--white:active { background: var(--btn-white-pressed); box-shadow: 0 0 0 1.5px var(--btn-black); } .btn--white:disabled { color: #B9BFCE; cursor: default; } .btn--full { width: 100%; } /* ---- IconButtons (7.2) ---- */ .icon-btn { border: none; cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 18px; line-height: 1; } .icon-btn--48 { width: 48px; height: 48px; background: var(--bg-tertiary); color: var(--icon-white); } .icon-btn--44 { width: 44px; height: 44px; background: var(--btn-grey); color: var(--icon-black); } .icon-btn--32 { width: 32px; height: 32px; background: var(--btn-grey); color: var(--icon-black); } .icon-btn:hover { filter: brightness(1.08); } /* ---- Inputs (7.3) ---- */ .field { position: relative; } .field .input { width: 100%; height: 48px; border-radius: var(--r-pill); border: none; background: var(--btn-grey); color: #15141A; font: 300 16px/24px 'Outfit'; padding: 12px 20px; box-shadow: 0 0 0 1.5px transparent; transition: box-shadow .15s ease-out; } .field .input::placeholder { color: var(--font-grey); } .field .input:hover { box-shadow: 0 0 0 1.5px #D9D9D9; } .field .input:focus { outline: none; box-shadow: 0 0 0 1.5px var(--btn-black); background: var(--bg-secondary); } .field .input.on-white { background: var(--bg-secondary); box-shadow: 0 0 0 1.5px #D9D9D9; } .field .input.on-white:focus { box-shadow: 0 0 0 1.5px var(--btn-black); } .field label { display: block; font: 300 10px/14px 'Outfit'; color: var(--font-grey); margin: 0 0 4px 20px; } .field .error-text { color: var(--error); font-size: 11px; margin: 5px 0 0 20px; } /* ---- Badges (7.7) ---- */ .badge-kpi { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--r-pill); background: var(--chart-primary); color: var(--on-accent); font: 600 12px/1 'Outfit'; padding: 6px 11px; } .badge-kpi.down { background: var(--btn-black); color: var(--font-white); } .badge-compare { font: 300 14px/20px 'Outfit'; color: var(--font-grey); } .status-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill); font: 600 12px/1 'Outfit'; padding: 5px 11px; white-space: nowrap; } /* Alle Akzent-Badges einheitlich in der einen Markenfarbe (Grün) - kein Gelb/Rot-Mix. Kritisch bleibt per Text UND kraeftigerem Ring von Warnung unterscheidbar, nicht per Farbton. */ .status-badge.status-warn, .status-badge.status-ok { background: var(--chart-primary); color: var(--on-accent); } .status-badge.status-critical { background: var(--chart-primary); color: var(--on-accent); box-shadow: 0 0 0 1.5px var(--btn-black); } .status-badge.status-neutral { background: var(--bg-secondary); color: var(--font-black); box-shadow: 0 0 0 1px var(--chart-line); } /* ---- Tooltips ---- */ .tooltip { background: var(--bg-quaternary); color: var(--font-white); border-radius: 10px; padding: 6px 14px; font: 300 12px/16px 'Outfit'; } /* ---- Segmented Control (7.6) ---- */ .segmented { display: inline-flex; align-items: center; height: 48px; background: var(--bg-secondary); border-radius: var(--r-pill); padding: 4px; gap: 6px; } .segmented .seg-item { border: none; background: transparent; cursor: pointer; border-radius: var(--r-pill); padding: 10px 16px; font: 300 15px/20px 'Outfit'; color: var(--font-black); } .segmented .seg-item:hover { background: var(--btn-grey-hover); } .segmented .seg-item.active { background: var(--btn-grey); font-weight: 400; } /* ---- Chart-Karten (Abschnitt 8) ---- */ .chart-card { display: flex; flex-direction: column; } .chart-card .cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .chart-card .cc-title { font: 400 21px/28px 'Outfit'; color: var(--font-black); } .chart-card .cc-title .lightning { color: var(--chart-primary); margin-right: 4px; } .chart-card .cc-value { font: 500 36px/44px 'Outfit'; letter-spacing: -0.5px; margin-top: 14px; } .chart-card .cc-badge-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .chart-card .cc-chart-wrap { margin-top: 18px; } /* ---- Tabellen (Abschnitt 9) ---- */ table.rb-table { width: 100%; border-collapse: collapse; } table.rb-table thead th { text-align: left; font: 300 12px/16px 'Outfit'; color: var(--font-grey); padding: 12px 16px; text-transform: none; } table.rb-table tbody tr td { padding: 14px 16px; border-top: 1px solid var(--bg-primary); font-size: 14px; } table.rb-table tbody tr:hover td { background: #F7F7F8; } table.rb-table tbody tr:first-child td { border-top: none; } table.rb-table td.title-cell .tile { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 12px; margin-right: 12px; font-size: 13px; font-weight: 500; vertical-align: middle; } table.rb-table td.title-cell .name { font-weight: 500; font-size: 14px; } table.rb-table td.title-cell .sub { color: var(--font-grey); font-size: 12px; } table.rb-table td.amount { text-align: right; font-weight: 600; } table.rb-table .empty-state { color: var(--font-grey); font-size: 13px; padding: 20px 16px; } /* ---- Shell ---- */ .rb-header { background: var(--bg-quaternary); padding: 20px 24px 0; color: var(--font-white); } .rb-header-row { display: flex; align-items: center; gap: 24px; padding-bottom: 20px; } .rb-logo-block { display: flex; align-items: center; gap: 12px; width: 200px; flex: none; } .rb-logo-mark { width: 44px; height: 44px; border-radius: 50%; background: var(--chart-primary); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 14px; flex: none; } .rb-logo-text .name { font: 400 16px/20px 'Outfit'; color: var(--font-white); } .rb-logo-text .sub { font: 300 12px/16px 'Outfit'; color: var(--font-grey); } .rb-search { flex: 1; height: 56px; background: var(--bg-tertiary); border-radius: var(--r-pill); display: flex; align-items: center; gap: 10px; padding: 0 22px; color: var(--font-grey); font: 300 15px/20px 'Outfit'; } .rb-header-icons { display: flex; align-items: center; gap: 10px; flex: none; } .rb-avatar-pill { height: 56px; border-radius: var(--r-pill); background: var(--bg-tertiary); display: flex; align-items: center; gap: 10px; padding: 0 8px 0 8px; color: var(--font-white); cursor: pointer; border: none; font: inherit; } .rb-avatar-pill .av-circle { width: 44px; height: 44px; border-radius: 50%; background: var(--chart-primary); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 14px; flex: none; } .rb-avatar-pill .av-text { text-align: left; } .rb-avatar-pill .av-email { font: 400 14px/18px 'Outfit'; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rb-avatar-pill .av-role { font: 300 12px/16px 'Outfit'; color: var(--font-grey); } .rb-avatar-pill .chev { color: var(--font-grey); margin: 0 6px 0 2px; } .rb-tabs { display: flex; gap: 40px; margin-left: 224px; } .rb-tabs a { display: inline-block; padding-bottom: 20px; font: 300 15px/20px 'Outfit'; color: var(--font-grey); text-decoration: none; border-bottom: 2px solid transparent; cursor: pointer; } .rb-tabs a.active { color: var(--font-white); font-weight: 400; border-bottom-color: var(--chart-primary); } .rb-body { display: flex; align-items: flex-start; } .rb-sidebar { width: 248px; flex: none; background: var(--bg-secondary); min-height: calc(100vh - 135px - 66px); padding: 20px 16px; } .rb-sidebar .company-block { padding: 0 4px 18px; border-bottom: 1px solid var(--bg-primary); margin-bottom: 12px; } .rb-sidebar .company-block .eyebrow { font: 300 12px/16px 'Outfit'; color: var(--font-grey); } .rb-sidebar .company-block .company-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .rb-sidebar .company-block .company-mark { width: 44px; height: 44px; border-radius: 50%; background: var(--chart-primary); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 13px; flex: none; } .rb-sidebar .company-block .company-name { font: 400 16px/20px 'Outfit'; } .rb-nav-item { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-radius: var(--r-card); color: var(--font-black); font: 300 16px/24px 'Outfit'; text-decoration: none; cursor: pointer; } .rb-nav-item .nav-icon { width: 20px; text-align: center; color: var(--icon-grey); flex: none; } .rb-nav-item:hover { background: #F7F7F8; } .rb-nav-item.active { background: var(--bg-primary); font-weight: 400; } .rb-nav-item.active .nav-icon { color: var(--icon-black); } /* Tab-Zeile im Header. Masse exakt nach DESIGN-GUIDE_ROOMBOOM_19.08.md, Abschnitt 5.1: margin-left 224, Items 15/300 #7B85A5, Abstand 40, padding-bottom 20; aktiver Tab weiss/400 mit 2px Akzent-Unterstrich und padding-bottom 18, damit Grundlinie und Unterstrich zusammen wieder 20 ergeben und die Zeile beim Wechsel nicht springt. Zweite Navigationsebene neben der Sidebar: oben WELCHES Werkzeug, links WELCHE Seite darin. Der Wechsel zwischen Price Optimizer und Objektperformance faellt damit mit der Bereichsnavigation zusammen. */ .rb-produktnav { display: flex; align-items: flex-end; gap: 40px; margin-left: 224px; overflow-x: auto; scrollbar-width: none; } .rb-produktnav::-webkit-scrollbar { display: none; } .rb-produktnav a { white-space: nowrap; text-decoration: none; font: 300 15px/20px 'Outfit'; color: var(--font-grey); padding-bottom: 20px; border-bottom: 2px solid transparent; transition: color .15s ease; } .rb-produktnav a:hover { color: var(--font-white); } .rb-produktnav a.active { color: var(--font-white); font-weight: 400; padding-bottom: 18px; border-bottom-color: var(--chart-primary); } @media (max-width: 1120px) { .rb-produktnav { margin-left: 0; } } .rb-main-wrap { flex: 1; min-width: 0; background: var(--bg-primary); padding: 24px; position: relative; } .rb-main-inner { max-width: 1136px; margin: 0 auto; } .rb-back-circle { position: absolute; left: -20px; top: 24px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-panel); font-size: 16px; color: var(--font-black); z-index: 2; } .rb-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .rb-breadcrumb { font: 300 12px/16px 'Outfit'; color: var(--font-grey); margin-bottom: 4px; } .rb-page-title { font: 400 40px/44px 'Outfit'; letter-spacing: -1px; } .rb-title-actions { display: flex; align-items: center; gap: 12px; } .rb-date-pill { height: 56px; background: var(--bg-secondary); border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 10px; padding: 0 20px; font: 300 15px/20px 'Outfit'; color: var(--font-black); } .card-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap-grid); } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-12 { grid-column: span 12; } .rb-section-gap { margin-bottom: var(--gap-grid); } .rb-footer { background: var(--bg-quaternary); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .rb-footer .links { display: flex; gap: 28px; } .rb-footer .links a { font: 300 14px/18px 'Outfit'; color: var(--footer-link); text-decoration: none; } .rb-footer .copyright { font: 300 14px/18px 'Outfit'; color: var(--font-grey); } @media (max-width: 1120px) { .rb-sidebar { display: none; } .rb-tabs { margin-left: 0; } } @media (max-width: 900px) { .col-3, .col-4, .col-6 { grid-column: span 12; } .rb-header-row { flex-wrap: wrap; height: auto; } .rb-search { order: 3; width: 100%; flex-basis: 100%; margin-top: 12px; } }