/* * Styles for home-new.php (new homepage concept). * Scoped under body.page-template-home-new so nothing leaks onto other pages. * Loaded conditionally by header-new.php, after custom.css, so these overrides win. */ .page-template-home-new{--cx-cyan:#00B2FF} @property --cxh-ang{syntax:'';inherits:false;initial-value:0deg} @property --cxh-n{syntax:'';inherits:false;initial-value:53} body.page-template-home-new{scroll-behavior:smooth;scroll-padding-top:90px;margin:0;color:#fff;background:#0c0144 linear-gradient(to right,#19181b,#0c0144);overflow-x:clip} /* custom.css forces `body{text-align:center}` at max-width:992px - a sitewide mobile default that every other left-aligned block on this page (the services heading row, the contact column, the FAQ accordion) was built assuming it didn't have to fight. Sections that DO want centering here already use Bootstrap's .text-center, which carries !important and wins regardless, so resetting the default back to left is safe and doesn't touch them. The footer is the deliberate exception - centered on mobile, left-aligned at md+ once it switches to a 3-up row. */ @media (max-width:992px){ .page-template-home-new{text-align:left} } @media (max-width:767.98px){ .page-template-home-new .ftr{text-align:center} } /* custom.css has a global `section{padding:100px 0;background:#fff}` rule - every
on this page needs to opt out of that opaque white fill and the fixed 100px gutter, otherwise it sits on top of and completely hides the body gradient above, no matter what's set on body. Real spacing comes from this page's own py-5 / pb-5 / mb-5 utility classes instead. */ .page-template-home-new #main-content section{background:transparent;padding:0} .page-template-home-new #main-content a{text-decoration:none} .page-template-home-new #main-content h1, .page-template-home-new #main-content h2, .page-template-home-new #main-content h3{font-family:'Nunito',sans-serif;color:#fff;letter-spacing:normal;line-height:1.1;margin-bottom:0;font-weight:100} @keyframes cxh-spin{to{--cxh-ang:360deg}} @keyframes cxh-drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(10%,12%,0) scale(1.25)}} @keyframes cxh-drift2{0%,100%{transform:translate3d(0,0,0) scale(1.1)}50%{transform:translate3d(-12%,-8%,0) scale(.9)}} @keyframes cxh-wordIn{from{transform:translateY(115%) rotate(4deg)}to{transform:none}} @keyframes cxh-fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} @keyframes cxh-float{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-16px) rotate(.6deg)}} @keyframes cxh-marquee{to{transform:translateX(-50%)}} @keyframes cxh-pulse{0%{box-shadow:0 0 0 0 rgba(0,178,255,.75)}100%{box-shadow:0 0 0 14px rgba(0,178,255,0)}} @keyframes cxh-shine{to{background-position:200% center}} @keyframes cxh-count{from{--cxh-n:0}to{--cxh-n:53}} @keyframes cxh-reveal{from{opacity:0;transform:translateY(70px) scale(.96)}to{opacity:1;transform:none}} @keyframes cxh-gridmove{to{background-position:80px 80px,80px 80px}} @keyframes cxh-skel{0%{background-position:-200% 0}100%{background-position:200% 0}} .page-template-home-new .eyebrow{font-size:.875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cx-cyan);font-weight:600} .page-template-home-new .eyebrow-muted{color:rgba(255,255,255,.7)} .page-template-home-new .lead-soft{font-weight:300;color:rgba(255,255,255,.85)} /* One shared size for the page's larger body copy, instead of scattering Bootstrap's fs-5/fs-4 utilities around - :not(.small) leaves the one spot that intentionally pairs .lead-soft with Bootstrap's .small alone. */ .page-template-home-new .lead-soft:not(.small){font-size:1.15rem} .page-template-home-new .emph{font-size:1.15rem} /* buttons - intentionally no overrides here: .btn-primary / .btn-secondary / .btn-white-border are the site's real button classes from custom.css (see the header CTA), used as-is so this page matches the rest of the site. */ /* navbar - transparent over the hero, gaining a translucent dark backdrop once scrolled. .navbar is position:fixed and sits on top of .site-header, which has its own matching solid background - both need overriding, or .site-header would still show through a transparent .navbar. Desktop/tablet only: below 768px custom.css switches .navbar to position:unset (normal flow, not overlaying content), where a transparent nav would have nothing to show through and would just look broken. */ @media (min-width:769px){ .page-template-home-new .site-header, .page-template-home-new .navbar{background:transparent} .page-template-home-new .navbar-scrolled{background:rgba(12,1,68,.55);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)} } /* hero */ .page-template-home-new .hero{position:relative;overflow:hidden} /* .navbar is position:fixed above 768px (custom.css switches it to position:unset at max-width:768px, same breakpoint used here), so the hero needs enough top clearance on desktop/tablet to not sit under it - but not on mobile, where the navbar is back in normal flow and that much padding would just be a dead gap. */ .page-template-home-new .hero-inner{padding-top:11rem;padding-bottom:6.5rem} @media (max-width:768px){.page-template-home-new .hero-inner{padding-top:3rem;padding-bottom:4rem}} .page-template-home-new .blob{position:absolute;border-radius:50%;pointer-events:none} .page-template-home-new .blob1{width:640px;height:640px;left:-8%;top:-12%;background:radial-gradient(circle,rgba(0,178,255,.3),rgba(0,178,255,0) 65%);filter:blur(20px);animation:cxh-drift1 14s ease-in-out infinite} .page-template-home-new .blob2{width:700px;height:700px;right:-12%;top:10%;background:radial-gradient(circle,rgba(0,178,255,.22),rgba(0,178,255,0) 65%);animation:cxh-drift2 18s ease-in-out infinite} .page-template-home-new .aurora{position:absolute;left:50%;top:-10%;width:1300px;max-width:140vw;height:900px;transform:translateX(-50%);background:conic-gradient(from var(--cxh-ang) at 50% 45%,rgba(0,178,255,.38),rgba(0,178,255,0) 28%,rgba(70,40,255,.4) 52%,rgba(0,178,255,0) 78%,rgba(0,178,255,.38));filter:blur(70px);animation:cxh-spin 22s linear infinite;-webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);pointer-events:none} .page-template-home-new .gridbg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 10%,transparent 75%);animation:cxh-gridmove 9s linear infinite} .page-template-home-new .badge-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06);border-radius:999px;padding:.55rem 1.25rem;font-size:.875rem;color:#fff} .page-template-home-new .dot{width:9px;height:9px;border-radius:50%;background:var(--cx-cyan);display:block;animation:cxh-pulse 1.8s ease-out infinite} .page-template-home-new .h1-hero{font-size:clamp(2.6rem,7.2vw,6rem);line-height:1.04;letter-spacing:-.02em} .page-template-home-new .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em} .page-template-home-new .w{display:inline-block;animation:cxh-wordIn 1.1s cubic-bezier(.2,.8,.2,1) both} .page-template-home-new .rot{display:inline-block;height:1.14em;overflow:hidden;vertical-align:bottom;padding-right:.05em} .page-template-home-new .rot ul{margin:0;padding:0;list-style:none;animation:cxh-rot 12s cubic-bezier(.7,0,.2,1) infinite} .page-template-home-new .rot li{height:1.14em;line-height:1.14em;white-space:nowrap} /* translateY here is a % of the
    's own total height, which is (item count x line height) since .rot ul has no explicit height. These steps are tuned for exactly 6
  • (5 real words + 1 clone of the first, for a seamless loop) - adding or removing a word means recalculating every step to 100/N%, not just adding one. */ @keyframes cxh-rot{0%,16%{transform:translateY(0)}20%,36%{transform:translateY(-16.6667%)}40%,56%{transform:translateY(-33.3333%)}60%,76%{transform:translateY(-50%)}80%,96%{transform:translateY(-66.6667%)}100%{transform:translateY(-83.3333%)}} .page-template-home-new .gt{background:linear-gradient(90deg,#00B2FF 0%,#fff 25%,#00B2FF 50%,#7fd8ff 75%,#00B2FF 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cxh-shine 6s linear infinite} .page-template-home-new .fu{animation:cxh-fadeUp .9s cubic-bezier(.2,.8,.2,1) both} .page-template-home-new .fl1{animation:cxh-float 7s ease-in-out infinite} .page-template-home-new .fl2{animation:cxh-float 9s ease-in-out -3s infinite reverse} .page-template-home-new .fl3{animation:cxh-float 8s ease-in-out -5s infinite} .page-template-home-new .glass{position:absolute;background:rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.22);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)} .page-template-home-new .chip{position:absolute;display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 9px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:.875rem;font-weight:600;white-space:nowrap;color:#fff} .page-template-home-new .chip b{width:30px;height:30px;border-radius:50%;background:var(--cx-cyan);color:#000;display:flex;align-items:center;justify-content:center} .page-template-home-new .sk{height:10px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.08) 25%,rgba(0,178,255,.35) 50%,rgba(255,255,255,.08) 75%);background-size:200% 100%;animation:cxh-skel 3.5s linear infinite} /* website strip */ .page-template-home-new .strip-wrap{overflow:hidden} .page-template-home-new .strip{display:flex;width:max-content;gap:20px;padding:9px 0;animation:cxh-marquee 60s linear infinite} .page-template-home-new .strip:hover{animation-play-state:paused} .page-template-home-new .st{flex:none;width:400px;height:270px;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:#05011e;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s} .page-template-home-new .st:hover{transform:translateY(-6px) scale(1.02);border-color:var(--cx-cyan)} .page-template-home-new .st img{width:100%;height:100%;object-fit:cover;object-position:top;display:block} @media (max-width:575.98px){.page-template-home-new .st{width:290px;height:196px}} /* service cards */ .page-template-home-new .svc{position:relative;overflow:hidden;color:#fff;min-height:340px;border:1px solid rgba(255,255,255,.22);border-radius:30px;background:linear-gradient(#fff,#fff) no-repeat 0 100%/100% 0%,linear-gradient(135deg,rgba(255,255,255,.07),rgba(0,0,40,.35));transition:background-size .6s cubic-bezier(.7,0,.2,1),color .45s,border-color .45s,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s} .page-template-home-new .svc:hover{background-size:100% 100%,100% 100%;color:#0c0144;border-color:#fff;transform:translateY(-6px);box-shadow:0 30px 70px -20px rgba(0,178,255,.55)} .page-template-home-new .svc .num{color:var(--cx-cyan);font-size:.95rem;font-weight:700;transition:color .45s} .page-template-home-new .svc:hover .num{color:#0070c0} .page-template-home-new .svc p{color:rgba(255,255,255,.8);transition:color .45s;font-weight:300;font-size:1.06rem;line-height:1.6;max-width:440px} .page-template-home-new .svc:hover p{color:#2b2763} .page-template-home-new .svc .arr{width:52px;height:52px;border-radius:50%;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;transition:transform .5s cubic-bezier(.2,.8,.2,1),background .4s,color .4s,border-color .4s} .page-template-home-new .svc:hover .arr{transform:rotate(45deg);background:#0c0144;color:#fff;border-color:#0c0144} .page-template-home-new .svc .ico{color:var(--cx-cyan);transition:transform .6s cubic-bezier(.2,.8,.2,1),color .45s} .page-template-home-new .svc:hover .ico{transform:scale(1.15) rotate(-6deg);color:#0070c0} .page-template-home-new .svc h3{font-weight:400;font-size:clamp(1.6rem,3vw,2.1rem)} /* The global heading rule sets color directly on h1/h2/h3, which always beats an inherited value - so .svc:hover{color:#0c0144} alone never reached the h3 text. Needs matching specificity (the #main-content id) to actually win on hover. */ .page-template-home-new #main-content .svc:hover h3{color:#0c0144} .page-template-home-new .svc .ghost{position:absolute;right:-10px;bottom:-40px;font-size:220px;font-weight:700;line-height:1;color:rgba(255,255,255,.05);transition:color .45s,transform .6s;pointer-events:none} .page-template-home-new .svc:hover .ghost{color:rgba(12,1,68,.06);transform:translateX(-14px)} /* trusted-by logos */ .page-template-home-new .logo-marquee-card{background:#fff;border-radius:28px;padding:18px 0;overflow:hidden} /* work / portfolio */ .page-template-home-new .pf{display:block;color:#fff;transition:transform .5s cubic-bezier(.2,.8,.2,1)} .page-template-home-new .pf:hover{transform:translateY(-10px);color:#fff} .page-template-home-new .pf .win{border-radius:24px;border:1px solid rgba(255,255,255,.2);overflow:hidden;background:linear-gradient(to right,#19181b,#0c0144);transition:box-shadow .5s,border-color .5s} .page-template-home-new .pf:hover .win{box-shadow:0 30px 70px -20px rgba(0,178,255,.6);border-color:var(--cx-cyan)} .page-template-home-new .pf .win img{width:100%;height:auto;display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1)} .page-template-home-new .pf:hover .win img{transform:scale(1.06)} .page-template-home-new .pf .vw{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;font-size:.875rem;white-space:nowrap;color:var(--cx-cyan)} .page-template-home-new .pf:hover .vw{opacity:1;transform:none} .page-template-home-new .pf .kind{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cx-cyan)} /* reviews */ .page-template-home-new .rbord{border-radius:38px;padding:2px;background:conic-gradient(from var(--cxh-ang),#00B2FF,#0c0144 25%,#fff 45%,#0c0144 65%,#00B2FF);animation:cxh-spin 7s linear infinite} .page-template-home-new .rinner{border-radius:36px;padding:clamp(2rem,5vw,4.25rem);background:linear-gradient(to right,#19181b,#0c0144)} .page-template-home-new .theme{border-top:2px solid var(--cx-cyan);padding-top:.9rem} .page-template-home-new .theme-desc{line-height:1.5} /* faq */ .page-template-home-new .faq .accordion-item{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.25)} .page-template-home-new .faq .accordion-item:first-child{border-top:1px solid rgba(255,255,255,.25)} .page-template-home-new .faq .accordion-button{background:transparent;color:#fff;box-shadow:none;font-size:clamp(1.1rem,2.1vw,1.45rem);padding:1.5rem 0;font-weight:400;gap:1rem} .page-template-home-new .faq .accordion-button:not(.collapsed){color:#fff} .page-template-home-new .faq .accordion-button:hover{color:var(--cx-cyan)} .page-template-home-new .faq .accordion-button::after{content:"+";background-image:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;flex:none;margin-left:auto;font-size:1.6rem;line-height:1;transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s,color .3s;color:#fff} .page-template-home-new .faq .accordion-button:not(.collapsed)::after{transform:rotate(45deg);background:var(--cx-cyan);color:#000;border-color:var(--cx-cyan)} .page-template-home-new .faq .accordion-body{padding:0 0 1.9rem;font-weight:300;font-size:1.06rem;line-height:1.7;color:rgba(255,255,255,.85);max-width:760px} /* big marquee */ .page-template-home-new .mq{display:flex;width:max-content;animation:cxh-marquee-45 45s linear infinite} .page-template-home-new .mq:hover{animation-play-state:paused} @keyframes cxh-marquee-45{to{transform:translateX(-50%)}} .page-template-home-new .big{font-size:clamp(3.2rem,11vw,10.5rem);font-weight:300;white-space:nowrap;letter-spacing:-.02em;line-height:1.05;padding:0 .3em;display:inline-flex;align-items:center;color:#fff; font-family:'Nunito';} /* contact form - Contact Form 7 renders its own markup/classes (.wpcf7-form-control, .wpcf7-submit etc.), not Bootstrap's .form-control, so it needs its own styling rather than reusing the site's .form-control rules. */ .page-template-home-new .form-glass{padding:clamp(1.5rem,3vw,2.5rem);border-radius:32px;background:rgba(5,1,40,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2)} .page-template-home-new .form-glass h3{font-size:1.4rem} .page-template-home-new .form-glass .wpcf7-form p{margin-bottom:1rem} .page-template-home-new .form-glass .wpcf7-form label{display:block;font-size:.875rem;color:rgba(255,255,255,.85);margin-bottom:.35rem} .page-template-home-new .form-glass .wpcf7-form-control{width:100%;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:16px;padding:.9rem 1.1rem;font-family:inherit;transition:border-color .3s,background .3s,box-shadow .3s} .page-template-home-new .form-glass .wpcf7-form-control::placeholder{color:rgba(255,255,255,.5)} .page-template-home-new .form-glass .wpcf7-form-control:focus{outline:0;border-color:var(--cx-cyan);background:rgba(0,178,255,.08);box-shadow:0 0 0 4px rgba(0,178,255,.2)} .page-template-home-new .form-glass textarea.wpcf7-form-control{min-height:120px;resize:vertical} /* CF7 doesn't output the site's .btn-primary class on its submit button, so its look is replicated here directly to match the branding used everywhere else. */ .page-template-home-new .form-glass .wpcf7-submit{width:100%;justify-content:center;padding:12px 20px;border-radius:30px;background:#3e3a4d;color:#fff;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:.3s} .page-template-home-new .form-glass .wpcf7-submit:hover{background:#3e3a4d;color:#fff;border-color:rgba(255,255,255,.15)} .page-template-home-new .form-glass .wpcf7-spinner{margin:0 0 0 .5rem} .page-template-home-new .form-glass .wpcf7-not-valid-tip{display:block;color:#ff8a8a;font-size:.825rem;margin-top:.35rem} .page-template-home-new .form-glass .wpcf7-response-output{margin:1rem 0 0;border-radius:12px;font-size:.9rem} /* footer (footer-new.php) - custom.css already gives the bare