/* ========================================================================= tricoma.energy ? Design-Layer v3 ????????????????????????????????? Ergänzt euer bestehendes tricoma_energy_v2.css. Bringt Lovable-Design-Tokens und Custom-Utilities in den Bootstrap-5-Workflow ? damit ihr im HTML primär Bootstrap-Klassen (row, col-lg-6, d-flex, gap-3, mb-4) plus ein paar tricoma-Klassen nutzen könnt, statt Tailwind-Utilities zu jagen. Reihenfolge im : 1. bootstrap.min.css 2. tricoma_energy_v2.css (bestehend) 3. tricoma_energy_v3.css (diese Datei ? überschreibt punktuell) ========================================================================= */ /* ------------------------------------------------------------------------- 1. DESIGN-TOKENS ------------------------------------------------------------------------- */ :root { /* Brand-Kern (gemappt auf eure bestehenden tricoma-Farben) */ --te-primary: #0086dd; --te-primary-hover: #006bb3; --te-primary-soft: #e6f3fc; /* dezenter Brand-Hintergrund */ --te-primary-foreground: #ffffff; --te-accent: #ff9900; /* Orange-Akzent */ --te-accent-hover: #e07e00; --te-accent-soft: #fff4e1; --te-accent-foreground: #1f2937; /* Text / Ink */ --te-ink: #1f2937; /* Haupttext */ --te-ink-soft: #5a6072; /* Fließtext / Subtext */ --te-ink-mute: #9ca3af; /* Meta / Labels */ /* Flächen */ --te-bg: #ffffff; /* Standardhintergrund */ --te-surface: #f7f9fc; /* abgesetzte Section-Fläche */ --te-surface-elev: #ffffff; /* gehobene Karte */ --te-muted: #f1f3f7; /* Bars/Tracks/Skeleton */ /* Linien */ --te-border: #e5e8ee; --te-border-soft: #eef0f4; /* Effekte */ --te-shadow-soft: 0 6px 18px -6px rgba(17, 24, 39, .08), 0 2px 6px -2px rgba(17, 24, 39, .05); --te-shadow-float: 0 22px 48px -18px rgba(17, 24, 39, .25), 0 6px 16px -6px rgba(17, 24, 39, .10); --te-shadow-glow: 0 0 0 1px rgba(0, 134, 221, .10), 0 30px 60px -20px rgba(0, 134, 221, .35); --te-shadow-glow-accent: 0 14px 34px -10px rgba(255, 153, 0, .45); /* Radien */ --te-radius-sm: 8px; --te-radius-md: 14px; --te-radius-lg: 22px; /* "rounded-2xl" */ --te-radius-xl: 32px; /* "rounded-3xl" */ --te-radius-pill: 9999px; /* Typo */ --te-font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --te-font-display: "Open Sans", "Inter", system-ui, sans-serif; /* Layout */ --te-container: 1400px; } /* ------------------------------------------------------------------------- 2. LAYOUT-UTILITIES ------------------------------------------------------------------------- */ /* Lovable nutzt überall .container-wide ? mehr Außenraum als .container */ .container-wide { width: 100%; max-width: var(--te-container); margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 768px) { .container-wide { padding-inline: 2rem; } } @media (min-width: 1200px) { .container-wide { padding-inline: 2.5rem; } } /* Vertikales Section-Spacing ? konsistent über die ganze Seite */ .section-pad { padding-block: 5rem; } .section-pad-lg { padding-block: 6rem; } @media (min-width: 992px) { .section-pad { padding-block: 6rem; } .section-pad-lg { padding-block: 8rem; } } /* ------------------------------------------------------------------------- 3. FARB-UTILITIES (analog Bootstrap .bg-* / .text-*) ------------------------------------------------------------------------- */ /* Flächen */ .bg-surface { background-color: var(--te-surface); } .bg-surface-elev { background-color: var(--te-surface-elev);} .bg-primary-soft { background-color: var(--te-primary-soft);} .bg-accent-soft { background-color: var(--te-accent-soft); } .bg-muted { background-color: var(--te-muted); } .bg-ink { background-color: var(--te-ink); } .bg-ink-deep { background-color: #0f1623; } /* Text */ .text-ink { color: var(--te-ink) !important; } .text-ink-soft { color: var(--te-ink-soft) !important; } .text-ink-mute { color: var(--te-ink-mute) !important; } .text-te-primary { color: var(--te-primary) !important; } .text-te-accent { color: var(--te-accent) !important; } .text-on-primary { color: var(--te-primary-foreground) !important; } /* Borders */ .border-soft { border: 1px solid var(--te-border-soft) !important; } .border-te { border: 1px solid var(--te-border) !important; } .border-top-soft { border-top: 1px solid var(--te-border-soft) !important; } /* ------------------------------------------------------------------------- 4. RADIEN, SCHATTEN, EFFEKTE ------------------------------------------------------------------------- */ .rounded-2xl { border-radius: var(--te-radius-lg) !important; } .rounded-3xl { border-radius: var(--te-radius-xl) !important; } .rounded-pill-te { border-radius: var(--te-radius-pill) !important; } .shadow-soft { box-shadow: var(--te-shadow-soft) !important; } .shadow-float { box-shadow: var(--te-shadow-float) !important; } .shadow-glow { box-shadow: var(--te-shadow-glow) !important; } .shadow-glow-accent { box-shadow: var(--te-shadow-glow-accent) !important; } /* Sanfter Hover-Lift, der mit jedem Block kombinierbar ist */ .hover-lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--te-shadow-float); } /* ------------------------------------------------------------------------- 5. KOMPONENTEN ------------------------------------------------------------------------- */ /* 5.1 Eyebrow / Pill-Label Beispiel: Branchen */ .te-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: var(--te-radius-pill); background: var(--te-primary-soft); color: var(--te-primary); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; } .te-eyebrow--accent { background: var(--te-accent-soft); color: #8a4a00; } .te-eyebrow--light { background: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(6px); } /* 5.2 Pill-Buttons (CTAs im Lovable-Style) Diese ergänzen eure bestehenden .cta-button-Klassen ? nicht ersetzen. */ .te-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 1.6rem; border-radius: var(--te-radius-pill); font-weight: 600; font-size: .95rem; text-decoration: none; border: 1px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; cursor: pointer; line-height: 1.2; } .te-btn-accent { background: var(--te-accent); color: #fff; box-shadow: var(--te-shadow-soft); } .te-btn-accent:hover { background: var(--te-accent-hover); color: #fff; transform: translateY(-2px); box-shadow: var(--te-shadow-glow-accent); } .te-btn-primary { background: var(--te-primary); color: #fff; box-shadow: 0 4px 15px rgba(0, 134, 221, .3); } .te-btn-primary:hover { background: var(--te-primary-hover); color: #fff; transform: translateY(-2px); } .te-btn-outline { background: var(--te-bg); color: var(--te-ink); border-color: var(--te-border); } .te-btn-outline:hover { border-color: var(--te-primary); background: var(--te-primary-soft); color: var(--te-ink); transform: translateY(-2px); } .te-btn-ghost-light { background: #fff; color: var(--te-primary); } .te-btn-ghost-light:hover { background: rgba(255, 255, 255, .9); color: var(--te-primary-hover); transform: translateY(-2px); } /* Pfeil-Icon, das beim Hover des Buttons mitläuft */ .te-btn .te-arrow { transition: transform .2s ease; } .te-btn:hover .te-arrow { transform: translateX(4px); } /* 5.3 Icon-Chip (das farbige Quadrat mit Icon vor Feature-Texten) */ .te-icon-chip { display: inline-grid; place-items: center; width: 2.75rem; /* 44px ? wie h-11 w-11 bei Lovable */ height: 2.75rem; border-radius: 14px; background: var(--te-primary-soft); color: var(--te-primary); flex-shrink: 0; } .te-icon-chip svg { width: 1.25rem; height: 1.25rem; } .te-icon-chip--accent { background: var(--te-accent-soft); color: #8a4a00; } .te-icon-chip--lg { width: 3rem; height: 3rem; } .te-icon-chip--xl { width: 3.5rem; height: 3.5rem; border-radius: 18px; } /* Hover-Variante: füllt sich aus, wenn Eltern-.group gehovt wird */ .te-card-hover:hover .te-icon-chip { background: var(--te-primary); color: #fff; } /* 5.4 Karten Basisform für Problem-Cards, Branchen-Cards, Feature-Cards, etc. */ .te-card { position: relative; background: var(--te-surface-elev); border: 1px solid var(--te-border-soft); border-radius: var(--te-radius-lg); padding: 1.75rem; box-shadow: var(--te-shadow-soft); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; height: 100%; } .te-card:hover { transform: translateY(-4px); border-color: rgba(0, 134, 221, .4); box-shadow: var(--te-shadow-float); } .te-card-xl { border-radius: var(--te-radius-xl); padding: 1.9rem; } .te-card-flat { box-shadow: none; } /* 5.5 Floating-Info-Card ? die kleinen Mini-Widgets im Hero */ .te-info-card { background: rgba(255, 255, 255, .95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--te-radius-lg); padding: 1rem; box-shadow: var(--te-shadow-float); font-size: .85rem; } .te-info-card .te-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--te-primary); } /* 5.6 Bar-Chart-Track ? die animierten Säulen im Live-Lastmanagement-Mini */ .te-bar-track { display: flex; align-items: flex-end; gap: 4px; height: 3rem; } .te-bar { flex: 1; border-radius: 3px; background: linear-gradient(to top, var(--te-primary), rgba(0, 134, 221, .35)); } /* 5.7 Pulsierender Ring (für aktive Status-Symbole im Energiefluss) */ @keyframes te-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(0, 134, 221, .35); } 70% { box-shadow: 0 0 0 14px rgba(0, 134, 221, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 134, 221, 0); } } .te-pulse-ring { animation: te-pulse-ring 2.4s ease-out infinite; } /* 5.8 Floating-Y (sanftes Auf-und-Ab für Info-Cards) */ @keyframes te-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .te-float-y { animation: te-float-y 5s ease-in-out infinite; } .te-float-y-slow { animation: te-float-y 7s ease-in-out infinite; } /* 5.9 Section-Hintergründe (Mesh-Gradients) ? Lovable nutzt für Stimmung ?bg-hero-mesh" / ?bg-gradient-mesh". */ .bg-hero-mesh { background: radial-gradient(at 85% 15%, rgba(255, 153, 0, .12), transparent 55%), radial-gradient(at 15% 85%, rgba(0, 134, 221, .14), transparent 55%), var(--te-bg); } .bg-gradient-mesh { background: radial-gradient(at 20% 20%, rgba(0, 134, 221, .9), transparent 60%), radial-gradient(at 80% 80%, rgba(255, 153, 0, .55), transparent 55%), linear-gradient(135deg, #006bb3, #0086dd); color: #fff; } .bg-gradient-accent { background: linear-gradient(135deg, #ff7a00, var(--te-accent)); } /* 5.10 Kontaktformular ? fixt das Lovable-Look-and-Feel mit Bootstrap */ .te-form .form-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--te-ink-soft); margin-bottom: .4rem; } .te-form .form-control, .te-form .form-select { border: 1px solid var(--te-border); font-size: .95rem; } .te-form .form-control:focus, .te-form .form-select:focus { border-color: var(--te-primary); box-shadow: 0 0 0 4px rgba(0, 134, 221, .12); } /* 5.11 Dunkler Footer */ .te-footer { background: #0f1623; color: rgba(255, 255, 255, .7); } .te-footer a { color: rgba(255, 255, 255, .6); text-decoration: none; transition: color .2s ease; } .te-footer a:hover { color: #fff; } .te-footer .te-footer-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #fff; margin-bottom: 1rem; } /* 5.12 Hilfreiche Mini-Utilities, die Bootstrap nicht hat */ .text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; } .lh-tight { line-height: 1.1 !important; } /* Display-Heading ? größer / Tracking enger als die Bootstrap-Defaults */ .te-display { font-family: var(--te-font-display); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; font-size: clamp(2.1rem, 4.2vw, 3.5rem); } .te-display--xl { font-size: clamp(2.5rem, 5.5vw, 4.5rem); }