/* ============================================================================ STIG ROCK - KOMPONENTEN Editorialer Satz: Weissraum, Haarlinien, kantige Flaechen, ein Akzent. Farben ausschliesslich aus stigrock-brand.css. ========================================================================== */ body { font-family: var(--font-brand); color: var(--ink); } .dark body { color: var(--classic-white); } /* Toggle switch (notification settings etc.) - written as plain CSS instead of Tailwind's peer-checked: variant so the checked/unchecked track color is guaranteed regardless of any competing unlayered/layered precedence. */ .toggle-track { background-color: #d1d5db; } .toggle-input:checked ~ .toggle-track { background-color: var(--success); } .dark .toggle-track { background-color: #55493d; } .dark .toggle-input:checked ~ .toggle-track { background-color: var(--success); } .toggle-input:checked ~ .toggle-knob { transform: translateX(26px); } /* The shared iziToast notification component's close button (partials/notify +assets/global/css/iziToast_custom.css) renders its "x" via the Line Awesome icon font's private-use codepoint (\f00d) - stigrock never loads that font (uses the inline SVG sprite instead), so it shows as a missing- glyph box. Overriding with a plain Unicode "x" needs !important since iziToast_custom.css loads later in the DOM (inside partials.notify, near the end of ) and would otherwise win any unlayered same-specificity tie against this -loaded stylesheet regardless of source order here. */ .iziToast > .iziToast-close::before { content: "\00d7" !important; font-family: inherit !important; font-weight: 400 !important; } /* Tailwind Preflight resets margin:0 on every element (incl. ), which breaks the browser's native auto-centering for dialog::showModal() (the UA stylesheet centers an open dialog via margin:auto). Restoring it here brings back default centering for every in the template. */ dialog[open] { margin: auto; } /* --- Eyebrow: Kapitel-Label wie im Brand-Guide ---------------------------- */ .eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--copper); } /* --- Panel: nur die Flaeche. Haarlinien setzt das Markup per border-Klasse, damit Grid-Zellen (gap-px) keine doppelten Linien bekommen. -------------- */ .sr-panel { background: #ffffff; } .dark .sr-panel { background: #0f0e0d; } /* --- Facetten-Wasserzeichen: einziges dekoratives Element der Marke ------- Nur auf Flaechen ohne Fliesstext, Deckkraft bewusst sehr niedrig. */ .sr-facets { position: relative; overflow: hidden; } .sr-facets::before { content: ""; position: absolute; inset: -20%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23B8956F' stroke-width='1'%3E%3Cpath d='M40 10h120l30 30v120l-30 30H40L10 160V40z'/%3E%3Cpath d='M40 10 100 100 160 10M10 40l90 60-90 60M190 40l-90 60 90 60M40 190l60-90 60 90'/%3E%3Cpath d='M10 40h180M10 160h180M40 10v180M160 10v180'/%3E%3C/g%3E%3C/svg%3E"); background-size: 280px 280px; background-position: center; background-repeat: no-repeat; opacity: 0.07; pointer-events: none; /* hinter den Inhalt, aber ueber die Panel-Flaeche - laesst absolut positionierte Kinder (z. B. das "Empfohlen"-Badge) unangetastet */ z-index: -1; } /* --- Buttons: Carbon auf Hell, invertiert auf Dunkel ---------------------- */ .btn-solid { background: var(--carbon-black); color: var(--classic-white); border: 1px solid var(--carbon-black); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .dark .btn-solid { background: var(--classic-white); color: var(--carbon-black); border-color: var(--classic-white); } .btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--color-gray-300); transition: border-color 0.2s ease, color 0.2s ease; } .dark .btn-outline { color: var(--classic-white); border-color: var(--color-gray-700); } /* Touch devices (iOS Safari especially) can leave :hover "stuck" after a tap since there's no real pointer hover - scoping all button hover effects to devices that actually support hover keeps buttons visually unchanged on touch. */ @media (hover: hover) { .btn-solid:hover { background: var(--copper); border-color: var(--copper); } .dark .btn-solid:hover { background: var(--copper); border-color: var(--copper); color: var(--carbon-black); } .btn-outline:hover { border-color: var(--copper); color: var(--copper); } .dark .btn-outline:hover { border-color: var(--copper); color: var(--copper); } } /* --- Icon-Flaeche (statt Verlaufskreis) ----------------------------------- */ .sr-mark { background: var(--carbon-black); color: var(--classic-white); } .dark .sr-mark { background: var(--copper); color: var(--carbon-black); } /* --- Segment-Umschalter --------------------------------------------------- */ .seg-btn { color: var(--taupe); border: 1px solid transparent; transition: all 0.2s ease; } .dark .seg-btn { color: var(--business-grey); } /* Touch devices (iOS Safari in particular) can leave :hover "stuck" after a tap since there's no real pointer hover - scoping this to devices that actually support hover keeps segment buttons visually unchanged on touch. */ @media (hover: hover) { .seg-btn:hover { color: var(--copper); } } .seg-btn-active { background: var(--carbon-black); color: var(--classic-white); border-color: var(--carbon-black); } .dark .seg-btn-active { background: var(--classic-white); color: var(--carbon-black); border-color: var(--classic-white); } /* --- Aktiver Menuepunkt: Kupfer-Kante statt Farbflaeche -------------------- */ .sr-nav-active { color: var(--ink); font-weight: 600; border-left: 2px solid var(--copper); background: var(--color-gray-100); } .dark .sr-nav-active { color: var(--classic-white); background: rgb(255 255 255 / 0.04); } /* --- STIG Royal Card ------------------------------------------------------ */ .royal-card { position: relative; aspect-ratio: 1.586; overflow: hidden; background: var(--carbon-black); border: 1px solid var(--color-gray-800); } .dark .royal-card { border-color: #2a2724; } /* --- Submenue-Akkordeon --------------------------------------------------- */ .submenu { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; } .submenu.open { max-height: 520px; } [data-submenu].open .menu-item-arrow { transform: translateY(-50%) rotate(180deg); } /* --- Chart: Kupferlinie, flache Fuellung (keine Verlaeufe) ---------------- */ .chart-grid { stroke: var(--color-gray-200); stroke-dasharray: 2 5; } .dark .chart-grid { stroke: var(--color-gray-800); } .chart-label { fill: var(--taupe); font-size: 10px; letter-spacing: 0.04em; } .dark .chart-label { fill: var(--business-grey); } .chart-line { fill: none; stroke: var(--copper); stroke-width: 1.5; } .chart-area { fill: color-mix(in srgb, var(--copper) 10%, transparent); } .chart-dot { fill: var(--copper); stroke: var(--classic-white); stroke-width: 2; } .dark .chart-dot { stroke: var(--carbon-black); } /* --- Toast ---------------------------------------------------------------- */ #toast.show { opacity: 1; transform: translate(-50%, 0); } /* ============================================================================ FORMULARE, TABELLEN, BADGES - gemeinsame Bausteine aller Unterseiten. Struktur uebernommen aus tailadmin-html-pro-23x (form-elements.html, basic-tables.html), Farben/Radien kommen aus stigrock-brand.css bzw. -v4. Dadurch sehen alle Seiten identisch aus, ohne dass jede Seite die langen Utility-Ketten wiederholt. ========================================================================== */ /* --- Feldbeschriftung ----------------------------------------------------- */ .field-label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--ink); } .dark .field-label { color: var(--business-grey); } /* --- Eingabefelder (input, select, textarea) ------------------------------ */ .field-input { width: 100%; min-height: 2.75rem; padding: 0.625rem 1rem; font-size: 0.875rem; color: var(--ink); background: transparent; border: 1px solid var(--color-gray-300); border-radius: var(--radius-lg); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field-input::placeholder { color: var(--taupe); opacity: 0.7; } .field-input:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--copper) 15%, transparent); } .field-input:disabled, .field-input[readonly] { background: color-mix(in srgb, var(--business-grey) 12%, transparent); color: var(--taupe); cursor: not-allowed; } .dark .field-input { color: var(--classic-white); border-color: var(--color-gray-800); } .dark .field-input::placeholder { color: var(--business-grey); opacity: 0.6; } .dark .field-input:disabled, .dark .field-input[readonly] { background: rgb(255 255 255 / 0.04); color: var(--business-grey); } select.field-input { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5D4F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 1rem; } .dark select.field-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A4A9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* Native