/* Theme Name: Offshore Hosting Theme URI: https://offshorehosting.pk/ Author: Offshore Hosting Author URI: https://offshorehosting.pk/ Description: Custom monochrome theme for offshorehosting.pk. Plain black page, charcoal glass cards, floating pill header, animated hero server rack, and matching WooCommerce styling. Built from the approved site preview (26 October 2026). Version: 1.0.2 Requires at least: 6.0 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: offshore-hosting Tags: black, dark, custom-menu, featured-images, threaded-comments, translation-ready, woocommerce */ /* ============================================================ DESIGN — adapted from the approved offshorehosting.pk preview. Monochrome: near-black page, charcoal cards, 1px faint white borders, white regular-weight headings, muted grey body, white buttons with black text. 1240px container, ~168px section rhythm (84px top + 84px bottom), pill -> heading -> sub rhythm. No video background, no cursor effect, no divider lines. Icons are white (#FFFFFF) with a soft glow. The external webfont @import was removed; the theme uses the system font stack only. ============================================================ */ :root{--bg:#000;--ink:#f4f6fb;--mut:#a7b0c4;--cyan:#22d3ee;--vio:#8b7cf6;--glass:linear-gradient(150deg,rgba(56,50,92,.55),rgba(19,18,34,.48) 55%,rgba(44,34,78,.55));--glass2:linear-gradient(150deg,rgba(48,44,78,.92),rgba(20,19,36,.90));--tile:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.045));--line:rgba(255,255,255,.14);--rad:24px} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:#fff;font-family:Georgia,'Times New Roman',serif;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;overflow-x:hidden} body::before{content:"";position:fixed;inset:0;background:#000;z-index:-2} body::after{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;z-index:-1;pointer-events:none} a{color:#5fd4ea} :focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px} .wrap{max-width:1180px;margin:0 auto;padding:0 20px} .skip{display:block;position:relative;z-index:2;font-size:12.5px;color:#9aa6bb;padding:6px 20px;text-decoration:none;max-width:1180px;margin:0 auto} .skip:hover{color:#fff} /* header */ header.site{position:sticky;top:12px;z-index:50;margin:12px auto 0;width:calc(100% - 24px);max-width:1180px;border-radius:20px;background:linear-gradient(150deg,rgba(56,50,92,.55),rgba(17,16,31,.55));-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border:1px solid rgba(255,255,255,.22);box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.28),0 0 34px rgba(139,92,246,.14)} .hbar{display:flex;align-items:center;gap:14px;padding:12px 0;flex-wrap:wrap} .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:800;font-size:19px;letter-spacing:.2px} .logo .mark{display:grid;place-items:center;font-weight:900} footer.site .logo .mark{width:36px;height:36px;border-radius:10px} .logo small{display:block;font-weight:500;font-size:11px;color:#aeb6c6;letter-spacing:.14em;text-transform:uppercase} nav.main{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-left:auto} nav.main>a,nav.main .drop>button{background:none;border:0;color:#e8ecf4;font:inherit;font-size:15px;padding:9px 11px;border-radius:10px;cursor:pointer;text-decoration:none} nav.main>a:hover,nav.main .drop>button:hover{background:rgba(255,255,255,.09)} .drop{position:relative} .menu{position:absolute;top:calc(100% + 8px);left:0;min-width:280px;max-width:92vw;background:var(--glass2);color:var(--ink);border-radius:18px;padding:10px;border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.24),0 0 34px rgba(139,92,246,.16);display:none} .menu.open{display:block} .menu a{display:block;color:var(--ink);text-decoration:none;padding:8px 10px;border-radius:10px;font-size:14.5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);margin:3px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)} .menu a:hover{background:rgba(139,124,246,.24)} .menu .mh{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);padding:8px 10px 2px;font-weight:700} nav.main>a.btn{background:linear-gradient(135deg,var(--cyan),var(--vio));color:#050608!important} .btn{display:inline-block;background:linear-gradient(135deg,var(--cyan),var(--vio));color:#050608!important;font-weight:800;padding:11px 20px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;font-size:15px} .btn.ghost{background:transparent;color:#fff!important;border:1.5px solid rgba(255,255,255,.5)} .btn.dark{background:rgba(255,255,255,.13);color:#fff!important;border:1px solid rgba(255,255,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)} .btn[disabled]{opacity:.55;cursor:not-allowed} .hamb{display:none;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:10px;padding:8px 12px;font:inherit;cursor:pointer} .mnav{display:none;background:transparent;border-top:1px solid rgba(255,255,255,.12);padding:14px 0 20px} .mnav.open{display:block} .mnav a{color:#e8ecf4;text-decoration:none;display:block;padding:7px 0;font-size:15px} .mnav h4{color:#8f9bb3;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin:14px 0 4px} /* generic */ main{padding-bottom:44px} .hero{padding:56px 0 30px} .kicker{color:var(--cyan);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700} h1{font-size:clamp(30px,5vw,52px);line-height:1.12;margin:10px 0 14px;font-weight:850} h2{font-size:clamp(23px,3.4vw,34px);line-height:1.2;margin:0 0 12px;font-weight:800} h3{font-size:19px;margin:0 0 8px;font-weight:750} .lede{font-size:17.5px;color:#c9d1e0;max-width:720px} .card{background:var(--glass);color:var(--ink);border-radius:var(--rad);padding:26px;border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);box-shadow:0 24px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 32px rgba(139,124,246,.07),0 0 44px rgba(139,92,246,.13)} .card p,.card li{color:#d8ddef} .card a{color:#7fe7f7;font-weight:600} .grid{display:grid;gap:18px} .g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)} section.blk{padding:24px 0} .onblack{color:#fff}.onblack p{color:#c9d1e0} .tag{display:inline-block;background:rgba(34,211,238,.16);color:#7fe7f7;border:1px solid rgba(34,211,238,.4);padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.04em} .tag.warn{background:rgba(255,196,0,.14);color:#ffd968;border-color:rgba(255,196,0,.45)} .tag.onlight{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)} .pill-price{font-weight:800;font-size:17px} .small{font-size:13.5px;color:var(--mut)} .onblack .small{color:#9aa6bb} .lift{transition:transform .25s ease,box-shadow .25s ease} .lift:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(0,0,0,.55),0 0 54px rgba(139,92,246,.22),inset 0 1px 0 rgba(255,255,255,.32)} .reveal{opacity:1} .reveal.in{animation:fadeUp .6s ease both} @keyframes fadeUp{from{opacity:.15;transform:translateY(14px)}to{opacity:1;transform:none}} body.no-motion .reveal,body.no-motion *{transition:none!important;animation:none!important} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}*{animation-duration:.001s!important;transition-duration:.001s!important}} ul.tick{list-style:none;padding:0;margin:10px 0} ul.tick li{padding:5px 0 5px 26px;position:relative} ul.tick li::before{content:"✓";position:absolute;left:0;color:#4ade80;font-weight:900} ul.cross li::before{content:"✕";color:#f87171} .card ul.tick li{background:var(--tile);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:9px 12px 9px 34px;margin:8px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)} .card ul.tick li::before{left:12px;top:9px} table{width:100%;border-collapse:collapse;font-size:15px} th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} th{background:rgba(255,255,255,.07)} details.faq{background:var(--glass);color:var(--ink);border-radius:16px;padding:4px 20px;margin:10px 0;border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);box-shadow:0 16px 36px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.28),0 0 30px rgba(139,92,246,.10)} details.faq summary{cursor:pointer;font-weight:700;padding:12px 0;font-size:16px} details.faq p{padding-bottom:14px;margin:0;color:#d8ddef} .toggle{display:inline-flex;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:4px;gap:4px} .toggle button{border:0;background:transparent;color:#dfe6f2;font:inherit;padding:7px 16px;border-radius:999px;cursor:pointer} .toggle button[aria-pressed="true"]{background:linear-gradient(150deg,rgba(255,255,255,.88),rgba(255,255,255,.70));color:#14121f;font-weight:800} input,select,textarea{font:inherit;padding:11px 13px;border-radius:12px;border:1.5px solid rgba(255,255,255,.24);width:100%;background:rgba(255,255,255,.07);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} input::placeholder,textarea::placeholder{color:#8f9bb3} option{color:#101218} label{font-weight:650;font-size:14.5px;display:block;margin:12px 0 5px} .notice{border:1.5px dashed rgba(255,196,0,.7);background:rgba(255,196,0,.1);color:#ffe9a8;border-radius:16px;padding:14px 18px;font-size:14.5px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .card .notice{background:rgba(255,196,0,.10);color:#ffe9a8;border-color:rgba(255,196,0,.5)} footer.site{position:relative;z-index:1;margin:0 auto 18px;width:calc(100% - 24px);max-width:1180px;border-radius:24px;border:1px solid rgba(255,255,255,.22);padding:40px 0 26px;background:var(--glass);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);box-shadow:0 24px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.28),0 0 44px rgba(139,92,246,.13)} footer.site .grid>div{background:var(--tile);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} footer.site a{color:#c9d1e0;text-decoration:none;display:block;padding:3px 0;font-size:14.5px} footer.site a:hover{color:#fff} footer.site h4{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#8f9bb3;margin:0 0 10px} footer.site p{color:#aeb6c6;font-size:14.5px;max-width:340px} .crumb{font-size:13.5px;color:#9aa6bb;padding-top:22px} .crumb a{color:#9aa6bb} /* service icons — animated glass tiles */ .svc-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;margin-bottom:14px;color:#ffffff;background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -8px 16px rgba(139,92,246,.12),0 10px 24px rgba(0,0,0,.35),0 0 22px rgba(34,211,238,.18);transition:transform .3s ease,box-shadow .3s ease} .svc-ic svg{width:27px;height:27px;animation:svcFloat 5.2s ease-in-out infinite,svcPulse 3.8s ease-in-out infinite} .svc-ic--lg{width:64px;height:64px;border-radius:19px;margin-bottom:18px} .svc-ic--lg svg{width:34px;height:34px} .card:hover .svc-ic{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -8px 16px rgba(139,92,246,.16),0 16px 30px rgba(0,0,0,.42),0 0 34px rgba(139,92,246,.4)} .grid .card:nth-child(2) .svc-ic svg{animation-delay:.7s,.5s} .grid .card:nth-child(3) .svc-ic svg{animation-delay:1.3s,1s} @keyframes svcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}} @keyframes svcPulse{0%,100%{filter:drop-shadow(0 0 3px rgba(255,255,255,.5))}50%{filter:drop-shadow(0 0 9px rgba(255,255,255,.85))}} @media (prefers-reduced-motion:reduce){.svc-ic,.svc-ic svg{animation:none!important;transition:none!important}} /* video hero (homepage) */ .video-hero{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;height:100vh;padding:58px 32px 40px;background:transparent;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif} .hero-scrim{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(115% 92% at 50% 46%,transparent 40%,rgba(0,0,0,.40) 76%,rgba(0,0,0,.80) 100%),linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.60) 30%,rgba(0,0,0,.68) 64%,rgba(0,0,0,.96) 88%,#000 100%);-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 99%);mask-image:linear-gradient(180deg,#000 72%,transparent 99%)} .vh-inner{display:flex;flex-direction:column;align-items:flex-start;max-width:720px;text-shadow:0 2px 26px rgba(0,0,0,.45)} .hero-h{display:flex;flex-wrap:wrap;gap:.25em;font-size:clamp(26px,3vw,42px);font-weight:700;line-height:1.08;letter-spacing:-.01em;text-transform:uppercase;color:#fff;margin:0} .hero-sub{margin:24px 0 0;font-size:14px;line-height:1.65;color:rgba(255,255,255,.85);max-width:260px} .vh-cta{margin:28px 0 0} .fadeup{opacity:0;transform:translateY(var(--y,24px));transition:opacity .7s cubic-bezier(.22,1,.36,1) var(--d,0s),transform .7s cubic-bezier(.22,1,.36,1) var(--d,0s)} .fadeup.in{opacity:1;transform:translateY(0)} .below-hero{position:relative;z-index:1;padding-bottom:44px;background:transparent} main:has(.below-hero){padding-bottom:0} @media(max-width:900px){.video-hero{padding:64px 18px 36px}} @media (prefers-reduced-motion:reduce){.fadeup{transition-delay:0s!important}} /* living liquid glass — gradient-border boxes */ .card,details.faq{position:relative;border:none} .card{-webkit-backdrop-filter:blur(50px) saturate(185%);backdrop-filter:blur(50px) saturate(185%)} .card::before,details.faq::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:linear-gradient(180deg,rgba(216,203,255,.60) 0%,rgba(139,124,246,.30) 20%,rgba(255,255,255,.06) 40%,rgba(255,255,255,.06) 60%,rgba(34,211,238,.30) 80%,rgba(125,240,255,.55) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none} header.site{border:none;background:var(--glass)} header.site::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:linear-gradient(180deg,rgba(216,203,255,.60) 0%,rgba(139,124,246,.30) 20%,rgba(255,255,255,.06) 40%,rgba(255,255,255,.06) 60%,rgba(34,211,238,.30) 80%,rgba(125,240,255,.55) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none} .svc-ic{position:relative;border:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .svc-ic::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;background:linear-gradient(160deg,rgba(255,255,255,.55) 0%,rgba(139,124,246,.28) 45%,rgba(34,211,238,.45) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none} .lift{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1)} .lift:hover{transform:translateY(-6px) scale(1.05);box-shadow:0 34px 70px rgba(0,0,0,.60),0 0 70px rgba(139,92,246,.38),0 0 34px rgba(34,211,238,.22),inset 0 1px 0 rgba(255,255,255,.40)} .reveal.in{animation:fadeUp .7s cubic-bezier(.22,1,.36,1) backwards} @keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .grid>.reveal:nth-child(2){animation-delay:.08s} .grid>.reveal:nth-child(3){animation-delay:.16s} .grid>.reveal:nth-child(4){animation-delay:.24s} .grid>.reveal:nth-child(5){animation-delay:.32s} .grid>.reveal:nth-child(6){animation-delay:.40s} .video-hero{height:auto;min-height:0;overflow:hidden} .vh-inner{position:relative;z-index:1} .hero-intro{margin:24px 0 0;font-size:15.5px;line-height:1.65;color:#d8ddef;max-width:600px} .hero-guide{margin:16px 0 0;font-size:14.5px;line-height:1.65;color:#c9d1e0;max-width:560px} /* hero server tower — animated current flow */ /* hero row — centred to the same 1240px container as the header and the sections below (26 Oct 2026: hero was sitting left of centre on desktop). v1.0.2: justify-content:center — the text column is capped at 720px, so the row's content (720 + 44 gap + 330 rack = 1094px) leaves 146px slack that must split evenly instead of sitting at the right end. */ .vh-row{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:44px;width:100%;max-width:1240px;margin:0 auto} .vh-row .vh-inner{flex:1 1 auto;min-width:0} .srv{position:relative;flex:0 1 330px;width:330px;max-width:100%;overflow:hidden;border-radius:22px;padding:16px 16px 14px;background:linear-gradient(160deg,rgba(30,26,54,.72),rgba(10,9,22,.80) 55%,rgba(24,18,48,.72));-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);box-shadow:0 30px 70px rgba(0,0,0,.60),inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 34px rgba(139,124,246,.10),0 0 60px rgba(139,92,246,.28),0 0 30px rgba(34,211,238,.14);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif} .srv::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:linear-gradient(180deg,rgba(216,203,255,.60) 0%,rgba(139,124,246,.30) 20%,rgba(255,255,255,.06) 40%,rgba(255,255,255,.06) 60%,rgba(34,211,238,.30) 80%,rgba(125,240,255,.55) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;z-index:4} .srv::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 32%,rgba(160,220,255,.10) 48%,rgba(196,181,253,.15) 52%,transparent 68%);background-size:260% 100%;background-position:130% 0;animation:srvShimmer 4.6s linear infinite;pointer-events:none;z-index:3} @keyframes srvShimmer{from{background-position:130% 0}to{background-position:-130% 0}} .srv-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 4px} .srv-name{font-size:11px;font-weight:700;letter-spacing:.16em;color:#c9d1e0} .srv-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.18em;color:#8ff5c0} .srv-live i{width:9px;height:9px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80;animation:livePulse 1.8s ease-out infinite} @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55),0 0 10px #4ade80}70%{box-shadow:0 0 0 8px rgba(74,222,128,0),0 0 10px #4ade80}100%{box-shadow:0 0 0 0 rgba(74,222,128,0),0 0 10px #4ade80}} .srv-body{position:relative;z-index:1;padding-right:30px} .srv-spine{position:absolute;top:8px;bottom:8px;right:9px;width:3px;border-radius:99px;background:linear-gradient(180deg,rgba(34,211,238,.15),rgba(139,124,246,.60),rgba(217,70,239,.45),rgba(34,211,238,.15));background-size:100% 220%;animation:srvFlowBgY 2.8s linear infinite;box-shadow:0 0 12px rgba(139,124,246,.40)} @keyframes srvFlowBgY{from{background-position:0 0}to{background-position:0 220%}} .pkt{position:absolute;left:50%;margin-left:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan),0 0 20px rgba(34,211,238,.65);animation:srvFlowY 3.4s linear infinite} .pk1{top:16%} .pk2{top:50%;background:#a78bfa;box-shadow:0 0 10px #a78bfa,0 0 20px rgba(167,139,250,.65);animation-duration:4.6s;animation-delay:1.1s} .pk3{top:80%;background:#f0abfc;box-shadow:0 0 10px #e879f9,0 0 20px rgba(232,121,249,.6);animation-duration:2.7s;animation-delay:.5s} @keyframes srvFlowY{from{top:-3%}to{top:101%}} .srv-u{position:relative;display:flex;align-items:center;gap:10px;padding:12px 12px 15px;margin-top:10px;border-radius:13px;background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 18px rgba(34,211,238,.05)} .srv-u:first-of-type{margin-top:6px} .leds{display:flex;flex-direction:column;gap:5px} .led{width:8px;height:8px;border-radius:50%;display:block;animation:ledBlink 1.7s ease-in-out infinite} .led.g{background:#4ade80;box-shadow:0 0 9px #4ade80} .led.c{background:var(--cyan);box-shadow:0 0 9px var(--cyan);animation-duration:2.2s} .led.v{background:#a78bfa;box-shadow:0 0 9px #a78bfa;animation-duration:1.9s} @keyframes ledBlink{0%,100%{opacity:1}50%{opacity:.22}} .vents{flex:1 1 auto;min-width:20px;height:17px;border-radius:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.20) 0 3px,transparent 3px 8px);box-shadow:inset 0 0 8px rgba(0,0,0,.35)} .ulab{font-size:10px;font-weight:700;letter-spacing:.13em;color:#9aa6bb;white-space:nowrap} .ports{display:flex;gap:5px} .ports i{width:14px;height:9px;border-radius:3px;background:rgba(34,211,238,.18);border:1px solid rgba(34,211,238,.45);box-shadow:inset 0 0 6px rgba(34,211,238,.40)} .uflow{position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.35),rgba(139,124,246,.35),transparent)} .uflow i{position:absolute;top:50%;margin-top:-2.5px;left:2%;width:5px;height:5px;border-radius:50%;background:#7fe7f7;box-shadow:0 0 9px var(--cyan),0 0 14px rgba(34,211,238,.55);animation:srvPktX 2.8s linear infinite} @keyframes srvPktX{0%{left:2%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:96%;opacity:0}} .srv-scan{position:absolute;left:2px;right:32px;top:-8%;height:36px;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(139,124,246,.17),rgba(34,211,238,.11),transparent);animation:srvScan 5.5s ease-in-out infinite} @keyframes srvScan{0%{top:-8%;opacity:0}14%{opacity:1}86%{opacity:1}100%{top:94%;opacity:0}} .srv-pwr{position:relative;z-index:2;height:6px;border-radius:99px;margin-top:14px;background:linear-gradient(90deg,var(--cyan),var(--vio),#d946ef,var(--cyan));background-size:220% 100%;animation:srvFlowBgX 2.6s linear infinite;box-shadow:0 0 14px rgba(139,124,246,.45)} @keyframes srvFlowBgX{from{background-position:0 0}to{background-position:220% 0}} .srv-foot{position:relative;z-index:2;margin-top:9px;font-size:10px;font-weight:700;letter-spacing:.18em;color:#8f9bb3;text-align:center} @media(max-width:1100px){.srv{flex-basis:296px;width:296px}} @media(max-width:900px){.vh-row{flex-direction:column;align-items:flex-start;gap:28px}.srv{flex:none;width:min(300px,100%);padding:13px 13px 11px}.srv-u{padding:10px 10px 13px;margin-top:8px}} @media (prefers-reduced-motion:reduce){.srv *,.srv::after{animation:none!important}.srv-scan{display:none}} /* sculpture */ .stage{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center} .sculpt{position:relative;height:380px} .tray{position:absolute;left:50%;transform:translateX(-50%);width:78%;height:64px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);box-shadow:0 20px 40px rgba(0,0,0,.45),inset 0 0 24px rgba(34,211,238,.12)} .tray::after{content:"";position:absolute;inset:12px;border-radius:12px;border:1px dashed rgba(255,255,255,.22)} .t1{top:36px}.t2{top:128px;width:86%}.t3{top:220px;width:94%} .dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan);animation:pulse 2.6s ease-in-out infinite} .dot.v{background:var(--vio);box-shadow:0 0 14px var(--vio)} @keyframes pulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}} .orbit{position:absolute;inset:0;animation:spin 46s linear infinite} .orbit span{position:absolute;font-size:13px;color:#aeeef8;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);padding:4px 10px;border-radius:999px} @keyframes spin{to{transform:rotate(360deg)}} .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch} .flow .step{text-align:center} .flow .n{width:44px;height:44px;margin:0 auto 8px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--vio));color:#050608;font-weight:900;display:grid;place-items:center} .progressline{height:5px;background:rgba(255,255,255,.14);border-radius:99px;overflow:hidden;margin:16px 0 4px} .progressline i{display:block;height:100%;width:12%;background:linear-gradient(90deg,var(--cyan),var(--vio));border-radius:99px;transition:width .3s linear} @media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.stage{grid-template-columns:1fr}.flow{grid-template-columns:repeat(2,1fr)}nav.main{display:none}.hamb{display:block}} @media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}.sculpt{height:320px}} /* technical glass boxes — near-black fill, hairline border, violet glow, holographic stage icons */ .card{background:radial-gradient(340px circle at 50% -40%,rgba(167,139,250,.13),transparent 65%),rgba(255,255,255,.021);-webkit-backdrop-filter:blur(14px) saturate(155%);backdrop-filter:blur(14px) saturate(155%);border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.26);box-shadow:0 20px 46px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 26px rgba(139,124,246,.05)} .card::before{content:none} .card::after{content:"";position:absolute;inset:-26px -20px;z-index:-1;border-radius:34px;background:radial-gradient(58% 52% at 50% 34%,rgba(139,92,246,.30),rgba(124,58,237,.13) 52%,transparent 74%);pointer-events:none} .lift:hover{box-shadow:0 30px 64px rgba(0,0,0,.58),0 0 60px rgba(139,92,246,.30),0 0 34px rgba(34,211,238,.20),inset 0 1px 0 rgba(255,255,255,.20)} .holo-stage{position:relative;display:grid;place-items:center;height:110px;margin:-4px -4px 18px;border-radius:16px;color:#ffffff;overflow:hidden;background:radial-gradient(130px 84px at 50% 64%,rgba(139,92,246,.16),transparent 72%);-webkit-mask-image:radial-gradient(120% 105% at 50% 50%,#000 60%,transparent 99%);mask-image:radial-gradient(120% 105% at 50% 50%,#000 60%,transparent 99%)} .holo-stage::before{content:"";position:absolute;left:50%;top:54%;width:190px;height:120px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(167,139,250,.34),rgba(139,92,246,.14) 55%,transparent 78%);pointer-events:none} .holo-stage svg{position:relative;z-index:1;width:74px;height:74px;mix-blend-mode:screen;filter:drop-shadow(0 0 5px rgba(255,255,255,.95)) drop-shadow(0 0 16px rgba(255,255,255,.6)) drop-shadow(0 0 30px rgba(255,255,255,.38))} .reveal:not(.in) .holo-stage svg{opacity:0;transform:scale(.72)} .reveal.in .holo-stage svg{animation:holoIn .75s cubic-bezier(.22,1,.36,1) both} @keyframes holoIn{from{opacity:0;transform:scale(.72) translateY(10px);filter:blur(6px) drop-shadow(0 0 4px rgba(255,255,255,.65))}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0) drop-shadow(0 0 5px rgba(255,255,255,.95)) drop-shadow(0 0 16px rgba(255,255,255,.6)) drop-shadow(0 0 30px rgba(255,255,255,.38))}} @media(max-width:900px) and (min-width:561px){ #app .grid{grid-template-columns:1fr} .card.holo{display:flex;align-items:center;gap:22px} .card.holo .holo-stage{flex:0 0 148px;width:148px;height:148px;margin:0} .card.holo .holo-body{flex:1 1 auto;min-width:0} } @media(max-width:560px){.holo-stage{height:96px}.holo-stage svg{width:64px;height:64px}} @media (prefers-reduced-motion:reduce){.holo-stage svg{animation:none!important;opacity:1!important;transform:none!important}} /* hero floating glass cards — arranged around the server tower */ .srv-zone{position:relative;flex:0 1 330px;width:330px;max-width:100%} .srv-zone .srv{flex:none;width:100%} .hf{position:absolute;z-index:6;border-radius:18px;background:linear-gradient(150deg,rgba(56,50,92,.55),rgba(19,18,34,.50) 55%,rgba(44,34,78,.55));-webkit-backdrop-filter:blur(18px) saturate(175%);backdrop-filter:blur(18px) saturate(175%);box-shadow:0 18px 42px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.30),inset 0 0 22px rgba(139,124,246,.08),0 0 30px rgba(139,92,246,.26),0 0 16px rgba(34,211,238,.12);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;animation:hfFloat var(--fd,6s) ease-in-out var(--fdel,0s) infinite alternate} .hf::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:linear-gradient(180deg,rgba(216,203,255,.60) 0%,rgba(139,124,246,.30) 20%,rgba(255,255,255,.06) 40%,rgba(255,255,255,.06) 60%,rgba(34,211,238,.30) 80%,rgba(125,240,255,.55) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none} @keyframes hfFloat{from{transform:translateY(-5px)}to{transform:translateY(7px)}} .hf .svc-ic{width:34px;height:34px;border-radius:11px;margin:0;flex:0 0 auto} .hf .svc-ic svg{width:19px;height:19px} .hf-chip{display:flex;align-items:center;gap:9px;padding:7px 15px 7px 7px;border-radius:999px;color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;letter-spacing:.01em;transition:box-shadow .3s ease} .hf-chip:hover{box-shadow:0 22px 48px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.38),0 0 44px rgba(139,92,246,.45),0 0 22px rgba(34,211,238,.22)} .hf-c1{right:-62px;top:36px} .hf-c2{left:-72px;top:46%} .hf-c3{right:-56px;bottom:92px} .hf-c4{left:-54px;bottom:-24px} .hf-dom{left:-84px;top:-36px;width:238px;padding:13px 14px 11px} .hf-dom-head{display:flex;align-items:center;gap:9px} .hf-dom-title{font-size:13.5px;font-weight:800;color:#fff} .hf-tag{margin-left:auto;font-size:10px;padding:2px 8px} .hf-dom-field{display:flex;align-items:center;gap:8px;margin-top:11px} .hf-dom-ph{flex:1 1 auto;min-width:0;padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#8f9bb3;font-size:13px;white-space:nowrap;overflow:hidden} .hf-dom-btn{flex:0 0 auto;background:linear-gradient(135deg,var(--cyan),var(--vio));color:#050608;font-weight:800;font-size:13px;padding:8px 14px;border-radius:10px;text-decoration:none} .hf-dom-note{margin:9px 0 0;font-size:11.5px;line-height:1.45;color:#9aa6bb} @media(max-width:1280px){.hf-dom{left:-58px}.hf-c1{right:-28px}.hf-c2{left:-50px}.hf-c3{right:-24px}.hf-c4{left:-38px}} @media(max-width:1100px){.srv-zone{flex-basis:296px;width:296px}} @media(max-width:900px){.srv-zone{flex:none;width:min(300px,100%);margin-top:40px}.hf-dom{left:-4px;top:-42px;width:224px}.hf-c1{right:-8px;top:26px}.hf-c2{left:-8px;top:48%}.hf-c3{right:-8px;bottom:86px}.hf-c4{left:-4px;bottom:-24px}} @media (prefers-reduced-motion:reduce){.hf{animation:none!important}} /* infrastructure steps — numbered glass cards; the numbers alone show the order, no connector line */ .infra{position:relative} .steps{position:relative;margin-top:26px;padding:32px 18px 20px;border-radius:28px;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px,44px 44px} .steps-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch} .step-card{position:relative;text-align:center;padding:40px 20px 24px} .step-card h3{font-size:19px;margin:0 0 10px} .step-card p{margin:0;font-size:15px;line-height:1.6} .step-n{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--vio));color:#050608;font-weight:900;font-size:19px;display:grid;place-items:center;box-shadow:0 0 0 5px #07060f,0 0 20px rgba(139,92,246,.55),0 0 10px rgba(34,211,238,.4);z-index:2} .steps-grid>.reveal:nth-child(2){animation-delay:.08s} .steps-grid>.reveal:nth-child(3){animation-delay:.16s} .steps-grid>.reveal:nth-child(4){animation-delay:.24s} @media(max-width:900px){ .steps{padding:30px 16px 20px} .steps-grid{grid-template-columns:1fr;gap:32px} } /* uniform light life — one gentle treatment in every section, on every page. Sections share the single fixed body backdrop, so no section starts or ends with a hard edge; motion is slow and soft, and fully off when reduced. */ body::before{animation:ambientBreathe 16s ease-in-out infinite alternate} @keyframes ambientBreathe{from{opacity:.94}to{opacity:1}} body.no-motion::before{animation:none!important} .card{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1)} .card:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(0,0,0,.55),0 0 44px rgba(139,92,246,.20),0 0 22px rgba(34,211,238,.10),inset 0 1px 0 rgba(255,255,255,.32)} .lift:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(0,0,0,.55),0 0 44px rgba(139,92,246,.20),0 0 22px rgba(34,211,238,.10),inset 0 1px 0 rgba(255,255,255,.32)} .btn{transition:transform .35s ease,box-shadow .35s ease} .btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.42),0 0 26px rgba(139,92,246,.30)} details.faq{transition:box-shadow .5s ease} details.faq:hover{box-shadow:0 20px 44px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.30),0 0 34px rgba(139,92,246,.16)} details.faq[open]>p{animation:fadeUp .45s ease backwards} .toggle button{transition:background .3s ease,color .3s ease} .tag{animation:tagGlow 4.6s ease-in-out infinite} @keyframes tagGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 rgba(34,211,238,0)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 13px rgba(34,211,238,.26)}} .step-n{animation:stepPulse 3.8s ease-in-out infinite} @keyframes stepPulse{0%,100%{box-shadow:0 0 0 5px #07060f,0 0 16px rgba(139,92,246,.45),0 0 8px rgba(34,211,238,.32)}50%{box-shadow:0 0 0 5px #07060f,0 0 27px rgba(139,92,246,.68),0 0 15px rgba(34,211,238,.50)}} @media (prefers-reduced-motion:reduce){body::before{animation:none!important}} /* ============ MONOCHROME REDESIGN — sample design language ============ Strictly monochrome: near-black page, charcoal cards, white headings, muted grey body text, 1px faint white borders, white primary buttons. Airy spacing, pill-label → heading → sub rhythm, floating pill header that narrows on scroll, blur-to-sharp scroll reveals, slow marquee. */ :root{--ink:#f2f2f4;--mut:#9a9aa3;--line:rgba(255,255,255,.10);--rad:20px;--glass:linear-gradient(180deg,#131315,#0c0c0e);--glass2:#101013;--tile:rgba(255,255,255,.04);--cyan:#ffffff;--vio:#d8d8de} body{color:#a6a6ad;font-family:'Helvetica Neue',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased} a{color:#f0f0f2} :focus-visible{outline:3px solid #fff;outline-offset:3px} .wrap{max-width:1240px;padding:0 24px} .skip{max-width:1240px;color:#8f8f98} h1,h2,h3{color:#fff} h1{font-weight:500;letter-spacing:-.015em;font-size:clamp(34px,4.6vw,54px)} h2{font-weight:500;letter-spacing:-.015em;font-size:clamp(28px,3.6vw,44px)} h3{font-weight:600} .lede{color:#a9a9b1} .onblack p{color:#a9a9b1} .card p,.card li{color:#a9a9b1} .card a{color:#fff} .small{color:#8f8f98} main{padding-bottom:90px} section.blk{padding:84px 0} .hero{padding:92px 0 36px} .video-hero{padding:118px 32px 96px} /* pill section label */ .kicker{display:inline-block!important;margin-bottom:20px!important;padding:6px 15px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.05);color:#dcdce1;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase} /* buttons — white primary, black text */ .btn{background:#fff;color:#000!important;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.4)} .btn:hover{box-shadow:0 16px 34px rgba(0,0,0,.5)} .btn.ghost{background:transparent;color:#fff!important;border:1px solid rgba(255,255,255,.35)} .btn.dark{background:#17171a;color:#fff!important;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)} nav.main>a.btn{background:#fff;color:#000!important} .logo .mark{background:#fff;color:#000} .hf-dom-btn{background:#fff;color:#000} /* floating pill header — narrows on scroll */ header.site{top:14px;width:calc(100% - 32px);max-width:1180px;border-radius:999px;background:rgba(13,13,15,.78);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.10);transition:max-width .5s cubic-bezier(.22,1,.36,1)} header.site::before{content:none} header.site.shrunk .logo small{display:none} header.site:has(.mnav.open){border-radius:26px} .hbar{padding:11px 6px;transition:padding .45s cubic-bezier(.22,1,.36,1)} .menu{background:#101013;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)} .menu a{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)} .menu a:hover{background:rgba(255,255,255,.11)} /* cards — charcoal, 1px faint border, no coloured glow */ .card{background:linear-gradient(180deg,#121214,#0c0c0e);border:1px solid rgba(255,255,255,.10);border-radius:var(--rad);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)} .card::after{content:none} .card:hover{box-shadow:0 24px 52px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09)} .lift:hover{transform:translateY(-4px);box-shadow:0 24px 52px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09)} details.faq{background:#101012;border:1px solid rgba(255,255,255,.10);box-shadow:0 14px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)} details.faq::before{content:none} details.faq:hover{box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07)} /* tags + notices — neutral */ .tag{background:rgba(255,255,255,.07);color:#e8e8eb;border:1px solid rgba(255,255,255,.18);animation:none;box-shadow:none} .tag.warn{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.38)} .tag.onlight{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.20);box-shadow:none} .notice{border:1.5px dashed rgba(255,255,255,.35);background:rgba(255,255,255,.05);color:#e2e2e6} .card .notice{background:rgba(255,255,255,.05);color:#e2e2e6;border-color:rgba(255,255,255,.32)} ul.tick li::before{color:#fff} ul.cross li::before{color:#8b8b93} .toggle button[aria-pressed="true"]{background:#fff;color:#000} th{background:rgba(255,255,255,.05)} /* service icon tiles — neutral glass, white icon */ .svc-ic{background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 24px rgba(0,0,0,.35)} .svc-ic::before{background:linear-gradient(160deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.14) 45%,rgba(255,255,255,.32) 100%)} .card:hover .svc-ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 30px rgba(0,0,0,.42)} .holo-stage{background:radial-gradient(130px 84px at 50% 64%,rgba(255,255,255,.07),transparent 72%)} .holo-stage::before{background:radial-gradient(closest-side,rgba(255,255,255,.16),rgba(255,255,255,.06) 55%,transparent 78%)} /* infrastructure steps — white number discs */ .step-n{background:#fff;color:#000;box-shadow:0 0 0 5px #000,0 10px 24px rgba(0,0,0,.5)} @keyframes stepPulse{0%,100%{box-shadow:0 0 0 5px #000,0 0 14px rgba(255,255,255,.22)}50%{box-shadow:0 0 0 5px #000,0 0 24px rgba(255,255,255,.4)}} /* server tower — same approved structure, monochrome light */ .srv{background:linear-gradient(160deg,rgba(26,26,29,.88),rgba(9,9,11,.9) 55%,rgba(20,20,23,.88));box-shadow:0 30px 70px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 34px rgba(255,255,255,.04)} .srv::before{background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.16) 20%,rgba(255,255,255,.05) 40%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.16) 80%,rgba(255,255,255,.45) 100%)} .srv::after{background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.06) 48%,rgba(255,255,255,.09) 52%,transparent 68%);background-size:260% 100%} .srv-live{color:#e8e8eb} .srv-live i{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.9)} @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45),0 0 10px #fff}70%{box-shadow:0 0 0 8px rgba(255,255,255,0),0 0 10px #fff}100%{box-shadow:0 0 0 0 rgba(255,255,255,0),0 0 10px #fff}} .srv-spine{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.55),rgba(255,255,255,.28),rgba(255,255,255,.12));background-size:100% 220%;box-shadow:0 0 12px rgba(255,255,255,.22)} .pkt,.pk2,.pk3{background:#fff;box-shadow:0 0 10px #fff,0 0 20px rgba(255,255,255,.5)} .pk2{background:#d7d7dc}.pk3{background:#a9a9b1} .led.g,.led.c,.led.v{background:#fff;box-shadow:0 0 9px rgba(255,255,255,.85)} .led.c{background:#cfcfd6}.led.v{background:#8f8f98} .srv-u{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 18px rgba(255,255,255,.04)} .ports i{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.35);box-shadow:inset 0 0 6px rgba(255,255,255,.22)} .uflow{background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),rgba(255,255,255,.18),transparent)} .uflow i{background:#fff;box-shadow:0 0 9px #fff,0 0 14px rgba(255,255,255,.5)} .srv-scan{background:linear-gradient(180deg,transparent,rgba(255,255,255,.10),rgba(255,255,255,.05),transparent)} .srv-pwr{background:linear-gradient(90deg,#fff,#8f8f98,#e8e8eb,#fff);background-size:220% 100%;box-shadow:0 0 14px rgba(255,255,255,.32)} /* hero floating cards — monochrome glass */ .hf{background:linear-gradient(150deg,rgba(26,26,29,.78),rgba(12,12,14,.68) 55%,rgba(22,22,25,.78));box-shadow:0 18px 42px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 22px rgba(255,255,255,.04)} .hf::before{background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.16) 20%,rgba(255,255,255,.05) 40%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.16) 80%,rgba(255,255,255,.45) 100%)} .hf-chip:hover{box-shadow:0 22px 48px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.3)} /* leftover decorative pieces — neutral */ .flow .n{background:#fff;color:#000} .progressline i{background:#fff} .dot{background:#fff;box-shadow:0 0 14px rgba(255,255,255,.8)} .dot.v{background:#bdbdc4;box-shadow:0 0 14px rgba(255,255,255,.5)} /* footer — one large rounded monochrome container */ footer.site{max-width:1240px;border-radius:28px;background:#0b0b0d;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)} footer.site .grid>div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);box-shadow:none} /* scroll reveal — fade + blur-to-sharp */ .reveal{opacity:0;transform:translateY(26px);filter:blur(10px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1),filter .9s ease;animation:none} .reveal.in{opacity:1;transform:none;filter:blur(0);animation:none} .grid>.reveal:nth-child(2){transition-delay:.08s} .grid>.reveal:nth-child(3){transition-delay:.16s} .grid>.reveal:nth-child(4){transition-delay:.24s} .grid>.reveal:nth-child(5){transition-delay:.32s} .grid>.reveal:nth-child(6){transition-delay:.40s} .steps-grid>.reveal:nth-child(2){transition-delay:.08s} .steps-grid>.reveal:nth-child(3){transition-delay:.16s} .steps-grid>.reveal:nth-child(4){transition-delay:.24s} .fadeup{filter:blur(8px);transition:opacity .8s cubic-bezier(.22,1,.36,1) var(--d,0s),transform .8s cubic-bezier(.22,1,.36,1) var(--d,0s),filter .8s cubic-bezier(.22,1,.36,1) var(--d,0s)} .fadeup.in{filter:blur(0)} .hero-h{font-weight:500} body.no-motion .reveal,body.no-motion .fadeup{opacity:1!important;filter:none!important;transform:none!important} /* slow marquee — row of service tiles */ .mq-wrap{overflow:hidden;padding:10px 0 4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .mq-track{display:flex;width:max-content;animation:mqScroll 48s linear infinite} .mq-wrap:hover .mq-track{animation-play-state:paused} .mq-tile{display:flex;align-items:center;gap:10px;margin-right:14px;padding:12px 20px;border-radius:14px;background:#0e0e10;border:1px solid rgba(255,255,255,.10);color:#e8e8eb;font-weight:600;font-size:14.5px;white-space:nowrap} .mq-tile svg{width:19px;height:19px;color:#fff;flex:0 0 auto} @keyframes mqScroll{to{transform:translateX(-50%)}} body.no-motion .mq-track{animation:none} /* testimonials — static 3×2 grid, staggered blur reveal, placeholders only */ .tst-head{text-align:center} .tst-head .lede{margin-left:auto;margin-right:auto} .tst-card{margin:0;display:flex;flex-direction:column;gap:18px} .tst-q{font-family:Georgia,'Times New Roman',serif;font-size:52px;line-height:.55;height:24px;color:#fff} .tst-card blockquote{margin:0;font-size:16.5px;line-height:1.65;color:#c6c6cd} .tst-card figcaption{margin-top:auto;display:flex;align-items:center;gap:12px} .tst-av{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;font-weight:700;color:#fff;flex:0 0 auto} .tst-meta{display:flex;flex-direction:column;line-height:1.4} .tst-meta strong{color:#fff;font-size:15px} .tst-meta small{color:#8f8f98;font-size:13px} .tst-grid>.reveal:nth-child(1){transition-delay:0s} .tst-grid>.reveal:nth-child(2){transition-delay:.08s} .tst-grid>.reveal:nth-child(3){transition-delay:.16s} .tst-grid>.reveal:nth-child(4){transition-delay:.34s} .tst-grid>.reveal:nth-child(5){transition-delay:.42s} .tst-grid>.reveal:nth-child(6){transition-delay:.50s} @media(max-width:700px){section.blk{padding:54px 0}.hero{padding:64px 0 28px}.video-hero{padding:88px 18px 64px}} @media (prefers-reduced-motion:reduce){.reveal,.fadeup{opacity:1!important;filter:none!important;transform:none!important}.mq-track{animation:none!important}} /* ============ HEADER — minimal slim pill, strong squeeze on scroll ============ Top state: wide 1180px pill — wordmark left, links centered, white CTA right. Scrolled (.shrunk): squeezes to ~720px and the wordmark collapses away, leaving only the small circular logo mark; links and CTA stay. Slim in BOTH states: short bar, small mark, small link text, tight padding. */ header.site{top:10px;transition:max-width .55s cubic-bezier(.22,1,.36,1)} header.site .hbar{padding:7px 10px;gap:10px;flex-wrap:nowrap;transition:padding .45s cubic-bezier(.22,1,.36,1)} header.site .logo{font-size:16.5px;gap:8px} header.site .logo .mark{width:30px;height:30px;border-radius:9px;font-size:12.5px;transition:width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1),border-radius .45s cubic-bezier(.22,1,.36,1)} header.site .logo small{font-size:9.5px} header.site .logo>span:last-child{display:block;max-width:280px;opacity:1;overflow:hidden;white-space:nowrap;transition:max-width .45s cubic-bezier(.22,1,.36,1),opacity .3s ease} header.site nav.main{flex:1 1 auto;margin-left:0;justify-content:center;flex-wrap:nowrap;gap:2px} header.site nav.main>a,header.site nav.main .drop>button{font-size:13.5px;padding:7px 8px;white-space:nowrap} header.site .btn{padding:8px 15px;font-size:13.5px} header.site .hdr-cta{flex:0 0 auto} header.site .hamb{padding:6px 10px;font-size:13.5px} /* scrolled — the squeeze */ header.site.shrunk{max-width:720px} header.site.shrunk .hbar{padding-top:5px;padding-bottom:5px} header.site.shrunk .logo{gap:0} header.site.shrunk .logo>span:last-child{max-width:0;opacity:0} header.site.shrunk .logo .mark{width:28px;height:28px;border-radius:50%} @media(max-width:900px){header.site .hdr-cta{display:none}header.site .hamb{margin-left:auto;white-space:nowrap;flex:0 0 auto}} @media(max-width:700px){header.site.shrunk{max-width:calc(100% - 32px)}header.site .logo small{display:none}header.site .logo{min-width:0}} /* reference pricing (converted to PKR, 26 Oct 2026) */ .pill-price s{color:#9aa6bb;font-weight:600;font-size:.78em;margin-right:7px} .refnote{display:inline-block;border:1px dashed rgba(255,255,255,.3);border-radius:10px;padding:7px 12px;margin:2px 0 14px} .cyc{list-style:none;padding:0;margin:10px 0} .cyc li{display:flex;justify-content:space-between;gap:14px;padding:7px 10px;border:1px solid rgba(255,255,255,.12);border-radius:10px;margin:6px 0;background:rgba(255,255,255,.04);font-size:14.5px} .cyc li strong{white-space:nowrap} /* SEO/AIO content blocks — glossary, link lists, blog byline */ .gloss dt{font-weight:700;color:#fff;margin-top:12px} .gloss dd{margin:2px 0 0;color:#a9a9b1} .linklist{list-style:none;padding:0;margin:6px 0} .linklist li{padding:4px 0} .linklist a{color:#fff;text-decoration:underline;text-underline-offset:3px} .byline{font-size:13.5px;color:#8f8f98;margin-top:10px} /* full article bodies, contents + key takeaways boxes */ .art h2{font-size:23px;line-height:1.3;margin:28px 0 10px;color:#fff;scroll-margin-top:120px} .art h3{font-size:18px;margin:20px 0 8px;color:#fff} .art p{margin:0 0 14px;line-height:1.68} .art ul,.art ol{margin:0 0 14px;padding-left:22px} .art li{margin:5px 0;line-height:1.62} .art code{background:rgba(255,255,255,.12);border-radius:6px;padding:1px 6px;font-size:.92em} .art pre{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:14px 16px;overflow-x:auto;margin:0 0 16px} .art pre code{background:none;padding:0;font-size:13.5px;line-height:1.55} .art blockquote{margin:0 0 14px;padding:2px 0 2px 16px;border-left:3px solid rgba(255,255,255,.35)} .art blockquote p{margin:0} .tblwrap{overflow-x:auto;margin:0 0 16px} .art table{min-width:540px} .takebox,.tocbox{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:16px 18px;margin:0 0 22px} .takebox h2,.tocbox h2{font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px;color:#fff} .tocbox ol{margin:0;padding-left:20px} .tocbox li{margin:4px 0;line-height:1.5} .takebox ul.tick{margin:4px 0 0} /* ============================================================ LIVE-THEME ADDITIONS (not in the preview) - Green LIVE pulse on the hero tower badge (per site spec). - Soft purple/violet/cyan glow behind the hero. - WordPress core + WooCommerce monochrome styling. ============================================================ */ /* Green LIVE pulse (the one accent on the tower) */ .srv-live{color:#8ff5c0} .srv-live i{background:#4ade80;box-shadow:0 0 10px #4ade80} @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55),0 0 10px #4ade80}70%{box-shadow:0 0 0 8px rgba(74,222,128,0),0 0 10px #4ade80}100%{box-shadow:0 0 0 0 rgba(74,222,128,0),0 0 10px #4ade80}} /* Soft hero glow — very low opacity, monochrome feel kept */ .video-hero{background: radial-gradient(640px 320px at 78% 18%,rgba(139,92,246,.13),transparent 70%), radial-gradient(520px 300px at 8% 88%,rgba(34,211,238,.07),transparent 70%)} /* ---------- WordPress core ---------- */ .screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important} .screen-reader-text:focus{background:#fff;color:#000;clip:auto!important;clip-path:none;height:auto;padding:10px 16px;position:fixed;top:10px;left:10px;z-index:200;border-radius:8px;font-weight:700} img{max-width:100%;height:auto} figure{margin:0 0 16px} figcaption{font-size:13.5px;color:#8f8f98;margin-top:8px} .alignleft{float:left;margin:0 18px 14px 0} .alignright{float:right;margin:0 0 14px 18px} .aligncenter{display:block;margin:0 auto 14px;text-align:center} .wp-caption{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:8px;max-width:100%} .wp-caption img{display:block;margin:0 auto} .wp-caption-text{font-size:13px;color:#8f8f98;text-align:center;margin:6px 0 2px} .gallery{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin:0 0 16px} .gallery-item img{display:block;width:100%} .sticky{position:relative} .bypostauthor{position:relative} .entry-content::after{content:"";display:table;clear:both} /* Entry content (imported pages/posts): the content's own H1 is stripped by the template; h2/h3, lists, tables, quotes and code below use the preview's article styles. */ .art h2{scroll-margin-top:120px} .art a{color:#fff} .art hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:26px 0} .entry-meta{font-size:13.5px;color:#8f8f98} .entry-meta a{color:#c9d1e0} /* Pagination */ .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:34px} .page-numbers{display:inline-block;padding:9px 15px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#e8e8eb;text-decoration:none;font-weight:600;font-size:14.5px} .page-numbers.current{background:#fff;color:#000;border-color:#fff} a.page-numbers:hover{background:rgba(255,255,255,.12);color:#fff} .nav-links .prev,.nav-links .next{white-space:nowrap} /* Post cards (blog index, archives, search, related) */ .post-card{display:flex;flex-direction:column} .post-card h3{margin-top:10px} .post-card h3 a{color:#fff;text-decoration:none} .post-card h3 a:hover{text-decoration:underline;text-underline-offset:3px} .post-card .entry-meta{margin-top:auto;padding-top:12px} /* Search form */ .search-form{display:flex;gap:8px;max-width:560px} .search-form label{flex:1 1 auto;margin:0} .search-form .search-field{width:100%} .search-form .search-submit{flex:0 0 auto;background:#fff;color:#000;font-weight:700;padding:11px 20px;border-radius:999px;border:0;cursor:pointer;font-size:15px} /* Header account / cart icons */ .hdr-icons{display:flex;align-items:center;gap:4px;flex:0 0 auto} .hdr-icons a{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:#e8ecf4;text-decoration:none} .hdr-icons a:hover{background:rgba(255,255,255,.09)} .hdr-icons svg{width:20px;height:20px} .cart-count{position:absolute;top:1px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#fff;color:#000;font-size:10.5px;font-weight:800;line-height:17px;text-align:center} /* Mobile nav extras */ .mnav .btn{margin-top:12px} /* ---------- WooCommerce (monochrome) ---------- */ .woocommerce{color:#a9a9b1} .woocommerce h1,.woocommerce h2,.woocommerce h3{color:#fff} .woocommerce a{color:#fff} .woocommerce .woocommerce-products-header__title{font-size:clamp(28px,3.6vw,44px);font-weight:500;letter-spacing:-.015em;color:#fff;margin:10px 0 12px} .woocommerce-result-count,.woocommerce-ordering{color:#8f8f98;font-size:14px} .woocommerce-ordering select{width:auto;min-width:210px} .woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0} .woocommerce ul.products::before,.woocommerce ul.products::after{display:none} .woocommerce ul.products li.product{width:100%!important;float:none!important;margin:0!important;background:linear-gradient(180deg,#121214,#0c0c0e);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:18px;box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);text-align:left} .woocommerce ul.products li.product a img{border-radius:12px;margin-bottom:12px;background:rgba(255,255,255,.05)} .woocommerce ul.products li.product .woocommerce-loop-product__title{color:#fff;font-size:17px;font-weight:600;padding:0;margin-bottom:6px} .woocommerce ul.products li.product .price{color:#fff;font-size:16px;font-weight:800;margin-bottom:10px;display:block} .woocommerce ul.products li.product .price del{color:#9aa6bb;font-weight:600;font-size:.82em;margin-right:6px} .woocommerce ul.products li.product .price ins{background:none;text-decoration:none} .woocommerce ul.products li.product .button{margin-top:4px} .woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{ background:#fff!important;color:#000!important;font-weight:700!important;padding:11px 20px!important;border-radius:999px!important;border:0!important;font-size:14.5px!important;line-height:1.4!important;text-decoration:none!important} .woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{opacity:.88} .woocommerce .button:disabled,.woocommerce .button.disabled{opacity:.55;cursor:not-allowed} .woocommerce span.onsale{background:#fff!important;color:#000!important;font-weight:800;min-height:0;min-width:0;padding:5px 11px;border-radius:999px;line-height:1.4;font-size:12px;top:14px!important;left:14px!important} .woocommerce .star-rating{color:#fff} .woocommerce .star-rating::before{color:rgba(255,255,255,.3)} .woocommerce div.product .product_title{font-size:clamp(26px,3.4vw,38px);font-weight:500;color:#fff;margin:0 0 10px} .woocommerce div.product p.price,.woocommerce div.product span.price{color:#fff;font-size:22px;font-weight:800;margin-bottom:14px} .woocommerce div.product p.price del,.woocommerce div.product span.price del{color:#9aa6bb;font-size:.72em;margin-right:8px} .woocommerce div.product p.price ins,.woocommerce div.product span.price ins{background:none;text-decoration:none} .woocommerce div.product .woocommerce-product-gallery img{border-radius:16px;background:rgba(255,255,255,.05)} .woocommerce div.product .woocommerce-product-gallery__trigger{border-color:rgba(255,255,255,.2);background:rgba(0,0,0,.5)} .woocommerce div.product form.cart .quantity .qty{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.24);color:#fff;border-radius:12px;padding:10px 8px;width:76px} .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;border:0} .woocommerce div.product .woocommerce-tabs ul.tabs::before{border-bottom:1px solid rgba(255,255,255,.12)} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px 12px 0 0} .woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:#fff;border-color:#fff} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#000!important} .woocommerce div.product .woocommerce-tabs ul.tabs li a{color:#e8e8eb!important} .woocommerce div.product .woocommerce-tabs .panel{background:linear-gradient(180deg,#121214,#0c0c0e);border:1px solid rgba(255,255,255,.10);border-radius:0 0 20px 20px;padding:24px} .woocommerce div.product .woocommerce-tabs .panel h2{font-size:20px} .woocommerce .related.products>h2{font-size:clamp(23px,3.4vw,34px);font-weight:500;color:#fff;margin:0 0 18px} .woocommerce .woocommerce-breadcrumb{color:#9aa6bb;font-size:13.5px;margin:0 0 8px} .woocommerce .woocommerce-breadcrumb a{color:#9aa6bb} .woocommerce table.shop_table{border:1px solid rgba(255,255,255,.12);border-radius:16px;background:linear-gradient(180deg,#121214,#0c0c0e);border-collapse:separate} .woocommerce table.shop_table th,.woocommerce table.shop_table td{border-top:1px solid rgba(255,255,255,.10);color:#d8ddef} .woocommerce table.shop_table thead th{border-top:0;color:#fff} .woocommerce table.shop_table td a{color:#fff} .woocommerce table.shop_table .product-thumbnail img{border-radius:8px} .woocommerce .cart_totals h2{font-size:22px;color:#fff} .woocommerce .cart-collaterals .cart_totals,.woocommerce-page .cart-collaterals .cart_totals{width:100%;max-width:480px} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select, .woocommerce .select2-container .select2-selection--single{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.24);color:#fff;border-radius:12px} .woocommerce form .form-row label{color:#d8ddef} .woocommerce form .form-row .required{color:#fff} .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{color:#fff} .woocommerce .select2-dropdown{background:#101013;border:1px solid rgba(255,255,255,.16);color:#e8e8eb} .woocommerce .select2-container--default .select2-results__option--highlighted{background:rgba(255,255,255,.14);color:#fff} .woocommerce .woocommerce-billing-fields h3,.woocommerce .woocommerce-shipping-fields h3,.woocommerce #order_review_heading{color:#fff;font-size:20px} .woocommerce-checkout #payment{background:linear-gradient(180deg,#121214,#0c0c0e);border:1px solid rgba(255,255,255,.10);border-radius:20px} .woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid rgba(255,255,255,.12)} .woocommerce-checkout #payment div.payment_box{background:rgba(255,255,255,.06);color:#d8ddef} .woocommerce-checkout #payment div.payment_box::before{border-bottom-color:rgba(255,255,255,.06)} .woocommerce-checkout #payment div.place-order{padding:18px} .woocommerce-message,.woocommerce-info,.woocommerce-error{border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.06);color:#e8e8eb} .woocommerce-message{border-top-color:#fff} .woocommerce-message::before{color:#fff} .woocommerce-info::before{color:#fff} .woocommerce-error{border-color:rgba(255,255,255,.35)} .woocommerce-error::before{color:#fff} .woocommerce-error li{color:#e8e8eb} .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0} .woocommerce-account .woocommerce-MyAccount-navigation li{margin:4px 0} .woocommerce-account .woocommerce-MyAccount-navigation a{display:block;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#e8e8eb;text-decoration:none} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:#fff;color:#000;font-weight:700} .woocommerce-pagination ul.page-numbers{display:flex;gap:8px;border:0;justify-content:center} .woocommerce-pagination ul.page-numbers li{border:0} .woocommerce-pagination ul.page-numbers li a,.woocommerce-pagination ul.page-numbers li span{padding:9px 15px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#e8e8eb;text-decoration:none;font-weight:600} .woocommerce-pagination ul.page-numbers li span.current{background:#fff;color:#000;border-color:#fff} .woocommerce .product .stock{color:#fff} .woocommerce .product .out-of-stock{color:#9aa6bb} .woocommerce .woocommerce-product-details__short-description p{color:#a9a9b1} .woocommerce .product_meta{color:#8f8f98;font-size:13.5px} .woocommerce .product_meta a{color:#c9d1e0} .woocommerce .woocommerce-ordering{margin-bottom:16px} .woocommerce .woocommerce-notices-wrapper{margin-bottom:16px} @media(max-width:900px){ .woocommerce ul.products{grid-template-columns:repeat(2,1fr)} .woocommerce div.product .woocommerce-tabs .panel{padding:18px} } @media(max-width:560px){ .woocommerce ul.products{grid-template-columns:1fr} .woocommerce .cart-collaterals .cart_totals{max-width:100%} } /* ---------- WordPress menu markup (wp_nav_menu) ---------- */ /* The preview's nav was JS-built; WP renders