/* ========================================================= VS WEBDESIGN — GLOBAL STYLESHEET (styles.css) - Consolidated from: home, services, showcase, pricing, about, contact, webdesign - Theme rules locked: ✅ Light = pure white background, NO background effects, cyan glow on UI ✅ Dark = true black background, no cosmic layer ✅ Official = cosmic background ========================================================= */ /* =========================== ROOT TOKENS (DEFAULT = OFFICIAL/COSMIC) =========================== */ :root{ --nav-bg:#000; --dropdown-bg:#2a2a2a; --dropdown-hover:#3a3a3a; --text-color:#fff; /* Brand accents */ --accent:#5cb3ff; --accent2:#b56bff; --accent3:#ff4fd8; --primary:#000; --dark:#000; --light:#f8f9fa; /* Theme surface tokens */ --page-bg:transparent; /* official uses cosmic layer */ --surface:rgba(0,0,0,0.45); --surface-2:rgba(0,0,0,0.55); --border:rgba(255,255,255,0.18); --heading:#fff; --body-text:#fff; --muted-text:rgba(255,255,255,0.92); /* Light theme section band */ --light-band:#f5f7fb; /* NAV / UI TOKENS */ --tab-bg:rgba(0,0,0,0.55); --tab-border:rgba(255,255,255,0.22); --tab-text:#fff; --tab-hover-border:rgba(181,107,255,0.55); --tab-hover-glow1:rgba(181,107,255,0.35); --tab-hover-glow2:rgba(92,179,255,0.25); --tab-hover-bg: radial-gradient(circle at 25% 30%, rgba(181,107,255,0.35), transparent 55%), radial-gradient(circle at 70% 70%, rgba(92,179,255,0.28), transparent 60%), rgba(0,0,0,0.55); --sheen:rgba(255,255,255,0.18); --sheen2:rgba(181,107,255,0.22); /* Common “card” tokens used on multiple pages */ --card-bg:rgba(0,0,0,0.28); --card-border:rgba(255,255,255,0.12); --chip-bg:rgba(0,0,0,0.45); --chip-border:rgba(255,255,255,0.14); --shadow-strong:rgba(0,0,0,0.35); --shadow-soft:rgba(92,179,255,0.10); --glow:rgba(255,255,255,0.18); --glow-strong:rgba(255,255,255,0.28); --hover-border:rgba(181,107,255,0.42); /* Home “6 things” accent (theme overridden) */ --needs-accent:#24C9F3; /* About page circle tokens (theme overridden) */ --about-ring-style:dashed; --about-ring-width:3px; --about-ring-color:rgba(255,255,255,0.40); --about-ring-glow1:rgba(255,255,255,0.18); --about-ring-glow2:rgba(255,255,255,0.08); --about-frame-bg:#fff; --about-placeholder:rgba(0,0,0,0.60); /* Contact page tokens (theme controlled) */ --card-shadow:0 12px 35px rgba(0,0,0,0.45); --field-bg:rgba(0,0,0,0.35); --field-border:rgba(255,255,255,0.18); --field-text:var(--body-text); --field-placeholder:rgba(255,255,255,0.60); --focus-border:rgba(36,201,243,0.55); --focus-ring:rgba(36,201,243,0.12); --btn-bg:var(--tab-bg); --btn-border:var(--tab-border); --btn-text:var(--tab-text); --btn-hover-bg:var(--tab-hover-bg); --btn-hover-border:var(--tab-hover-border); --btn-glow1:var(--tab-hover-glow1); --btn-glow2:var(--tab-hover-glow2); --success-bg:rgba(36,201,243,0.10); --success-border:rgba(36,201,243,0.35); --error-text:#ff9bb8; --invalid-border:rgba(255,79,216,0.55); } /* =========================== BASE / GLOBAL =========================== */ html,body{margin:0;padding:0;height:100%;} html{background:#000;} /* stable baseline */ body{ font-family:'Open Sans',sans-serif; color:var(--body-text); line-height:1.6; overflow-x:hidden; min-height:100vh; position:relative; z-index:0; background:var(--page-bg); /* sticky footer patch (kept) */ display:flex; flex-direction:column; } /* theme must apply to too (kept) */ html.theme-light,html[data-theme="light"]{background:#fff !important;} html.theme-dark,html[data-theme="dark"]{background:#000 !important;} html.theme-official,html[data-theme="official"]{background:#000 !important;} h1,h2,h3{font-family:'Playfair Display',serif;color:var(--heading);} .container{ max-width:1200px; margin:0 auto; padding:0 20px; } /* Brand highlight used everywhere */ .vs-highlight{color:#24C9F3;} /* =========================== COSMIC BACKGROUND LAYER =========================== */ .vs-bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(circle at 30% 20%, rgba(181,107,255,0.20), transparent 45%), radial-gradient(circle at 70% 70%, rgba(92,179,255,0.18), transparent 50%), #000; } .vs-bg::before, .vs-bg::after{ content:""; position:absolute; inset:-50%; background-repeat:repeat; mix-blend-mode:screen; pointer-events:none; } .vs-bg::before{ background-image: radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 1.5px), radial-gradient(circle, rgba(181,107,255,0.22) 1px, transparent 1.8px), radial-gradient(circle, rgba(92,179,255,0.20) 1px, transparent 1.8px); background-size:120px 120px,180px 180px,240px 240px; opacity:0.65; filter:blur(0.3px); animation:vsDrift 18s linear infinite; } .vs-bg::after{ background-image: radial-gradient(circle, rgba(92,179,255,0.22) 2px, transparent 3.5px), radial-gradient(circle, rgba(255,215,0,0.08) 2px, transparent 4px), radial-gradient(circle, rgba(181,107,255,0.18) 3px, transparent 6px); background-size:260px 260px,340px 340px,420px 420px; opacity:0.45; filter:blur(0.6px); animation:vsDrift2 28s linear infinite; } @keyframes vsDrift{ 0%{transform:translate3d(0,0,0) rotate(0deg);} 100%{transform:translate3d(12%,10%,0) rotate(18deg);} } @keyframes vsDrift2{ 0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);} 100%{transform:translate3d(-10%,-8%,0) rotate(-14deg) scale(1.05);} } @media (prefers-reduced-motion:reduce){ .vs-bg::before,.vs-bg::after{animation:none;} } /* =========================== THEME OVERRIDES =========================== */ /* OFFICIAL (cosmic) — keep background effects */ body.theme-official{ --page-bg:transparent; --surface:rgba(0,0,0,0.45); --surface-2:rgba(0,0,0,0.55); --border:rgba(255,255,255,0.18); --heading:#fff; --body-text:#fff; --muted-text:rgba(255,255,255,0.92); --nav-bg:#000; --text-color:#fff; --tab-bg:rgba(0,0,0,0.55); --tab-border:rgba(255,255,255,0.22); --tab-text:#fff; --tab-hover-border:rgba(181,107,255,0.55); --tab-hover-glow1:rgba(181,107,255,0.35); --tab-hover-glow2:rgba(92,179,255,0.25); --tab-hover-bg: radial-gradient(circle at 25% 30%, rgba(181,107,255,0.35), transparent 55%), radial-gradient(circle at 70% 70%, rgba(92,179,255,0.28), transparent 60%), rgba(0,0,0,0.55); --sheen:rgba(255,255,255,0.18); --sheen2:rgba(181,107,255,0.22); --card-bg:rgba(0,0,0,0.28); --card-border:rgba(255,255,255,0.12); --hover-border:rgba(181,107,255,0.42); --glow:rgba(255,255,255,0.18); --needs-accent:rgba(181,107,255,0.92); /* About ring = purple glow */ --about-ring-style:solid; --about-ring-width:3px; --about-ring-color:rgba(255,255,255,0.55); --about-ring-glow1:rgba(181,107,255,0.55); --about-ring-glow2:rgba(181,107,255,0.22); } /* DARK — true black, no cosmic layer */ body.theme-dark{ --page-bg:#000; --surface:rgba(0,0,0,0.55); --surface-2:rgba(0,0,0,0.68); --border:rgba(255,255,255,0.16); --heading:#fff; --body-text:#fff; --muted-text:rgba(255,255,255,0.85); --nav-bg:#000; --text-color:#fff; --tab-bg:rgba(0,0,0,0.55); --tab-border:rgba(255,255,255,0.22); --tab-text:#fff; --tab-hover-border:rgba(255,255,255,0.55); --tab-hover-glow1:rgba(255,255,255,0.22); --tab-hover-glow2:rgba(255,255,255,0.10); --tab-hover-bg: radial-gradient(circle at 25% 30%, rgba(255,255,255,0.10), transparent 60%), rgba(0,0,0,0.55); --sheen:rgba(255,255,255,0.18); --sheen2:rgba(255,255,255,0.10); --card-bg:rgba(0,0,0,0.55); --card-border:rgba(255,255,255,0.18); --hover-border:rgba(255,255,255,0.55); --glow:rgba(255,255,255,0.12); --needs-accent:rgba(255,255,255,0.90); /* About ring = WHITE glow */ --about-ring-style:dashed; --about-ring-width:3px; --about-ring-color:rgba(255,255,255,0.55); --about-ring-glow1:rgba(255,255,255,0.35); --about-ring-glow2:rgba(255,255,255,0.16); } /* LIGHT — pure white, no bg effects, cyan glow on UI */ body.theme-light{ --page-bg:#fff; --surface:rgba(255,255,255,0.82); --surface-2:rgba(255,255,255,0.92); --border:rgba(0,0,0,0.12); --heading:#0b0b0b; --body-text:#0b0b0b; --muted-text:rgba(0,0,0,0.75); --nav-bg:#fff; --text-color:#0b0b0b; --tab-bg:rgba(255,255,255,0.78); --tab-border:rgba(0,0,0,0.12); --tab-text:#111; --tab-hover-border:rgba(36,201,243,0.55); --tab-hover-glow1:rgba(36,201,243,0.28); --tab-hover-glow2:rgba(36,201,243,0.14); --tab-hover-bg: radial-gradient(circle at 25% 30%, rgba(36,201,243,0.22), transparent 60%), rgba(255,255,255,0.82); --sheen:rgba(255,255,255,0.55); --sheen2:rgba(36,201,243,0.22); --card-bg:rgba(255,255,255,0.92); --card-border:rgba(0,0,0,0.10); --hover-border:rgba(36,201,243,0.38); --glow:rgba(36,201,243,0.18); --needs-accent:#24C9F3; /* About ring = cyan glow, crisp */ --about-ring-style:solid; --about-ring-width:3px; --about-ring-color:rgba(36,201,243,0.72); --about-ring-glow1:rgba(36,201,243,0.34); --about-ring-glow2:rgba(36,201,243,0.18); /* Contact tokens in light */ --card-shadow:0 12px 35px rgba(0,0,0,0.12); --field-bg:rgba(255,255,255,0.95); --field-border:rgba(0,0,0,0.12); --field-text:#111; --field-placeholder:rgba(17,17,17,0.45); --focus-border:rgba(36,201,243,0.75); --focus-ring:rgba(36,201,243,0.18); --btn-bg:rgba(255,255,255,0.78); --btn-border:rgba(0,0,0,0.12); --btn-text:#111; --btn-hover-border:rgba(36,201,243,0.75); --btn-hover-bg: radial-gradient(circle at 25% 30%, rgba(36,201,243,0.24), transparent 60%), rgba(255,255,255,0.82); --btn-glow1:rgba(36,201,243,0.30); --btn-glow2:rgba(36,201,243,0.16); --success-bg:rgba(36,201,243,0.12); --success-border:rgba(36,201,243,0.30); --error-text:#b8003a; --invalid-border:rgba(184,0,58,0.45); } /* Apply background behavior locks */ body.theme-dark .vs-bg{display:none !important;} body.theme-dark{background:#000 !important;} body.theme-light .vs-bg{background:#fff !important;} body.theme-light .vs-bg::before, body.theme-light .vs-bg::after{ display:none !important; animation:none !important; opacity:0 !important; filter:none !important; } /* =========================== NAVBAR / NAV LINKS =========================== */ .navbar{ background:var(--nav-bg); color:var(--text-color); width:100%; position:fixed; top:0; left:0; z-index:999; transition:box-shadow 0.3s ease; } .navbar.scrolled{box-shadow:0 4px 20px rgba(0,0,0,0.5);} .nav-container{ display:grid; grid-template-columns:260px 1fr 260px; align-items:center; padding:10px 20px; position:relative; } .logo{ display:inline-flex; align-items:center; justify-content:flex-start; text-decoration:none; width:260px; } .logo img{ height:90px; width:260px; object-fit:contain; object-position:left center; display:block; background:transparent; border:none; padding:0; border-radius:0; transform:none; } body.theme-light .logo img, body.theme-dark .logo img, body.theme-official .logo img{ transform:none !important; translate:none !important; } .nav-links{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:0; margin:0; padding:0; width:100%; max-width:1100px; justify-self:center; } .dropdown{position:relative;} .dropdown .dropbtn span.arrow{ margin-left:2px; display:inline-block; transition:transform .3s ease; opacity:0.9; } .dropdown:hover .dropbtn span.arrow{transform:rotate(180deg);} /* Shared “pill” style (nav + dropdown + badges + pagination + modal buttons + CTAs) */ .nav-links > li > a, .nav-links > li > .dropbtn, .dropdown-menu li a, .badge, .page-pill, .preview-btn, .about-btn, .btn, .vs-btn, .settings-btn{ color:var(--tab-text) !important; text-decoration:none !important; background:var(--tab-bg); border:1px solid var(--tab-border); border-radius:12px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-weight:600; line-height:1; white-space:nowrap; position:relative; overflow:hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; } /* Variants / sizing */ .nav-links > li > a, .nav-links > li > .dropbtn{padding:12px 22px !important;font-weight:600 !important;} .dropdown-menu li a{padding:12px 22px !important;border-radius:12px !important;width:max-content !important;} .badge{padding:8px 12px;border-radius:999px;font-size:.92rem;backdrop-filter:blur(4px);} .page-pill{min-width:46px;height:46px;padding:0 14px;font-weight:900;letter-spacing:.2px;justify-content:center;} .preview-btn{padding:10px 12px;font-weight:800;} .preview-close{width:42px;height:42px;font-size:1.15rem;justify-content:center;} .about-btn{padding:12px 18px;font-weight:700;border-radius:12px;} .btn{padding:12px 16px;font-weight:800;border-radius:12px;} .vs-btn{ display:flex; justify-content:center; gap:10px; margin:22px auto 0; padding:12px 18px; border-radius:14px; font-weight:800; width:fit-content; box-shadow:0 0 18px var(--shadow-soft); overflow:visible; } .settings-btn{width:44px;height:44px;justify-content:center;} /* Shared hover */ .nav-links > li > a:hover, .nav-links > li > .dropbtn:hover, .dropdown-menu li a:hover, .badge:hover, .page-pill:hover, .page-pill.active, .preview-btn:hover, .about-btn:hover, .btn:hover, .vs-btn:hover, .settings-btn:hover{ transform:translateY(-1px); border-color:var(--tab-hover-border) !important; background:var(--tab-hover-bg) !important; box-shadow:0 0 14px var(--tab-hover-glow1),0 0 22px var(--tab-hover-glow2); } .vs-btn:hover, .price-card:hover, .simple-card:hover, .addon-item:hover, .website-card:hover, .vs-card:hover, .why-item:hover, .t-card:hover, .glass-card:hover, .glass-card:focus-within{ transform:translateY(-2px); } /* Sheen effect (shared) */ .nav-links > li > a::after, .nav-links > li > .dropbtn::after, .dropdown-menu li a::after, .badge::after, .page-pill::after, .price-card::after, .simple-card::after{ content:""; position:absolute; top:-40%; left:-60%; width:60%; height:180%; background:linear-gradient(90deg,transparent,var(--sheen),var(--sheen2),transparent); transform:rotate(20deg); opacity:0; transition:opacity .15s ease; pointer-events:none; } .nav-links > li > a:hover::after, .nav-links > li > .dropbtn:hover::after, .dropdown-menu li a:hover::after, .badge:hover::after, .page-pill:hover::after, .price-card:hover::after, .simple-card:hover::after{ opacity:1; animation:navSheen .8s ease forwards; } @keyframes navSheen{0%{left:-60%;}100%{left:120%;}} .nav-links li a:focus, .nav-links li a:focus-visible, .dropbtn:focus, .dropbtn:focus-visible{ outline:none !important; box-shadow:none !important; } /* Dropdown */ .dropdown-menu{ max-height:0; overflow:hidden; opacity:0; background:var(--nav-bg); transition:max-height .3s ease,opacity .3s ease; border-radius:12px; position:absolute; top:100%; left:0; width:max-content; list-style:none; padding:8px; margin:10px 0 0; flex-direction:column; z-index:999; border:1px solid rgba(255,255,255,0.12); box-shadow:0 10px 30px rgba(0,0,0,0.55); } @media (min-width:801px){ .dropdown:hover>.dropdown-menu{max-height:500px;opacity:1;display:flex;} } /* Hamburger */ .hamburger{ justify-self:end; display:none; flex-direction:column; cursor:pointer; } .hamburger span{ width:27px; height:3px; background:var(--text-color); margin:4px 0; transition:0.3s; } @media (max-width:900px){ .nav-container{grid-template-columns:220px 1fr 260px;} .nav-links{max-width:900px;} .nav-links > li > a, .nav-links > li > .dropbtn{padding:10px 16px !important;} } @media (max-width:800px){ .nav-container{grid-template-columns:1fr 60px;} .nav-links{ position:absolute; top:100px; left:0; background:var(--nav-bg); width:100%; flex-direction:column; justify-content:flex-start; gap:10px; padding:12px 0; max-height:0; overflow:hidden; transition:max-height .4s ease; max-width:none; } .nav-links.open{max-height:1000px;} .hamburger{display:flex;} .nav-links>li{width:100%;} .nav-links>li>a, .nav-links>li>.dropbtn{ width:calc(100% - 30px) !important; margin:0 15px !important; justify-content:center !important; } .logo img{height:72px;width:220px;} } /* Light mobile dropdown background */ @media (max-width:800px){ body.theme-light .nav-links{background:#fff !important;} } /* =========================== HERO / HEADER / FOOTER =========================== */ header{ background:var(--surface); backdrop-filter:blur(6px); color:var(--body-text); text-align:center; padding:90px 20px 80px; margin-top:80px; border-bottom:1px solid rgba(255,255,255,0.08); } header h1{ font-size:3.4rem; margin:0; color:var(--heading); } header p{ font-size:1.25rem; max-width:780px; margin:18px auto; color:var(--muted-text); opacity:0.95; } header .container{ display:flex; flex-direction:column; align-items:center; justify-content:center; } header h1,header p{text-align:center !important;} body.theme-light header{ background:#fff !important; backdrop-filter:none !important; border-bottom:1px solid rgba(0,0,0,0.06) !important; color:#111 !important; } body.theme-light header h1{color:#111 !important;} body.theme-light header p{color:rgba(17,17,17,0.75) !important;} footer{ background:var(--surface-2); color:var(--body-text); text-align:center; padding:50px 20px; border-top:1px solid rgba(255,255,255,0.08); margin-top:auto; /* sticky footer patch */ } body.theme-light footer{ background:#fff !important; color:#111 !important; border-top:1px solid rgba(0,0,0,0.10) !important; } body.theme-light footer p{color:#111 !important;opacity:0.9;} /* =========================== SETTINGS (BOTTOM-RIGHT FLOATING) =========================== */ .settings-area{display:none !important;} .settings-fab{ position:fixed; right:18px; bottom:18px; z-index:99998; display:flex; align-items:center; justify-content:center; pointer-events:auto; } .settings-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(3px); z-index:99999; display:none; } .settings-overlay.open{display:block;} .settings-panel{ position:fixed; bottom:84px; right:18px; width:min(380px,calc(100% - 36px)); background:rgba(0,0,0,0.82); border:1px solid rgba(255,255,255,0.18); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,0.55); padding:14px; z-index:100000; display:none; color:#fff; } .settings-panel.open{display:block;} body.theme-light .settings-panel{ background:rgba(255,255,255,0.92); border:1px solid rgba(0,0,0,0.10); box-shadow:0 20px 60px rgba(0,0,0,0.18); color:#111; } .settings-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.10); margin-bottom:12px; } body.theme-light .settings-header{border-bottom:1px solid rgba(0,0,0,0.10);} .settings-title{ font-family:'Playfair Display',serif; font-size:1.2rem; margin:0; } .settings-close{ background:transparent; border:1px solid rgba(255,255,255,0.22); color:inherit; border-radius:10px; width:36px; height:36px; cursor:pointer; display:flex; align-items:center; justify-content:center; } body.theme-light .settings-close{border:1px solid rgba(0,0,0,0.12);} .settings-section{ margin:12px 0; padding:12px; border-radius:14px; background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.12); } body.theme-light .settings-section{ background:rgba(255,255,255,0.75); border:1px solid rgba(0,0,0,0.10); } .settings-section h3{ margin:0 0 10px; font-size:1rem; font-family:'Open Sans',sans-serif; font-weight:800; letter-spacing:.2px; } .settings-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .opt-pill{ display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; background:rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.14); cursor:pointer; user-select:none; color:inherit; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; } .opt-pill:hover{ transform:translateY(-1px); border-color:var(--tab-hover-border); box-shadow:0 0 12px var(--tab-hover-glow1); } body.theme-light .opt-pill{ background:rgba(255,255,255,0.92); border:1px solid rgba(0,0,0,0.10); } .opt-pill input{accent-color:#24C9F3;transform:translateY(.5px);} .settings-help{margin-top:8px;font-size:.9rem;opacity:.9;} @media (max-width:800px){ .settings-fab{right:12px;bottom:12px;} .settings-panel{right:12px;bottom:76px;} } /* =========================== WEB DESIGN PAGE — HERO BADGES =========================== */ .hero-badges{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; } /* =========================== HOME PAGE — SECTIONS / CARDS / ANIMATIONS =========================== */ .vs-main{padding:22px 0 0;} .vs-section{ margin:22px 0; padding:0; background:transparent; border:0; scroll-margin-top:120px; } @media (max-width:800px){.vs-section{scroll-margin-top:110px;}} .vs-section h2{ margin:0 0 10px; font-size:2.15rem; letter-spacing:.2px; text-align:center; } .vs-section > .container > p{ margin:10px auto 0; max-width:980px; color:var(--muted-text); opacity:.95; text-align:justify; text-justify:inter-word; hyphens:auto; } .vs-section > .container > p.vs-center{ text-align:center; text-justify:unset; hyphens:none; } .vs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:22px; align-items:stretch; } .vs-card{ border:1px solid var(--card-border); border-radius:18px; padding:18px 18px 16px; background:var(--card-bg); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; display:flex; flex-direction:column; align-items:flex-start; /* patch kept */ } body.theme-official .vs-card{ background: radial-gradient(circle at 20% 18%, rgba(181,107,255,0.10), transparent 55%), radial-gradient(circle at 85% 80%, rgba(92,179,255,0.08), transparent 60%), var(--card-bg); } .vs-card:hover{ border-color:var(--hover-border); box-shadow:0 0 18px var(--glow),0 12px 30px var(--shadow-strong); } .vs-card-head{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; text-align:center; align-items:center; /* patch kept */ justify-content:center; width:100%; } /* icon blocks (kept + centered hard override) */ .vs-ic,.why-ic{ width:48px; height:48px; border-radius:16px; display:flex !important; align-items:center !important; justify-content:center !important; background:var(--chip-bg); border:1px solid var(--chip-border); box-shadow:0 0 18px var(--shadow-soft); flex:0 0 auto; font-size:1.05rem; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .vs-ic > i,.vs-ic > svg,.vs-ic > img, .why-ic > i,.why-ic > svg,.why-ic > img{ display:block !important; margin:0 auto !important; line-height:1 !important; position:relative !important; top:0 !important; left:0 !important; transform:none !important; } body.theme-light .vs-ic{ box-shadow:0 0 16px rgba(36,201,243,0.20),inset 0 0 0 1px rgba(36,201,243,0.10); border-color:rgba(36,201,243,0.28); } body.theme-dark .vs-ic{ box-shadow:0 0 16px rgba(255,255,255,0.10),inset 0 0 0 1px rgba(255,255,255,0.06); } /* card text – professional alignment patch (kept) */ .vs-card h3{ margin:0; margin-bottom:14px; font-size:1.22rem; line-height:1.2; text-align:center; color:var(--heading); } .vs-card p{ margin:0; color:var(--muted-text); font-size:0.98rem; flex:1; max-width:36ch; line-height:1.55; letter-spacing:.01em; text-align:left; hyphens:none; word-break:normal; opacity:0.9; } @media (max-width:900px){.vs-card p{max-width:100%;}} .vs-list{ margin:18px auto 0; padding-left:18px; color:var(--muted-text); opacity:.95; max-width:980px; columns:2; column-gap:28px; text-align:left; } .vs-list li{margin:8px 0;break-inside:avoid;} @media (max-width:900px){ .vs-grid{grid-template-columns:1fr;} .vs-list{columns:1;} } /* Home: who we build for layout */ .clients-section{padding-bottom:44px;} .clients-section .vs-grid{ grid-template-columns:repeat(3,1fr); gap:26px; margin-top:30px; } .clients-section .vs-card{padding:30px 28px 28px;border-radius:24px;} .clients-section .vs-ic{width:60px;height:60px;border-radius:18px;font-size:1.25rem;} .clients-section .vs-card h3{font-size:1.4rem;text-align:center;margin-bottom:6px;} .clients-section .vs-card p{font-size:1.05rem;line-height:1.75;text-align:left;hyphens:none;max-width:none;opacity:.95;} @media (max-width:1100px){.clients-section .vs-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:700px){.clients-section .vs-grid{grid-template-columns:1fr;}} /* Home: scroll spacing */ .scroll-section{ padding-top:min(40vh,420px); padding-bottom:min(22vh,260px); } @media (max-width:800px){.scroll-section{padding-top:52vh;padding-bottom:30vh;}} /* Home: Why section reveal list */ .why-wrap{ margin-top:18px; max-width:980px; margin-left:auto; margin-right:auto; display:grid; gap:14px; } .why-item{ position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--card-border); background:var(--card-bg); padding:16px 18px; display:flex; align-items:flex-start; gap:12px; opacity:0; transform:translateY(10px); transition:opacity .55s ease,transform .55s ease,border-color .18s ease,box-shadow .18s ease; } body.theme-official .why-item{ background: radial-gradient(circle at 20% 18%, rgba(181,107,255,0.08), transparent 55%), radial-gradient(circle at 85% 80%, rgba(92,179,255,0.06), transparent 60%), var(--card-bg); } .why-item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:rgba(255,255,255,0.22); } body.theme-light .why-item::before{background:rgba(36,201,243,0.40);} body.theme-dark .why-item::before{background:rgba(255,255,255,0.35);} body.theme-official .why-item::before{background:rgba(181,107,255,0.45);} .why-ic{ width:42px; height:42px; border-radius:14px; box-shadow:0 0 14px var(--shadow-soft); margin-top:2px; font-size:1rem; } .why-text{flex:1;min-width:0;} .why-title{ margin:0 0 4px; font-family:'Open Sans',sans-serif; font-weight:800; letter-spacing:.2px; font-size:1.02rem; color:var(--heading); line-height:1.25; } .why-desc{ margin:0; color:var(--muted-text); opacity:.95; font-size:.98rem; line-height:1.65; text-align:left; hyphens:none; } .why-item.inview{opacity:1;transform:translateY(0);} .why-item:hover{ border-color:var(--hover-border); box-shadow:0 0 18px var(--glow),0 12px 30px var(--shadow-strong); } .why-item::after{ content:""; position:absolute; top:-40%; left:-70%; width:60%; height:200%; transform:rotate(18deg); opacity:0; transition:opacity .18s ease; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.16),rgba(181,107,255,0.16),transparent); } body.theme-light .why-item::after{ background:linear-gradient(90deg,transparent,rgba(36,201,243,0.10),rgba(36,201,243,0.18),transparent); } body.theme-dark .why-item::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,0.10),rgba(255,255,255,0.18),transparent); } .why-item:hover::after{opacity:1;animation:whySheen .9s ease forwards;} @keyframes whySheen{0%{left:-70%;}100%{left:130%;}} @media (max-width:700px){ .why-item{padding:14px 14px;} .why-ic{width:40px;height:40px;} } /* Home: 6 Things section */ .needs-section .container{max-width:1200px;} .needs-sub{margin-top:4px !important;font-size:1.05rem;opacity:.92;} .needs-grid{ margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:34px 60px; align-items:start; } @media (max-width:1100px){.needs-grid{grid-template-columns:repeat(2,1fr);gap:28px 40px;}} @media (max-width:650px){.needs-grid{grid-template-columns:1fr;gap:26px;}} .need-item{ position:relative; background:transparent; text-align:left; opacity:0; transform:translateY(10px); transition:opacity .55s ease,transform .55s ease; } .need-item.inview{opacity:1;transform:translateY(0);} .need-num{ font-size:4.2rem; font-weight:900; line-height:1; letter-spacing:.5px; color:var(--needs-accent); margin:0 0 8px; user-select:none; } .need-title{ margin:0; font-family:'Open Sans',sans-serif; font-weight:900; letter-spacing:.6px; font-size:1.08rem; text-transform:uppercase; color:var(--heading); } .need-underline{ height:3px; width:180px; background:var(--needs-accent); margin:8px 0 14px; border-radius:999px; opacity:.9; } .need-desc{ margin:0; color:var(--muted-text); opacity:.95; font-size:1.02rem; line-height:1.75; text-align:left; hyphens:none; max-width:520px; } /* Home: timeline */ .process-section{margin-top:30px;} .timeline{ max-width:980px; margin:22px auto 0; position:relative; padding:8px 0; } .timeline::before, .timeline::after{ content:""; position:absolute; left:50%; width:2px; transform:translateX(-50%); } .timeline::before{top:0;bottom:0;background:rgba(255,255,255,0.18);} body.theme-light .timeline::before{background:rgba(0,0,0,0.12);} body.theme-dark .timeline::before{background:rgba(255,255,255,0.22);} .timeline::after{ top:0; height:0%; background:rgba(181,107,255,0.55); box-shadow:0 0 14px rgba(181,107,255,0.25); transition:height .9s ease; } body.theme-light .timeline::after{background:rgba(36,201,243,0.70);box-shadow:0 0 14px rgba(36,201,243,0.22);} body.theme-dark .timeline::after{background:rgba(255,255,255,0.55);box-shadow:0 0 14px rgba(255,255,255,0.18);} .timeline.inview::after{height:100%;} .t-step{ position:relative; display:grid; grid-template-columns:1fr 60px 1fr; align-items:center; padding:18px 0; } .t-dot{ grid-column:2; width:14px; height:14px; border-radius:50%; margin:0 auto; background:rgba(0,0,0,0.65); border:2px solid rgba(255,255,255,0.30); box-shadow:0 0 0 6px rgba(255,255,255,0.06); position:relative; z-index:2; opacity:0; transform:scale(.85); transition:opacity .5s ease,transform .5s ease,box-shadow .2s ease,border-color .2s ease; } body.theme-light .t-dot{ background:rgba(255,255,255,0.90); border-color:rgba(36,201,243,0.55); box-shadow:0 0 0 6px rgba(36,201,243,0.10); } body.theme-dark .t-dot{ background:rgba(0,0,0,0.85); border-color:rgba(255,255,255,0.45); box-shadow:0 0 0 6px rgba(255,255,255,0.08); } body.theme-official .t-dot{ border-color:rgba(181,107,255,0.55); box-shadow:0 0 0 6px rgba(181,107,255,0.12); } .t-card{ border:1px solid var(--card-border); border-radius:18px; background:var(--card-bg); padding:16px 16px 14px; position:relative; overflow:hidden; opacity:0; transform:translateY(12px); transition:opacity .55s ease,transform .55s ease,border-color .18s ease,box-shadow .18s ease; } body.theme-official .t-card{ background: radial-gradient(circle at 20% 18%, rgba(181,107,255,0.08), transparent 55%), radial-gradient(circle at 85% 80%, rgba(92,179,255,0.06), transparent 60%), var(--card-bg); } .t-side-left .t-card{grid-column:1;justify-self:end;width:min(420px,100%);} .t-side-right .t-card{grid-column:3;justify-self:start;width:min(420px,100%);} .t-top{display:flex;align-items:center;gap:10px;margin-bottom:6px;} .t-num{ font-size:.86rem; font-weight:900; padding:6px 10px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--chip-border); white-space:nowrap; } .t-title{ margin:0; font-family:'Playfair Display',serif; font-size:1.25rem; color:var(--heading); line-height:1.2; } .t-desc{ margin:0; color:var(--muted-text); opacity:.95; font-size:.98rem; line-height:1.65; text-align:left; hyphens:none; } .t-step.inview .t-card{opacity:1;transform:translateY(0);} .t-step.inview .t-dot{opacity:1;transform:scale(1);} .t-card:hover{ border-color:var(--hover-border); box-shadow:0 0 18px var(--glow),0 12px 30px var(--shadow-strong); } @media (max-width:900px){ .timeline{padding-left:18px;} .timeline::before,.timeline::after{left:18px;transform:none;} .t-step{grid-template-columns:40px 1fr;gap:12px;} .t-dot{grid-column:1;margin:14px 0 0;} .t-side-left .t-card,.t-side-right .t-card{grid-column:2;justify-self:stretch;width:100%;} } @media (prefers-reduced-motion:reduce){ .t-card,.t-dot,.why-item,.need-item{ transition:none !important; transform:none !important; opacity:1 !important; } .timeline::after{transition:none !important;height:100% !important;} } /* Home CTA button */ .vs-cta{ display:flex; justify-content:center; align-items:center; padding:26px 20px 44px; } /* Home click burst particles (kept) */ .vs-burst{position:absolute;inset:0;pointer-events:none;overflow:visible;} .vs-particle{ position:absolute; width:10px; height:10px; border-radius:999px; left:var(--x); top:var(--y); transform:translate(-50%,-50%) scale(1); background:rgba(255,255,255,0.85); box-shadow:0 0 10px rgba(255,255,255,0.22),0 0 18px rgba(181,107,255,0.18),0 0 22px rgba(92,179,255,0.14); animation:vsPop 520ms ease-out forwards; } body.theme-light .vs-particle{ background:rgba(36,201,243,0.85); box-shadow:0 0 14px rgba(36,201,243,0.28),0 10px 24px rgba(0,0,0,0.08); } body.theme-dark .vs-particle{ background:rgba(255,255,255,0.85); box-shadow:0 0 14px rgba(255,255,255,0.22),0 0 22px rgba(255,255,255,0.12); } @keyframes vsPop{ 0%{opacity:1;transform:translate(-50%,-50%) scale(.9);filter:blur(0px);} 100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.25);filter:blur(.4px);} } .vs-ring{ position:absolute; left:var(--x); top:var(--y); width:12px; height:12px; border-radius:999px; transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,0.55); box-shadow:0 0 18px rgba(255,255,255,0.14); opacity:.9; animation:vsRing 520ms ease-out forwards; pointer-events:none; } body.theme-light .vs-ring{border-color:rgba(36,201,243,0.65);box-shadow:0 0 18px rgba(36,201,243,0.22);} body.theme-dark .vs-ring{border-color:rgba(255,255,255,0.65);box-shadow:0 0 18px rgba(255,255,255,0.16);} @keyframes vsRing{ 0%{opacity:.9;transform:translate(-50%,-50%) scale(.6);} 100%{opacity:0;transform:translate(-50%,-50%) scale(4.2);} } /* =========================== SERVICES PAGE — HELP DESK BANNER =========================== */ .vs-helpdesk-banner{ width:100%; box-sizing:border-box; border-radius:16px; padding:16px; margin:0 0 16px; text-align:center; background:#FFF4D6; border:1px solid #EBCB7A; color:#6B5200; display:flex; align-items:center; justify-content:center; gap:12px; max-width:100%; } .vs-helpdesk-banner i{font-size:1.1rem;line-height:1;flex:0 0 auto;} .vs-helpdesk-banner span{display:inline-block;font-weight:800;letter-spacing:.2px;line-height:1.35;} body.theme-dark .vs-helpdesk-banner, body.theme-official .vs-helpdesk-banner{ background:rgba(255,216,77,0.16); border:1px solid rgba(255,216,77,0.34); color:#FFD84D; } /* Banner collapses inside card until hover/focus */ .vs-card .vs-helpdesk-banner{ max-height:0; padding:0; margin:0; opacity:0; overflow:hidden; pointer-events:none; border-width:0; transition:max-height .22s ease,padding .22s ease,margin .22s ease,opacity .18s ease,border-width .22s ease; } .vs-card:hover .vs-helpdesk-banner, .vs-card:focus-within .vs-helpdesk-banner{ max-height:120px; padding:16px; margin:0 0 16px; opacity:1; pointer-events:auto; border-width:1px; } /* =========================== SHOWCASE PAGE — GRID + MODAL GALLERY =========================== */ .showcase-wrap{padding:70px 0 80px;} body.theme-light .showcase-wrap{background:var(--light-band) !important;} .showcase-card{ background:transparent !important; border:0 !important; padding:0 !important; backdrop-filter:none !important; box-shadow:none !important; } .website-showcase-title{text-align:center;margin:0 0 16px;font-size:2.2rem;} .website-showcase-title .vs-highlight{color:var(--heading) !important;} .website-showcase-subtitle{ text-align:center; margin:0 auto 22px; max-width:860px; color:var(--muted-text); opacity:.95; } .website-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; } @media (max-width:1100px){.website-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:700px){.website-grid{grid-template-columns:1fr;}} .website-card{ cursor:pointer; border-radius:18px; overflow:hidden; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.12); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; position:relative; height:280px; } body.theme-light .website-card{background:rgba(255,255,255,0.72);border:1px solid rgba(0,0,0,0.10);} .website-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:rgba(0,0,0,0.25); } body.theme-light .website-thumb{background:rgba(255,255,255,0.65);} .website-card.thumb-missing .website-thumb, .website-card .website-thumb.img-failed{display:none !important;} .website-card.placeholder{cursor:default;} .website-card.placeholder:hover{ transform:none; border-color:rgba(255,255,255,0.12); background:rgba(0,0,0,0.25); box-shadow:none; } body.theme-light .website-card.placeholder:hover{ border-color:rgba(0,0,0,0.10); background:rgba(255,255,255,0.72); } .website-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.48); opacity:0; transition:opacity .18s ease; pointer-events:none; } body.theme-light .website-overlay{background:rgba(255,255,255,0.55);} .website-card:hover .website-overlay{opacity:1;} .website-preview-btn{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.98); display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; background:var(--tab-bg); border:1px solid var(--tab-border); color:var(--tab-text); font-weight:900; letter-spacing:.2px; opacity:0; transition:opacity .18s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease; pointer-events:none; } .website-card:hover .website-preview-btn{ opacity:1; transform:translate(-50%,-50%) scale(1); border-color:var(--tab-hover-border); background:var(--tab-hover-bg); box-shadow:0 0 14px var(--tab-hover-glow1),0 0 22px var(--tab-hover-glow2); } .website-card.placeholder .website-overlay, .website-card.placeholder .website-preview-btn{display:none !important;} /* Coming Soon (LOCKED: text-only across themes; hide on hover so Preview shows) */ .website-card.thumb-missing{ background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.10); box-shadow:0 18px 60px rgba(0,0,0,.55); } .website-card.thumb-missing::after{ content:"Coming Soon"; position:absolute; left:14px; right:14px; top:50%; transform:translateY(-50%); text-align:center; font-weight:700; letter-spacing:.4px; font-size:14px; pointer-events:none; z-index:3; opacity:.95; transition:opacity .15s ease,transform .15s ease,visibility .15s ease; } /* Light theme */ body.theme-light .website-card.thumb-missing::after{ background:transparent !important; border:0 !important; box-shadow:none !important; backdrop-filter:none !important; color:#000 !important; padding:0 !important; border-radius:0 !important; } /* Dark + Official */ body.theme-dark .website-card.thumb-missing::after, body.theme-official .website-card.thumb-missing::after{ background:transparent !important; border:0 !important; box-shadow:none !important; backdrop-filter:none !important; color:#fff !important; padding:0 !important; border-radius:0 !important; } .website-card.thumb-missing:hover::after, .website-card.thumb-missing:focus-within::after{ opacity:0; transform:translateY(-50%) translateY(6px); } /* Pagination */ .showcase-page{display:none;animation:pageFade .18s ease;} .showcase-page.active{display:block;} @keyframes pageFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}} .showcase-pagination{ display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin-top:30px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.10); } body.theme-light .showcase-pagination{border-top:1px solid rgba(0,0,0,0.08);} /* =========================== GALLERY MODAL (SAFE + SCOPED) =========================== */ /* Locks page scroll only while modal is open */ body.modal-lock{overflow:hidden !important;} /* Base modal (single reliable implementation) */ .preview-modal{ position:fixed; inset:0; z-index:200000; display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease,visibility .18s ease; background:rgba(0,0,0,0.78) !important; backdrop-filter:blur(6px) !important; } .preview-modal.open, .preview-modal.is-open, .preview-modal[aria-hidden="false"]{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; display:grid !important; place-items:center !important; } /* Optional overlay button (kept) */ .preview-overlay{ position:absolute; inset:0; border:0; padding:0; margin:0; background:rgba(0,0,0,.65); cursor:pointer; } /* Panel */ .preview-panel{ position:relative; width:min(1200px,100%); height:min(840px,92vh); max-height:calc(100vh - 48px); background:rgba(0,0,0,0.86); border:1px solid rgba(255,255,255,0.18); border-radius:18px; overflow:auto; -webkit-overflow-scrolling:touch; box-shadow:0 24px 80px rgba(0,0,0,0.65); display:flex; flex-direction:column; } body.theme-light .preview-panel{ background:rgba(255,255,255,0.95); border:1px solid rgba(0,0,0,0.12); box-shadow:0 24px 80px rgba(0,0,0,0.22); } .preview-topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-bottom:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.38); } body.theme-light .preview-topbar{ background:rgba(255,255,255,0.72); border-bottom:1px solid rgba(0,0,0,0.10); } .preview-title{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px; font-size:.98rem; } .preview-actions{display:flex;align-items:center;gap:10px;} .gallery-wrap{ flex:1; display:grid; grid-template-columns:280px 1fr; min-height:0; } @media (max-width:900px){.gallery-wrap{grid-template-columns:1fr;}} .thumb-strip{ border-right:1px solid rgba(255,255,255,0.12); padding:12px; overflow:auto; background:rgba(0,0,0,0.35); } body.theme-light .thumb-strip{ background:rgba(255,255,255,0.72); border-right:1px solid rgba(0,0,0,0.10); } .thumb-btn{ width:100%; border:1px solid rgba(255,255,255,0.14); background:rgba(0,0,0,0.25); padding:8px; border-radius:14px; cursor:pointer; margin-bottom:10px; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; text-align:left; color:inherit; } body.theme-light .thumb-btn{background:rgba(255,255,255,0.86);border:1px solid rgba(0,0,0,0.10);} .thumb-btn:hover{transform:translateY(-1px);border-color:var(--tab-hover-border);box-shadow:0 0 12px var(--tab-hover-glow1);} .thumb-btn.active{border-color:var(--tab-hover-border);box-shadow:0 0 14px var(--tab-hover-glow1),0 0 22px var(--tab-hover-glow2);} .thumb-img{ width:100%; height:120px; object-fit:cover; border-radius:10px; display:block; background:rgba(0,0,0,0.2); margin:0; } body.theme-light .thumb-img{background:rgba(255,255,255,0.7);} .thumb-cap{display:none !important;} .viewer{ position:relative; min-height:0; display:flex; flex-direction:column; background:rgba(0,0,0,0.20); } body.theme-light .viewer{background:rgba(255,255,255,0.80);} .viewer-main{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:14px; position:relative; /* patch kept */ border-radius:16px; /* patch kept */ overflow:hidden; /* patch kept */ } .viewer-main img, #mainShot{ max-width:100%; max-height:100%; border-radius:14px; border:1px solid rgba(255,255,255,0.14); box-shadow:0 20px 60px rgba(0,0,0,0.55); background:rgba(0,0,0,0.25); display:block; width:100%; height:auto; } body.theme-light .viewer-main img, body.theme-light #mainShot{ border:1px solid rgba(0,0,0,0.10); box-shadow:0 20px 60px rgba(0,0,0,0.18); background:rgba(255,255,255,0.9); } #mainShot.img-failed{opacity:0;} /* viewer controls (merged duplicate blocks) */ .viewer-controls{ display:flex; justify-content:space-between; gap:10px; padding:12px 12px 14px; border-top:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.28); align-items:flex-end; /* from later block */ } body.theme-light .viewer-controls{ background:rgba(255,255,255,0.72); border-top:1px solid rgba(0,0,0,0.10); } .viewer-note{font-weight:800;opacity:.92;} /* Showcase — image description */ .viewer-desc{ flex:1; margin:0 14px; display:flex; flex-direction:column; gap:6px; max-width:640px; } .viewer-desc label{ font-size:12px; font-weight:800; opacity:.85; margin:0; } .viewer-desc textarea{ resize:none; min-height:48px; max-height:72px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--field-bg); color:var(--field-text); font-size:.92rem; } .viewer-desc textarea:focus{ border-color:var(--focus-border); box-shadow:0 0 0 3px var(--focus-ring); } .viewer-desc textarea[readonly]{opacity:.85;cursor:default;} .viewer-desc-hint{font-size:11px;opacity:.7;} @media (max-width:700px){ .viewer-controls{flex-direction:column;align-items:stretch;gap:10px;} .viewer-desc{margin:0;max-width:none;} .viewer-nav{display:flex;justify-content:space-between;} } /* Gallery EMPTY main preview (theme matched) — requires .preview-modal.is-empty set by JS */ .preview-modal.is-empty .viewer-main{ position:relative; overflow:hidden; border-radius:16px; } .preview-modal.is-empty #mainShot{ opacity:0 !important; visibility:hidden !important; } .preview-modal.is-empty .viewer-main::after{ content:"Nothing to preview"; position:absolute; inset:0; display:grid; place-items:center; font-weight:700; letter-spacing:.4px; pointer-events:none; } body.theme-dark .preview-modal.is-empty .viewer-main, body.theme-official .preview-modal.is-empty .viewer-main{ background:rgba(0,0,0,.45) !important; border:1px solid rgba(255,255,255,.10) !important; } body.theme-dark .preview-modal.is-empty .viewer-main::after, body.theme-official .preview-modal.is-empty .viewer-main::after{ color:rgba(255,255,255,.92) !important; } body.theme-light .preview-modal.is-empty .viewer-main{ background:#fff !important; border:1px solid rgba(0,0,0,.18) !important; } body.theme-light .preview-modal.is-empty .viewer-main::after{color:#000 !important;} /* =========================== PRICING PAGE =========================== */ .pricing-section{padding:60px 0;} body.theme-light main.pricing-section{background:var(--light-band) !important;} /* pricing container wider patch */ .pricing-section .container{max-width:1400px;} @media (min-width:1500px){.pricing-section .container{max-width:1500px;}} .pricing-intro{ text-align:center; max-width:960px; margin:0 auto 28px; color:var(--muted-text); font-size:1.05rem; opacity:.96; } .pricing-grid{ display:grid; grid-template-columns:repeat(3,minmax(360px,1fr)); gap:22px; align-items:stretch; margin-top:18px; } @media (min-width:1500px){.pricing-grid{grid-template-columns:repeat(3,minmax(380px,1fr));}} .price-card, .simple-card{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:18px; backdrop-filter:blur(6px); position:relative; overflow:hidden; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; } .price-card:hover, .simple-card:hover{ border-color:var(--tab-hover-border); background:var(--tab-hover-bg); box-shadow:0 0 16px var(--tab-hover-glow1),0 0 26px var(--tab-hover-glow2); } /* ✅ prevent price text from clipping */ .price-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:8px; flex-wrap:wrap; } .price-top > div{flex:1 1 260px;min-width:240px;} .price-title{margin:0;font-size:1.7rem;line-height:1.1;} .price-amount{ flex:0 0 auto; max-width:100%; white-space:nowrap; font-size:clamp(1.8rem,4vw,2.1rem); } @media (max-width:520px){ .price-top{flex-direction:column;align-items:flex-start;} .price-amount{margin-top:6px;} } .price-sub{margin:6px 0 12px;color:var(--muted-text);opacity:.95;font-size:1rem;} .features{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .features li{ display:flex; gap:10px; align-items:flex-start; color:var(--body-text); opacity:.96; } .features i{margin-top:3px;color:#24C9F3;min-width:18px;} .plan-meta{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.10); display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; color:var(--muted-text); font-size:.95rem; opacity:.95; } body.theme-light .plan-meta{border-top:1px solid rgba(0,0,0,0.10);} .tag{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background:var(--tab-bg); border:1px solid var(--tab-border); color:var(--tab-text); font-weight:800; font-size:.85rem; letter-spacing:.2px; white-space:nowrap; } .pricing-subsection{ margin-top:30px; padding:26px 0 0; border-top:1px solid rgba(255,255,255,0.10); } body.theme-light .pricing-subsection{border-top:1px solid rgba(0,0,0,0.10);} .section-title{text-align:center;margin:0 0 14px;font-size:2.1rem;} .two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;} .simple-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px;} .simple-top h3{margin:0;font-size:1.5rem;line-height:1.1;} .simple-top .amt{font-family:'Playfair Display',serif;font-size:1.9rem;margin:0;white-space:nowrap;} .addons{ margin-top:30px; padding:26px 0 60px; border-top:1px solid rgba(255,255,255,0.10); } body.theme-light .addons{border-top:1px solid rgba(0,0,0,0.10);} .addons-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;} .addon-item{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px; backdrop-filter:blur(6px); display:flex; gap:10px; align-items:flex-start; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; } .addon-item:hover{ border-color:var(--tab-hover-border); background:var(--tab-hover-bg); box-shadow:0 0 16px var(--tab-hover-glow1),0 0 26px var(--tab-hover-glow2); } .addon-item i{margin-top:3px;color:#24C9F3;min-width:20px;} .addon-item strong{display:block;margin-bottom:2px;} .fineprint{ text-align:center; color:var(--muted-text); opacity:.95; max-width:980px; margin:18px auto 0; font-size:.95rem; } @media (max-width:1000px){ .pricing-grid{grid-template-columns:1fr;} .two-col{grid-template-columns:1fr;} .addons-grid{grid-template-columns:1fr;} header h1{font-size:2.8rem;} } /* =========================== ABOUT PAGE =========================== */ .about-page-title{ margin:0 0 10px; text-align:center; font-family:'Playfair Display',serif; font-weight:700; font-size:clamp(30px,3.2vw,40px); line-height:1.1; letter-spacing:.4px; color:#fff; text-shadow:0 0 18px rgba(255,255,255,0.08); } .about-page-subline{margin:0 0 22px;text-align:center;font-size:14px;color:rgba(255,255,255,0.70);} body.theme-light .about-page-title{color:#111;text-shadow:none;} body.theme-light .about-page-subline{color:rgba(0,0,0,0.60);} main.about-main{padding:60px 0 40px;} body.theme-light main.about-main{background:var(--light-band) !important;} .about-card{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px; backdrop-filter:blur(8px); box-shadow:0 18px 60px rgba(0,0,0,0.35); overflow:hidden; } body.theme-light .about-card{ background:rgba(255,255,255,0.92); border:1px solid rgba(0,0,0,0.10); box-shadow:0 18px 60px rgba(0,0,0,0.12); backdrop-filter:none; } .about-grid{display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:center;} @media (max-width:860px){.about-grid{grid-template-columns:1fr;text-align:center;}} .about-photoWrap{display:flex;justify-content:center;align-items:center;} .about-photoFrame{ width:260px; height:260px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--about-frame-bg); border:var(--about-ring-width) var(--about-ring-style) var(--about-ring-color); box-shadow:0 0 14px var(--about-ring-glow1),0 0 26px var(--about-ring-glow2); } body.theme-light .about-photoFrame{ box-shadow:0 0 0 1px rgba(0,0,0,0.06),0 0 16px var(--about-ring-glow1),0 0 32px var(--about-ring-glow2); } .about-photo{width:100%;height:100%;object-fit:cover;display:block;} .about-photoPlaceholder{ width:100%; height:100%; display:none; align-items:center; justify-content:center; font-weight:800; letter-spacing:.4px; color:var(--about-placeholder); user-select:none; } body.theme-light .about-photoPlaceholder{color:transparent !important;} .about-subtitle{ margin:0 0 16px; color:var(--muted-text); opacity:.95; font-size:1.05rem; max-width:62ch; } @media (max-width:860px){.about-subtitle{margin-left:auto;margin-right:auto;}} .about-list{margin:0 0 22px;padding-left:18px;line-height:1.8;color:var(--muted-text);} @media (max-width:860px){ .about-list{padding-left:0;list-style-position:inside;} } .about-actions{display:flex;gap:12px;flex-wrap:wrap;} @media (max-width:860px){.about-actions{justify-content:center;}} /* =========================== CONTACT PAGE =========================== */ main{padding:50px 0 40px;} body.theme-light main{background:var(--light-band) !important;} .contact-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:28px; justify-items:center; } .contact-grid > .glass-card{width:min(680px,100%);} .contact-grid > .glass-card.contact-card{width:min(560px,100%);padding:18px;} .contact-grid .glass-card{text-align:center;} #contactForm{display:flex;flex-direction:column;gap:26px;text-align:left;} #contactForm .form-actions{justify-content:center;} #successBox{text-align:center;} .glass-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px; padding:22px; backdrop-filter:blur(8px); box-shadow:var(--card-shadow); position:relative; overflow:hidden; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; } .glass-card::after{ content:""; position:absolute; inset:-2px; background: radial-gradient(circle at 20% 25%, rgba(181,107,255,0.22), transparent 45%), radial-gradient(circle at 80% 70%, rgba(92,179,255,0.18), transparent 50%); opacity:0; transition:opacity .2s ease; pointer-events:none; } .glass-card:hover::after{opacity:1;} body.theme-light .glass-card::after, body.theme-dark .glass-card::after{display:none !important;} .glass-card:hover, .glass-card:focus-within{ border-color:var(--btn-hover-border); box-shadow:var(--card-shadow); background:var(--card-bg); } .form-title{margin:0 0 8px;font-size:2rem;color:var(--heading);position:relative;z-index:1;} .form-sub{margin:0 0 16px;opacity:.92;color:var(--muted-text);position:relative;z-index:1;} .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; position:relative; z-index:1; margin-top:14px; } @media (max-width:700px){.field-row{grid-template-columns:1fr;}} .field{position:relative;z-index:1;margin-top:18px;} label{display:block;font-weight:700;font-size:.95rem;margin:0 0 10px;color:var(--muted-text);} input,select,textarea{ width:100%; padding:12px; border-radius:12px; border:1px solid var(--field-border); background:var(--field-bg); color:var(--field-text); outline:none; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; } input::placeholder,textarea::placeholder{color:var(--field-placeholder);opacity:1;} textarea{min-height:160px;resize:vertical;} input:focus,select:focus,textarea:focus{ border-color:var(--focus-border); box-shadow:0 0 0 3px var(--focus-ring); } .help{margin-top:6px;font-size:.88rem;opacity:.86;color:var(--muted-text);} .error{margin-top:6px;font-size:.9rem;color:var(--error-text);display:none;} .invalid .error{display:block;} .invalid input,.invalid select,.invalid textarea{border-color:var(--invalid-border);} .form-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; position:relative; z-index:1; } .btn.primary{border-color:var(--btn-hover-border);} .success{ display:none; margin-top:12px; padding:12px 14px; border-radius:14px; border:1px solid var(--success-border); background:var(--success-bg); color:var(--muted-text); position:relative; z-index:1; } .success.show{display:block;} .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* Contact details card */ .contact-card{text-align:center !important;} .contact-card .contact-inner{max-width:560px;margin:0 auto;text-align:center;} .contact-list{ margin-top:16px; display:grid; gap:14px; width:fit-content; margin-left:auto; margin-right:auto; text-align:left; } .contact-line{ display:grid; grid-template-columns:28px 92px 1fr; column-gap:14px; align-items:center; } .contact-line i{ color:rgba(36,201,243,0.95); justify-self:center; font-size:1.15rem; line-height:1; } .contact-label{font-weight:800;color:var(--muted-text);white-space:nowrap;} .contact-value{color:var(--muted-text);opacity:.92;word-break:break-word;} @media (max-width:520px){ .contact-list{width:100%;} .contact-line{grid-template-columns:28px 1fr;grid-template-rows:auto auto;row-gap:4px;} .contact-label,.contact-value{grid-column:2;} } /* contact link patch (kept) */ .contact-value a{ color:inherit !important; text-decoration:none !important; border-bottom:1px solid transparent; } .contact-value a:hover{border-bottom-color:currentColor;} /* Form spacing tweaks from contact page */ #contactForm .field-row{margin-top:0 !important;gap:26px !important;} #contactForm .field{margin-top:0 !important;} #contactForm label{margin-bottom:12px !important;} #contactForm textarea{min-height:190px;} #contactForm .form-actions{margin-top:0 !important;} /* ========================================================= Showcase Admin pills must follow theme tokens (kept) ========================================================= */ .cc-admin-pill--label{ background:var(--tab-bg) !important; border-color:var(--tab-border) !important; color:var(--tab-text) !important; opacity:.92 !important; } .preview-btn.cc-admin-pill, button.cc-admin-pill{ background:var(--tab-bg) !important; border-color:var(--tab-border) !important; color:var(--tab-text) !important; } body.theme-light .cc-admin-pill{ background:rgba(255,255,255,0.78) !important; border-color:rgba(0,0,0,0.12) !important; color:#111 !important; } body.theme-dark .cc-admin-pill, body.theme-official .cc-admin-pill{ background:rgba(0,0,0,0.55) !important; border-color:rgba(255,255,255,0.22) !important; color:#fff !important; } /* ================================================== SERVICES – CAPABILITY MATRIX (PROFESSIONAL) ================================================== */ .vs-capability-table{ margin-top:32px; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,0.12); background:var(--surface,transparent); } .vs-cap-row{ display:grid; grid-template-columns:1.2fr 2fr 1.6fr; gap:20px; padding:18px 22px; align-items:center; } .vs-cap-row:not(.vs-cap-head){border-top:1px solid rgba(255,255,255,0.08);} .vs-cap-head{ font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; opacity:.7; } .cap-title{font-weight:700;color:var(--heading,currentColor);} body.theme-light .vs-capability-table{border-color:rgba(0,0,0,0.12);} body.theme-light .vs-cap-row:not(.vs-cap-head){border-top-color:rgba(0,0,0,0.08);} @media (max-width:900px){ .vs-cap-row{grid-template-columns:1fr;gap:6px;} .vs-cap-head{display:none;} } /* ========================================= CAPABILITY SECTION – VERTICAL SPACING (kept) ========================================= */ .vs-section[aria-label="Design and interface capabilities"]{ padding-top:120px; padding-bottom:120px; } .vs-section[aria-label="Design and interface capabilities"] h2{margin-bottom:22px;} .vs-section[aria-label="Design and interface capabilities"] .vs-center{ margin-bottom:56px; max-width:760px; } /* push table down handled above; keep intent */ .vs-capability-table{margin-top:0;} .vs-cap-row{padding-top:24px;padding-bottom:24px;} .vs-section[aria-label="Design and interface capabilities"] .fineprint{margin-top:36px;} /* ✅ ALERT BAR DOT = WHITE (ALL THEMES / ALL LEVELS) */ .vs-alert-dot{ background:rgba(255,255,255,0.92) !important; box-shadow:0 0 14px rgba(255,255,255,0.18) !important; } .vs-alert-row[data-level="warning"] .vs-alert-dot, .vs-alert-row[data-level="danger"] .vs-alert-dot, .vs-alert-row[data-level="info"] .vs-alert-dot{ background:rgba(255,255,255,0.92) !important; box-shadow:0 0 14px rgba(255,255,255,0.18) !important; }