Backup: Stand vor Design-Optimierung (2026-02-16)
Dieser Commit ist enthalten in:
Claude Code
@@ -67,7 +67,7 @@
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50px;
|
||||
background: linear-gradient(135deg, #0f72b5, #00406e);
|
||||
background: #0A1832;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: -1;
|
||||
@@ -81,13 +81,13 @@
|
||||
.about-tab.active {
|
||||
color: #ffffff;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 8px 20px rgba(15, 114, 181, 0.3);
|
||||
box-shadow: 0 8px 20px rgba(179, 150, 69, 0.3);
|
||||
}
|
||||
|
||||
.about-tab:hover:not(.active) {
|
||||
color: #0f72b5;
|
||||
color: #B39645;
|
||||
transform: translateY(-2px);
|
||||
background: rgba(15, 114, 181, 0.05);
|
||||
background: rgba(200, 168, 81, 0.08);
|
||||
}
|
||||
|
||||
/* Tab Content Panels */
|
||||
@@ -153,7 +153,7 @@
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #0f72b5, #00406e);
|
||||
background: #0A1832;
|
||||
transform: scaleY(0);
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
@@ -190,7 +190,7 @@
|
||||
|
||||
.company-card:hover .company-card-icon {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
background: linear-gradient(135deg, #0f72b5, #00406e);
|
||||
background: #0A1832;
|
||||
}
|
||||
|
||||
.company-card-icon img {
|
||||
@@ -210,7 +210,7 @@
|
||||
}
|
||||
|
||||
.mission-header {
|
||||
background: linear-gradient(135deg, #0f72b5, #00406e);
|
||||
background: #0A1832;
|
||||
color: white;
|
||||
padding: 60px;
|
||||
border-radius: 30px;
|
||||
@@ -279,7 +279,7 @@
|
||||
.value-card:hover {
|
||||
transform: translateY(-10px) scale(1.02);
|
||||
box-shadow: 0 20px 60px rgba(15, 114, 181, 0.2);
|
||||
border-color: #0f72b5;
|
||||
border-color: #0A1832;
|
||||
}
|
||||
|
||||
.value-icon {
|
||||
@@ -303,7 +303,7 @@
|
||||
|
||||
.value-card:hover .value-icon {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
background: linear-gradient(135deg, #0f72b5, #00406e);
|
||||
background: #0A1832;
|
||||
}
|
||||
|
||||
.value-card:hover .value-icon img {
|
||||
@@ -323,7 +323,7 @@
|
||||
top: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #0f72b5, #00406e);
|
||||
background: #0A1832;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@@ -363,14 +363,14 @@
|
||||
.competency-number {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #0f72b5, #00406e);
|
||||
background: linear-gradient(135deg, #C8A851, #B39645);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Why IntelSight - 2x2 Grid */
|
||||
/* Why AegisSight - 2x2 Grid */
|
||||
.why-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -448,7 +448,7 @@
|
||||
|
||||
.why-card:hover .why-icon {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
background: linear-gradient(135deg, #0f72b5, #00406e);
|
||||
background: #0A1832;
|
||||
}
|
||||
|
||||
.why-card:hover .why-icon img {
|
||||
@@ -508,7 +508,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at 35% 45%, rgba(15, 114, 181, 0.3) 0%, transparent 40%);
|
||||
background: radial-gradient(circle at 35% 45%, rgba(10, 24, 50, 0.3) 0%, transparent 40%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
pointer-events: none;
|
||||
@@ -521,7 +521,7 @@
|
||||
|
||||
.mini-germany-map:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 15px 50px rgba(15, 114, 181, 0.15);
|
||||
box-shadow: 0 15px 50px rgba(10, 24, 50, 0.15);
|
||||
}
|
||||
|
||||
.mini-germany-map img {
|
||||
@@ -541,10 +541,10 @@
|
||||
/* Pulsing glow effect for NRW region */
|
||||
@keyframes nrwPulse {
|
||||
0%, 100% {
|
||||
filter: drop-shadow(0 0 10px rgba(15, 114, 181, 0.5));
|
||||
filter: drop-shadow(0 0 10px rgba(10, 24, 50, 0.5));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 0 25px rgba(15, 114, 181, 0.8));
|
||||
filter: drop-shadow(0 0 25px rgba(10, 24, 50, 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -567,7 +567,7 @@
|
||||
}
|
||||
|
||||
.location-badge:hover {
|
||||
background: linear-gradient(135deg, #0f72b5, #00406e);
|
||||
background: #0A1832;
|
||||
color: white;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 10px 30px rgba(15, 114, 181, 0.3);
|
||||
|
||||
37
css/main.css
37
css/main.css
@@ -2,6 +2,7 @@
|
||||
:root {
|
||||
--primary-blue: #0f72b5;
|
||||
--dark-blue: #00406e;
|
||||
--accent-gold: #C8A851;
|
||||
--light-gray: #f4f4f4;
|
||||
--white: #FFFFFF;
|
||||
--text-dark: #333333;
|
||||
@@ -25,7 +26,7 @@
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: var(--white);
|
||||
background-color: #0a0f1c;
|
||||
color: var(--text-dark);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
@@ -58,6 +59,10 @@ h6 { font-size: 1.1rem; }
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
#about .section-title {
|
||||
color: #0A1832;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.1rem;
|
||||
text-align: center;
|
||||
@@ -111,6 +116,9 @@ h6 { font-size: 1.1rem; }
|
||||
.logo-img {
|
||||
height: 50px;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
@@ -134,7 +142,7 @@ h6 { font-size: 1.1rem; }
|
||||
}
|
||||
|
||||
.nav-menu a:hover {
|
||||
color: var(--primary-blue);
|
||||
color: #0A1832;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@@ -145,7 +153,7 @@ h6 { font-size: 1.1rem; }
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--primary-blue);
|
||||
background: #0A1832;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -471,12 +479,23 @@ h6 { font-size: 1.1rem; }
|
||||
border-radius: 4px;
|
||||
margin-top: 1rem;
|
||||
color: var(--text-dark);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.location-badge svg {
|
||||
.location-badge:hover {
|
||||
background: var(--dark-blue);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.location-badge img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--primary-blue);
|
||||
filter: brightness(0) saturate(100%) invert(42%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(98%) contrast(92%);
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
|
||||
.location-badge:hover img {
|
||||
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
|
||||
}
|
||||
|
||||
.shield-animation {
|
||||
@@ -602,7 +621,7 @@ h6 { font-size: 1.1rem; }
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Why IntelSight */
|
||||
/* Why AegisSight */
|
||||
.why-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -1415,12 +1434,12 @@ h6 { font-size: 1.1rem; }
|
||||
.scroll-arrow {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: #ffffff;
|
||||
color: #0A1832;
|
||||
animation: bounceArrow 2s infinite;
|
||||
background: rgba(15, 114, 181, 0.2);
|
||||
background: rgba(10, 24, 50, 0.15);
|
||||
border-radius: 50%;
|
||||
padding: 4px;
|
||||
box-shadow: 0 4px 12px rgba(15, 114, 181, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(10, 24, 50, 0.3);
|
||||
}
|
||||
|
||||
.scroll-arrow svg {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/* Mobile Responsive Styles - IntelSight */
|
||||
/* Mobile Responsive Styles - AegisSight */
|
||||
/* Mobile-First Approach with Progressive Enhancement */
|
||||
|
||||
/* Base Mobile Styles (320px and up) */
|
||||
@@ -49,6 +49,7 @@
|
||||
|
||||
.logo-img {
|
||||
max-width: 120px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Hide desktop menu */
|
||||
@@ -383,6 +384,7 @@
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
.hero-title .main-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
@@ -492,6 +494,35 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet and Small Desktop (768px - 1024px) */
|
||||
@media screen and (min-width: 768px) and (max-width: 1024px) {
|
||||
/* Navigation adjustments for tablets */
|
||||
.nav-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Keep centered logo but adjust size */
|
||||
.logo-img {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* Adjust menu spacing */
|
||||
.nav-menu {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Language toggle smaller on tablets */
|
||||
.lang-toggle {
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.navbar,
|
||||
|
||||
@@ -139,15 +139,16 @@
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #0f72b5, #00406e);
|
||||
background: linear-gradient(135deg, #0A1832, #0f72b5);
|
||||
border-radius: 20px;
|
||||
opacity: 0.1;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.product-card:hover .product-icon-bg {
|
||||
opacity: 0.2;
|
||||
opacity: 0.3;
|
||||
transform: rotate(10deg) scale(1.1);
|
||||
background: linear-gradient(135deg, #0A1832, #1e3a5f);
|
||||
}
|
||||
|
||||
.product-icon {
|
||||
@@ -155,13 +156,13 @@
|
||||
z-index: 1;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
filter: brightness(0) saturate(100%) invert(42%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(98%) contrast(92%);
|
||||
filter: brightness(0) saturate(100%) invert(8%) sepia(13%) saturate(4290%) hue-rotate(189deg) brightness(95%) contrast(97%);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.product-card:hover .product-icon {
|
||||
transform: scale(1.1);
|
||||
filter: brightness(0) saturate(100%) invert(42%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(108%) contrast(92%);
|
||||
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
|
||||
}
|
||||
|
||||
.product-title-wrapper {
|
||||
@@ -181,6 +182,11 @@
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
/* Specific styling for AccountForger title */
|
||||
.product-title[data-translate="productAccountForgerTitle"] {
|
||||
color: #0A1832;
|
||||
}
|
||||
|
||||
.product-card:hover .product-title {
|
||||
color: #0f72b5;
|
||||
}
|
||||
@@ -279,9 +285,9 @@
|
||||
|
||||
/* Learn More Button */
|
||||
.product-learn-more {
|
||||
background: transparent;
|
||||
border: 2px solid #0f72b5;
|
||||
color: #0f72b5;
|
||||
background: #C8A851;
|
||||
border: 2px solid #C8A851;
|
||||
color: #0a0f1c;
|
||||
padding: 10px 25px;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
@@ -301,7 +307,7 @@
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: linear-gradient(135deg, #0f72b5, #00406e);
|
||||
background: #0a0f1c;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: all 0.5s;
|
||||
border-radius: 50px;
|
||||
@@ -313,10 +319,10 @@
|
||||
}
|
||||
|
||||
.product-learn-more:hover {
|
||||
color: #ffffff;
|
||||
border-color: transparent;
|
||||
color: #C8A851;
|
||||
border-color: #C8A851;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(15, 114, 181, 0.3);
|
||||
box-shadow: 0 10px 30px rgba(200, 168, 81, 0.3);
|
||||
}
|
||||
|
||||
.product-learn-more span {
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren