modified gitignore
This commit is contained in:
ben7sys
3
.gitignore
vendored
3
.gitignore
vendored
@@ -2,4 +2,5 @@ dev
|
||||
shot-*
|
||||
web*
|
||||
website*
|
||||
logo*
|
||||
logo*
|
||||
aaa*
|
||||
@@ -1,241 +0,0 @@
|
||||
/* Skip Link */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
z-index: var(--z-maximum);
|
||||
transition: top var(--transition-base);
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: 0;
|
||||
outline: 2px solid var(--accent-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Screen Reader Only */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Focus Styles */
|
||||
:focus {
|
||||
outline: 2px solid var(--accent-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Interactive Elements */
|
||||
button,
|
||||
a,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
input:disabled,
|
||||
textarea:disabled,
|
||||
select:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Form Validation */
|
||||
input:invalid,
|
||||
textarea:invalid {
|
||||
border-color: var(--error-red);
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--error-red);
|
||||
font-size: var(--font-size-sm);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
/* High Contrast Mode */
|
||||
@media (forced-colors: active) {
|
||||
:root {
|
||||
--accent-color: CanvasText;
|
||||
--text-color: CanvasText;
|
||||
--bg-primary: Canvas;
|
||||
}
|
||||
|
||||
.service-card,
|
||||
.vision-item {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
.animate-in,
|
||||
.fade-in-scroll,
|
||||
.service-card:hover,
|
||||
.shooting-star {
|
||||
animation: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Contrast */
|
||||
.light-theme {
|
||||
--text-color: #333333; /* WCAG AAA compliant */
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
--text-color: #F2F2F2; /* WCAG AAA compliant */
|
||||
}
|
||||
|
||||
/* Form Labels */
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: var(--space-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ARIA States */
|
||||
[aria-invalid="true"] {
|
||||
border-color: var(--error-red);
|
||||
}
|
||||
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
[aria-disabled="true"] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Keyboard Navigation */
|
||||
a:focus,
|
||||
button:focus,
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus,
|
||||
[tabindex="0"]:focus {
|
||||
outline: 2px solid var(--accent-color);
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 4px rgba(21, 52, 209, 0.2);
|
||||
}
|
||||
|
||||
/* Form Feedback */
|
||||
.form-feedback {
|
||||
padding: var(--space-sm);
|
||||
border-radius: var(--border-radius-sm);
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
.form-feedback.success {
|
||||
background-color: rgba(76, 175, 80, 0.1);
|
||||
color: var(--success-green);
|
||||
}
|
||||
|
||||
.form-feedback.error {
|
||||
background-color: rgba(244, 67, 54, 0.1);
|
||||
color: var(--error-red);
|
||||
}
|
||||
|
||||
/* Loading States */
|
||||
.loading {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loading::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Input Icons */
|
||||
.input-wrapper i {
|
||||
position: absolute;
|
||||
left: var(--space-sm);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.input-wrapper input,
|
||||
.input-wrapper textarea {
|
||||
padding-left: calc(var(--space-lg) + var(--space-sm));
|
||||
}
|
||||
|
||||
/* Cookie Consent */
|
||||
.cookie-consent {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--bg-primary);
|
||||
padding: var(--space-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
z-index: var(--z-modal);
|
||||
}
|
||||
|
||||
.cookie-buttons {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.cookie-button {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--border-radius-sm);
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
transition: var(--transition-base);
|
||||
}
|
||||
|
||||
.cookie-button.accept {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cookie-button.reject {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
@@ -1,181 +0,0 @@
|
||||
/* Base Animations */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from { opacity: 0; transform: translateX(-20px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from { opacity: 0; transform: translateX(20px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from { opacity: 0; transform: scale(0.9); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Loading Spinner */
|
||||
@keyframes spinnerRotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Shooting Star Animation */
|
||||
@keyframes shootingStar {
|
||||
0% {
|
||||
transform: translateX(-100%) translateY(0) rotate(-45deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(200%) translateY(300%) rotate(-45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Stars Twinkling */
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
/* Scroll Progress */
|
||||
@keyframes progressGrow {
|
||||
from { transform: scaleX(0); }
|
||||
to { transform: scaleX(1); }
|
||||
}
|
||||
|
||||
/* Button Hover Effect */
|
||||
@keyframes buttonPulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(21, 52, 209, 0.4); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(21, 52, 209, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(21, 52, 209, 0); }
|
||||
}
|
||||
|
||||
/* Service Card Hover */
|
||||
@keyframes cardFloat {
|
||||
0% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Icon Animations */
|
||||
@keyframes iconBounce {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.2); }
|
||||
}
|
||||
|
||||
/* Form Success Animation */
|
||||
@keyframes checkmark {
|
||||
0% { transform: scale(0); }
|
||||
50% { transform: scale(1.2); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* Cookie Consent Slide */
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-in {
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.6s var(--transition-base) forwards;
|
||||
}
|
||||
|
||||
.delay-1 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.delay-2 {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.delay-3 {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
/* Scroll Animations */
|
||||
.fade-in-scroll {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.fade-in-scroll.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Loading States */
|
||||
.loading-spinner {
|
||||
display: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--text-color);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spinnerRotate 0.8s linear infinite;
|
||||
}
|
||||
|
||||
/* Interactive Elements */
|
||||
.service-card {
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
animation: cardFloat 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.service-icon i {
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
.service-card:hover .service-icon i {
|
||||
animation: iconBounce 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
/* Stars Background */
|
||||
.stars {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
animation: twinkle 1.5s infinite;
|
||||
}
|
||||
|
||||
.shooting-star {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, white, transparent);
|
||||
animation: shootingStar 2s linear infinite;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
/* Scroll Progress Bar */
|
||||
.scroll-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: var(--accent-color);
|
||||
transform-origin: left;
|
||||
z-index: var(--z-maximum);
|
||||
}
|
||||
@@ -1,201 +0,0 @@
|
||||
/* Base Button Styles */
|
||||
.button,
|
||||
.cta-button,
|
||||
.submit-button,
|
||||
.icon-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
border-radius: var(--border-radius-md);
|
||||
font-weight: 600;
|
||||
transition: all var(--transition-base);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-primary);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* CTA Button */
|
||||
.cta-button {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
font-size: var(--font-size-lg);
|
||||
padding: var(--space-md) var(--space-xl);
|
||||
text-decoration: none;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(21, 52, 209, 0.2);
|
||||
}
|
||||
|
||||
.cta-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.cta-button i {
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
.cta-button:hover i {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Submit Button */
|
||||
.submit-button {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
width: 100%;
|
||||
padding: var(--space-md);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
background: var(--accent-blue);
|
||||
}
|
||||
|
||||
.submit-button:disabled {
|
||||
background: var(--border-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.submit-button .button-text {
|
||||
transition: opacity var(--transition-base);
|
||||
}
|
||||
|
||||
.submit-button .loading-spinner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* Icon Button */
|
||||
.icon-button {
|
||||
background: transparent;
|
||||
color: var(--text-color);
|
||||
padding: var(--space-sm);
|
||||
border-radius: var(--border-radius-full);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.icon-button:hover {
|
||||
background: var(--card-bg);
|
||||
}
|
||||
|
||||
.icon-button i {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
/* Cookie Consent Buttons */
|
||||
.cookie-button {
|
||||
font-size: var(--font-size-sm);
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-weight: 500;
|
||||
transition: var(--transition-base);
|
||||
}
|
||||
|
||||
.cookie-button.accept {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cookie-button.accept:hover {
|
||||
background: var(--accent-blue);
|
||||
}
|
||||
|
||||
.cookie-button.reject {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.cookie-button.reject:hover {
|
||||
background: var(--card-bg);
|
||||
}
|
||||
|
||||
/* Footer Links */
|
||||
.footer-link {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border-radius: var(--border-radius-sm);
|
||||
transition: var(--transition-base);
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
background: var(--card-bg);
|
||||
}
|
||||
|
||||
/* Button Ripple Effect */
|
||||
.button::after,
|
||||
.cta-button::after,
|
||||
.submit-button::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.3s ease-out, height 0.3s ease-out;
|
||||
}
|
||||
|
||||
.button:active::after,
|
||||
.cta-button:active::after,
|
||||
.submit-button:active::after {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Focus States */
|
||||
.button:focus-visible,
|
||||
.cta-button:focus-visible,
|
||||
.submit-button:focus-visible,
|
||||
.icon-button:focus-visible {
|
||||
outline: 2px solid var(--accent-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.submit-button[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.submit-button[aria-busy="true"] .button-text {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.submit-button[aria-busy="true"] .loading-spinner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.cta-button {
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.cookie-button {
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
}
|
||||
}
|
||||
|
||||
/* High Contrast Mode Support */
|
||||
@media (forced-colors: active) {
|
||||
.button,
|
||||
.cta-button,
|
||||
.submit-button,
|
||||
.icon-button {
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
}
|
||||
@@ -1,398 +0,0 @@
|
||||
/* Contact Section */
|
||||
.contact {
|
||||
padding: var(--space-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Section Title */
|
||||
.contact .section-title {
|
||||
text-align: center;
|
||||
font-size: var(--font-size-3xl);
|
||||
margin-bottom: var(--space-2xl);
|
||||
color: var(--text-color);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.contact .section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--accent-color),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/* Contact Grid */
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-2xl);
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
/* Contact Form */
|
||||
.contact-form {
|
||||
background: var(--card-bg);
|
||||
padding: var(--space-xl);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-form:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: var(--space-lg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
margin-bottom: var(--space-xs);
|
||||
color: var(--text-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.required-field::after {
|
||||
content: '*';
|
||||
color: var(--error-red);
|
||||
margin-left: var(--space-xs);
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-muted);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-wrapper i {
|
||||
position: absolute;
|
||||
left: var(--space-md);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
transition: color var(--transition-base);
|
||||
}
|
||||
|
||||
.input-wrapper textarea + i {
|
||||
top: var(--space-md);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.input-wrapper input,
|
||||
.input-wrapper textarea {
|
||||
width: 100%;
|
||||
padding: var(--space-md);
|
||||
padding-left: calc(var(--space-md) * 2 + 16px);
|
||||
background: var(--bg-primary);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--border-radius-md);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-primary);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.input-wrapper textarea {
|
||||
min-height: 150px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.input-wrapper input:hover,
|
||||
.input-wrapper textarea:hover {
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.input-wrapper input:focus,
|
||||
.input-wrapper textarea:focus {
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 3px rgba(21, 52, 209, 0.1);
|
||||
}
|
||||
|
||||
.input-wrapper input:focus + i,
|
||||
.input-wrapper textarea:focus + i {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Character Counter */
|
||||
.char-counter {
|
||||
position: absolute;
|
||||
right: var(--space-sm);
|
||||
bottom: var(--space-xs);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Input States */
|
||||
.input-wrapper.valid input,
|
||||
.input-wrapper.valid textarea {
|
||||
border-color: var(--success-green);
|
||||
}
|
||||
|
||||
.input-wrapper.invalid input,
|
||||
.input-wrapper.invalid textarea {
|
||||
border-color: var(--error-red);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--error-red);
|
||||
font-size: var(--font-size-sm);
|
||||
margin-top: var(--space-xs);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Submit Button */
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--border-radius-md);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-sm);
|
||||
transition: all var(--transition-base);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
background: var(--accent-color-dark);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.submit-button:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/* Form Feedback */
|
||||
.form-feedback {
|
||||
margin-top: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--border-radius-md);
|
||||
font-weight: 500;
|
||||
display: none;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.form-feedback.success {
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
color: var(--success-green);
|
||||
border: 1px solid var(--success-green);
|
||||
}
|
||||
|
||||
.form-feedback.error {
|
||||
background: rgba(244, 67, 54, 0.1);
|
||||
color: var(--error-red);
|
||||
border: 1px solid var(--error-red);
|
||||
}
|
||||
|
||||
/* Contact Info */
|
||||
.contact-info {
|
||||
padding: var(--space-xl);
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-info:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.contact-info h3 {
|
||||
font-size: var(--font-size-xl);
|
||||
margin-bottom: var(--space-xl);
|
||||
color: var(--text-color);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.contact-info h3::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--accent-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-md);
|
||||
transition: transform var(--transition-base);
|
||||
padding: var(--space-sm);
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
.info-item:hover {
|
||||
transform: translateX(var(--space-xs));
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.info-item i {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
min-width: 40px;
|
||||
background: var(--accent-color);
|
||||
border-radius: var(--border-radius-full);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
.info-item:hover i {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-content p {
|
||||
color: var(--text-color);
|
||||
margin-bottom: var(--space-xs);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.info-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-subtitle {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.info-item a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-base);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-item a:hover {
|
||||
color: var(--accent-color-dark);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.submit-button .loading-spinner {
|
||||
display: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: white;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 968px) {
|
||||
.contact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contact {
|
||||
padding: var(--space-xl) 0;
|
||||
}
|
||||
|
||||
.contact .section-title {
|
||||
font-size: var(--font-size-2xl);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.contact-form,
|
||||
.contact-info {
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* High Contrast Mode */
|
||||
@media (forced-colors: active) {
|
||||
.contact-form,
|
||||
.contact-info {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
|
||||
.info-item i {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.input-wrapper input,
|
||||
.input-wrapper textarea,
|
||||
.contact-form,
|
||||
.contact-info,
|
||||
.info-item,
|
||||
.info-item i {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -1,180 +0,0 @@
|
||||
/* Footer */
|
||||
footer {
|
||||
background: var(--bg-primary);
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: var(--space-xl) 0;
|
||||
margin-top: var(--space-2xl);
|
||||
}
|
||||
|
||||
/* Footer Content */
|
||||
.footer-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
/* Footer Left */
|
||||
.footer-left {
|
||||
color: var(--text-color);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Footer Right */
|
||||
.footer-right {
|
||||
display: flex;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
/* Footer Links */
|
||||
.footer-link {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border-radius: var(--border-radius-sm);
|
||||
transition: all var(--transition-base);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: var(--space-sm);
|
||||
right: var(--space-sm);
|
||||
height: 2px;
|
||||
background: var(--accent-color);
|
||||
transform: scaleX(0);
|
||||
transform-origin: center;
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.footer-link:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
/* Social Links */
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
.social-link {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--border-radius-full);
|
||||
background: var(--card-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Back to Top Button */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: var(--space-lg);
|
||||
right: var(--space-lg);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--border-radius-full);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(10px);
|
||||
transition: all var(--transition-base);
|
||||
z-index: var(--z-sticky);
|
||||
}
|
||||
|
||||
.back-to-top.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
background: var(--accent-blue);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
bottom: var(--space-md);
|
||||
right: var(--space-md);
|
||||
}
|
||||
}
|
||||
|
||||
/* High Contrast Mode */
|
||||
@media (forced-colors: active) {
|
||||
footer {
|
||||
border-top: 1px solid CanvasText;
|
||||
}
|
||||
|
||||
.footer-link::after {
|
||||
background: CanvasText;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.footer-link,
|
||||
.social-link,
|
||||
.back-to-top {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.footer-link:hover::after {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.social-link:hover,
|
||||
.back-to-top:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark Theme Specific */
|
||||
.dark-theme footer {
|
||||
background: var(--dark-main);
|
||||
}
|
||||
|
||||
/* Light Theme Specific */
|
||||
.light-theme footer {
|
||||
background: var(--light-main);
|
||||
}
|
||||
@@ -1,165 +0,0 @@
|
||||
/* Header */
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: var(--z-sticky);
|
||||
background: rgba(var(--bg-primary), 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
/* Main Navigation */
|
||||
.main-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 70px;
|
||||
padding: 0 var(--space-xl);
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
.logo {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
text-decoration: none;
|
||||
font-size: 0; /* Remove space between inline elements */
|
||||
}
|
||||
|
||||
.logo-text, .logo-sys {
|
||||
font-size: var(--font-size-2xl); /* Restore font size */
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.logo-sys {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--accent-color) 0%,
|
||||
var(--accent-purple) 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* Navigation Controls */
|
||||
.nav-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
/* Theme Toggle */
|
||||
#theme-toggle {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--border-radius-full);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
#theme-toggle:hover {
|
||||
background: var(--card-bg);
|
||||
}
|
||||
|
||||
#theme-toggle i {
|
||||
font-size: var(--font-size-lg);
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
#theme-toggle:hover i {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
/* Header Scroll State */
|
||||
header.scrolled {
|
||||
box-shadow: var(--shadow-md);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Skip Link */
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
top: -100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
|
||||
text-decoration: none;
|
||||
z-index: var(--z-maximum);
|
||||
transition: top var(--transition-base);
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.main-nav {
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* High Contrast Mode */
|
||||
@media (forced-colors: active) {
|
||||
header {
|
||||
border-bottom: 1px solid CanvasText;
|
||||
}
|
||||
|
||||
.logo-text,
|
||||
.logo-sys {
|
||||
background: none;
|
||||
color: CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
header,
|
||||
.scroll-progress,
|
||||
#theme-toggle,
|
||||
.skip-link {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#theme-toggle:hover i {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark Theme Specific */
|
||||
.dark-theme header {
|
||||
background: rgba(10, 10, 10, 0.8);
|
||||
}
|
||||
|
||||
/* Light Theme Specific */
|
||||
.light-theme header {
|
||||
background: rgba(242, 242, 242, 0.8);
|
||||
}
|
||||
@@ -1,175 +0,0 @@
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 80vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: var(--space-2xl) 0;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--bg-primary) 0%,
|
||||
rgba(21, 52, 209, 0.1) 100%
|
||||
);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Stars Background */
|
||||
.stars {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: var(--z-negative);
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.shooting-star {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: -100px;
|
||||
width: 100px;
|
||||
height: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0.8),
|
||||
transparent
|
||||
);
|
||||
transform: rotate(-45deg);
|
||||
z-index: var(--z-negative);
|
||||
}
|
||||
|
||||
/* Hero Content */
|
||||
.hero .container {
|
||||
position: relative;
|
||||
z-index: var(--z-elevate);
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2rem, 5vw, var(--font-size-4xl));
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--space-lg);
|
||||
line-height: 1.2;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--text-color) 0%,
|
||||
var(--accent-color) 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: clamp(1.125rem, 2.5vw, var(--font-size-xl));
|
||||
color: var(--text-color);
|
||||
opacity: 0.9;
|
||||
margin-bottom: var(--space-xl);
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* CTA Container */
|
||||
.cta-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
/* Animated Elements */
|
||||
.hero .animate-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.hero .animate-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Gradient Overlay */
|
||||
.hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
var(--bg-primary)
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
min-height: 70vh;
|
||||
padding: var(--space-xl) 0;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: var(--font-size-lg);
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
.cta-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark Theme Specific */
|
||||
.dark-theme .hero {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--dark-main) 0%,
|
||||
rgba(21, 52, 209, 0.15) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Light Theme Specific */
|
||||
.light-theme .hero {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--light-main) 0%,
|
||||
rgba(21, 52, 209, 0.1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* High Contrast Mode */
|
||||
@media (forced-colors: active) {
|
||||
.hero h1 {
|
||||
background: none;
|
||||
color: CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero .animate-in {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.shooting-star {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-color);
|
||||
line-height: 1.6;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
@@ -1,244 +0,0 @@
|
||||
/* Base Responsive Design */
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
/* Service Grid */
|
||||
.service-grid {
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1 {
|
||||
font-size: var(--font-size-3xl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
min-height: 70vh;
|
||||
}
|
||||
|
||||
/* Contact Grid */
|
||||
.contact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
html {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 540px;
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.main-nav {
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
min-height: 60vh;
|
||||
padding: var(--space-2xl) var(--space-md);
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
/* Service Grid */
|
||||
.service-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
/* Vision Grid */
|
||||
.vision-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
/* Contact Form */
|
||||
.contact-form,
|
||||
.contact-info {
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.logo {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding: var(--space-xl) var(--space-md);
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Service Cards */
|
||||
.service-card {
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
|
||||
/* Contact Section */
|
||||
.contact-form {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.input-wrapper input,
|
||||
.input-wrapper textarea {
|
||||
padding: var(--space-sm);
|
||||
padding-left: calc(var(--space-sm) * 2 + 16px);
|
||||
}
|
||||
|
||||
/* Cookie Consent */
|
||||
.cookie-consent {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.cookie-buttons {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.cookie-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Height-based Media Queries */
|
||||
@media (max-height: 700px) {
|
||||
.hero {
|
||||
min-height: auto;
|
||||
padding: var(--space-2xl) 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.hero,
|
||||
.contact-form,
|
||||
.cookie-consent,
|
||||
#theme-toggle,
|
||||
.back-to-top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
color: black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.service-card,
|
||||
.vision-item,
|
||||
.contact-info {
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
/* High Contrast Support */
|
||||
@media (forced-colors: active) {
|
||||
.service-card,
|
||||
.vision-item,
|
||||
.contact-form,
|
||||
.contact-info {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
@@ -1,213 +0,0 @@
|
||||
/* Services Section */
|
||||
.services {
|
||||
padding: var(--space-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Section Title */
|
||||
.services .section-title {
|
||||
text-align: center;
|
||||
font-size: var(--font-size-3xl);
|
||||
margin-bottom: var(--space-2xl);
|
||||
color: var(--text-color);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.services .section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--accent-color),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/* Service Grid */
|
||||
.service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
/* Service Card */
|
||||
.service-card {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--space-xl);
|
||||
transition: all var(--transition-base);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.service-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
transparent 0%,
|
||||
rgba(21, 52, 209, 0.05) 100%
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-base);
|
||||
}
|
||||
|
||||
.service-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Service Icon */
|
||||
.service-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: var(--accent-color);
|
||||
border-radius: var(--border-radius-full);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--space-lg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-icon i {
|
||||
font-size: var(--font-size-2xl);
|
||||
color: white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.service-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2)
|
||||
);
|
||||
}
|
||||
|
||||
/* Service Title */
|
||||
.service-card h3 {
|
||||
font-size: var(--font-size-xl);
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--text-color);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Service List */
|
||||
.service-card ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.service-card li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-sm);
|
||||
color: var(--text-color);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.service-card li i {
|
||||
color: var(--accent-color);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
/* Hover Effects */
|
||||
.service-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.service-card:hover .service-icon {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(21, 52, 209, 0.4);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(21, 52, 209, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(21, 52, 209, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation on Scroll */
|
||||
.service-card {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.service-card.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.service-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.services {
|
||||
padding: var(--space-xl) 0;
|
||||
}
|
||||
|
||||
.services .section-title {
|
||||
font-size: var(--font-size-2xl);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* High Contrast Mode */
|
||||
@media (forced-colors: active) {
|
||||
.service-card {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.service-card {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.service-card:hover .service-icon {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
:root {
|
||||
/* Color Palette */
|
||||
--primary-blue: #1534D1;
|
||||
--primary-dark: #0A0A0A;
|
||||
--primary-light: #F2F2F2;
|
||||
--accent-blue: #2196F3;
|
||||
--accent-purple: #7C4DFF;
|
||||
--success-green: #4CAF50;
|
||||
--warning-yellow: #FFC107;
|
||||
--error-red: #F44336;
|
||||
|
||||
/* Dark Theme Variables */
|
||||
--dark-main: var(--primary-dark);
|
||||
--dark-accent: var(--primary-blue);
|
||||
--dark-text: var(--primary-light);
|
||||
--dark-card: rgba(255, 255, 255, 0.05);
|
||||
--dark-card-hover: rgba(255, 255, 255, 0.08);
|
||||
--dark-border: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* Light Theme Variables */
|
||||
--light-main: #FFFFFF;
|
||||
--light-accent: #0D47A1;
|
||||
--light-text: #1A1A1A;
|
||||
--light-card: rgba(0, 0, 0, 0.03);
|
||||
--light-card-hover: rgba(0, 0, 0, 0.06);
|
||||
--light-border: rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Current Theme Variables */
|
||||
--bg-primary: var(--dark-main);
|
||||
--accent-color: var(--dark-accent);
|
||||
--text-color: var(--dark-text);
|
||||
--card-bg: var(--dark-card);
|
||||
--card-hover: var(--dark-card-hover);
|
||||
--border-color: var(--dark-border);
|
||||
|
||||
/* Typography */
|
||||
--font-primary: 'Inter', system-ui, sans-serif;
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.5rem;
|
||||
--font-size-3xl: 1.875rem;
|
||||
--font-size-4xl: 2.25rem;
|
||||
|
||||
/* Spacing */
|
||||
--space-xs: 0.25rem;
|
||||
--space-sm: 0.5rem;
|
||||
--space-md: 1rem;
|
||||
--space-lg: 1.5rem;
|
||||
--space-xl: 2rem;
|
||||
--space-2xl: 3rem;
|
||||
|
||||
/* Borders */
|
||||
--border-radius-sm: 4px;
|
||||
--border-radius-md: 8px;
|
||||
--border-radius-lg: 12px;
|
||||
--border-radius-full: 9999px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-base: 300ms ease;
|
||||
--transition-slow: 500ms ease;
|
||||
|
||||
/* Z-index */
|
||||
--z-negative: -1;
|
||||
--z-elevate: 1;
|
||||
--z-sticky: 100;
|
||||
--z-drawer: 200;
|
||||
--z-modal: 300;
|
||||
--z-popover: 400;
|
||||
--z-maximum: 999;
|
||||
}
|
||||
|
||||
/* Theme Classes */
|
||||
.light-theme {
|
||||
--bg-primary: var(--light-main);
|
||||
--accent-color: var(--light-accent);
|
||||
--text-color: var(--light-text);
|
||||
--card-bg: var(--light-card);
|
||||
--card-hover: var(--light-card-hover);
|
||||
--border-color: var(--light-border);
|
||||
}
|
||||
@@ -1,241 +0,0 @@
|
||||
/* Vision Section */
|
||||
.vision {
|
||||
padding: var(--space-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Section Title */
|
||||
.vision .section-title {
|
||||
text-align: center;
|
||||
font-size: var(--font-size-3xl);
|
||||
margin-bottom: var(--space-2xl);
|
||||
color: var(--text-color);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.vision .section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--accent-color),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/* Vision Grid */
|
||||
.vision-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
/* Vision Item */
|
||||
.vision-item {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--space-xl);
|
||||
transition: all var(--transition-base);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vision-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
transparent 0%,
|
||||
rgba(21, 52, 209, 0.05) 100%
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-base);
|
||||
}
|
||||
|
||||
.vision-item:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Vision Icon */
|
||||
.vision-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--accent-color);
|
||||
border-radius: var(--border-radius-full);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--space-lg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vision-icon i {
|
||||
font-size: var(--font-size-3xl);
|
||||
color: white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.vision-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2)
|
||||
);
|
||||
}
|
||||
|
||||
/* Vision Content */
|
||||
.vision-item h3 {
|
||||
font-size: var(--font-size-xl);
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--text-color);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vision-item p {
|
||||
color: var(--text-color);
|
||||
opacity: 0.9;
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
/* Vision Details */
|
||||
.vision-details {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vision-details ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.vision-details li {
|
||||
color: var(--text-color);
|
||||
opacity: 0.9;
|
||||
padding: var(--space-xs) 0;
|
||||
position: relative;
|
||||
padding-left: var(--space-lg);
|
||||
}
|
||||
|
||||
.vision-details li::before {
|
||||
content: '→';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Hover Effects */
|
||||
.vision-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.vision-item:hover .vision-icon {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(21, 52, 209, 0.4);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(21, 52, 209, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(21, 52, 209, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation on Scroll */
|
||||
.vision-item {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.vision-item.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.vision-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.vision {
|
||||
padding: var(--space-xl) 0;
|
||||
}
|
||||
|
||||
.vision .section-title {
|
||||
font-size: var(--font-size-2xl);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.vision-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.vision-icon i {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* High Contrast Mode */
|
||||
@media (forced-colors: active) {
|
||||
.vision-item {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
|
||||
.vision-icon {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.vision-item {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.vision-item:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.vision-item:hover .vision-icon {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -1,171 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="7SYS - Datenschutzerklärung und Informationen zum Umgang mit Ihren Daten">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔒</text></svg>">
|
||||
|
||||
<!-- Preload Critical Assets -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<title>Datenschutzerklärung - 7SYS</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link rel="stylesheet" href="css/variables.css">
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/accessibility.css">
|
||||
<link rel="stylesheet" href="css/animations.css">
|
||||
<link rel="stylesheet" href="css/header.css">
|
||||
<link rel="stylesheet" href="css/buttons.css">
|
||||
<link rel="stylesheet" href="css/footer.css">
|
||||
<link rel="stylesheet" href="css/responsive.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<style>
|
||||
.datenschutz-section {
|
||||
padding: 80px 0;
|
||||
min-height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
.datenschutz-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.datenschutz-section h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.datenschutz-section h2 {
|
||||
font-size: 1.5rem;
|
||||
margin: 2rem 0 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.datenschutz-section p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.privacy-section {
|
||||
background: var(--bg-secondary);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.privacy-section ul {
|
||||
list-style-type: disc;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.privacy-section li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="dark-theme">
|
||||
<!-- Skip to main content -->
|
||||
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div class="scroll-progress" aria-hidden="true"></div>
|
||||
|
||||
<header>
|
||||
<nav class="main-nav">
|
||||
<div class="logo" role="banner">
|
||||
<a href="index.html">
|
||||
<span class="logo-text">7</span>
|
||||
<span class="logo-sys">SYS</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav-controls">
|
||||
<button id="theme-toggle" class="icon-button" aria-label="Theme wechseln" title="Zwischen Hell- und Dunkel-Modus wechseln">
|
||||
<i class="fas fa-moon"></i>
|
||||
<span class="sr-only">Theme wechseln</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<section class="datenschutz-section">
|
||||
<div class="datenschutz-content">
|
||||
<h1>Datenschutzerklärung</h1>
|
||||
|
||||
<div class="privacy-section">
|
||||
<h2>1. Datenschutz auf einen Blick</h2>
|
||||
<p>Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.</p>
|
||||
</div>
|
||||
|
||||
<div class="privacy-section">
|
||||
<h2>2. Allgemeine Hinweise</h2>
|
||||
<p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.</p>
|
||||
</div>
|
||||
|
||||
<div class="privacy-section">
|
||||
<h2>3. Datenerfassung auf unserer Website</h2>
|
||||
<h3>Cookies</h3>
|
||||
<p>Unsere Website verwendet Cookies. Das sind kleine Textdateien, die Ihr Webbrowser auf Ihrem Endgerät speichert. Cookies helfen uns dabei, unser Angebot nutzerfreundlicher, effektiver und sicherer zu machen.</p>
|
||||
<p>Einige Cookies sind "Session-Cookies." Solche Cookies werden nach Ende Ihrer Browser-Sitzung von selbst gelöscht. Hingegen bleiben andere Cookies auf Ihrem Endgerät bestehen, bis Sie diese selbst löschen.</p>
|
||||
</div>
|
||||
|
||||
<div class="privacy-section">
|
||||
<h2>4. Ihre Rechte</h2>
|
||||
<p>Sie haben folgende Rechte:</p>
|
||||
<ul>
|
||||
<li>Recht auf Auskunft</li>
|
||||
<li>Recht auf Berichtigung oder Löschung</li>
|
||||
<li>Recht auf Einschränkung der Verarbeitung</li>
|
||||
<li>Recht auf Widerspruch gegen die Verarbeitung</li>
|
||||
<li>Recht auf Datenübertragbarkeit</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="privacy-section">
|
||||
<h2>5. Kontakt</h2>
|
||||
<p>Bei Fragen zur Erhebung, Verarbeitung oder Nutzung Ihrer personenbezogenen Daten, bei Auskünften, Berichtigung, Sperrung oder Löschung von Daten wenden Sie sich bitte an:</p>
|
||||
<p>7SYS GmbH<br>
|
||||
Musterstraße 123<br>
|
||||
12345 Stadt<br>
|
||||
Deutschland</p>
|
||||
<p>E-Mail: datenschutz@7sys.de<br>
|
||||
Telefon: +49 123 456789</p>
|
||||
</div>
|
||||
|
||||
<div class="privacy-section">
|
||||
<h2>6. Aktualität und Änderung dieser Datenschutzerklärung</h2>
|
||||
<p>Diese Datenschutzerklärung ist aktuell gültig und hat den Stand Januar 2024. Durch die Weiterentwicklung unserer Website und Angebote oder aufgrund geänderter gesetzlicher beziehungsweise behördlicher Vorgaben kann es notwendig werden, diese Datenschutzerklärung zu ändern.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-left">
|
||||
<p>© 2024 7SYS GmbH. Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,171 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="7SYS - Impressum und rechtliche Informationen">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔒</text></svg>">
|
||||
|
||||
<!-- Preload Critical Assets -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<title>Impressum - 7SYS</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link rel="stylesheet" href="css/variables.css">
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/accessibility.css">
|
||||
<link rel="stylesheet" href="css/animations.css">
|
||||
<link rel="stylesheet" href="css/header.css">
|
||||
<link rel="stylesheet" href="css/buttons.css">
|
||||
<link rel="stylesheet" href="css/footer.css">
|
||||
<link rel="stylesheet" href="css/responsive.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<style>
|
||||
.impressum-section {
|
||||
padding: 80px 0;
|
||||
min-height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
.impressum-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.impressum-section h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.impressum-section h2 {
|
||||
font-size: 1.5rem;
|
||||
margin: 2rem 0 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.impressum-section p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
background: var(--bg-secondary);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.contact-details p {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
font-size: 0.9rem;
|
||||
padding: 20px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="dark-theme">
|
||||
<!-- Skip to main content -->
|
||||
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div class="scroll-progress" aria-hidden="true"></div>
|
||||
|
||||
<header>
|
||||
<nav class="main-nav">
|
||||
<div class="logo" role="banner">
|
||||
<a href="index.html">
|
||||
<span class="logo-text">7</span>
|
||||
<span class="logo-sys">SYS</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav-controls">
|
||||
<button id="theme-toggle" class="icon-button" aria-label="Theme wechseln" title="Zwischen Hell- und Dunkel-Modus wechseln">
|
||||
<i class="fas fa-moon"></i>
|
||||
<span class="sr-only">Theme wechseln</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<section class="impressum-section">
|
||||
<div class="impressum-content">
|
||||
<h1>Impressum</h1>
|
||||
|
||||
<h2>Angaben gemäß § 5 TMG</h2>
|
||||
<div class="contact-details">
|
||||
<p>7SYS GmbH</p>
|
||||
<p>Musterstraße 123</p>
|
||||
<p>12345 Stadt</p>
|
||||
<p>Deutschland</p>
|
||||
</div>
|
||||
|
||||
<h2>Kontakt</h2>
|
||||
<div class="contact-details">
|
||||
<p>Telefon: +49 123 456789</p>
|
||||
<p>Fax: +49 123 456788</p>
|
||||
<p>E-Mail: info@7sys.de</p>
|
||||
</div>
|
||||
|
||||
<h2>Vertreten durch</h2>
|
||||
<div class="contact-details">
|
||||
<p>Geschäftsführer: Max Mustermann</p>
|
||||
</div>
|
||||
|
||||
<h2>Registereintrag</h2>
|
||||
<div class="contact-details">
|
||||
<p>Handelsregister: HRB 12345</p>
|
||||
<p>Registergericht: Amtsgericht Stadt</p>
|
||||
</div>
|
||||
|
||||
<h2>Umsatzsteuer-ID</h2>
|
||||
<div class="contact-details">
|
||||
<p>Umsatzsteuer-Identifikationsnummer gemäß §27 a Umsatzsteuergesetz:</p>
|
||||
<p>DE123456789</p>
|
||||
</div>
|
||||
|
||||
<div class="disclaimer">
|
||||
<h2>Haftungsausschluss</h2>
|
||||
<p><strong>Haftung für Inhalte</strong></p>
|
||||
<p>Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen.</p>
|
||||
|
||||
<p><strong>Haftung für Links</strong></p>
|
||||
<p>Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.</p>
|
||||
|
||||
<p><strong>Urheberrecht</strong></p>
|
||||
<p>Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-left">
|
||||
<p>© 2024 7SYS GmbH. Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="#" class="footer-link">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,315 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="7SYS - Professionelle IT-Beratung und Sicherheitslösungen für kleine Unternehmen">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔒</text></svg>">
|
||||
|
||||
<!-- Preload Critical Assets -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Social Media Meta Tags -->
|
||||
<meta property="og:title" content="7SYS - IT-Beratung & Sicherheitslösungen">
|
||||
<meta property="og:description" content="Zukunftssichere IT-Lösungen für Ihr Unternehmen">
|
||||
<meta property="og:image" content="https://7sys.de/images/og-image.jpg">
|
||||
<meta property="og:url" content="https://7sys.de">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
|
||||
<title>7SYS - IT-Beratung & Sicherheitslösungen</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link rel="stylesheet" href="css/variables.css">
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/accessibility.css">
|
||||
<link rel="stylesheet" href="css/animations.css">
|
||||
<link rel="stylesheet" href="css/header.css">
|
||||
<link rel="stylesheet" href="css/hero.css">
|
||||
<link rel="stylesheet" href="css/buttons.css">
|
||||
<link rel="stylesheet" href="css/services.css">
|
||||
<link rel="stylesheet" href="css/vision.css">
|
||||
<link rel="stylesheet" href="css/contact.css">
|
||||
<link rel="stylesheet" href="css/footer.css">
|
||||
<link rel="stylesheet" href="css/responsive.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body class="dark-theme">
|
||||
<!-- Skip to main content -->
|
||||
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div class="scroll-progress" aria-hidden="true"></div>
|
||||
|
||||
<header>
|
||||
<nav class="main-nav">
|
||||
<div class="logo" role="banner">
|
||||
<a href="index.html">
|
||||
<span class="logo-text">7</span>
|
||||
<span class="logo-sys">SYS</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav-controls">
|
||||
<button id="theme-toggle" class="icon-button" aria-label="Theme wechseln" title="Zwischen Hell- und Dunkel-Modus wechseln">
|
||||
<i class="fas fa-moon"></i>
|
||||
<span class="sr-only">Theme wechseln</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<section class="hero" role="banner">
|
||||
<div class="stars"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="container">
|
||||
<h1 class="animate-in">IT-Beratung und Sicherheitslösungen</h1>
|
||||
<p class="animate-in delay-1">Zukunftssichere IT-Lösungen für Ihr Unternehmen</p>
|
||||
<div class="cta-container animate-in delay-2">
|
||||
<a href="#contact" class="cta-button" role="button">
|
||||
<span>Kontakt aufnehmen</span>
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="services" class="services" role="region" aria-labelledby="services-title">
|
||||
<div class="container">
|
||||
<h2 id="services-title" class="section-title">Unsere Dienstleistungen</h2>
|
||||
|
||||
<div class="service-grid">
|
||||
<article class="service-card" role="article">
|
||||
<div class="service-icon">
|
||||
<i class="fas fa-laptop-code" aria-hidden="true"></i>
|
||||
</div>
|
||||
<h3>IT-Beratung und Sicherheitslösungen</h3>
|
||||
<ul>
|
||||
<li><i class="fas fa-check"></i> Fokus auf kleine Unternehmen</li>
|
||||
<li><i class="fas fa-check"></i> IT-Infrastruktur Beratung</li>
|
||||
<li><i class="fas fa-check"></i> Hardware-Empfehlungen</li>
|
||||
<li><i class="fas fa-check"></i> Netzwerkoptimierung</li>
|
||||
<li><i class="fas fa-check"></i> Firewall-Management</li>
|
||||
<li><i class="fas fa-check"></i> Datenschutz und Zertifizierung</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="service-card" role="article">
|
||||
<div class="service-icon">
|
||||
<i class="fas fa-shield-alt" aria-hidden="true"></i>
|
||||
</div>
|
||||
<h3>Netzwerk- und Datensicherheit</h3>
|
||||
<ul>
|
||||
<li><i class="fas fa-check"></i> Sichere Netzwerkkonfiguration</li>
|
||||
<li><i class="fas fa-check"></i> VPN-Einrichtung</li>
|
||||
<li><i class="fas fa-check"></i> Zugriffskontrolle</li>
|
||||
<li><i class="fas fa-check"></i> Firewall-Management</li>
|
||||
<li><i class="fas fa-check"></i> NIS-2-Regelung Implementation</li>
|
||||
<li><i class="fas fa-check"></i> Bedrohungsschutz</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="service-card" role="article">
|
||||
<div class="service-icon">
|
||||
<i class="fas fa-chart-line" aria-hidden="true"></i>
|
||||
</div>
|
||||
<h3>Proaktives Monitoring</h3>
|
||||
<ul>
|
||||
<li><i class="fas fa-check"></i> System-Überwachung</li>
|
||||
<li><i class="fas fa-check"></i> Automatisierte Backups</li>
|
||||
<li><i class="fas fa-check"></i> Systemupdates</li>
|
||||
<li><i class="fas fa-check"></i> Frühwarnsystem</li>
|
||||
<li><i class="fas fa-check"></i> Ausfallsicherheit</li>
|
||||
<li><i class="fas fa-check"></i> Verfügbarkeitsoptimierung</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="vision" class="vision" role="region" aria-labelledby="vision-title">
|
||||
<div class="container">
|
||||
<h2 id="vision-title" class="section-title">Unsere Zukunftsvision</h2>
|
||||
<div class="vision-grid">
|
||||
<div class="vision-item">
|
||||
<div class="vision-icon">
|
||||
<i class="fas fa-server" aria-hidden="true"></i>
|
||||
</div>
|
||||
<h3>Desaster Recovery Rechenzentrum</h3>
|
||||
<p>Maximale Ausfallsicherheit für Ihre geschäftskritischen Systeme</p>
|
||||
<div class="vision-details">
|
||||
<ul>
|
||||
<li>24/7 Verfügbarkeit</li>
|
||||
<li>Redundante Systeme</li>
|
||||
<li>Automatische Failover</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vision-item">
|
||||
<div class="vision-icon">
|
||||
<i class="fas fa-leaf" aria-hidden="true"></i>
|
||||
</div>
|
||||
<h3>Sustainable & Renewable IT-Infrastructure</h3>
|
||||
<p>Nachhaltige IT-Lösungen für eine grünere Zukunft</p>
|
||||
<div class="vision-details">
|
||||
<ul>
|
||||
<li>Energieeffiziente Hardware</li>
|
||||
<li>CO2-neutrale Rechenzentren</li>
|
||||
<li>Nachhaltige Beschaffung</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact" role="region" aria-labelledby="contact-title">
|
||||
<div class="container">
|
||||
<h2 id="contact-title" class="section-title">Kontakt</h2>
|
||||
<div class="contact-grid">
|
||||
<form class="contact-form" role="form" aria-label="Kontaktformular">
|
||||
<p class="field-hint">* Pflichtfelder</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name" class="required-field">Name</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" id="name" name="name" required
|
||||
aria-required="true" minlength="2"
|
||||
pattern="[A-Za-zÄäÖöÜüß\s]+"
|
||||
title="Bitte geben Sie Ihren Namen ein (nur Buchstaben und Leerzeichen)"
|
||||
placeholder="Max Mustermann">
|
||||
<i class="fas fa-user" aria-hidden="true"></i>
|
||||
</div>
|
||||
<p class="field-hint">Mindestens 2 Zeichen, nur Buchstaben erlaubt</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email" class="required-field">E-Mail</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="email" id="email" name="email" required
|
||||
aria-required="true"
|
||||
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
|
||||
title="Bitte geben Sie eine gültige E-Mail-Adresse ein"
|
||||
placeholder="ihre.email@beispiel.de">
|
||||
<i class="fas fa-envelope" aria-hidden="true"></i>
|
||||
</div>
|
||||
<p class="field-hint">Beispiel: name@domain.de</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="phone">Telefon (optional)</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="tel" id="phone" name="phone"
|
||||
pattern="[0-9\s\-\+]+"
|
||||
title="Bitte geben Sie eine gültige Telefonnummer ein"
|
||||
placeholder="+49 123 45678900">
|
||||
<i class="fas fa-phone" aria-hidden="true"></i>
|
||||
</div>
|
||||
<p class="field-hint">Format: +49 123 45678900</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message" class="required-field">Nachricht</label>
|
||||
<div class="input-wrapper">
|
||||
<textarea id="message" name="message" required
|
||||
aria-required="true" minlength="10"
|
||||
maxlength="1000"
|
||||
placeholder="Ihre Nachricht an uns..."
|
||||
title="Bitte geben Sie Ihre Nachricht ein (mindestens 10 Zeichen)"></textarea>
|
||||
<i class="fas fa-comment" aria-hidden="true"></i>
|
||||
</div>
|
||||
<span class="char-counter" aria-live="polite">0 / 1000</span>
|
||||
<p class="field-hint">Mindestens 10 Zeichen, maximal 1000 Zeichen</p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-button">
|
||||
<span class="button-text">Nachricht senden</span>
|
||||
<span class="loading-spinner" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="form-feedback" role="alert" aria-live="polite"></div>
|
||||
</form>
|
||||
|
||||
<div class="contact-info">
|
||||
<h3>Geschäftsdaten</h3>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<i class="fas fa-building" aria-hidden="true"></i>
|
||||
<div class="info-content">
|
||||
<p>7SYS GmbH</p>
|
||||
<p class="info-subtitle">IT-Sicherheit & Beratung</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="fas fa-map-marker-alt" aria-hidden="true"></i>
|
||||
<div class="info-content">
|
||||
<p>Musterstraße 123</p>
|
||||
<p>12345 Stadt</p>
|
||||
<p>Deutschland</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="fas fa-clock" aria-hidden="true"></i>
|
||||
<div class="info-content">
|
||||
<p>Geschäftszeiten:</p>
|
||||
<p>Mo-Fr: 09:00 - 17:00 Uhr</p>
|
||||
<p>24/7 Support für Bestandskunden</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="fas fa-phone" aria-hidden="true"></i>
|
||||
<div class="info-content">
|
||||
<p>Tel: <a href="tel:+49123456789">+49 123 456789</a></p>
|
||||
<p>Fax: +49 123 456788</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="fas fa-envelope" aria-hidden="true"></i>
|
||||
<div class="info-content">
|
||||
<p>E-Mail: <a href="mailto:info@7sys.de">info@7sys.de</a></p>
|
||||
<p>Support: <a href="mailto:support@7sys.de">support@7sys.de</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
||||
<div class="info-content">
|
||||
<p>Handelsregister: HRB 12345</p>
|
||||
<p>USt-IdNr: DE123456789</p>
|
||||
<p>Geschäftsführer: Max Mustermann</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-left">
|
||||
<p>© 2024 7SYS GmbH. Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Cookie Consent -->
|
||||
<div id="cookie-consent" class="cookie-consent" role="alert" aria-live="polite">
|
||||
<p>Wir verwenden Cookies, um Ihre Erfahrung zu verbessern.</p>
|
||||
<div class="cookie-buttons">
|
||||
<button id="accept-cookies" class="cookie-button accept">Akzeptieren</button>
|
||||
<button id="reject-cookies" class="cookie-button reject">Ablehnen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,328 +0,0 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initThemeToggle();
|
||||
initSmoothScroll();
|
||||
initFormValidation();
|
||||
initAnimations();
|
||||
initScrollProgress();
|
||||
initStarryBackground();
|
||||
initCookieConsent();
|
||||
});
|
||||
|
||||
function initThemeToggle() {
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const body = document.body;
|
||||
const icon = themeToggle.querySelector('i');
|
||||
|
||||
// Check for saved theme preference
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme) {
|
||||
body.className = savedTheme;
|
||||
updateIcon(savedTheme === 'light-theme');
|
||||
}
|
||||
|
||||
// Theme toggle functionality
|
||||
themeToggle.addEventListener('click', () => {
|
||||
const isLight = body.classList.toggle('light-theme');
|
||||
localStorage.setItem('theme', isLight ? 'light-theme' : 'dark-theme');
|
||||
updateIcon(isLight);
|
||||
});
|
||||
|
||||
function updateIcon(isLight) {
|
||||
icon.className = isLight ? 'fas fa-moon' : 'fas fa-sun';
|
||||
icon.style.animation = 'iconBounce 0.5s ease';
|
||||
setTimeout(() => icon.style.animation = '', 500);
|
||||
}
|
||||
}
|
||||
|
||||
function initScrollProgress() {
|
||||
const progressBar = document.querySelector('.scroll-progress');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
||||
const scrolled = (winScroll / height) * 100;
|
||||
progressBar.style.transform = `scaleX(${scrolled / 100})`;
|
||||
});
|
||||
}
|
||||
|
||||
function initStarryBackground() {
|
||||
const starsContainer = document.querySelector('.stars');
|
||||
const numStars = 50;
|
||||
|
||||
// Create stars
|
||||
for (let i = 0; i < numStars; i++) {
|
||||
const star = document.createElement('div');
|
||||
star.className = 'star';
|
||||
star.style.width = Math.random() * 3 + 'px';
|
||||
star.style.height = star.style.width;
|
||||
star.style.left = Math.random() * 100 + '%';
|
||||
star.style.top = Math.random() * 100 + '%';
|
||||
star.style.animationDelay = Math.random() * 2 + 's';
|
||||
starsContainer.appendChild(star);
|
||||
}
|
||||
}
|
||||
|
||||
function initSmoothScroll() {
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
const headerOffset = 60;
|
||||
const elementPosition = target.getBoundingClientRect().top;
|
||||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||||
|
||||
window.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initFormValidation() {
|
||||
const form = document.querySelector('.contact-form');
|
||||
if (!form) return;
|
||||
|
||||
const inputs = {
|
||||
name: form.querySelector('#name'),
|
||||
email: form.querySelector('#email'),
|
||||
phone: form.querySelector('#phone'),
|
||||
message: form.querySelector('#message')
|
||||
};
|
||||
const submitButton = form.querySelector('.submit-button');
|
||||
const buttonText = submitButton.querySelector('.button-text');
|
||||
const loadingSpinner = submitButton.querySelector('.loading-spinner');
|
||||
const feedbackDiv = form.querySelector('.form-feedback');
|
||||
const messageCounter = form.querySelector('.char-counter');
|
||||
|
||||
// Initialize character counter
|
||||
if (inputs.message && messageCounter) {
|
||||
const maxLength = inputs.message.getAttribute('maxlength');
|
||||
updateCharCounter(inputs.message.value.length, maxLength);
|
||||
|
||||
inputs.message.addEventListener('input', (e) => {
|
||||
const length = e.target.value.length;
|
||||
updateCharCounter(length, maxLength);
|
||||
});
|
||||
}
|
||||
|
||||
function updateCharCounter(current, max) {
|
||||
messageCounter.textContent = `${current} / ${max}`;
|
||||
// Add visual feedback when approaching limit
|
||||
if (current >= max * 0.9) {
|
||||
messageCounter.style.color = 'var(--error-red)';
|
||||
} else if (current >= max * 0.8) {
|
||||
messageCounter.style.color = 'var(--warning-yellow)';
|
||||
} else {
|
||||
messageCounter.style.color = 'var(--text-muted)';
|
||||
}
|
||||
}
|
||||
|
||||
// Real-time validation
|
||||
Object.values(inputs).forEach(input => {
|
||||
if (!input) return;
|
||||
|
||||
['input', 'blur'].forEach(eventType => {
|
||||
input.addEventListener(eventType, () => {
|
||||
validateInput(input);
|
||||
updateSubmitButton();
|
||||
});
|
||||
});
|
||||
|
||||
// Add focus effects
|
||||
input.addEventListener('focus', () => {
|
||||
input.closest('.input-wrapper').classList.add('focused');
|
||||
});
|
||||
|
||||
input.addEventListener('blur', () => {
|
||||
input.closest('.input-wrapper').classList.remove('focused');
|
||||
});
|
||||
});
|
||||
|
||||
function validateInput(input) {
|
||||
if (!input.required && input.value === '') {
|
||||
// Optional fields are valid when empty
|
||||
const wrapper = input.closest('.input-wrapper');
|
||||
wrapper.classList.remove('invalid', 'valid');
|
||||
return true;
|
||||
}
|
||||
|
||||
const isValid = input.checkValidity();
|
||||
const wrapper = input.closest('.input-wrapper');
|
||||
|
||||
wrapper.classList.toggle('invalid', !isValid);
|
||||
wrapper.classList.toggle('valid', isValid);
|
||||
|
||||
// Show validation message
|
||||
let errorMessage = '';
|
||||
if (!isValid) {
|
||||
if (input.validity.valueMissing) {
|
||||
errorMessage = 'Dieses Feld ist erforderlich';
|
||||
} else if (input.validity.typeMismatch) {
|
||||
errorMessage = 'Bitte geben Sie ein gültiges Format ein';
|
||||
} else if (input.validity.patternMismatch) {
|
||||
errorMessage = input.title;
|
||||
} else if (input.validity.tooShort) {
|
||||
const minLength = input.getAttribute('minlength');
|
||||
errorMessage = `Mindestens ${minLength} Zeichen erforderlich`;
|
||||
}
|
||||
}
|
||||
|
||||
let errorElement = wrapper.querySelector('.error-message');
|
||||
if (!errorElement && errorMessage) {
|
||||
errorElement = document.createElement('div');
|
||||
errorElement.className = 'error-message';
|
||||
wrapper.appendChild(errorElement);
|
||||
}
|
||||
|
||||
if (errorElement) {
|
||||
if (errorMessage) {
|
||||
errorElement.textContent = errorMessage;
|
||||
errorElement.style.display = 'flex';
|
||||
} else {
|
||||
errorElement.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function updateSubmitButton() {
|
||||
const requiredInputs = Object.values(inputs).filter(input => input && input.required);
|
||||
const isFormValid = requiredInputs.every(input => input.checkValidity());
|
||||
submitButton.disabled = !isFormValid;
|
||||
|
||||
// Visual feedback
|
||||
submitButton.classList.toggle('ready', isFormValid);
|
||||
}
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const requiredInputs = Object.values(inputs).filter(input => input && input.required);
|
||||
if (!requiredInputs.every(input => validateInput(input))) {
|
||||
showFeedback('Bitte füllen Sie alle Pflichtfelder korrekt aus.', false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
submitButton.disabled = true;
|
||||
buttonText.style.opacity = '0';
|
||||
loadingSpinner.style.display = 'block';
|
||||
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||
|
||||
showFeedback('Vielen Dank für Ihre Nachricht! Wir werden uns in Kürze bei Ihnen melden.', true);
|
||||
form.reset();
|
||||
|
||||
// Reset validation states
|
||||
Object.values(inputs).forEach(input => {
|
||||
if (!input) return;
|
||||
const wrapper = input.closest('.input-wrapper');
|
||||
wrapper.classList.remove('valid', 'invalid', 'focused');
|
||||
const errorElement = wrapper.querySelector('.error-message');
|
||||
if (errorElement) {
|
||||
errorElement.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Reset character counter
|
||||
if (messageCounter) {
|
||||
updateCharCounter(0, inputs.message.getAttribute('maxlength'));
|
||||
}
|
||||
} catch (error) {
|
||||
showFeedback('Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.', false);
|
||||
} finally {
|
||||
// Reset button state
|
||||
submitButton.disabled = false;
|
||||
buttonText.style.opacity = '1';
|
||||
loadingSpinner.style.display = 'none';
|
||||
submitButton.classList.remove('ready');
|
||||
}
|
||||
});
|
||||
|
||||
function showFeedback(message, isSuccess) {
|
||||
feedbackDiv.textContent = message;
|
||||
feedbackDiv.className = `form-feedback ${isSuccess ? 'success' : 'error'}`;
|
||||
feedbackDiv.style.display = 'block';
|
||||
|
||||
// Scroll feedback into view
|
||||
feedbackDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
|
||||
// Animate feedback
|
||||
feedbackDiv.style.animation = 'scaleIn 0.3s ease forwards';
|
||||
|
||||
// Auto-hide feedback after 5 seconds
|
||||
setTimeout(() => {
|
||||
feedbackDiv.style.animation = 'fadeOut 0.3s ease forwards';
|
||||
setTimeout(() => {
|
||||
feedbackDiv.style.display = 'none';
|
||||
}, 300);
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
function initAnimations() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
|
||||
// Add stagger effect to child elements
|
||||
const children = entry.target.querySelectorAll('.animate-stagger');
|
||||
children.forEach((child, index) => {
|
||||
child.style.animationDelay = `${index * 0.1}s`;
|
||||
child.classList.add('visible');
|
||||
});
|
||||
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements
|
||||
document.querySelectorAll('.service-card, .vision-item, .fade-in-scroll').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
function initCookieConsent() {
|
||||
const cookieConsent = document.getElementById('cookie-consent');
|
||||
const acceptButton = document.getElementById('accept-cookies');
|
||||
const rejectButton = document.getElementById('reject-cookies');
|
||||
|
||||
// Check if user has already made a choice
|
||||
const cookieChoice = localStorage.getItem('cookieChoice');
|
||||
if (!cookieChoice) {
|
||||
setTimeout(() => {
|
||||
cookieConsent.style.display = 'flex';
|
||||
cookieConsent.style.animation = 'slideUp 0.5s ease forwards';
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
acceptButton.addEventListener('click', () => {
|
||||
localStorage.setItem('cookieChoice', 'accepted');
|
||||
hideCookieConsent();
|
||||
});
|
||||
|
||||
rejectButton.addEventListener('click', () => {
|
||||
localStorage.setItem('cookieChoice', 'rejected');
|
||||
hideCookieConsent();
|
||||
});
|
||||
|
||||
function hideCookieConsent() {
|
||||
cookieConsent.style.animation = 'slideDown 0.5s ease forwards';
|
||||
setTimeout(() => {
|
||||
cookieConsent.style.display = 'none';
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user