html { scroll-behavior: smooth; }
/* THEME */
:root{ --accent:#2563eb; --bg:#fff; --fg:#0f172a; --muted:#f3f4f6; --card:#fff; --border:#e5e7eb; --shadow:0 10px 20px rgba(0,0,0,.08); --surface: var(--card); }
html[data-theme="dark"]{ --bg:#0b0f19; --fg:#e5e7eb; --muted:#121826; --card:#0f1628; --border:#1f2937; --shadow:0 10px 24px rgba(0,0,0,.5); --surface:#0f1628; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji"}
.container{width:min(1100px,92%);margin:0 auto}
.skip-link{position:absolute;left:-9999px;top:auto;background:var(--accent);color:#fff;padding:8px 12px;border-radius:6px}
.skip-link:focus{left:12px;top:12px}
/* HEADER & NAV */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border);backdrop-filter:saturate(120%) blur(8px)}
.nav-container{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0}
.logo{display:flex;gap:10px;align-items:center;color:var(--fg);text-decoration:none;font-weight:700}
.nav{justify-self:center}
.nav-list{display:flex;gap:6px;list-style:none;margin:0;padding:0;align-items:center;justify-content:center}
.nav-item>a{color:var(--fg);text-decoration:none;padding:10px 12px;border-radius:10px;display:inline-flex;align-items:center;gap:6px}
.nav-item>a:hover{background:var(--muted)}
.nav-item.has-dropdown{position:relative}
.dropdown{position:absolute;top:110%;left:0;min-width:220px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:var(--shadow);display:none;flex-direction:column;gap:2px;list-style:none}
.dropdown a{padding:8px 10px;border-radius:8px;color:var(--fg);text-decoration:none;display:block}
.dropdown a:hover{background:var(--muted)}
@media(hover:hover) and (pointer:fine){.nav-item.has-dropdown:hover>.dropdown{display:flex}}
.nav-controls{display:inline-flex;gap:20px;align-items:center;justify-self:end}
.hamburger{display:none;width:48px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--card)}
.hamburger span{display:block;width:22px;height:2px;background:var(--fg);margin:6px auto}
/* LANGUAGE MENU */
.lang-menu{position:relative;height:36px}
.lang-trigger{height:36px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--border);background:var(--card);border-radius:999px;cursor:pointer;box-shadow:var(--shadow);color:var(--fg)}
.lang-trigger .chev{transition:transform .2s ease}
.lang-menu.open .lang-trigger .chev{transform:rotate(180deg)}
.lang-menu .menu{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:6px;margin:0;list-style:none;box-shadow:var(--shadow);display:none}
.lang-menu.open .menu{display:block}
.lang-menu .menu button{width:100%;text-align:left;border:none;background:transparent;color:var(--fg);padding:10px;border-radius:8px;cursor:pointer}
.lang-menu .menu button[aria-checked="true"]{background:var(--muted);font-weight:600}
.lang-menu .menu button:hover{background:var(--muted)}
/* THEME TOGGLE */
.theme-toggle{border:1px solid var(--border);background:var(--card);border-radius:999px;padding:0 10px;display:inline-flex;gap:8px;align-items:center;box-shadow:var(--shadow);height:36px}
.theme-toggle .icon{width:20px;height:20px;display:block}
html[data-theme="dark"] .theme-toggle{background:#1a2338;border-color:#2b3752;box-shadow:0 10px 24px rgba(0,0,0,.55)}
html[data-theme="dark"] .sun{opacity:.35} html[data-theme="light"] .moon{opacity:.35}
/* HERO */
.section{padding:56px 0}
.section:nth-of-type(even){background:var(--muted)}
.hero{position:relative;padding:72px 0;overflow:hidden;background:var(--muted)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.25)),url('assets/hero.jpg');background-size:cover;background-position:center;filter:blur(4px);transform:scale(1.06);z-index:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.1));z-index:1}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.hero-left h1{margin:0 0 10px} .hero-left .hero-blurb{max-width:52ch;margin-bottom:14px;color:#eef2ff}
html[data-theme="light"] .hero-left h1, html[data-theme="light"] .hero-left .hero-blurb{color:#f8fafc}
html[data-theme="dark"] .hero-left h1, html[data-theme="dark"] .hero-left .hero-blurb{color:#e5e7eb}
.hero-center{display:grid;place-items:center}
.try-popup{appearance:none;-webkit-appearance:none;cursor:pointer;z-index:3;padding:12px 18px;border-radius:999px;border:1px solid var(--border);box-shadow:var(--shadow);font-weight:700;letter-spacing:.3px;backdrop-filter:saturate(120%) blur(2px);animation:popPulse 2.8s ease-in-out infinite}
@keyframes popPulse{0%,100%{transform:translateY(0) scale(1);box-shadow:var(--shadow)}50%{transform:translateY(-4px) scale(1.04);box-shadow:0 14px 30px rgba(0,0,0,.18)}}
html[data-theme="light"] .try-popup{background-color:rgba(134,119,119,.3);color:#111827}
html[data-theme="dark"] .try-popup{background-color:rgba(17,24,39,.85);color:#f9fafb;border-color:#2b3752}
.try-popup:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* SERVICES (cards) */
#services .section-title{margin:0 0 6px} #services .section-sub{margin:0 0 18px;opacity:.9}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.cards{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:240px;padding:28px 24px 24px 64px;border-radius:22px;background:var(--surface);border:1px solid var(--border);color:var(--fg);box-shadow:var(--shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.14)}
.card .card-icon{position:absolute;top:18px;left:22px;width:28px;height:28px;display:grid;place-items:center;font-size:22px;line-height:1;opacity:.95;pointer-events:none}
.card h3{margin:6px 0 6px;font-weight:800;font-size:clamp(1.1rem,1.02rem + .5vw,1.55rem);letter-spacing:.2px}
.card p{margin:0;font-size:clamp(.95rem,.9rem + .2vw,1.1rem);line-height:1.5;opacity:.92}
/* FORM & FOOTER */
.contact-form{display:grid;gap:14px;max-width:640px}
.field{display:grid;gap:8px}
input,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--fg)}
.site-footer{border-top:1px solid var(--border);padding:16px 0;background:var(--bg)}
.footer-grid{display:flex;justify-content:space-between;align-items:center}
.back-to-top{color:var(--fg);text-decoration:none}
/* ===== Elegant Footer ===== */
.site-footer{background:var(--bg); border-top:1px solid var(--border);}
.site-footer .footer-top{padding:32px 0;}
.footer-grid{display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 24px; align-items:start;}
.footer-brand p{margin:8px 0 0; opacity:.9; max-width:46ch;}
.foot-title{margin:0 0 8px; font-weight:700; font-size:.95rem; letter-spacing:.3px; opacity:.9;}
.foot-list{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.foot-list a{color:var(--fg); text-decoration:none; opacity:.9;}
.foot-list a:hover{opacity:1; text-decoration:underline;}
.footer-bottom{border-top:1px solid var(--border);}
.footer-bar{display:flex; gap:16px; align-items:center; justify-content:space-between; padding:14px 0; flex-wrap:wrap;}
.foot-copy{margin:0; opacity:.9;}
.foot-actions{display:flex; align-items:center; gap:14px;}
.social{display:inline-flex; gap:10px;}
.soc{display:inline-grid; place-items:center; width:34px; height:34px; border:1px solid var(--border); border-radius:10px; color:var(--fg); opacity:.9; text-decoration:none;}
.soc:hover{opacity:1; transform:translateY(-1px); box-shadow:var(--shadow);}
.back-to-top{color:var(--fg); text-decoration:none; opacity:.9;}
.back-to-top:hover{opacity:1; text-decoration:underline;}
/* Dark surface subtle tweak */
html[data-theme="dark"] .site-footer{background:#0b0f19;}
/* Footer: vertical links list */
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
.footer-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-links a { color: var(--fg); text-decoration: none; opacity: .9; }
.footer-links a:hover { text-decoration: underline; }
@media (max-width: 800px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* Footer: horizontal links list (overrides) */
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; }
.footer-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 14px 18px; }
.footer-links a { color: var(--fg); text-decoration: none; opacity: .9; }
.footer-links a:hover { text-decoration: underline; }
@media (max-width: 800px) {
.footer-grid { grid-template-columns: 1fr; row-gap: 10px; }
.footer-links ul { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* === Footer links: horizontal, clean, accessible (overrides) === */
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; }
.footer-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; }
.footer-links li { display: inline-flex; }
.footer-links a { padding: 6px 8px; border-radius: 8px; color: var(--fg); text-decoration: none; opacity: .95; }
.footer-links a:hover { text-decoration: underline; opacity: 1; }
.footer-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.back-to-top { justify-self: end; }
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr; row-gap: 10px; }
.footer-links ul { justify-content: flex-start; }
.back-to-top { justify-self: start; }
}
/* === Footer links: forced horizontal layout === */
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; }
.footer-links ul { list-style: none; padding: 0; margin: 0; display: flex !important; flex-wrap: wrap; gap: 12px 18px; justify-content: center; }
.footer-links li { display: inline-flex; }
.footer-links a { padding: 6px 8px; border-radius: 8px; color: var(--fg); text-decoration: none; opacity: .95; }
.footer-links a:hover { text-decoration: underline; opacity: 1; }
.footer-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr; row-gap: 10px; }
.footer-links ul { justify-content: center; } /* still horizontal, wraps */
}
/* ===== Two-tier footer ===== */
.site-footer { border-top: 1px solid var(--border); background: var(--bg); }
.footer-top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 28px;
padding: 28px 0;
}
.brand-line { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.tagline { margin: 10px 0 0; opacity: .9; }
.footer-head { margin: 0 0 10px; font-weight: 700; }
.footer-top nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-top nav a { color: var(--fg); text-decoration: none; opacity: .95; }
.footer-top nav a:hover { text-decoration: underline; }
.footer-bar { border-top: 1px solid var(--border); }
.bar-grid {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 16px;
align-items: center;
padding: 14px 0;
}
.socials { display: inline-flex; gap: 10px; }
.btn-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 10px;
background: var(--card); color: var(--fg);
border: 1px solid var(--border);
}
.btn-icon:hover { filter: brightness(0.96); }
.back-to-top { color: var(--fg); text-decoration: none; }
.back-to-top:hover { text-decoration: underline; }
@media (max-width: 900px) {
.footer-top { grid-template-columns: 1fr; }
.bar-grid { grid-template-columns: 1fr; row-gap: 8px; }
.back-to-top { justify-self: start; }
}
/* Contact: validation styles */
.field { display: grid; gap: 6px; margin-bottom: 10px; }
.error { border-color: #ef4444 !important; }
.error-text { color: #ef4444; min-height: 1em; }
.help-text { opacity: .8; }
.phone-row { display: flex; gap: 8px; align-items: center; }
select#countryCode { height: 40px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: var(--card, #fff); color: var(--fg, #111); padding: 0 10px; }
#phone { height: 40px; }
/* Phone: dial code dropdown */
.phone-row { display: flex; gap: 8px; align-items: center; }
.dial-code { width: 112px; min-width: 112px; height: 40px;
border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: var(--card, #fff); color: var(--fg, #111); padding: 0 8px; }
/* Country & Dial code selects: visual polish */
select#country, select#dialCode {
height: 40px;
border: 1px solid var(--border, #e5e7eb);
border-radius: 10px;
background: var(--card, #fff);
color: var(--fg, #111);
padding: 0 12px;
}
select#country:focus, select#dialCode:focus {
outline: 2px solid var(--accent, #2563eb);
outline-offset: 2px;
}
/* ===== Responsive enhancements ===== */
/* Prevent horizontal scroll on tiny devices */
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }
/* Respect safe areas (iPhone notch) */
.site-header { padding-top: env(safe-area-inset-top); }
.site-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
/* Larger tap targets for touch */
@media (hover: none) and (pointer: coarse) {
.btn, .lang-trigger, .theme-toggle, .hamburger, .nav-item > a { min-height: 44px; }
}
/* Hero: reduce blur on mobile for performance, stack columns */
@media (max-width: 992px) {
.hero::before { filter: blur(2px); }
.hero-grid { grid-template-columns: 1fr; gap: 16px; text-align: left; }
.hero-center { order: 2; }
.hero-left { order: 1; }
}
/* Services grid: desktop 3, tablet 2, mobile 1 */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1199px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .cards { grid-template-columns: 1fr; } }
/* Service cards: consistent spacing and icon layout on small screens */
.card { display: grid; grid-template-rows: auto auto 1fr; }
.card .svc-icon, .card .card-icon {
display: grid; place-items: center; width: 48px; height: 48px; margin: 2px auto 6px;
font-size: 24px; line-height: 1;
}
/* Contact form: two-column on tablets/desktops */
@media (min-width: 768px) {
#contact .contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 16px;
}
#contact .contact-form .field:nth-child(1),
#contact .contact-form .field:nth-child(2) { grid-column: span 1; }
#contact .contact-form .field:nth-child(3) { grid-column: span 1; }
#contact .contact-form .field:nth-child(4) { grid-column: span 1; }
#contact .contact-form .field:nth-child(5) { grid-column: 1 / -1; }
#contact .contact-form .field:nth-child(6) { grid-column: 1 / -1; }
#contact .contact-form .btn.primary { grid-column: 1 / -1; justify-self: start; }
}
/* Navbar: ensure dropdowns and mobile menu layer correctly */
.site-header { z-index: 1000; }
.nav { z-index: 999; }
/* Footer: horizontal quick links wrap gracefully */
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.footer-links a { white-space: nowrap; }
/* ===== Laptop phone alignment & hamburger breakpoint ===== */
/* Laptop/desktop: keep dial code + number on one line using grid */
@media (min-width: 992px) {
#contact .phone-row {
display: grid;
grid-template-columns: 132px 1fr;
gap: 10px;
align-items: center;
}
#contact select#dialCode {
width: 100%;
min-width: 132px;
max-width: 160px;
}
#contact #phone { width: 100%; }
/* Slightly tighten vertical rhythm on laptop */
#contact .contact-form .field { margin-bottom: 8px; }
}
/* Show hamburger at <= 1024px and convert nav to overlay */
@media (max-width: 1024px) {
.hamburger { display: inline-block; }
.nav {
position: fixed;
inset: 64px 0 auto 0;
background: var(--bg);
border-bottom: 1px solid var(--border);
display: none;
z-index: 999;
}
.nav.open { display: block; }
.nav-list {
flex-direction: column;
padding: 12px;
align-items: stretch;
justify-content: flex-start;
gap: 6px;
}
.nav-item.has-dropdown .dropdown { position: static; display: none; margin-top: 6px; }
.nav-item.has-dropdown.open .dropdown { display: flex; }
.nav-container { grid-template-columns: auto 1fr auto; }
}
/* Ensure hamburger hidden on larger screens */
@media (min-width: 1025px) {
.hamburger { display: none; }
}
/* Prevent phone row wrapping on medium sizes (tablet landscape, small laptops) */
@media (min-width: 768px) and (max-width: 991px) {
#contact .phone-row {
display: grid;
grid-template-columns: 124px 1fr;
gap: 8px;
align-items: center;
}
#contact select#dialCode { min-width: 124px; }
}
/* ===== Laptop fixes v2 ===== */
/* Phone row: robust layout */
#contact .phone-row { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: center; }
#contact select#dialCode { width: 100%; min-width: 120px; }
@media (min-width: 992px) {
#contact .phone-row { grid-template-columns: 140px 1fr; gap: 10px; }
#contact select#dialCode { min-width: 140px; max-width: 180px; }
}
@media (max-width: 520px) {
#contact .phone-row { grid-template-columns: 1fr; }
#contact select#dialCode { min-width: 0; }
}
/* Force hamburger to appear by 1280px */
@media (max-width: 1280px) {
.hamburger { display: inline-block; z-index: 1100; }
.nav {
position: fixed;
inset: 64px 0 auto 0;
background: var(--bg);
border-bottom: 1px solid var(--border);
display: none;
z-index: 1090;
}
.nav.open { display: block; }
.nav-list { flex-direction: column; padding: 12px; gap: 6px; align-items: stretch; }
.nav-item.has-dropdown .dropdown { position: static; display: none; margin-top: 6px; }
.nav-item.has-dropdown.open .dropdown { display: flex; }
}
@media (min-width: 1281px) { .hamburger { display: none; } }
/* Make the hamburger visually obvious */
.hamburger { border: 1px solid var(--border); background: var(--card); }
.hamburger span { background: var(--fg); }
/* Services cards: allow content to grow, no clipping on long translations */
.cards .card { min-height: unset; height: auto; overflow: visible; }
.cards .card h3, .cards .card p { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
/* Keep icon, title, text stacking clean */
.cards .card { display: grid; grid-template-rows: auto auto 1fr; }
.cards .card .card-icon, .cards .card .svc-icon {
display: grid; place-items: center;
width: 52px; height: 52px; margin: 2px auto 8px; font-size: 26px;
}
/* ===== Mobile phone row alignment (final) ===== */
#contact .phone-row {
display: grid;
grid-template-columns: clamp(84px, 24vw, 132px) 1fr;
gap: 10px;
align-items: center;
}
#contact select#dialCode,
#contact #phone {
height: 44px;
line-height: 44px;
}
#contact select#dialCode,
#contact select#country {
-webkit-appearance: none;
appearance: none;
background-clip: padding-box;
}
#contact #phone { width: 100%; }
/* Ultra-narrow devices: allow wrap to single column */
@media (max-width: 360px) {
#contact .phone-row { grid-template-columns: 1fr; }
}
/* === Contact grid override: stack Country above Phone on ≥768px === */
@media (min-width: 768px) {
#contact .contact-form .field:nth-of-type(3),
#contact .contact-form .field:nth-of-type(4) {
grid-column: 1 / -1 !important; /* full width rows: Country, then Phone */
}
/* Keep Email and Message full width as well (if not already) */
#contact .contact-form .field:nth-of-type(5),
#contact .contact-form .field:nth-of-type(6) {
grid-column: 1 / -1 !important;
}
/* Submit button stays full width row (left aligned button) */
#contact .contact-form .btn.primary { grid-column: 1 / -1; }
}
/* ==== Smooth theme transition & ripple ==== */
:root {
--theme-dur: 520ms;
--theme-ease: cubic-bezier(.2,.7,.2,1);
}
/* Cross-fade surfaces, text, borders, icons */
@media (prefers-reduced-motion: no-preference) {
html.theme-transition, html.theme-transition * {
transition:
background-color var(--theme-dur) var(--theme-ease),
color var(--theme-dur) var(--theme-ease),
border-color var(--theme-dur) var(--theme-ease),
box-shadow var(--theme-dur) var(--theme-ease),
fill var(--theme-dur) var(--theme-ease),
stroke var(--theme-dur) var(--theme-ease),
outline-color var(--theme-dur) var(--theme-ease);
}
/* Subtle ripple from the click location */
html.theme-ink::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background: radial-gradient(600px circle at var(--click-x,50%) var(--click-y,50%),
rgba(127,127,127,.16), transparent 60%);
opacity: 0;
animation: themeInk 600ms var(--theme-ease) both;
mix-blend-mode: multiply;
z-index: 9999;
}
@keyframes themeInk {
0% { opacity: .35; }
100% { opacity: 0; }
}
}
@media (prefers-reduced-motion: reduce) {
html.theme-transition, html.theme-transition * { transition: none !important; }
html.theme-ink::before { animation: none !important; opacity: 0 !important; }
}
/* ==== Smooth theme transition (refined) ==== */
:root { --theme-dur: 520ms; --theme-ease: cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: no-preference) {
html.theme-transition, html.theme-transition * {
transition:
background-color var(--theme-dur) var(--theme-ease),
color var(--theme-dur) var(--theme-ease),
border-color var(--theme-dur) var(--theme-ease),
box-shadow var(--theme-dur) var(--theme-ease),
fill var(--theme-dur) var(--theme-ease),
stroke var(--theme-dur) var(--theme-ease),
outline-color var(--theme-dur) var(--theme-ease);
}
html.theme-ink::before {
content: "";
position: fixed; inset: 0; pointer-events: none;
background: radial-gradient(600px circle at var(--click-x,50%) var(--click-y,50%), rgba(127,127,127,.16), transparent 60%);
opacity: 0; animation: themeInk 600ms var(--theme-ease) both;
mix-blend-mode: multiply; z-index: 9999;
}
@keyframes themeInk { 0% { opacity:.35; } 100% { opacity:0; } }
}
@media (prefers-reduced-motion: reduce) {
html.theme-transition, html.theme-transition * { transition: none !important; }
html.theme-ink::before { animation: none !important; opacity: 0 !important; }
}
/* ==== Theme transition: ultrasmooth (no ripple, no lag) ==== */
:root { --theme-dur: 360ms; --theme-ease: cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: no-preference) {
html.theme-transition, html.theme-transition * {
transition:
background-color var(--theme-dur) var(--theme-ease),
color var(--theme-dur) var(--theme-ease),
border-color var(--theme-dur) var(--theme-ease);
}
}
@media (prefers-reduced-motion: reduce) {
html.theme-transition, html.theme-transition * { transition: none !important; }
}
/* ===== Contact Send button: sizing & states ===== */
.btn { display: inline-flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px; text-decoration: none; border: 1px solid var(--border); }
.btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn.primary:hover { filter: brightness(0.96); }
.btn.primary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Center the "Send" button in the Contact form */
#contact .contact-form { /* the form is already a grid; ensure centering */
justify-items: center;
}
#contact .contact-form .btn.primary {
justify-self: center !important; /* grid-centers the button */
align-self: center;
margin-top: 8px;
margin-inline: auto; /* fallback centering */
width: fit-content;
display: inline-flex; /* keep its current look */
}
/* Uniform control height */
#contact .btn.primary { min-height: 44px; line-height: 1; }
/* Full width on small screens, auto on larger */
@media (max-width: 767px) { #contact .btn.primary { width: 100%; justify-content: center; } }
@media (min-width: 768px) { #contact .btn.primary { width: auto; } }
/* Disabled / loading state */
.btn.primary[disabled] { opacity: .7; cursor: not-allowed; }
.btn.primary.loading { position: relative; }
.btn.primary.loading::after {
content: "";
width: 16px; height: 16px; border-radius: 50%;
border: 2px solid rgba(255,255,255,.6);
border-top-color: rgba(255,255,255,1);
animation: spin 1s linear infinite;
display: inline-block; margin-left: 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Dark mode color tweak for contrast */
html[data-theme="dark"] .btn.primary { background: #2e6cff; border-color: #2e6cff; color: #fff; }
/* ===== Live Prices: base glass ticker ===== */
.market-wrap{ align-items: stretch; }
.market-left{ display: grid; align-content: center; }
.ticker-viewport{
overflow: hidden;
border-radius: 14px;
background: color-mix(in oklab, var(--card) 65%, transparent);
backdrop-filter: saturate(120%) blur(6px);
border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
box-shadow: var(--shadow);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track{
display: inline-flex;
align-items: center;
gap: 0;
white-space: nowrap;
will-change: transform;
animation: tickerMove 36s linear infinite;
}
.ticker-chip{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
margin: 0;
border-right: 1px dashed color-mix(in oklab, var(--fg) 12%, transparent);
}
.ticker-chip .coin{ width: 22px; height: 22px; border-radius: 50%; display: inline-block; }
.ticker-chip .sym{ font-weight: 800; letter-spacing: .2px; }
.ticker-chip .name{ opacity: .8; margin-left: 2px; display: none; }
.ticker-chip .price{ font-variant-numeric: tabular-nums; }
.ticker-chip .chg{ font-variant-numeric: tabular-nums; font-weight: 700; }
.ticker-chip .chg.up{ color: #16a34a; }
.ticker-chip .chg.down{ color: #dc2626; }
@media (min-width: 1100px){ .ticker-chip .name{ display: inline; } }
@media (hover:hover) and (pointer:fine){ .ticker-viewport:hover .ticker-track{ animation-play-state: paused; } }
@keyframes tickerMove { from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
/* ===== Live Prices: centered & wider ===== */
#live-crypto h2, #live-crypto .markets-note{ text-align: center; margin-left: auto; margin-right: auto; }
#live-crypto > .container{ width: min(1500px, 96%); margin-inline: auto; }
#live-crypto .market-wrap{
display: grid;
grid-template-columns: 1fr minmax(980px, 1360px) 1fr;
gap: 18px;
align-items: center;
}
#live-crypto .market-left{ grid-column: 2; }
#live-crypto .ticker-viewport{
-webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5%, #000 98.5%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 1.5%, #000 98.5%, transparent);
padding-left: 12px; padding-right: 12px;
}
@media (max-width: 1100px){
#live-crypto > .container{ width: 94%; }
#live-crypto .market-wrap{ grid-template-columns: 1fr; }
#live-crypto .market-left{ grid-column: auto; }
}
/* ===== Live Prices: FUTURISTIC treatment ===== */
:root{ --neon1:#2e6cff; --neon2:#14f195; --neon3:#f59e0b; }
#live-crypto{ position: relative; isolation: isolate; }
#live-crypto .ticker-viewport{
position: relative;
background: color-mix(in oklab, var(--card) 60%, transparent);
border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg) 6%, transparent) inset, 0 10px 30px rgba(0,0,0,.18);
backdrop-filter: saturate(130%) blur(8px);
}
#live-crypto .ticker-viewport::before{
content:""; position:absolute; inset:-2px; border-radius:inherit;
background: conic-gradient(from var(--spin,0deg), var(--neon1), var(--neon2), var(--neon3), var(--neon1));
filter: blur(8px); opacity:.35; z-index:-1; animation: spinAura 16s linear infinite;
}
#live-crypto .ticker-viewport::after{
content:""; position:absolute; left:6px; right:6px; top:6px; height:2px;
background: linear-gradient(90deg, var(--neon1), var(--neon2), var(--neon3)); opacity:.5; border-radius:2px; pointer-events:none;
}
@keyframes spinAura { to{ --spin:360deg; } }
#live-crypto .market-left{ position:relative; }
#live-crypto .market-left::after{
content:""; position:absolute; inset:0; pointer-events:none; border-radius:14px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
background-image: repeating-linear-gradient(to right, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 6px);
opacity:.08;
}
#live-crypto .ticker-chip{
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
border-radius: 999px;
box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 6px 18px rgba(0,0,0,.08);
}
html[data-theme="dark"] #live-crypto .ticker-chip{ background: linear-gradient(180deg, rgba(20,27,46,.75), rgba(20,27,46,.55)); border-color:#2b3752; }
#live-crypto .ticker-chip .coin{ border-radius:50%; box-shadow: 0 0 0 1px rgba(255,255,255,.14); filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
#live-crypto .ticker-chip .sym{
background-image: linear-gradient(90deg, #9ecbff, #b892ff); -webkit-background-clip:text; background-clip:text; color:transparent;
}
#live-crypto .ticker-chip .chg.up{ color:#22c55e; text-shadow:0 0 12px rgba(34,197,94,.25); }
#live-crypto .ticker-chip .chg.down{ color:#ef4444; text-shadow:0 0 12px rgba(239,68,68,.25); }
@media (prefers-reduced-motion: reduce){ #live-crypto .ticker-viewport::before{ animation:none; opacity:.18; } .ticker-track{ animation-duration:60s; } }
/* ===== Live Prices: Futuristic + smoother ===== */
#live-crypto .ticker-viewport{
background: color-mix(in oklab, var(--card) 58%, transparent);
border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
backdrop-filter: saturate(135%) blur(10px);
will-change: transform;
contain: content;
}
#live-crypto .ticker-viewport::before{
opacity: .28;
filter: blur(10px);
animation: spinAura 28s linear infinite; /* slower aura for calmer feel */
}
#live-crypto .ticker-viewport::after{
opacity: .35;
}
.ticker-track{
display: inline-flex;
align-items: center;
gap: 0;
white-space: nowrap;
will-change: transform;
animation: tickerMove3D 48s linear infinite; /* longer, smoother loop */
transform: translate3d(0,0,0);
backface-visibility: hidden;
}
@keyframes tickerMove3D {
from { transform: translate3d(0,0,0); }
to { transform: translate3d(-33.3333%,0,0); } /* triple track width */
}
/* Chip polish */
#live-crypto .ticker-chip{
position: relative;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
#live-crypto .ticker-chip::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.14) 15%, transparent 32%);
transform: translateX(-120%);
animation: chipShimmer 8s ease-in-out infinite;
pointer-events: none;
}
@keyframes chipShimmer {
0%, 24% { transform: translateX(-120%); }
40% { transform: translateX(120%); }
100% { transform: translateX(120%); }
}
#live-crypto .ticker-chip:hover{
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
/* Icon micro-parallax on hover */
#live-crypto .ticker-chip .coin{
transition: transform .25s ease, filter .25s ease;
}
#live-crypto .ticker-chip:hover .coin{
transform: translateY(-1px) scale(1.04);
filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
/* Typography smoothing */
#live-crypto .ticker-chip .sym,
#live-crypto .ticker-chip .name,
#live-crypto .ticker-chip .price{
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Edge fade slightly softer to reveal more prices */
#live-crypto .ticker-viewport{
-webkit-mask-image: linear-gradient(90deg, transparent, #000 1%, #000 99%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 1%, #000 99%, transparent);
padding-inline: 14px;
}
/* Reduced motion: calm everything down */
@media (prefers-reduced-motion: reduce){
.ticker-track{ animation-duration: 70s; }
#live-crypto .ticker-chip::after{ animation: none; }
#live-crypto .ticker-viewport::before{ animation: none; opacity: .18; }
}
/* ===== Live Prices: bigger + cooler look ===== */
#live-crypto h2{
font-size: clamp(1.25rem, 1.8vw + 0.7rem, 2rem);
letter-spacing: .3px;
background: linear-gradient(90deg, var(--neon1), var(--neon2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 16px color-mix(in oklab, var(--neon1) 40%, transparent);
}
#live-crypto .markets-note{ opacity: .9; }
#live-crypto .ticker-viewport{
padding-block: 10px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 1%, #000 99%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 1%, #000 99%, transparent);
}
#live-crypto .ticker-viewport::before{ filter: blur(12px); opacity: .32; }
#live-crypto .ticker-viewport::after{ height: 3px; opacity: .45; }
#live-crypto .ticker-chip{
padding: 12px 16px;
gap: 10px;
box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 28px rgba(0,0,0,.15), 0 0 12px rgba(46,108,255,.09);
}
#live-crypto .ticker-chip .coin{ width: 26px; height: 26px; }
#live-crypto .ticker-chip .sym{ font-size: 1.05rem; }
#live-crypto .ticker-chip .name{ font-size: .95rem; }
#live-crypto .ticker-chip .price{ font-size: 1rem; }
#live-crypto .ticker-chip .chg{ font-size: .98rem; }
@media (max-width: 900px){
#live-crypto .ticker-chip{ padding: 10px 14px; }
#live-crypto .ticker-chip .coin{ width: 22px; height: 22px; }
#live-crypto .ticker-chip .sym{ font-size: 1rem; }
#live-crypto .ticker-chip .price, #live-crypto .ticker-chip .chg{ font-size: .95rem; }
}
/* ===== Live Prices: fully transparent background ===== */
#live-crypto .ticker-viewport{
background: transparent !important;
border-color: color-mix(in oklab, var(--fg) 10%, transparent);
backdrop-filter: blur(6px) saturate(120%);
}
/* Tame the neon aura so transparency feels clean */
#live-crypto .ticker-viewport::before{ opacity: .12; filter: blur(8px); }
#live-crypto .ticker-viewport::after{ opacity: .25; }
/* Make scanlines lighter to avoid a foggy look on transparent bg */
#live-crypto .market-left::after{ opacity: .04; }
/* ===== Live Prices: wider + hard clip to prevent overflow ===== */
#live-crypto > .container{
width: min(1680px, 98%);
margin-inline: auto;
}
#live-crypto .market-wrap{
display: grid;
grid-template-columns: 1fr minmax(1200px, 1580px) 1fr;
gap: 18px;
align-items: center;
}
#live-crypto .market-left{ grid-column: 2; }
/* Transparent background stays, but force strict clipping for chips & glows */
#live-crypto .ticker-viewport{
padding-block: 12px; /* give chips breathing room so they don't touch edges */
overflow: clip; /* clip shadows cleanly (modern browsers) */
-webkit-clip-path: inset(0 round 18px);
clip-path: inset(0 round 18px);
border-radius: 18px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5%, #000 98.5%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 1.5%, #000 98.5%, transparent);
}
/* Soften per-chip shadows to reduce edge bleed */
#live-crypto .ticker-chip{
box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 8px 22px rgba(0,0,0,.12);
}
/* Ensure the decorative rail stays inside the clip */
#live-crypto .ticker-viewport::after{
left: 10px; right: 10px; top: 8px;
}
/* Responsive: fall back to single column on narrow screens */
@media (max-width: 1100px){
#live-crypto .market-wrap{ grid-template-columns: 1fr; }
#live-crypto .market-left{ grid-column: auto; }
#live-crypto > .container{ width: 94%; }
}
/* ===== Live Prices: symmetric fade + aurora bg + cooler colors ===== */
/* Section aurora background for a futuristic look (stays behind content) */
#live-crypto{
position: relative;
isolation: isolate;
}
#live-crypto::before{
content: "";
position: absolute;
inset: -48px 0 -36px 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(900px 340px at 12% -8%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
radial-gradient(1000px 360px at 88% -10%, color-mix(in oklab, #14f195 14%, transparent), transparent 68%);
filter: saturate(120%) blur(18px);
opacity: .32;
}
/* Ensure the ticker is above the aurora */
#live-crypto .container,
#live-crypto .ticker-viewport,
#live-crypto .ticker-track { position: relative; z-index: 1; }
/* Heading + subtext color tune */
#live-crypto h2{
background: linear-gradient(90deg, #67e8f9 0%, #22d3ee 40%, #60a5fa 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
text-shadow: 0 0 14px rgba(34,211,238,.25);
}
#live-crypto .markets-note{ opacity: .92; }
/* Transparent viewport with symmetric edge fade and strict clipping */
#live-crypto .ticker-viewport{
background: transparent !important;
border-color: color-mix(in oklab, var(--fg) 12%, transparent);
overflow: clip;
border-radius: 18px;
-webkit-clip-path: inset(0 round 18px);
clip-path: inset(0 round 18px);
/* perfectly symmetric fade */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
padding-block: 12px;
}
/* Decorative rail respects the new padding */
#live-crypto .ticker-viewport::after{ left: 12px; right: 12px; top: 8px; }
/* Cooler price color for readability on transparent bg */
#live-crypto .ticker-chip .price{
color: #d7f3ff;
text-shadow: 0 0 10px rgba(103, 232, 249, .08);
}
/* Keep chip shadows subtle to avoid edge bleed */
#live-crypto .ticker-chip{
box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 8px 22px rgba(0,0,0,.12);
}
/* ===== Live Prices: FINAL enforce styles ===== */
#live-crypto{ position: relative; isolation: isolate; }
#live-crypto::before{
content:"";
position:absolute;
inset:-48px 0 -36px 0;
z-index:0;
pointer-events:none;
background:
radial-gradient(900px 360px at 10% -10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
radial-gradient(1100px 380px at 90% -12%, color-mix(in oklab, #14f195 18%, transparent), transparent 68%);
filter:saturate(130%) blur(18px);
opacity:.45 !important; /* stronger so it's noticeable */
}
/* Heading forced gradient */
#live-crypto h2{
background: linear-gradient(90deg, #67e8f9 0%, #22d3ee 40%, #60a5fa 100%) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
text-shadow: 0 0 16px rgba(34,211,238,.28);
}
#live-crypto .markets-note{ opacity:.95; }
/* Transparent viewport + symmetric fade + strict clip */
#live-crypto .ticker-viewport{
background: transparent !important;
border-color: color-mix(in oklab, var(--fg) 12%, transparent) !important;
overflow: hidden !important;
border-radius: 18px !important;
-webkit-clip-path: inset(0 round 18px) !important;
clip-path: inset(0 round 18px) !important;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%) !important;
mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%) !important;
padding: 12px 16px !important;
}
/* Remove any leftover inner aura so bg stays clean */
#live-crypto .ticker-viewport::before{ display:none !important; }
#live-crypto .ticker-viewport::after{ left:14px !important; right:14px !important; top:8px !important; opacity:.3 !important; }
/* Price color forced (cool cyan) */
#live-crypto .ticker-chip .price{
color:#cfeaff !important;
text-shadow: 0 0 10px rgba(103,232,249,.10);
}
/* Ensure up/down colors remain vivid */
#live-crypto .ticker-chip .chg.up{ color:#22c55e !important; }
#live-crypto .ticker-chip .chg.down{ color:#ef4444 !important; }
/* Slightly brighten symbols */
#live-crypto .ticker-chip .sym{
background-image: linear-gradient(90deg, #a5b4fc, #93c5fd) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color: transparent !important;
}
/* ===== Live Prices: comfortable spacing between chips ===== */
#live-crypto .ticker-track{ gap: 16px; }
@media (max-width: 900px){
#live-crypto .ticker-track{ gap: 10px; }
}
/* ===== Services: radial-gradient background ===== */
#services,
#services.section {
position: relative;
background: radial-gradient(1200px 400px at 85% -10%,
color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
radial-gradient(900px 360px at 10% 0%,
color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%);
}
/* ===== Global: reuse Services radial-gradient across all sections (except hero) ===== */
:root{
--aurora-grad: radial-gradient(1200px 400px at 85% -10%,
color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
radial-gradient(900px 360px at 10% 0%,
color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%);
}
/* Apply to every main section except the hero (which has its own image/blur) */
.section{ position: relative; }
.section:not(.hero){ background: var(--aurora-grad); }
/* Ensure Live Prices section (markets) also gets it */
.section.markets{ background: var(--aurora-grad); }
/* Footer gets a subtle version too for continuity */
.site-footer{ background: var(--aurora-grad), var(--bg); background-blend-mode: normal; }
/* ===== Seamless site background (no lines between sections) ===== */
/* 1) Global gradient lives on a single fixed overlay */
:root{
--aurora-grad: radial-gradient(1200px 400px at 85% -10%,
color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
radial-gradient(900px 360px at 10% 0%,
color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%);
}
html, body{ background: var(--bg); }
body::before{
content:"";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--aurora-grad);
filter: saturate(110%) blur(0.5px);
}
/* 2) Make every section transparent so there are no seams */
.section,
.section:not(.hero),
.section.markets,
#services,
#services.section,
.site-footer{
background: transparent !important;
background-image: none !important;
}
/* 3) Remove any dividing borders that could look like lines */
.site-footer{ border-top: none !important; }
.section + .section{ border-top: none !important; }
/* ===== Re-enable section gradients + add soft transparent separators ===== */
/* Remove the full-page overlay from previous step */
body::before{ display: none !important; }
/* Bring back section gradient */
:root{
--aurora-grad: radial-gradient(1200px 400px at 85% -10%,
color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
radial-gradient(900px 360px at 10% 0%,
color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%);
}
.section{ position: relative; }
.section:not(.hero){ background: var(--aurora-grad); }
/* Soft, subtle top divider between sections */
.section + .section{
box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--fg) 8%, transparent);
}
/* Footer gets a matching subtle top line */
.site-footer{
background: var(--aurora-grad), var(--bg);
box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--fg) 8%, transparent);
}
/* ===== Futuristic soft containers ===== */
:root{
--panel-surface: color-mix(in oklab, var(--card) 72%, transparent);
--panel-surface-strong: color-mix(in oklab, var(--card) 82%, transparent);
--panel-border: color-mix(in oklab, var(--fg) 12%, transparent);
--panel-border-strong: color-mix(in oklab, var(--fg) 18%, transparent);
}
html[data-theme="dark"]{
--panel-surface: color-mix(in oklab, #0f1628 78%, transparent);
--panel-surface-strong: color-mix(in oklab, #101a30 86%, transparent);
--panel-border: #2b3752;
--panel-border-strong: #344569;
}
/* Generic glass panel look */
.futuristic-panel{
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
var(--panel-surface);
border: 1px solid var(--panel-border);
border-radius: 16px;
box-shadow:
0 0 0 1px rgba(255,255,255,.04) inset,
0 10px 30px rgba(0,0,0,.12);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.futuristic-panel:hover{
transform: translateY(-3px);
box-shadow: 0 16px 42px rgba(0,0,0,.16);
border-color: color-mix(in oklab, var(--accent) 28%, var(--panel-border));
}
/* Apply to existing containers */
#services .svc-card,
#services .card,
.pricing .plan,
#impressum .container,
#privacy .container,
#contact .container,
.dropdown,
.lang-menu .menu,
.theme-toggle,
.lang-trigger{
background:
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
var(--panel-surface) !important;
border: 1px solid var(--panel-border) !important;
border-radius: 16px;
box-shadow:
0 0 0 1px rgba(255,255,255,.04) inset,
0 10px 30px rgba(0,0,0,.12) !important;
backdrop-filter: blur(10px) saturate(120%) !important;
-webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}
/* Extra padding for the large text sections so panel feels intentional */
#impressum .container,
#privacy .container,
#contact .container{
padding: 28px !important;
}
/* Inputs get softer surfaces too */
input, textarea, select{
background:
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
var(--panel-surface-strong) !important;
border: 1px solid var(--panel-border) !important;
box-shadow: 0 2px 10px rgba(0,0,0,.06) inset;
}
input:focus, textarea:focus, select:focus{
outline: none;
border-color: color-mix(in oklab, var(--accent) 32%, var(--panel-border)) !important;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 24%, transparent);
}
/* Service cards keep distinct tints but now use glass panel underlay */
html[data-theme="dark"] .svc-card{ background:
linear-gradient(180deg, rgba(20,27,46,.78), rgba(20,27,46,.62)),
var(--panel-surface) !important;
}
/* Small controls subtle glow */
.theme-toggle, .lang-trigger{
box-shadow: 0 8px 22px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}
.theme-toggle:hover, .lang-trigger:hover{
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.06) inset !important;
}
/* Keep menus crisp */
.dropdown a, .lang-menu .menu button{
background: transparent;
}
.dropdown a:hover, .lang-menu .menu button:hover{
background: color-mix(in oklab, var(--accent) 10%, transparent);
}
/* ==== Contact section: ambient blurred background + centered form ==== */
#contact{ position: relative; overflow: hidden; }
#contact::before{
content:""; position:absolute; inset:0;
background-image: url('assets/contact-bg.png');
background-size: cover; background-position: center;
filter: blur(6px);
transform: scale(1.06); /* compensate blur crop */
opacity: .28; /* transparency */
z-index: 0;
}
#contact::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.18)); /* soft dark veil for readability */
z-index: 1;
}
#contact > .container{ position: relative; z-index: 2; }
/* Center the form block and the Send button */
#contact .container{ display:grid; justify-items:center; }
.contact-form{ width:min(760px,92%); margin:0 auto; }
.contact-form .field,
.contact-form input,
.contact-form textarea,
.contact-form select{ width:100%; }
.contact-form .btn.primary{ justify-self:center; }
/* Make panels & inputs slightly more translucent on image */
#contact input, #contact textarea, #contact select{
background:
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
color-mix(in oklab, var(--card) 74%, transparent) !important;
border-color: color-mix(in oklab, var(--fg) 16%, transparent) !important;
}
/* === Language Transition Enhancements (2025-08-17) === */
.lang-switching [data-i18n]{ opacity:.2; filter: blur(2px); transition: opacity 200ms ease, filter 200ms ease; }
/* View Transitions: safe defaults */
::view-transition-old(root), ::view-transition-new(root){ animation-duration: 180ms; animation-timing-function: ease; }
/* === Legal Sections Styling (2025-08-17) === */
section#impressum, section#privacy, section#datenschutz, section[id*="policy"]{
background: linear-gradient(180deg, rgba(99,102,241,0.06), rgba(236,72,153,0.06));
border-radius: 16px; padding: 2rem; margin-block: 2rem;
box-shadow: 0 6px 20px rgba(0,0,0,.05);
}
html[data-theme="dark"] section#impressum, html[data-theme="dark"] section#privacy, html[data-theme="dark"] section#datenschutz, html[data-theme="dark"] section[id*="policy"]{
background: linear-gradient(180deg, rgba(99,102,241,0.12), rgba(236,72,153,0.12));
box-shadow: 0 6px 28px rgba(0,0,0,.25);
}
/* === Smooth Scroll + Reveal (2025-08-17) === */
html{ scroll-behavior: smooth; }
:root{ --nav-offset: 72px; }
@media (min-width: 992px){ :root{ --nav-offset: 84px; } }
.anchor-offset{ scroll-margin-top: var(--nav-offset); }
/* Reveal animations */
[data-animate].will-animate{ opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 600ms ease; }
[data-animate].inview{ opacity: 1; transform: translateY(0); }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
[data-animate].will-animate, [data-animate].inview{ opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* --- Feedback & Reviews --- */
.reviews-list{ display:grid; gap:16px; margin: 8px 0 20px; }
.review-card{ border:1px solid var(--border,#e5e7eb); border-radius:12px; padding:14px; background:var(--card,#fff); box-shadow:0 1px 2px rgba(0,0,0,.04) }
.review-card .meta{ display:flex; align-items:center; gap:8px; font-weight:600 }
.review-card .stars{ font-size:14px; line-height:1; }
.review-card .text{ margin-top:8px; color: var(--muted,#444) }
.review-form{ display:grid; gap:12px; max-width:680px }
.review-form .form-group{ display:grid; gap:6px }
.review-form input[type="text"], .review-form select, .review-form textarea{
border:1px solid var(--border,#e5e7eb); border-radius:10px; padding:10px 12px; outline:none;
}
.review-form button.btn.primary{ align-self:start }
/* === Testimonial Carousel === */
#feedback{ background:#e9e4f3; }
#feedback .container{ padding-top:48px; padding-bottom:56px; text-align:center }
.feedback-hero{ font-size:40px; line-height:1.2; margin:0 0 12px; font-weight:800 }
.feedback-stat{ margin-bottom:28px }
.feedback-stat .stat-number{ font-size:56px; font-weight:800 }
.feedback-stat .stat-sub{ opacity:.8; margin-top:4px }
.feedback-rail-wrap{ position:relative; padding:8px 56px }
.feedback-rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px, 1fr); gap:24px; overflow:hidden }
.tcard{ background:#fff; border-radius:16px; box-shadow:0 2px 14px rgba(0,0,0,.08); padding:24px; text-align:left; position:relative }
.tcard .t-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px }
.tcard .avatar{ width:54px; height:54px; border-radius:50%; object-fit:cover }
.tcard .who .name{ font-weight:700 }
.tcard .company{ font-size:14px; text-decoration:none }
.tcard .quote{ font-size:18px; line-height:1.5; margin:16px 0 18px }
.rail-nav{
position:absolute;
top:50%;
transform: translateY(-50%);
width:44px; height:44px;
border-radius:999px;
border:none;
box-shadow:0 2px 10px rgba(0,0,0,.15);
background:var(--card);
color:var(--fg);
font-size:20px;
display:flex; align-items:center; justify-content:center;
}
.rail-nav.prev{ left:-56px }
.rail-nav.next{ right:-56px }
/* Reviews form (kept simple) */
.feedback-form-wrap{ margin-top:36px; text-align:left; max-width:720px; margin-left:auto; margin-right:auto }
/* Feedback carousel light/dark compatibility */
html[data-theme="dark"] #feedback{ background:#0f1628; }
html[data-theme="dark"] .tcard{ background:#111827; color:#e5e7eb; }
html[data-theme="dark"] .tcard .quote{ color:#d1d5db; }
html[data-theme="dark"] .rail-nav{
position:absolute;
top:50%;
transform: translateY(-50%);
width:44px; height:44px;
border-radius:999px;
border:none;
box-shadow:0 2px 10px rgba(0,0,0,.15);
background:var(--card);
color:var(--fg);
font-size:20px;
display:flex; align-items:center; justify-content:center;
}
/* === Feedback Carousel (theme-aware) === */
#feedback{ background: var(--surface); }
html[data-theme="light"] #feedback{ background:#e9e4f3; }
html[data-theme="dark"] #feedback{ background: #0f1628; }
#feedback .container{ padding-top:48px; padding-bottom:56px; text-align:center; color: var(--fg); }
.feedback-hero{ font-size:40px; line-height:1.2; margin:0 0 12px; font-weight:800; color: var(--fg); }
.feedback-stat .stat-number{ color: var(--accent); }
.feedback-stat .stat-sub{ color: var(--muted-fg, #6b7280); opacity: .9 }
.feedback-rail .tcard{ background: var(--card); color: var(--fg); box-shadow: var(--shadow); }
.tcard .company{ color: var(--accent); }
.rail-nav{
position:absolute;
top:50%;
transform: translateY(-50%);
width:44px; height:44px;
border-radius:999px;
border:none;
box-shadow:0 2px 10px rgba(0,0,0,.15);
background:var(--card);
color:var(--fg);
font-size:20px;
display:flex; align-items:center; justify-content:center;
}
#feedback .tcard {
min-height: 170px;
max-width: 280px;
margin: auto;
}
html[data-theme="dark"]
html[data-theme="dark"] .logo {
filter: invert(1);
}
/* === Footer legal (clean + responsive) === */
footer .footer-legal {
display: flex;
justify-content: center; /* center the two columns as a group */
align-items: flex-start;
gap: 2.5rem; /* space between the two blocks */
margin: 2rem auto 0; /* top margin, center horizontally */
max-width: 1000px; /* prevent over-stretch */
text-align: left; /* keep text aligned properly */
flex-wrap: wrap; /* allow wrap on mid screens */
}
footer .footer-legal .legal-col {
flex: 1 1 420px; /* grow/shrink with a comfortable base width */
min-width: 260px;
max-width: 520px;
}
footer .footer-legal h5 {
font-size: inherit; /* same as footer text */
font-weight: 600;
margin-bottom: 0.5rem;
}
footer .footer-legal p,
footer .footer-legal span {
font-size: 0.95rem;
margin: 0.25rem 0;
}
/* Stack columns on small screens */
@media (max-width: 768px) {
footer .footer-legal {
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
footer .footer-legal .legal-col {
flex: 1 1 100%;
max-width: 520px;
}
}
footer .footer-legal .legal-col {
flex: 1 1 40%;
min-width: 260px;
}
footer .footer-legal h5 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
footer .footer-legal p,
footer .footer-legal span {
font-size: 0.95rem;
margin: 0.25rem 0;
}
/* On mobile, stack vertically */
@media (max-width: 768px) {
footer .footer-legal {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.25rem;
}
footer .footer-legal .legal-col {
flex: 1 1 100%;
max-width: 500px;
}
}
/* Impressum aligned under copyright */
footer .footer-legal #footer-impressum {
flex: 1 1 50%;
}
/* Privacy pushed a bit right */
footer .footer-legal #footer-privacy {
flex: 1 1 50%;
padding-left: 3rem; /* nudge it to the right */
}
footer .footer-legal h5 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
footer .footer-legal p,
footer .footer-legal span {
font-size: 0.95rem;
margin: 0.25rem 0;
}
/* Stack nicely on small screens */
@media (max-width: 768px) {
footer .footer-legal {
flex-direction: column;
gap: 1rem;
padding-left: 0;
align-items: flex-start;
}
footer .footer-legal #footer-privacy {
padding-left: 0;
}
}
/* put footer icon block above privacy content and align */
#footer-privacy .footer-icons {
display: flex;
gap: 0.75rem;
margin-bottom: 0.75rem;
align-items: center;
}
#footer-privacy .footer-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* icons above privacy */
#footer-privacy .footer-icons { display: flex; gap: .75rem; margin-bottom: .75rem; align-items: center; }
@media (max-width: 768px) {
footer .footer-legal { grid-template-columns: 1fr; }
}
/* --- Privacy page minimal futuristic touch --- */
.policy-container { max-width: 960px; margin: 4rem auto 3rem; padding: 1rem; }
.policy-container .policy-hero {
padding: 1.25rem 1rem;
border-radius: 14px;
border: 1px solid var(--border);
background: linear-gradient(135deg, rgba(127,127,213,0.08), rgba(134,168,231,0.08), rgba(145,234,228,0.08));
box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.12);
}
.policy-container h1 {
font-size: 2rem;
margin-bottom: .5rem;
background: linear-gradient(90deg, #8ec5fc, #e0c3fc);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.policy-container h2 { font-size: 1.15rem; margin-top: 1.25rem; }
.policy-container p { line-height: 1.7; margin: .5rem 0; }
/* --- Footer (horizontal, responsive) --- */
footer { margin-top: 3rem; padding: 1.5rem 1rem; }
footer .footer-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
footer .footer-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
border-top: 1px solid var(--border);
padding-top: .75rem;
margin-bottom: 1rem;
}
footer .footer-top .footer-icons { display:flex; gap:.5rem; align-items:center; }
footer .footer-top .back-to-top { white-space: nowrap; }
footer .footer-legal {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
}
#footer-privacy .footer-icons { display: none; } /* icons live in top row now */
footer .legal-col h5 { font-size: 1rem; margin: 0 0 .5rem; }
@media (max-width: 640px) {
footer .footer-top { justify-content: center; gap: .75rem; }
footer .footer-legal { grid-template-columns: 1fr; }
}
/* --- Privacy page futuristic background & navbar size --- */
body[data-page="privacy"]::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(600px 300px at 20% 15%, rgba(142,197,252,0.12), transparent 60%),
radial-gradient(500px 260px at 80% 20%, rgba(224,195,252,0.10), transparent 60%),
radial-gradient(700px 320px at 50% 80%, rgba(145,234,228,0.08), transparent 60%);
z-index: 0;
}
body[data-page="privacy"] .policy-container { position: relative; z-index: 1; }
/* Navbar consistent sizing */
.site-header .nav-container { padding: 10px 0; }
.site-header .nav-list a { line-height: 1; padding: 8px 10px; }
/* === Futuristic Theme Additions === */
:root{
--bg-0: #05070e;
--bg-1: #0b1020;
--bg-2: #121a33;
--neon: #00f5ff;
--neon-2: #8a2be2;
--glass: rgba(255,255,255,0.06);
--border-glass: rgba(255,255,255,0.18);
}
body.futuristic {
background:
radial-gradient(1200px 600px at 10% -10%, rgba(0,245,255,0.12), transparent 60%),
radial-gradient(900px 500px at 90% -20%, rgba(138,43,226,0.10), transparent 60%),
radial-gradient(1000px 600px at 50% 120%, rgba(0,245,255,0.08), transparent 60%),
linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2));
min-height: 100vh;
background-attachment: fixed;
position: relative;
overflow-x: hidden;
}
/* animated grid overlay */
body.futuristic::before{
content:"";
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 44px 44px, 44px 44px;
mask-image: radial-gradient(circle at 50% 20%, black 20%, transparent 80%);
pointer-events: none;
animation: gridFloat 18s linear infinite;
}
@keyframes gridFloat {
0% { transform: translateY(0px); }
100% { transform: translateY(44px); }
}
/* Navbar */
.site-header {
position: sticky; top: 0; z-index: 1000;
background: linear-gradient(180deg, rgba(5,7,14,0.85), rgba(5,7,14,0.55));
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-container { display: flex; align-items: center; justify-content: space-between; }
.nav .nav-list { display: flex; gap: 0.5rem; align-items: center; }
.nav .nav-item > a { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: 10px; }
.nav .nav-item > a .nav-ico { width: 18px; height: 18px; opacity: .9 }
.nav .nav-item > a:hover { background: var(--glass); }
.nav .nav-item.active > a { outline: 1px solid var(--neon); box-shadow: 0 0 0 3px rgba(0,245,255,0.12) inset; }
/* Dropdown enhancement */
.nav .dropdown {
background: rgba(12,16,30,0.92);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid var(--border-glass);
border-radius: 12px; padding: .5rem; box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
/* Cards */
.policy-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.neon-card {
background: rgba(12,16,30,0.66);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid var(--border-glass);
border-radius: 16px;
padding: 1rem 1.1rem;
box-shadow: 0 0 0 1px rgba(0,245,255,0.08) inset, 0 10px 30px rgba(0,0,0,.25);
}
.neon-card h3 {
display: flex; align-items: center; gap: .5rem;
font-size: 1.05rem; margin: 0 0 .4rem 0;
}
.neon-dot {
width: 8px; height: 8px; border-radius: 999px;
background: radial-gradient(circle, var(--neon), transparent 70%);
box-shadow: 0 0 12px var(--neon);
}
/* Policy page hero */
.policy-hero h1 {
letter-spacing: .5px;
text-shadow: 0 0 20px rgba(0,245,255,.25);
}
/* Footer alignment fix on privacy */
#footer-privacy { border-top: 1px solid rgba(255,255,255,0.08); }
/* === Theme-specific header backgrounds (fixes light gray) === */
html[data-theme="light"] .site-header {
background: #ffffff !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
html[data-theme="dark"] .site-header {
background: linear-gradient(180deg, rgba(5,7,14,0.92), rgba(5,7,14,0.70)) !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Fix header vertical alignment & top gap */
.site-header { margin-top: 0 !important; }
.site-header .nav-container { min-height: 64px; padding: 10px 16px; }
body { margin-top: 0 !important; }
/* === Theme-specific body backgrounds for futuristic mode === */
html[data-theme="light"] body.futuristic {
background:
radial-gradient(1200px 600px at 10% -10%, rgba(0,0,0,0.04), transparent 60%),
radial-gradient(900px 500px at 90% -20%, rgba(0,0,0,0.03), transparent 60%),
linear-gradient(180deg, #ffffff, #f6f7fb 40%, #eef1f9);
}
html[data-theme="dark"] body.futuristic {
background:
radial-gradient(1200px 600px at 10% -10%, rgba(0,245,255,0.12), transparent 60%),
radial-gradient(900px 500px at 90% -20%, rgba(138,43,226,0.10), transparent 60%),
radial-gradient(1000px 600px at 50% 120%, rgba(0,245,255,0.08), transparent 60%),
linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2));
}
/* make the grid overlay subtle only in dark mode */
html[data-theme="light"] body.futuristic::before { display: none; }
html[data-theme="dark"] body.futuristic::before { display: block; }
/* Navbar alignment & link color per theme */
.site-header .nav-container { align-items: center; }
html[data-theme="light"] .site-header .nav a { color: #0b0f19; }
html[data-theme="dark"] .site-header .nav a { color: #e7ecf7; }
.logo svg { vertical-align: middle; }
.nav .nav-item > a { line-height: 1; }
/* === Footer compact horizontal (patched) === */
.site-footer {
border-top: 1px solid #e0e0e0;
padding: 12px 0;
font-size: 0.9rem;
background: var(--card, #fff);
}
.footer-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
}
.footer-left { justify-self: start; }
.footer-center { justify-self: center; text-align: center; }
.footer-right { justify-self: end; display: flex; gap: 12px; align-items: center; }
.footer-right a { text-decoration: none; }
@media (max-width: 768px) {
.footer-row { grid-template-columns: 1fr; text-align: center; }
.footer-left, .footer-center, .footer-right { justify-self: center; }
}
/* === How It Works (futuristic) === */
.hiw{
position:relative;
padding:72px 0;
background: linear-gradient(180deg, rgba(124,92,255,0.06), rgba(110,231,255,0.04));
}
.hiw::before{
content:"";
position:absolute; inset:0;
background-image:
radial-gradient(circle at 20% 10%, rgba(124,92,255,0.12), transparent 40%),
radial-gradient(circle at 80% 90%, rgba(110,231,255,0.12), transparent 45%),
repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 60px);
pointer-events:none;
}
.hiw-title{
text-align:center;
font-weight:800;
letter-spacing:.3px;
margin:0 0 28px;
}
.hiw-steps{
display:grid;
grid-template-columns: 1fr 120px 1fr 120px 1fr;
gap:24px;
align-items:center;
}
.hiw-card{
position:relative;
background:color-mix(in srgb, var(--card, #0b1023) 85%, rgba(255,255,255,0.1));
border:1px solid var(--border, rgba(255,255,255,0.08));
border-radius:20px;
padding:28px 24px 24px;
box-shadow: var(--shadow, 0 10px 24px rgba(0,0,0,.35));
backdrop-filter: saturate(140%) blur(8px);
min-height: 240px;
}
.hiw-badge{
position:absolute; top:-22px; left:20px;
width:66px; height:66px; border-radius:50%;
display:grid; place-items:center;
background: radial-gradient(120% 120% at 30% 30%, #7c5cff, #2dd4ff);
color:#fff; border:2px solid rgba(255,255,255,.25);
box-shadow: 0 6px 18px rgba(124,92,255,.35);
}
.hiw-badge svg{ width:28px; height:28px; opacity:.95; }
.hiw-badge span{
position:absolute; right:-8px; top:-8px;
width:26px; height:26px; border-radius:50%;
display:grid; place-items:center;
background: var(--bg, #0b0f19);
color: var(--fg, #e5e7eb);
font-size:.8rem; font-weight:700;
border:1px solid var(--border, rgba(255,255,255,.18));
}
.hiw-card-title{ margin:56px 0 8px; font-weight:800; }
.hiw-card-text{ opacity:.9; line-height:1.6; }
.hiw-arrow{ display:flex; align-items:center; justify-content:center; }
.hiw-arrow svg{ width:120px; height:8px; filter:drop-shadow(0 0 6px rgba(124,92,255,.5)); }
@media (max-width: 1000px){
.hiw-steps{ grid-template-columns: 1fr; }
.hiw-arrow{ display:none; }
.hiw{ padding:56px 0; }
}
/* === Transparent Futuristic How It Works Section === */
#how-it-works {
position: relative;
padding: 80px 20px;
background: transparent;
color: #fff;
overflow: hidden;
}
.hiw-card {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
border-radius: 18px;
padding: 30px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hiw-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 25px rgba(124, 92, 255, 0.35);
}
/* === HIW: remove overlay + fix contrast for light/dark === */
#how-it-works {
/* transparent background keeps page theme visible */
background: transparent;
}
/* Default (assume dark-friendly) */
#how-it-works, #how-it-works .hiw-card, #how-it-works .hiw-card * {
color: inherit;
}
/* Card base styles remain glassy */
#how-it-works .hiw-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
}
/* Light mode overrides: ensure text is readable and card is lighter */
@media (prefers-color-scheme: light) {
#how-it-works { color: #0b0f19; }
#how-it-works .hiw-card {
background: rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0.1);
}
#how-it-works .hiw-card .hiw-card-title,
#how-it-works .hiw-card .hiw-card-text { color: #0b0f19; }
}
/* Fallback if site uses a data-theme or class for light mode */
body[data-theme="light"] #how-it-works,
body.light #how-it-works {
color: #0b0f19;
}
body[data-theme="light"] #how-it-works .hiw-card,
body.light #how-it-works .hiw-card {
background: rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0.1);
}
body[data-theme="light"] #how-it-works .hiw-card .hiw-card-title,
body.light #how-it-works .hiw-card .hiw-card-title,
body[data-theme="light"] #how-it-works .hiw-card .hiw-card-text,
body.light #how-it-works .hiw-card .hiw-card-text {
color: #0b0f19;
}
/* === Services: futuristic background === */
#services {
position: relative;
background: linear-gradient(135deg, rgba(0,120,255,0.75), rgba(120,0,200,0.75)) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
padding: 60px 0;
}
/* Ensure cards stay readable */
#services .service-card {
position: relative;
z-index: 1;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#services .service-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
/* Light mode adjustments */
@media (prefers-color-scheme: light) {
#services { color:#0b0f19; }
#services .service-card {
background: rgba(255,255,255,0.9);
border: 1px solid rgba(0,0,0,0.1);
}
#services .service-card * { color:#0b0f19; }
}
body[data-theme="light"] #services,
body.light #services { color:#0b0f19; }
body[data-theme="light"] #services .service-card,
body.light #services .service-card {
background: rgba(255,255,255,0.9);
border: 1px solid rgba(0,0,0,0.1);
}
body[data-theme="light"] #services .service-card *,
body.light #services .service-card * { color:#0b0f19; }
/* Futuristic FAQ Accordion Styling */
.futuristic-accordion .accordion-item {
border: none;
margin-bottom: 1rem;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease-in-out;
}
[data-theme="dark"] .futuristic-accordion .accordion-item {
box-shadow: 0 4px 25px rgba(0,0,0,0.6);
}
.futuristic-accordion .accordion-button {
background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
color: #fff;
font-weight: 500;
transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
[data-theme="dark"] .futuristic-accordion .accordion-button {
background: linear-gradient(135deg, #0d6efd, #6610f2);
}
.futuristic-accordion .accordion-body {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
line-height: 1.6;
padding: 1.5rem;
}
/* === FAQ Page Themed Background === */
.faq-hero {
position: relative;
padding: 72px 0;
background:
radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.18), transparent 60%),
radial-gradient(800px 400px at 110% 10%, rgba(16,185,129,.18), transparent 60%),
linear-gradient(180deg, color-mix(in oklab, var(--bg), transparent 20%), var(--bg));
}
html[data-theme="dark"] .faq-hero {
background:
radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.22), transparent 60%),
radial-gradient(800px 400px at 110% 10%, rgba(16,185,129,.22), transparent 60%),
linear-gradient(180deg, color-mix(in oklab, var(--bg), #0b0f19 0%), var(--bg));
}
.faq-hero .faq-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow);
padding: 24px;
}
/* Smooth accordion transitions */
.accordion .accordion-collapse {
transition: height .3s ease, opacity .25s ease;
}
/* === Futuristic Nav Enhancements (v1) === */
:root{
--neon-1:#00e5ff;
--neon-2:#7c3aed;
--neon-3:#00ffa3;
--glass:rgba(255,255,255,.06);
--glass-dark:rgba(0,0,0,.25);
}
/* Header glass with subtle animated gradient border */
.site-header{
position: sticky; top:0; z-index: 80;
background: color-mix(in srgb, var(--surface) 82%, transparent);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
isolation:isolate;
}
.site-header::after{
content:""; position:absolute; inset:0 -1px;
pointer-events:none; z-index:-1;
background: linear-gradient(90deg,var(--neon-1),var(--neon-2),var(--neon-3));
opacity:.25; filter: blur(16px);
mask: linear-gradient(#000,transparent 30%);
}
/* Center container refinement */
.nav-container{padding-block:10px}
/* Logo: gradient text with gentle glow */
.logo span{
background: linear-gradient(90deg,var(--neon-1),var(--neon-2),var(--neon-3));
-webkit-background-clip:text; background-clip:text; color:transparent;
text-shadow: 0 0 10px color-mix(in srgb, var(--neon-2) 30%, transparent);
}
/* Nav list spacing */
.nav-list{gap:10px}
/* Link base */
.nav-item>a{
position:relative;
border-radius:12px;
padding:10px 14px;
transition: transform .2s ease, background .2s ease, color .2s ease;
will-change: transform;
}
/* Futuristic underline + glow on hover/focus */
.nav-item>a::after{
content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
background: linear-gradient(90deg,var(--neon-1),var(--neon-2));
border-radius:2px; transform:scaleX(0); transform-origin:left;
transition: transform .25s ease;
filter: drop-shadow(0 0 6px var(--neon-2));
}
.nav-item>a:is(:hover,:focus-visible){
background: color-mix(in srgb, var(--glass) 80%, transparent);
transform: translateY(-1px);
}
.nav-item>a:is(:hover,:focus-visible)::after{ transform:scaleX(1); }
/* Active item pill */
.nav-item.is-active>a{
background: linear-gradient(90deg, color-mix(in srgb, var(--neon-2) 12%, transparent), transparent);
box-shadow: 0 6px 20px rgba(124,58,237,.15) inset, 0 1px 0 rgba(255,255,255,.06);
outline: 1px solid color-mix(in srgb, var(--neon-2) 35%, transparent);
}
/* Dropdown: floating panel with 3D-ish entry */
.has-dropdown>.dropdown{
background: color-mix(in srgb, var(--surface) 96%, transparent);
border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
border-radius:14px;
box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.02) inset;
transform-origin: top center;
transform: perspective(800px) translateY(8px) rotateX(-9deg) scale(.98);
opacity:0; visibility:hidden;
transition: opacity .18s ease, transform .22s ease, visibility 0s linear .18s;
backdrop-filter: blur(10px) saturate(120%);
}
.has-dropdown:hover>.dropdown,
.has-dropdown:focus-within>.dropdown,
.nav.open .has-dropdown.open>.dropdown{
opacity:1; visibility:visible;
transform: perspective(800px) translateY(0) rotateX(0) scale(1);
transition: opacity .18s ease, transform .22s ease;
}
.dropdown a{
padding:10px 12px; border-radius:10px;
}
.dropdown a:hover{
background: color-mix(in srgb, var(--glass) 85%, transparent);
}
/* Hamburger: morph to X with glow */
.hamburger{
--bar: 2px;
width: 42px; height: 38px; display:grid; place-items:center;
border-radius:12px; border:1px solid color-mix(in srgb, var(--border) 60%, transparent);
background: color-mix(in srgb, var(--surface) 90%, transparent);
box-shadow: 0 2px 10px rgba(0,0,0,.1);
transition: background .2s ease, transform .2s ease;
}
.hamburger span{display:block; width:22px; height:var(--bar); background:var(--fg);
border-radius:10px; transition:transform .24s ease, opacity .2s ease, width .2s ease;
box-shadow: 0 0 10px color-mix(in srgb, var(--neon-1) 35%, transparent);
}
.hamburger span:nth-child(2){ width:16px }
.hamburger:is(:hover,:focus-visible){ transform: translateY(-1px) }
.hamburger.active span:nth-child(1){ transform: translateY(6px) rotate(45deg) }
.hamburger.active span:nth-child(2){ opacity:0 }
.hamburger.active span:nth-child(3){ transform: translateY(-6px) rotate(-45deg) }
.hamburger.active span{ width:22px }
/* Mobile menu panel slide-down */
@media (max-width: 900px){
.nav{ position: absolute; inset: calc(100% + 8px) 0 auto 0; padding: 12px 16px; }
.nav-list{
display:grid; gap:8px; padding:12px;
background: color-mix(in srgb, var(--surface) 96%, transparent);
border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
border-radius:16px;
backdrop-filter: blur(12px) saturate(120%);
box-shadow: 0 14px 40px rgba(0,0,0,.22);
transform: translateY(-8px); opacity:0; pointer-events:none;
transition: transform .22s ease, opacity .18s ease;
}
.nav.open .nav-list{ transform: translateY(0); opacity:1; pointer-events:auto; }
.has-dropdown>.dropdown{ position: relative; border:none; background:transparent; box-shadow:none; backdrop-filter:none }
}
/* Subtle scroll shrink */
@media (min-width: 901px){
.site-header.shrink .nav-item>a{ padding:8px 12px }
.site-header.shrink .logo span{ text-shadow:none }
}
/* === Custom Adjustments v2 === */
/* TrustoryX logo color to black */
.logo span {
background: none !important;
color: #000 !important;
text-shadow: none !important;
}
/* Dropdown hover delay (1s before open, stays open briefly) */
@media(hover:hover) and (pointer:fine){
.nav-item.has-dropdown>.dropdown {
transition-delay: 1s !important;
}
.nav-item.has-dropdown:hover>.dropdown {
display:flex;
transition-delay:0s !important;
}
}
/* === Custom requests (2025-08-25) === */
/* Hide hamburger button globally */
.hamburger{ display:none !important; }
/* Make brand text black in both themes */
.logo span{
color:#000 !important;
background:none !important;
-webkit-background-clip:initial !important;
background-clip:initial !important;
text-shadow:none !important;
}
html[data-theme="dark"] .logo span{ color:#000 !important; }
/* Keep dropdown visible when JS adds .open (desktop) */
.has-dropdown.open > .dropdown{
opacity:1; visibility:visible;
transform: perspective(800px) translateY(0) rotateX(0) scale(1);
transition: opacity .18s ease, transform .22s ease;
}
/* === Fix nav stuck background & hover usability === */
/* Prevent focus background sticking after click */
.nav-item > a:focus{
background:none !important;
outline:none !important;
}
/* Ensure only hover/active state shows background */
.nav-item > a:active{
background: color-mix(in srgb, var(--glass) 75%, transparent);
}
/* Dropdown hover buffer: keep open while hovering parent or dropdown */
.has-dropdown.open > .dropdown{
pointer-events:auto;
}
/* === Nav UX fixes (hover bridge, focus reset) === */
/* 1) Prevent "stuck" background when links receive focus by mouse */
body.using-mouse .nav-item>a:focus,
body.using-mouse .nav-item>a:focus-visible{
background: transparent !important;
outline: none;
}
/* Ensure :active doesn't keep the background */
.nav-item>a:active{
background: transparent !important;
}
/* 2) Create a small invisible "hover bridge" to avoid gaps between the parent item and dropdown */
.has-dropdown{ position: relative; }
.has-dropdown::after{
content:""; position:absolute; left:0; right:0; top:100%;
height:14px; /* bridge height */
pointer-events:auto;
/* Transparent but participates in hover so the li doesn't lose :hover while crossing the gap */
}
/* 3) Make dropdown a bit more tolerant to cursor movement */
.has-dropdown > .dropdown{
margin-top: 6px; /* reduce gap so bridge works better */
will-change: opacity, transform;
}
/* === 2025-08-25 Updates === */
/* Logo text: force black in all modes */
.logo span{
color:#000 !important;
background:none !important;
-webkit-background-clip:initial !important;
background-clip:initial !important;
text-shadow:none !important;
}
/* Remove background colors on nav items completely */
.nav-item>a{
background:transparent !important;
}
.nav-item>a:hover,
.nav-item>a:focus,
.nav-item>a:active,
.nav-item.is-active>a{
background:transparent !important;
outline:none !important;
}
/* === Brand color per theme === */
html[data-theme="light"] .logo span{ color:#000 !important; background:none !important; text-shadow:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; }
html[data-theme="dark"] .logo span{ color:#fff !important; background:none !important; text-shadow:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; }
/* No background on press/click for nav items */
.nav-item>a:active,
body.using-mouse .nav-item>a:focus,
body.using-mouse .nav-item>a:focus-visible{
background: transparent !important;
outline: none;
}
/* === Remove all background colors from nav items === */
.nav-item>a,
.nav-item>a:hover,
.nav-item>a:focus,
.nav-item>a:focus-visible,
.nav-item>a:active{
background: transparent !important;
box-shadow: none !important;
}
/* === Remove hover/press background on nav items === */
.nav-item > a:hover,
.nav-item > a:focus,
.nav-item > a:focus-visible,
.nav-item > a:active{
background: transparent !important;
box-shadow: none !important;
outline: none !important;
}