html,
body {
font-family: Arial, sans-serif;
background: var(--bg-main);
color: var(--text-primary);
display: flex;
flex-direction: column;
transition:
background .3s ease,
color .3s ease;
overflow-x: hidden;
}
/* =========================
GLOBAL FONT SYSTEM
========================= */
:root {
--font-main:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
--font-display:
"Space Grotesk",
Inter,
ui-sans-serif,
system-ui,
sans-serif;
}
body {
font-family: var(--font-main);
}
/* =========================
LIGHT (STANDARD)
========================= */
:root {
--bg-main: #F4F7FB;
--bg-secondary: #FFFFFF;
--text-primary: #111827;
--text-secondary: #6B7280;
--header-bg: rgba(255,255,255,0.85);
--footer-bg: #E9EEF5;
--dropdown-bg: #FFFFFF;
--accent: #2F7DFF;
--accent-hover: #4E95FF;
--border: rgba(0,0,0,0.08);
--hero-bg:
url("/img/Virtus-Theme-Light.png");
}
/* =========================
BLUE
========================= */
body.blue {
--bg-main: #173251;
--bg-secondary: #224268;
--text-primary: #FFFFFF;
--text-secondary: #D0D8E3;
--header-bg: rgba(13,31,52,0.85);
--footer-bg: #102846;
--dropdown-bg: #224268;
--border: rgba(255,255,255,0.05);
--hero-bg:
url("/img/Virtus-Theme-Blue.png");
}
/* =========================
OBSIDIAN
========================= */
body.obsidian {
--bg-main: #16181D;
--bg-secondary: #1E2128;
--text-primary: #FFFFFF;
--text-secondary: #B0B7C4;
--header-bg: rgba(5,7,11,0.85);
--footer-bg: #05070B;
--dropdown-bg: #1E2128;
--border: rgba(255,255,255,0.05);
--hero-bg:
url("/img/Virtus-Theme-Obsidian.png");
}
/* =========================
DARK
========================= */
body.dark {
--bg-main: #05070B;
--bg-secondary: #0F172A;
--text-primary: #FFFFFF;
--text-secondary: #A0A8B8;
--header-bg: rgba(5,7,11,0.85);
--footer-bg: #05070B;
--dropdown-bg: #111827;
--border: rgba(255,255,255,0.05);
--hero-bg:
url("/img/Virtus-Theme-Dark.png");
}
/* =========================
RESET
========================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* =========================
LAYOUT
========================= */
main {
flex: 1;
}
/* =========================
HEADER
========================= */
.header {
position: sticky;
top: 0;
z-index: 999;
height: 90px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
background: var(--header-bg);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}
/* =========================
PREMIUM HEADER TYPOGRAPHY
========================= */
header,
.header,
.site-header,
.main-header,
.compact-header {
font-family: var(--font-main);
}
.logo,
.header-logo,
.brand,
.brand-link,
.logo-text,
.brand-name {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: var(--text-primary);
text-decoration: none;
}
.logo span,
.header-logo span,
.brand span,
.brand-name span {
font-weight: 800;
}
nav a,
.header-nav a,
.nav-links a,
.desktop-nav a,
.mobile-nav a {
font-family: var(--font-main);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-secondary);
text-decoration: none;
transition: color .25s ease, opacity .25s ease;
}
nav a:hover,
.header-nav a:hover,
.nav-links a:hover,
.desktop-nav a:hover,
.mobile-nav a:hover {
color: var(--text-primary);
}
nav a.active,
.header-nav a.active,
.nav-links a.active,
.desktop-nav a.active {
color: var(--accent);
font-weight: 700;
}
/* =========================
LOGO
========================= */
.logo-area {
display: flex;
align-items: center;
gap: 15px;
font-size: 1.5rem;
font-weight: 700;
}
.logo-area img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.logo-link {
display: flex;
align-items: center;
gap: 15px;
text-decoration: none;
color: inherit;
}
/* =========================
NAVIGATION
========================= */
.desktop-nav {
display: flex;
gap: 40px;
}
.desktop-nav a {
color: var(--text-primary);
text-decoration: none;
transition: 0.2s ease;
}
.desktop-nav a:hover {
color: var(--accent);
}
/* =========================
MENU BUTTON
========================= */
.menu {
position: relative;
}
.menu-btn {
background: none;
border: none;
color: var(--text-primary);
font-size: 2rem;
cursor: pointer;
}
/* =========================
DROPDOWN
========================= */
.dropdown {
display: none;
position: absolute;
top: 60px;
right: 0;
min-width: 220px;
background: var(--dropdown-bg);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
z-index: 1000;
}
.dropdown.active {
display: block;
}
.dropdown a {
display: block;
padding: 15px 20px;
color: var(--text-primary);
text-decoration: none;
transition: 0.2s;
}
.dropdown a:hover {
background: rgba(255,255,255,0.05);
color: var(--accent);
}
/* =========================
HERO SECTION
========================= */
.hero {
min-height: calc(100vh - 90px);
display: flex;
align-items: center;
padding: 0 120px;
position: relative;
overflow: hidden;
background-color: var(--bg-main);
}
.herosec {
min-height: calc(100vh - 90px);
display: flex;
align-items: start;
padding: 0 120px;
position: relative;
overflow: hidden;
background-color: var(--bg-main);
}
.heroIMG {
min-height: calc(100vh - 90px);
display: flex;
align-items: center;
background: var(--hero-bg);
background-size: cover;
background-position: center;
padding: 0 120px;
position: relative;
overflow: hidden;
}
/* Glow Effekt */
.hero::before {
content: "";
position: absolute;
width: 600px;
height: 600px;
background: var(--accent);
filter: blur(250px);
opacity: 0.12;
right: -150px;
top: -150px;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-title {
font-size: 5rem;
font-weight: 800;
line-height: 1;
max-width: 800px;
margin-bottom: 30px;
}
.hero-title span {
color: var(--accent);
}
.hero-text {
max-width: 700px;
font-size: 1.3rem;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 40px;
}
.hero::after {
content: "";
position: absolute;
width: 1200px;
height: 1200px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.03);
right: -600px;
top: -300px;
}
.service-hero {
padding: 120px 120px 80px;
min-height: auto;
display: flex;
align-items: center;
}
.service-hero-content {
max-width: 900px;
}
.hero-buttons {
display: flex;
gap: 16px;
margin-top: 40px;
}
.secondary-btn {
padding: 16px 28px;
border: 1px solid var(--border);
color: var(--text-primary);
border-radius: 12px;
text-decoration: none;
transition: 0.3s;
}
.secondary-btn:hover {
border-color: var(--accent);
}
@media (max-width: 768px) {
.hero,
.heroIMG,
.herosec {
padding: 40px 25px;
min-height: auto;
justify-content: center;
text-align: center;
}
.hero-content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}
.hero-title {
font-size: 3rem;
max-width: 100%;
}
.hero-text {
font-size: 1rem;
max-width: 100%;
}
}
/* =========================
BUTTON
========================= */
.cta-btn {
display: inline-block;
padding: 18px 35px;
border-radius: 12px;
background: var(--accent);
color: white;
text-decoration: none;
font-weight: 600;
transition: 0.2s ease;
}
.cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 0 30px rgba(47,125,255,0.5);
}
/* =========================
FOOTER
========================= */
.footer {
position: relative;
margin-top: auto;
padding: 80px 40px 30px;
background: var(--footer-bg);
border-top: 1px solid rgba(255,255,255,0.08);
overflow: hidden;
}
/* Blauer Glow */
.footer::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
background: var(--accent);
filter: blur(250px);
opacity: 0.08;
top: -250px;
left: 50%;
transform: translateX(-50%);
}
/* Container */
.footer-content {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 60px;
}
/* Spalten */
.footer-column {
display: flex;
flex-direction: column;
}
/* Virtus AI */
.footer-column h2 {
margin-bottom: 20px;
font-size: 2rem;
}
/* Leistungen / Rechtliches */
.footer-column h3 {
margin-bottom: 20px;
font-size: 1.2rem;
color: var(--text-primary);
}
/* Beschreibung */
.footer-column p {
color: var(--text-secondary);
line-height: 1.7;
}
/* Links */
.footer-column a {
color: var(--text-secondary);
text-decoration: none;
margin-bottom: 12px;
transition: all .2s ease;
}
.footer-column a:hover {
color: var(--accent);
transform: translateX(3px);
}
/* Untere Copyright Zeile */
.footer-bottom {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 60px auto 0;
padding-top: 20px;
text-align: center;
color: #6B7280;
border-top: 1px solid rgba(255,255,255,0.05);
}
/* Mobile */
@media (max-width: 768px) {
.footer {
padding: 60px 25px 25px;
}
.footer-content {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-column {
text-align: center;
}
.footer-column a:hover {
transform: none;
}
}
/* =========================
FOOTER MOBILE FIX
========================= */
@media (max-width: 768px) {
.footer-content {
text-align: center;
}
.footer-column {
align-items: center;
text-align: center;
}
.footer-brand {
text-align: center;
}
.footer-socials {
justify-content: center;
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
/* =========================
SETTINGS
========================= */
.row {
display: flex;
align-items: center;
gap: 15px;
}
/* =========================
SWITCH
========================= */
.theme-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
margin-top: 40px;
}
.theme-card {
cursor: pointer;
background: var(--bg-secondary);
border: 2px solid transparent;
border-radius: 20px;
overflow: hidden;
transition: .25s;
padding-bottom: 20px;
position: relative;
}
.theme-card:hover {
transform: translateY(-5px);
border-color: rgba(47,125,255,.3);
}
.theme-card.active {
border-color: var(--accent);
box-shadow:
0 0 30px rgba(47,125,255,.25);
transform: translateY(-3px);
}
.theme-card img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
.theme-card h3 {
margin: 20px 20px 10px;
font-size: 1.4rem;
}
.theme-card p {
margin: 0 20px;
color: var(--text-secondary);
line-height: 1.6;
}
.theme-badge {
position: absolute;
top: 15px;
right: 15px;
padding: 8px 12px;
border-radius: 999px;
background: var(--accent);
color: white;
font-size: .8rem;
font-weight: 600;
display: none;
}
.theme-card.active .theme-badge {
display: block;
}
@media (max-width: 768px) {
.theme-grid {
grid-template-columns: 1fr;
}
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #6B7280;
transition: .3s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .3s;
border-radius: 50%;
}
.switch input:checked + .slider {
background-color: var(--accent);
}
.switch input:checked + .slider:before {
transform: translateX(26px);
}
/* =========================
STARTSEITE BACKGROUND
========================= */
.background-pattern {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.background-pattern::before {
content: "";
position: absolute;
width: 900px;
height: 900px;
left: -300px;
top: -150px;
border-radius: 50%;
border: 2px solid rgba(47,125,255,0.15);
box-shadow:
0 0 50px rgba(47,125,255,0.15),
inset 0 0 50px rgba(47,125,255,0.05);
}
.background-pattern::after {
content: "";
position: absolute;
width: 700px;
height: 700px;
left: -180px;
top: -50px;
border-radius: 50%;
border: 1px solid rgba(47,125,255,0.12);
}
/* =========================
SETTINGS PAGE
========================= */
.settings-page {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 80px 20px;
}
.settings-card {
width: 100%;
max-width: 900px;
background: var(--bg-secondary);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 20px;
padding: 40px;
backdrop-filter: blur(20px);
}
.settings-card h1 {
font-size: 3rem;
margin-bottom: 10px;
}
.settings-subtitle {
color: var(--text-secondary);
margin-bottom: 40px;
}
.settings-section h2 {
margin-bottom: 20px;
}
.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-radius: 12px;
background: var(--bg-main);
}
.setting-item p {
color: var(--text-secondary);
margin-top: 5px;
}
@media (max-width: 768px) {
.desktop-nav {
display: none;
}
}
.header {
padding: 0 15px;
}
.logo-area {
gap: 10px;
}
.logo-area img {
width: 40px;
height: 40px;
}
/* =========================
SERVICES PAGE
========================= */
.services-layout {
min-height: calc(100vh - 90px);
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: center;
padding: 80px 120px;
}
/* =========================
LEFT SIDE
========================= */
.services-info {
max-width: 650px;
}
/* =========================
RIGHT SIDE
========================= */
.services-cards {
display: flex;
flex-direction: column;
gap: 20px;
}
/* =========================
SERVICE CARD
========================= */
.service-card {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 20px;
padding: 20px;
transition: all .25s ease;
cursor: pointer;
}
.service-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: 0 15px 40px rgba(0,0,0,.15);
}
.service-card h3 {
font-size: 1.4rem;
margin-bottom: 12px;
}
.service-card p {
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 20px;
}
.service-card a {
color: var(--accent);
text-decoration: none;
font-weight: 600;
}
/* =========================
MOBILE
========================= */
@media (max-width: 768px) {
.services-layout {
grid-template-columns: 1fr;
gap: 50px;
padding: 60px 25px;
}
.services-info {
max-width: 100%;
text-align: center;
}
.hero-buttons {
flex-direction: column;
width: 100%;
}
.hero-buttons a {
width: 100%;
}
.services-cards {
width: 100%;
}
}
/* =========================
ABOUT PAGE
========================= */
.about-section {
display: grid;
grid-template-columns: 350px 1fr;
gap: 80px;
align-items: center;
padding: 120px;
}
.about-image {
width: 350px;
height: 450px;
border-radius: 24px;
overflow: hidden;
border: 1px solid var(--border);
box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-content h2 {
font-size: 3rem;
margin-bottom: 25px;
}
.about-content p {
font-size: 1.1rem;
line-height: 1.9;
color: var(--text-secondary);
margin-bottom: 20px;
max-width: 700px;
}
.about-cta {
text-align: center;
padding: 120px;
}
.about-cta h2 {
font-size: 3rem;
margin-bottom: 20px;
}
.about-cta p {
max-width: 700px;
margin: 0 auto 40px;
color: var(--text-secondary);
line-height: 1.8;
}
/* =========================
MOBILE
========================= */
@media (max-width: 768px) {
.about-section {
grid-template-columns: 1fr;
padding: 80px 25px;
gap: 40px;
}
.about-image {
width: 100%;
max-width: 350px;
height: 420px;
margin: 0 auto;
}
.about-content {
text-align: center;
}
.about-content h2 {
font-size: 2.2rem;
}
.about-cta {
padding: 80px 25px;
}
.about-cta h2 {
font-size: 2.2rem;
}
}
.about-hero {
min-height: 70vh;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 80px 25px;
max-width: 1000px;
margin: 0 auto;
}
.about-hero .hero-text {
max-width: 700px;
margin: 30px auto 0;
}
.team-section {
padding: 120px;
text-align: center;
}
.team-section h2 {
font-size: 3rem;
margin-bottom: 60px;
}
.team-grid {
display: flex;
justify-content: center;
}
.team-card {
width: 350px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 24px;
overflow: hidden;
transition: .25s ease;
}
.team-card:hover {
transform: translateY(-6px);
border-color: var(--accent);
box-shadow: 0 15px 40px rgba(0,0,0,.15);
}
.team-card img {
width: 100%;
height: 260px;
object-fit: cover;
}
.team-card-content {
padding: 25px;
}
.team-card h3 {
font-size: 1.5rem;
margin-bottom: 8px;
}
.team-card span {
display: block;
color: var(--accent);
font-weight: 600;
margin-bottom: 15px;
}
.team-card p {
color: var(--text-secondary);
line-height: 1.7;
}
/* =========================
ABOUT PAGE
========================= */
.about-layout {
min-height: calc(100vh - 90px);
display: grid;
grid-template-columns: 1fr 450px;
gap: 100px;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 80px 120px;
}
.about-info {
max-width: 700px;
}
.about-image {
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 24px;
overflow: hidden;
background: var(--bg-secondary);
border: 1px solid var(--border);
}
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* =========================
VALUES
========================= */
.values-section {
max-width: 1400px;
margin: 0 auto;
padding: 120px;
}
.values-section h2 {
text-align: center;
font-size: 3rem;
margin-bottom: 60px;
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.value-card {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 24px;
padding: 40px;
}
.value-card h3 {
margin-bottom: 15px;
}
.value-card p {
color: var(--text-secondary);
line-height: 1.8;
}
/* =========================
FOUNDER
========================= */
.founder-section {
max-width: 1000px;
margin: 0 auto;
padding: 120px;
text-align: center;
}
.founder-section h2 {
font-size: 3rem;
margin-bottom: 30px;
}
.founder-section p {
color: var(--text-secondary);
line-height: 1.9;
margin-bottom: 20px;
}
/* =========================
CTA
========================= */
.about-cta {
text-align: center;
padding: 120px;
}
.about-cta h2 {
font-size: 3rem;
margin-bottom: 20px;
}
.about-cta p {
max-width: 700px;
margin: 0 auto 40px;
color: var(--text-secondary);
line-height: 1.8;
}
/* =========================
MOBILE
========================= */
@media (max-width: 768px) {
.about-layout {
grid-template-columns: 1fr;
gap: 50px;
padding: 60px 25px;
}
.about-info {
text-align: center;
max-width: 100%;
}
.values-section,
.founder-section,
.about-cta {
padding: 80px 25px;
}
.values-grid {
grid-template-columns: 1fr;
}
}
/* =========================
CONSULTATION PAGE
========================= */
.form-page {
min-height: calc(100vh - 90px);
display: flex;
justify-content: center;
padding: 80px 25px;
}
.form-container {
width: 100%;
max-width: 800px;
text-align: center;
}
.hidden-field {
position: absolute;
left: -9999px;
opacity: 0;
pointer-events: none;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 50px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
padding: 16px 20px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 16px;
color: var(--text-primary);
font-size: 1rem;
font-family: inherit;
transition: .25s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--accent);
}
.contact-form textarea {
resize: vertical;
min-height: 180px;
}
.contact-form button {
margin-top: 10px;
align-self: center;
}
/* =========================
CONTACT PAGE
========================= */
.contact-page {
min-height: calc(100vh - 90px);
padding: 80px 120px;
}
.contact-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
/* Hero auf Kontaktseite sauber zentrieren */
.contact-container .hero-title {
max-width: 850px;
margin-left: auto;
margin-right: auto;
margin-bottom: 24px;
text-align: center;
}
.contact-container .hero-text {
max-width: 650px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* =========================
CONTACT CARDS
========================= */
.contact-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 60px;
}
.contact-card {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 20px;
padding: 40px;
text-align: center;
transition: .25s ease;
}
.contact-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
}
.contact-card h3 {
margin-bottom: 15px;
font-size: 1.5rem;
}
.contact-card p {
color: var(--text-secondary);
line-height: 1.7;
}
/* =========================
CONTACT CTA
========================= */
.contact-cta {
max-width: 1000px;
margin: 120px auto 0;
text-align: center;
padding: 80px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 24px;
}
.contact-cta h2 {
font-size: 2.8rem;
margin-bottom: 20px;
}
.contact-cta p {
max-width: 700px;
margin: 0 auto 40px;
color: var(--text-secondary);
line-height: 1.8;
}
/* =========================
CONTACT MOBILE
========================= */
@media (max-width: 768px) {
.contact-page {
padding: 60px 25px;
}
.contact-container .hero-title {
max-width: 100%;
text-align: center;
}
.contact-container .hero-text {
max-width: 100%;
text-align: center;
}
.contact-cards {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 45px;
}
.contact-card {
padding: 30px 25px;
}
.contact-cta {
margin-top: 80px;
padding: 50px 25px;
}
.contact-cta h2 {
font-size: 2.2rem;
}
}
/* =========================
LOADER
========================= */
#loader {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg-main);
z-index: 99999;
transition:
opacity .5s ease,
visibility .5s ease;
}
#loader.hidden {
opacity: 0;
visibility: hidden;
}
.loader-content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
}
.loader-logo {
width: 90px;
height: 90px;
position: relative;
z-index: 2;
animation: logoFloat 2s ease-in-out infinite;
}
.loader-text {
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 2px;
color: var(--text-primary);
opacity: .8;
}
.loader-ring {
position: absolute;
width: 140px;
height: 140px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: var(--accent);
animation: spin 1.2s linear infinite;
box-shadow:
0 0 20px rgba(59,130,246,.4),
0 0 40px rgba(59,130,246,.2);
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes logoFloat {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-6px);
}
}
.form-status {
min-height: 24px;
margin: 10px 0;
text-align: center;
font-size: 0.95rem;
color: var(--text-secondary);
}
.form-status.success {
color: #22C55E;
}
.form-status.error {
color: #EF4444;
}
.contact-form button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* =========================
THANKS PAGE
========================= */
.thanks-page {
min-height: calc(100vh - 90px);
display: flex;
align-items: center;
justify-content: center;
padding: 80px 25px;
}
.thanks-card {
width: 100%;
max-width: 900px;
text-align: center;
padding: 70px 60px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 28px;
box-shadow: 0 25px 80px rgba(0,0,0,.18);
}
.thanks-icon {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 35px;
border-radius: 50%;
background: var(--accent);
color: #ffffff;
font-size: 2rem;
font-weight: 700;
box-shadow: 0 0 40px rgba(59,130,246,.35);
}
.thanks-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
margin-top: 40px;
flex-wrap: wrap;
}
/* =========================
THANKS MOBILE
========================= */
@media (max-width: 768px) {
.thanks-page {
padding: 60px 25px;
}
.thanks-card {
padding: 50px 25px;
}
.thanks-actions {
flex-direction: column;
}
.thanks-actions a {
width: 100%;
}
}
/* =========================
404 PAGE
========================= */
.error-page {
min-height: calc(100vh - 90px);
display: flex;
align-items: center;
justify-content: center;
padding: 80px 25px;
}
.error-card {
width: 100%;
max-width: 900px;
text-align: center;
padding: 70px 60px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 28px;
box-shadow: 0 25px 80px rgba(0,0,0,.18);
}
.error-code {
margin-bottom: 20px;
font-size: 6rem;
font-weight: 800;
line-height: 1;
color: var(--accent);
text-shadow: 0 0 40px rgba(59,130,246,.35);
}
.error-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
margin-top: 40px;
flex-wrap: wrap;
}
/* =========================
404 MOBILE
========================= */
@media (max-width: 768px) {
.error-page {
padding: 60px 25px;
}
.error-card {
padding: 50px 25px;
}
.error-code {
font-size: 4.5rem;
}
.error-actions {
flex-direction: column;
}
.error-actions a {
width: 100%;
}
}
/* =========================
LEGAL PAGES
========================= */
.legal-page {
min-height: calc(100vh - 90px);
padding: 80px 25px;
}
.legal-container {
max-width: 1000px;
margin: 0 auto;
}
.legal-content {
margin-top: 60px;
padding: 50px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 24px;
}
.legal-content h2 {
margin-top: 40px;
margin-bottom: 15px;
font-size: 1.5rem;
}
.legal-content h2:first-child {
margin-top: 0;
}
.legal-content p {
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 20px;
}
.legal-content a {
color: var(--accent);
text-decoration: none;
}
.legal-content a:hover {
text-decoration: underline;
}
/* =========================
LEGAL MOBILE
========================= */
@media (max-width: 768px) {
.legal-page {
padding: 60px 25px;
}
.legal-content {
padding: 35px 25px;
}
}
/* =========================
FOOTER SOCIAL ICONS
========================= */
.footer-socials {
display: flex;
align-items: center;
gap: 14px;
margin-top: 28px;
}
.footer-social-link {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(255,255,255,.06);
border: 1px solid var(--border);
color: var(--text-primary);
text-decoration: none;
transition: .25s ease;
}
.footer-social-link:hover {
transform: translateY(-3px);
background: rgba(59,130,246,.14);
border-color: var(--accent);
color: var(--accent);
}
.footer-social-link span {
font-size: 1rem;
font-weight: 700;
line-height: 1;
}
.footer-social-link svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.footer-social-link svg rect,
.footer-social-link svg circle,
.footer-social-link svg path {
fill: none;
stroke: currentColor;
}
/* =========================
SERVICE DETAIL PAGES
========================= */
.service-detail-page {
min-height: calc(100vh - 90px);
}
.service-detail-hero {
min-height: calc(100vh - 90px);
display: flex;
align-items: center;
justify-content: center;
padding: 100px 25px 80px;
text-align: center;
}
.service-detail-content {
max-width: 950px;
margin: 0 auto;
}
.service-detail-label {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
padding: 10px 18px;
border-radius: 999px;
background: rgba(59,130,246,.12);
border: 1px solid rgba(59,130,246,.25);
color: var(--accent);
font-size: .95rem;
font-weight: 600;
}
.service-detail-content .hero-title {
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-bottom: 28px;
text-align: center;
}
.service-detail-content .hero-text {
max-width: 780px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.service-detail-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 42px;
flex-wrap: wrap;
}
/* =========================
SERVICE DETAIL SECTIONS
========================= */
.service-detail-section {
max-width: 1300px;
margin: 0 auto;
padding: 90px 120px;
}
.service-detail-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.service-detail-card {
padding: 36px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 24px;
transition: .25s ease;
}
.service-detail-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: 0 20px 60px rgba(0,0,0,.16);
}
.service-detail-card h3 {
margin-bottom: 16px;
font-size: 1.35rem;
}
.service-detail-card p {
color: var(--text-secondary);
line-height: 1.8;
}
.split-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}
.split-section h2 {
margin-bottom: 22px;
font-size: 2.7rem;
line-height: 1.15;
}
.split-section p {
color: var(--text-secondary);
line-height: 1.8;
}
.service-detail-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 18px;
}
.service-detail-list li {
position: relative;
padding: 20px 24px 20px 54px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 16px;
color: var(--text-secondary);
}
.service-detail-list li::before {
content: "✓";
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
color: var(--accent);
font-weight: 800;
}
/* =========================
SERVICE DETAIL CTA
========================= */
.service-detail-cta {
max-width: 1000px;
margin: 40px auto 120px;
padding: 80px 60px;
text-align: center;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 28px;
box-shadow: 0 25px 80px rgba(0,0,0,.18);
}
.service-detail-cta h2 {
margin-bottom: 22px;
font-size: 2.8rem;
}
.service-detail-cta p {
max-width: 700px;
margin: 0 auto 40px;
color: var(--text-secondary);
line-height: 1.8;
}
/* =========================
SERVICE DETAIL MOBILE
========================= */
@media (max-width: 900px) {
.service-detail-section {
padding: 70px 25px;
}
.service-detail-grid {
grid-template-columns: 1fr;
}
.split-section {
grid-template-columns: 1fr;
gap: 40px;
}
.split-section h2 {
font-size: 2.2rem;
}
.service-detail-cta {
margin: 30px 25px 90px;
padding: 55px 25px;
}
.service-detail-cta h2 {
font-size: 2.2rem;
}
}
@media (max-width: 768px) {
.service-detail-hero {
min-height: auto;
padding: 80px 25px 60px;
}
.service-detail-actions {
flex-direction: column;
}
.service-detail-actions a {
width: 100%;
}
}
/* =========================
REFERENCES PAGE
========================= */
.references-page {
min-height: calc(100vh - 90px);
}
.references-hero {
min-height: calc(100vh - 90px);
display: flex;
align-items: center;
justify-content: center;
padding: 100px 25px 80px;
text-align: center;
}
.references-hero-content {
max-width: 950px;
margin: 0 auto;
}
.references-hero-content .hero-title {
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-bottom: 28px;
text-align: center;
}
.references-hero-content .hero-text {
max-width: 760px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.references-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 42px;
flex-wrap: wrap;
}
/* =========================
REFERENCES GRID
========================= */
.references-section {
max-width: 1400px;
margin: 0 auto;
padding: 90px 120px;
}
.references-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.reference-card {
overflow: hidden;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 26px;
transition: .25s ease;
}
.reference-card:hover {
transform: translateY(-5px);
border-color: var(--accent);
box-shadow: 0 25px 70px rgba(0,0,0,.18);
}
.reference-media {
width: 100%;
aspect-ratio: 9 / 14;
padding: 18px;
}
.reference-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 20px;
background:
radial-gradient(circle at top, rgba(59,130,246,.25), transparent 35%),
rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
}
.reference-placeholder span {
color: var(--text-primary);
font-size: 1.4rem;
font-weight: 700;
}
.reference-placeholder p {
margin-top: 10px;
color: var(--text-secondary);
font-size: .95rem;
}
.reference-content {
padding: 10px 28px 32px;
}
.reference-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
.reference-tags span {
padding: 7px 12px;
border-radius: 999px;
background: rgba(59,130,246,.12);
border: 1px solid rgba(59,130,246,.22);
color: var(--accent);
font-size: .8rem;
font-weight: 600;
}
.reference-content h3 {
margin-bottom: 14px;
font-size: 1.35rem;
}
.reference-content p {
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 24px;
}
.reference-link {
color: var(--accent);
text-decoration: none;
font-weight: 600;
}
/* =========================
REFERENCES INFO
========================= */
.references-info {
max-width: 1300px;
margin: 0 auto;
padding: 90px 120px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}
.references-info h2 {
margin-bottom: 22px;
font-size: 2.7rem;
line-height: 1.15;
}
.references-info p {
color: var(--text-secondary);
line-height: 1.8;
}
.references-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 18px;
}
.references-list li {
position: relative;
padding: 20px 24px 20px 54px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 16px;
color: var(--text-secondary);
}
.references-list li::before {
content: "✓";
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
color: var(--accent);
font-weight: 800;
}
/* =========================
REFERENCES CTA
========================= */
.references-cta {
max-width: 1000px;
margin: 40px auto 120px;
padding: 80px 60px;
text-align: center;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 28px;
box-shadow: 0 25px 80px rgba(0,0,0,.18);
}
.references-cta h2 {
margin-bottom: 22px;
font-size: 2.8rem;
}
.references-cta p {
max-width: 700px;
margin: 0 auto 40px;
color: var(--text-secondary);
line-height: 1.8;
}
/* =========================
REFERENCES MOBILE
========================= */
@media (max-width: 1000px) {
.references-section,
.references-info {
padding: 70px 25px;
}
.references-grid {
grid-template-columns: 1fr;
}
.references-info {
grid-template-columns: 1fr;
gap: 40px;
}
.references-info h2 {
font-size: 2.2rem;
}
.references-cta {
margin: 30px 25px 90px;
padding: 55px 25px;
}
.references-cta h2 {
font-size: 2.2rem;
}
}
@media (max-width: 768px) {
.references-hero {
min-height: auto;
padding: 80px 25px 60px;
}
.references-actions {
flex-direction: column;
}
.references-actions a {
width: 100%;
}
}
/* =========================
HOME SERVICES PREVIEW
========================= */
.home-services-preview {
max-width: 1400px;
margin: 0 auto;
padding: 120px;
}
.home-services-heading {
max-width: 850px;
margin: 0 auto 70px;
text-align: center;
}
.home-services-heading h2 {
font-size: 3.4rem;
line-height: 1.1;
margin-bottom: 24px;
}
.home-services-heading p {
color: var(--text-secondary);
line-height: 1.8;
font-size: 1.1rem;
}
.home-services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.home-service-card {
padding: 34px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 24px;
transition: .25s ease;
}
.home-service-card:hover {
transform: translateY(-5px);
border-color: var(--accent);
box-shadow: 0 20px 60px rgba(0,0,0,.16);
}
.home-service-card.main-service {
border-color: rgba(59,130,246,.35);
}
.home-service-card h3 {
margin-bottom: 16px;
font-size: 1.35rem;
}
.home-service-card p {
color: var(--text-secondary);
line-height: 1.75;
margin-bottom: 24px;
}
.home-service-card a {
color: var(--accent);
text-decoration: none;
font-weight: 600;
}
/* =========================
HOME SERVICES MOBILE
========================= */
@media (max-width: 1100px) {
.home-services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.home-services-preview {
padding: 80px 25px;
}
.home-services-heading h2 {
font-size: 2.4rem;
}
.home-services-grid {
grid-template-columns: 1fr;
}
}