@charset "UTF-8"; /* ========================================================================= Shelltrap — "The Trap Room" für den HostBill-Clientbereich (Brand 55) Einzige Marken-Ebene. Wird in header.shared.tpl direkt nach app.min.css eingebunden und gewinnt damit gegen app.min.css UND gegen das erst im nachgeladene templates/orderpages/flexboxes/style.css (dort per `html body.template_2019 …` Spezifität erzwungen). Grundregel des Designs: dunkle Flächen = Graphit #0f1115 / #161a21 (Navbar, Sidebar, Produktkarte, Login-Karte) helle Flächen = Papier #f6f4ef / #ffffff (Seite, Cards, Checkout) Signal / CTA = Bernstein #ffb000 (auf Hell als Text: #8f5500) "clean" = Cyan #3fd0e8 (auf Hell als Text: #0a6b7d) Rot ausschliesslich für Quarantäne/Fehler. ========================================================================= */ :root { /* --- dunkle Flächen ------------------------------------------------- */ --bt-graphite: #0f1115; --bt-graphite-raised: #161a21; --bt-graphite-sunken: #0a0c10; --bt-line-dark: #262c36; --bt-line-dark-2: #39414f; --bt-paper: #f4f2ec; --bt-paper-muted: #a2a9b6; --bt-paper-faint: #767e8c; /* --- helle Flächen -------------------------------------------------- */ --bt-page: #f6f4ef; --bt-surface: #ffffff; --bt-surface-sunken: #ebe7de; --bt-line: #d9d3c7; --bt-ink: #14171c; --bt-ink-muted: #545c68; /* --- Bernstein = Signal / CTA --------------------------------------- */ --bt-amber: #ffb000; /* Fläche */ --bt-amber-hover: #bd8200; /* x0.74 Helligkeit */ --bt-amber-active: #8f6300; /* x0.56 Helligkeit */ --bt-amber-ink: #0f1115; /* Text auf Bernstein 10.3:1 */ --bt-amber-text: #8f5500; /* Bernstein als Text auf Hell 5.8:1 */ --bt-amber-focus: #a86d00; /* Fokusring auf Hell 4.1:1 (non-text) */ --bt-amber-wash: rgba(255, 176, 0, .12); --bt-amber-line: rgba(255, 176, 0, .38); /* --- Cyan = "clean" -------------------------------------------------- */ --bt-cyan: #3fd0e8; /* auf Graphit 10.3:1 */ --bt-cyan-solid: #0e7c90; /* Fläche, weisser Text 4.9:1 */ --bt-cyan-text: #0a6b7d; /* Cyan als Text auf Hell 5.9:1 */ --bt-cyan-wash: rgba(63, 208, 232, .12); /* --- Quarantäne ------------------------------------------------------ */ --bt-danger: #c22f26; --bt-danger-text: #b3261e; --bt-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, "Liberation Sans", sans-serif; --bt-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace; --bt-radius: 6px; } /* ---------- Grundtypografie & Seitengrund ------------------------------ */ html, body { font-family: var(--bt-font) !important; color: var(--bt-ink-muted) !important; background-color: var(--bt-page) !important; } h1, h2, h3, h4, h5, h6, .card-title, .modal-title, .section-title, legend { font-family: var(--bt-font) !important; color: var(--bt-ink); letter-spacing: -0.015em; } code, kbd, pre, samp, .text-monospace, .invoice-number, .service-domain { font-family: var(--bt-mono) !important; } /* ---------- Links ------------------------------------------------------ */ a { color: var(--bt-amber-text); } a:hover, a:focus { color: var(--bt-amber-active); } /* Fokus: sichtbarer Bernstein-Ring, wie auf shelltrap.com */ a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .form-control:focus-visible { outline: 3px solid var(--bt-amber-focus); outline-offset: 2px; } .form-control:focus, .custom-select:focus, .selectize-input.focus { border-color: var(--bt-amber) !important; box-shadow: 0 0 0 .2rem rgba(255, 176, 0, .28) !important; } ::selection { background: var(--bt-amber-wash); color: var(--bt-ink); } /* ---------- Buttons ---------------------------------------------------- */ .btn-primary, .badge-primary, .page-item.active .page-link { background-color: var(--bt-amber) !important; border-color: var(--bt-amber) !important; color: var(--bt-amber-ink) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--bt-amber-hover) !important; border-color: var(--bt-amber-hover) !important; color: var(--bt-amber-ink) !important; } .btn-primary:not(:disabled):not(.disabled):active:focus { background-color: var(--bt-amber-active) !important; border-color: var(--bt-amber-active) !important; color: #ffffff !important; /* 5.3:1 auf #8f6300 */ } .btn-outline-primary, .text-primary { color: var(--bt-amber-text) !important; border-color: var(--bt-amber-text); } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--bt-amber) !important; border-color: var(--bt-amber) !important; color: var(--bt-amber-ink) !important; } /* .btn-success ist in HostBill der Bestell-CTA (Topbar "Order", "Order now", "Jetzt zahlen") — deshalb Bernstein, nicht die Statusfarbe. */ .btn-success, .navbar-order-toggler, a.btn.btn-success { background-color: var(--bt-amber) !important; border-color: var(--bt-amber) !important; color: var(--bt-amber-ink) !important; } .btn-success:hover, .btn-success:focus, .navbar-order-toggler:hover, .navbar-order-toggler:focus { background-color: var(--bt-amber-hover) !important; border-color: var(--bt-amber-hover) !important; color: var(--bt-amber-ink) !important; } /* Statussemantik bleibt "clean" cyan */ .badge-success, .badge.badge-Active, .badge.badge-Paid { background-color: var(--bt-cyan-solid) !important; border-color: var(--bt-cyan-solid) !important; color: #ffffff !important; } .btn-outline-success, .text-success, .valid-feedback { color: var(--bt-cyan-text) !important; } .btn-secondary, .btn-default { background-color: var(--bt-surface); border-color: var(--bt-line); color: var(--bt-ink); } /* ---------- Kartenflächen ---------------------------------------------- */ .card, .modal-content, .dropdown-menu, .list-group-item, .root-box, .card.root-box, .panel, .well { background-color: var(--bt-surface); border-color: var(--bt-line) !important; } hr, .dropdown-divider, .table td, .table th { border-color: var(--bt-line); } /* ---------- Kopfleiste (Topbar) ---------------------------------------- */ /* .navbar-left hat in app.min.css ein hartes rgb(70,72,81) -> ueberschreiben */ .navbar, html body.template_2019 nav.navbar.fixed-top, html body.template_2019 nav.navbar.fixed-top .navbar-left, html body.template_2019.sidenav-toggled nav.navbar.fixed-top .navbar-left { background-color: var(--bt-graphite) !important; border-bottom: 1px solid var(--bt-line-dark); box-shadow: none; } html body.template_2019 nav.navbar.fixed-top .navbar-left .navbar-brand img { max-height: 34px; } /* Cart / Sprache / Login-Register lagen im Fork auf WEISS: hellgrauer Text darauf waere ein Kontrastbruch — Flaeche transparent, Trenner dunkel. */ html body.template_2019 nav.navbar.fixed-top .nav-item, html body.template_2019 nav.navbar.fixed-top .nav-link, html body.template_2019 nav.navbar.fixed-top .navbar-menu, html body.template_2019 nav.navbar.fixed-top .navbar-nav, html body.template_2019 nav.navbar.fixed-top .navbar-right { background-color: transparent !important; border-color: var(--bt-line-dark) !important; } /* Popover-Menues bleiben helle Flaechen */ html body.template_2019 nav.navbar.fixed-top .dropdown-menu { background-color: var(--bt-surface) !important; border-color: var(--bt-line) !important; color: var(--bt-ink-muted) !important; } html body.template_2019 nav.navbar.fixed-top .dropdown-menu .nav-link, html body.template_2019 nav.navbar.fixed-top .dropdown-menu a:not(.btn) { color: var(--bt-ink-muted) !important; } .navbar .nav-link, .navbar-menu .nav-link, .btn-left-navbar, .btn-toggler, .navbar-search-icon, html body.template_2019.sidenav-toggled .navbar .navbar-left .btn-toggler { color: var(--bt-paper-muted) !important; } .navbar .nav-link:hover, .navbar .nav-link:focus, .btn-left-navbar:hover, .btn-toggler:hover { color: var(--bt-paper) !important; } html body.template_2019 nav.navbar.fixed-top .navbar-search .input-group, html body.template_2019 nav.navbar.fixed-top .navbar-search .form-control { background: rgba(255, 255, 255, .05) !important; color: var(--bt-paper) !important; border-color: var(--bt-line-dark) !important; box-shadow: none !important; } html body.template_2019 nav.navbar.fixed-top .navbar-search .form-control::placeholder { color: var(--bt-paper-faint) !important; } html body.template_2019 nav.navbar.fixed-top .navbar-search .input-group-text, html body.template_2019 nav.navbar.fixed-top .navbar-search .input-group-prepend > *, html body.template_2019 nav.navbar.fixed-top .navbar-search .input-group-append > * { background: transparent !important; color: var(--bt-paper-faint) !important; border-color: var(--bt-line-dark) !important; } /* Mobile Unterleiste: der Fork traegt dort ein hartes .bg-white --------- */ html body.template_2019 nav.navbar.sub-bar, html body.template_2019 nav.navbar.sub-bar .navbar-body, html body.template_2019 nav.navbar.sub-bar .bg-white, html body.template_2019 nav.navbar.sub-bar .nav-item, html body.template_2019 nav.navbar.sub-bar .nav-item > .nav-link, html body.template_2019 nav.navbar.sub-bar .input-group, html body.template_2019 nav.navbar.sub-bar .input-group-text { background-color: var(--bt-graphite) !important; border-color: var(--bt-line-dark) !important; } html body.template_2019 nav.navbar.sub-bar .dropdown-menu { background-color: var(--bt-surface) !important; border-color: var(--bt-line) !important; } html body.template_2019 nav.navbar.sub-bar .form-control, html body.template_2019 nav.navbar.sub-bar .form-control:focus { background-color: transparent !important; color: var(--bt-paper) !important; border-color: var(--bt-line-dark) !important; } html body.template_2019 nav.navbar.sub-bar .form-control::placeholder { color: var(--bt-paper-faint) !important; } html body.template_2019 nav.navbar.sub-bar .nav-link, html body.template_2019 nav.navbar.sub-bar .navbar-search-icon, html body.template_2019 nav.navbar.sub-bar i, html body.template_2019 nav.navbar.sub-bar .material-icons { color: var(--bt-paper-muted) !important; } /* der Order-Knopf in der Topbar ist der primäre CTA -> Bernstein */ html body.template_2019 nav.navbar .navbar-menu .btn-order, html body.template_2019 nav.navbar .btn-order, html body.template_2019 nav.navbar .navbar-nav .btn-primary { background-color: var(--bt-amber) !important; border-color: var(--bt-amber) !important; color: var(--bt-amber-ink) !important; } /* ---------- Sidebar / linkes Menü --------------------------------------- */ .sidebar, .leftnavigation, .leftnavigation-box, html body.template_2019 .sidebar { background-color: var(--bt-graphite-raised) !important; border-right: 1px solid var(--bt-line-dark); } .sidebar .nav-link, .leftnavigation-box .nav-item .nav-link { color: var(--bt-paper-muted) !important; } .sidebar .nav-link:hover, .leftnavigation-box .nav-item:hover .nav-link { color: var(--bt-paper) !important; background-color: rgba(255, 255, 255, .05) !important; } .sidebar .nav-link.active, .leftnavigation-box .nav-item .nav-link.active { color: var(--bt-amber) !important; background-color: var(--bt-amber-wash) !important; box-shadow: inset 3px 0 0 var(--bt-amber); } /* Untermenue "Pages" (Impressum/Datenschutz) lag auf #3d3e46 */ html body.template_2019 .sidebar .nav-item .nav-subnav, html body.template_2019 .sidebar .nav-item .nav-subnav .nav-item > .nav-link { background-color: var(--bt-graphite-sunken) !important; color: var(--bt-paper-muted) !important; } html body.template_2019 .sidebar .nav-item .nav-subnav .nav-item > .nav-link:hover, html body.template_2019 .sidebar .nav-item .nav-subnav .nav-item > .nav-link:focus { color: var(--bt-amber) !important; background-color: rgba(255, 176, 0, .10) !important; } .sidebar-heading, .leftnavigation-box .nav-title { color: var(--bt-paper-faint) !important; } /* ---------- Fussbereich (liegt auf hellem Grund) ------------------------ */ .footer-content, .footer { background-color: transparent; } .footer .nav-link.text-secondary, .footer .text-secondary, .footer small { color: var(--bt-ink-muted) !important; } .footer .nav-link.text-secondary:hover, .footer .nav-link.text-secondary:focus { color: var(--bt-amber-text) !important; } /* ---------- Login / Passwort (dunkle Karte, weisses Wortzeichen) -------- */ .section-signin .form-credentials, .section-passreminder .form-credentials { background-color: var(--bt-graphite-raised); border: 1px solid var(--bt-line-dark) !important; border-radius: var(--bt-radius); color: var(--bt-paper); padding: 28px 24px 32px; } /* der weisse Kasten hinter dem Logo muss verschwinden, und das 522x60er Wortzeichen braucht mehr als die 96px aus .image.size-lg */ .section-signin .form-credentials .image, .section-passreminder .form-credentials .image, .form-credentials .image, .form-credentials img.image { background-color: transparent !important; background: none !important; border-radius: 0; } .section-signin .form-credentials img.image.size-lg, .section-passreminder .form-credentials img.image.size-lg { max-width: 232px !important; width: 232px; height: auto; margin: 6px auto 18px; } .section-signin .form-credentials h1, .section-passreminder .form-credentials h1 { color: var(--bt-paper) !important; } .section-signin .form-credentials small, .section-signin .form-credentials label, .section-passreminder .form-credentials small, .section-passreminder .form-credentials label { color: var(--bt-paper-muted) !important; } .section-signin .form-credentials .form-control, .section-passreminder .form-credentials .form-control { background-color: var(--bt-graphite) !important; border-color: var(--bt-line-dark-2) !important; color: var(--bt-paper) !important; } .section-signin .form-credentials .form-control::placeholder, .section-passreminder .form-credentials .form-control::placeholder { color: var(--bt-paper-faint) !important; } .section-signin .form-credentials a, .section-passreminder .form-credentials a { color: var(--bt-amber) !important; } .section-signin .form-credentials a:hover, .section-passreminder .form-credentials a:hover { color: #ffc64d !important; } /* ---------- Statusfarben ------------------------------------------------ */ .alert.alert-info, .alert-primary { background-color: #fdedcd; border-color: var(--bt-amber-line); color: #6b4200; } .alert.alert-success { background-color: #ddeff3; border-color: rgba(14, 124, 144, .4); color: var(--bt-cyan-text); } /* ========================================================================= Bestellstrecke — templates/orderpages/flexboxes/style.css liegt ausserhalb dieses Templates und wird erst im geladen. Alle Regeln dort tragen `body.template_2019 …!important`; deshalb hier `html body.template_2019`. ========================================================================= */ /* ------------------------------------------------------------------------- Überschrift der Produktliste. Der Text kommt aus {$lang.browseprod} in orderpages//cart0.tpl — eine markenübergreifend genutzte Datei AUSSERHALB dieses Templates, die hier nicht verändert werden darf. h3.title-b traegt in JEDER Orderpage- Variante ausschliesslich diese eine Phrase, deshalb wird sie hier ersetzt: visibility:hidden nimmt den Originaltext auch aus dem Accessibility-Tree, ::before liefert Text UND Höhe. (Sauberer Weg = DB, siehe REPORT.md) ------------------------------------------------------------------------- */ html body.template_2019 .title-b, html body.template_2019 h1.title-b, html body.template_2019 h2.title-b, html body.template_2019 h3.title-b { color: var(--bt-ink) !important; font-family: var(--bt-font) !important; letter-spacing: -0.02em !important; font-size: 0 !important; visibility: hidden; } html body.template_2019 .title-b::before, html body.template_2019 h1.title-b::before, html body.template_2019 h2.title-b::before, html body.template_2019 h3.title-b::before { content: "Shelltrap \2014 licenses for CyberPanel servers"; visibility: visible; display: block; font: 800 clamp(1.55rem, 2.9vw, 2.3rem)/1.16 var(--bt-font); letter-spacing: -0.02em; color: var(--bt-ink); } html body.template_2019 .orderpage.orderpage-comparetable .title-b::before { content: none; } html body.template_2019 .title01 span { color: var(--bt-cyan-text) !important; } /* Kategorie-Chips */ html body.template_2019 .menu-prod { color: var(--bt-ink-muted) !important; } html body.template_2019 .menu-prod span a { background: var(--bt-surface) !important; border-color: var(--bt-line) !important; color: var(--bt-ink-muted) !important; } html body.template_2019 .menu-prod span.active a, html body.template_2019 .menu-prod span a:hover, html body.template_2019 .menu-prod span a:focus { background: rgba(255, 176, 0, .16) !important; border-color: rgba(255, 176, 0, .55) !important; color: var(--bt-amber-text) !important; } /* Produktkarte: Graphit statt Petrol */ html body.template_2019 .prod-sum { background: linear-gradient(180deg, var(--bt-graphite-raised), var(--bt-graphite)) !important; border-color: rgba(244, 242, 236, .14) !important; color: var(--bt-paper) !important; } html body.template_2019 .prod-sum-top { background: radial-gradient(circle at 96% 0, rgba(63, 208, 232, .12), transparent 26%), linear-gradient(180deg, rgba(255, 176, 0, .16), rgba(255, 255, 255, .02)) !important; border-bottom-color: rgba(244, 242, 236, .14) !important; color: var(--bt-paper) !important; } html body.template_2019 .prod-sum-top-name li { color: var(--bt-amber) !important; } html body.template_2019 .prod-sum-middle, html body.template_2019 .prod-sum .prod-sum-middle { color: var(--bt-paper) !important; } html body.template_2019 .sum-list, html body.template_2019 .prod-sum .sum-list, html body.template_2019 .prod-sum .sum-list li, html body.template_2019 .sum-list li, html body.template_2019 .sum-list li ul li, html body.template_2019 .sum-list li ol li, html body.template_2019 .sum-list li ol li.first { color: var(--bt-paper-muted) !important; } html body.template_2019 .sum-list li span, html body.template_2019 .sum-list li ol li span, html body.template_2019 .sum-list li ul li span, html body.template_2019 .prod-sum .sum-list span, html body.template_2019 .prod-sum .sum-list strong, html body.template_2019 .prod-sum .sum-list b { color: var(--bt-cyan) !important; } /* Preisblock */ html body.template_2019 .prod-sum-z { background: rgba(255, 176, 0, .07) !important; border-color: rgba(255, 176, 0, .30) !important; color: var(--bt-paper) !important; } html body.template_2019 .prod-sum-z .z1 { color: var(--bt-amber) !important; } html body.template_2019 .prod-sum-z .z2 { color: var(--bt-paper-muted) !important; } /* Haupt-CTA der Bestellstrecke */ html body.template_2019 .button-sub a.button-order, html body.template_2019 a.button-order { background: linear-gradient(180deg, var(--bt-amber), #e09a00) !important; color: var(--bt-amber-ink) !important; border-color: transparent !important; box-shadow: 0 12px 30px rgba(255, 176, 0, .20) !important; } html body.template_2019 .button-sub a.button-order:hover, html body.template_2019 .button-sub a.button-order:focus, html body.template_2019 a.button-order:hover, html body.template_2019 a.button-order:focus { background: linear-gradient(180deg, #ffc02b, var(--bt-amber)) !important; color: var(--bt-amber-ink) !important; box-shadow: 0 0 0 3px rgba(63, 208, 232, .26), 0 14px 34px rgba(255, 176, 0, .22) !important; } /* Hinweisboxen und Währungswähler in der Karte */ html body.template_2019 .prod-sum .ezos-cart-note, html body.template_2019 .prod-sum .input-self-box { background: rgba(255, 255, 255, .045) !important; border-color: rgba(244, 242, 236, .16) !important; border-left: 4px solid var(--bt-amber) !important; color: var(--bt-paper) !important; } html body.template_2019 .prom-code-middle { border-color: var(--bt-amber-line) !important; color: var(--bt-paper) !important; } html body.template_2019 #currform select.styled, html body.template_2019 #currform select.styled:focus, html body.template_2019 #currform select.styled option { background: var(--bt-surface) !important; color: var(--bt-ink) !important; border: 1px solid var(--bt-line) !important; border-radius: var(--bt-radius) !important; box-shadow: none !important; } html body.template_2019 #currform { color: var(--bt-ink-muted) !important; } /* ========================================================================= Checkout-Endseite /cart/&step=3 — eigene Container ========================================================================= */ html body.template_2019 .default-cart.cart-configuration, html body.template_2019 div#floater.cart-summary-floater, html body.template_2019 .cart-summary-floater .card { background-color: var(--bt-surface) !important; border: 1px solid var(--bt-line) !important; border-radius: var(--bt-radius); color: var(--bt-ink-muted); } html body.template_2019 .default-cart.cart-configuration h1, html body.template_2019 .default-cart.cart-configuration h2, html body.template_2019 .default-cart.cart-configuration h3, html body.template_2019 .cart-summary-floater h1, html body.template_2019 .cart-summary-floater h2, html body.template_2019 .cart-summary-floater h3 { color: var(--bt-ink) !important; } html body.template_2019 div#floater.cart-summary-floater .h1, html body.template_2019 div#floater.cart-summary-floater h1, html body.template_2019 .cart-summary-floater .cart-total, html body.template_2019 .cart-summary-floater .total-price, html body.template_2019 .cart-summary-floater .summary-total { color: var(--bt-amber-text) !important; font-family: var(--bt-mono); letter-spacing: -0.02em; } html body.template_2019 .default-cart .steps .step.active .step-circle, html body.template_2019 .cart-steps .active .circle { background-color: var(--bt-amber) !important; border-color: var(--bt-amber) !important; color: var(--bt-amber-ink) !important; }