/* Theme Name: Eclipse Web Solutions v7.9.4 Mobile Eclipse Clearance Author: Eclipse Web Solutions Description: Native editable WordPress block theme with animated eclipse artwork. Version: 7.9.4 Requires at least: 6.4 Requires PHP: 7.4 Text Domain: eclipse-web-solutions */ :root{--violet:#c63cff;--blue:#14a8ff;--black:#020204;--muted:#babac4} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:#fff;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none} .topbar{position:relative;z-index:20;min-height:104px;padding:24px clamp(20px,3.1vw,44px);background:#000}.topbar .wp-block-navigation__container{gap:clamp(18px,3vw,36px)}.topbar .wp-block-navigation a{font-size:.78rem}.brand-link{display:block}.exact-header-logo{display:block;width:285px;max-width:42vw;height:72px;background:url("assets/images/eclipse-header-logo.png") center/contain no-repeat} .eclipse-editor-page,.eclipse-editor-page>.wp-block-group{margin-block-start:0}.hero{position:relative;overflow:hidden;min-height:970px;padding:0 20px 34px!important;background:radial-gradient(circle at 50% 32%,#11051b 0,transparent 28%),#010103;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start!important}.stars,.stars:before,.stars:after{position:absolute;inset:0;content:"";pointer-events:none}.stars{z-index:0;background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.8px),radial-gradient(circle,rgba(220,235,255,.68) 0 .8px,transparent 1.7px);background-size:255px 218px,386px 334px;background-position:9px 17px,61px 42px;filter:drop-shadow(0 0 2px rgba(255,255,255,.65));opacity:.58}.stars:before{background-image:radial-gradient(circle,rgba(255,255,255,.96) 0 1.5px,transparent 3px),radial-gradient(circle,rgba(210,230,255,.82) 0 1px,transparent 2.5px);background-size:562px 446px,298px 394px;background-position:80px 31px,21px 92px;animation:twinkleBright 5.8s ease-in-out infinite alternate}.stars:after{background:radial-gradient(circle at 14% 28%,rgba(255,255,255,.95) 0 1px,transparent 4px),radial-gradient(circle at 76% 63%,rgba(255,255,255,.85) 0 1px,transparent 4px),radial-gradient(circle at 45% 82%,rgba(255,255,255,.75) 0 1px,transparent 4px);animation:oddTwinkle 7.4s ease-in-out infinite} .eclipse-wrap{position:relative;flex:0 0 auto;width:660px;max-width:none;height:570px;margin-top:0;transform-origin:top center}.spark-canvas{position:absolute;inset:0;width:660px;height:570px;z-index:2;pointer-events:none;filter:contrast(1.25) saturate(1.25)}.eclipse{position:absolute;left:87px;top:45px;width:455px;height:455px;border-radius:50%;background:#000;box-shadow:-14px -6px 11px #c63cff,12px 8px 13px #116dff,0 0 24px #882cff,inset 0 0 35px #05000a}.eclipse:before{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid transparent;border-top-color:#eea4ff;border-left-color:#c238ff;border-right-color:#168fff;border-bottom-color:#5143ff;filter:drop-shadow(0 0 9px #c539ff) drop-shadow(4px 5px 10px #086fff)}.flare{position:absolute;width:15px;height:15px;border-radius:50%;right:31px;top:84px;background:#fff;box-shadow:0 0 8px 4px #fff,0 0 22px 13px #cf39ff,0 0 50px 28px #7b16b8;animation:flare 2.5s ease-in-out infinite}.exact-ew-logo{position:absolute;left:50%;top:50%;width:330px;height:170px;transform:translate(-50%,-50%);background:url("assets/images/eclipse-ew-logo.png") center/contain no-repeat;z-index:3} .hero-copy{position:relative;z-index:4;width:min(719px,92vw);margin-top:-26px!important;gap:0!important}.editor-wordmark,.editor-solutions{margin-left:auto!important;margin-right:auto!important;background-position:center;background-repeat:no-repeat;background-size:contain}.editor-wordmark{width:100%!important;max-width:719px!important;aspect-ratio:719/91;margin-top:0!important;margin-bottom:0!important;background-image:url("assets/images/eclipse-wordmark.png")}.editor-solutions{width:100%!important;max-width:719px!important;aspect-ratio:719/26;margin-top:18px!important;margin-bottom:0!important;background-image:url("assets/images/web-solutions-wordmark.png")}.editor-wordmark img,.editor-solutions img{display:block;width:100%;height:100%;opacity:0}.trinity{width:min(530px,100%)!important;margin:34px auto 32px!important;font-size:1rem;letter-spacing:.42em;white-space:nowrap}.trinity em{font-style:normal;margin:0 16px}.editor-cta-row{margin:0!important}.editor-cta-row .cta{position:relative;isolation:isolate;overflow:hidden;width:min(414px,85vw);padding:0;border:1px solid transparent;border-radius:999px;background:linear-gradient(#020204,#020204) padding-box,linear-gradient(90deg,var(--violet),var(--blue)) border-box!important;box-shadow:0 0 12px #8d2cff44}.editor-cta-row .cta:after{content:"";position:absolute;z-index:2;top:-45%;bottom:-45%;left:-38%;width:24%;pointer-events:none;transform:skewX(-24deg) translateX(-420%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),rgba(101,192,255,.78),transparent);filter:blur(1px);animation:ctaFlash 6.5s ease-in-out infinite}.editor-cta-row .cta .wp-block-button__link{position:relative;z-index:1;display:grid;place-items:center;min-height:56px;padding:0 24px;background:transparent;color:#fff;font-size:.95rem;letter-spacing:.09em}.down{margin:32px 0 0!important;font-size:2rem;line-height:1;color:#cc39ff;text-shadow:0 0 12px #b92cff;animation:bounce 2s infinite} .services{position:relative;overflow:hidden;min-height:590px;margin:0!important;padding:52px 5% 90px!important;background:#020204;text-align:center}.section-head{position:relative;z-index:2}.section-head>p:first-child{margin:0}.section-head>p:first-child span{color:var(--violet);letter-spacing:.18em;font-size:.8rem}.section-head h1{font-size:2.35rem;line-height:1.12;font-weight:350;margin:13px 0 24px}.section-head h1 strong{font-weight:350;background:linear-gradient(90deg,var(--violet),var(--blue));color:transparent;background-clip:text}.section-head>p:last-child{color:var(--muted);line-height:1.6;font-size:.95rem;margin:0}.cards{position:relative;z-index:2;max-width:800px;margin:34px auto 0!important;gap:26px!important}.card{position:relative;background:linear-gradient(145deg,#0e0f13,#050609);border:1px solid #292a30;border-radius:13px;padding:27px 20px 24px;min-height:245px;box-shadow:0 20px 30px #000;transition:.3s}.card:after{content:"";position:absolute;left:20%;right:20%;bottom:-2px;height:2px;background:linear-gradient(90deg,transparent,var(--violet),var(--blue),transparent);filter:drop-shadow(0 0 7px #7a2cff)}.card:hover{transform:translateY(-8px);border-color:#64358a}.card .icon{height:82px;margin:0!important;display:grid;place-items:center;font-family:monospace;font-size:3.4rem;color:#ae3cff;text-shadow:0 0 15px #5622ff}.card h2{font-size:1rem;margin:9px}.card p:last-child{font-size:.79rem;line-height:1.7;color:#c1c1c8}.wave{position:absolute;top:-20px;width:35%;height:150px;background-image:radial-gradient(#a52cff 1px,transparent 1.5px);background-size:9px 9px;mask-image:linear-gradient(to bottom,#000,transparent);opacity:.55;animation:wave 5s ease-in-out infinite}.wave.left{left:-8%;transform:skewY(8deg)}.wave.right{right:-8%;background-image:radial-gradient(#1489ff 1px,transparent 1.5px);transform:skewY(-8deg)}.anchor-section{min-height:35vh;display:grid;place-items:center;border-top:1px solid #111}.contact{text-align:center;padding:90px 20px 120px;border-top:1px solid #15151b;background:radial-gradient(circle at 50% 8%,rgba(126,42,255,.14),transparent 38%),#020204}.contact>h2{margin:10px 0 12px;font-size:clamp(2rem,5vw,3.2rem);font-weight:350}.contact>p{margin:0;color:var(--violet);font-size:.78rem;letter-spacing:.17em}.eclipse-contact-form{width:min(860px,94vw);margin:38px auto 0;padding:30px;border:1px solid #2d2e38;border-radius:22px;background:linear-gradient(145deg,rgba(13,14,20,.96),rgba(4,5,9,.96));box-shadow:0 24px 55px rgba(0,0,0,.48),0 0 24px rgba(126,42,255,.08);text-align:left}.contact-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.eclipse-contact-form label{display:block}.eclipse-contact-form label span{display:block;margin:0 0 8px;color:#d5d5dd;font-size:.76rem;letter-spacing:.08em}.eclipse-contact-form input,.eclipse-contact-form textarea{display:block;width:100%;border:1px solid #343540;border-radius:11px;background:#07080d;color:#fff;font:inherit;padding:13px 14px;outline:none;transition:border-color .2s,box-shadow .2s}.eclipse-contact-form input:focus,.eclipse-contact-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,168,255,.12),0 0 16px rgba(20,168,255,.12)}.contact-message-field{margin-top:18px}.eclipse-contact-form textarea{min-height:150px;resize:vertical}.contact-submit{display:block;margin:24px auto 0;padding:13px 30px;border:1px solid transparent;border-radius:999px;background:linear-gradient(#07080d,#07080d) padding-box,linear-gradient(90deg,var(--violet),var(--blue)) border-box;color:#fff;font-weight:600;letter-spacing:.1em;cursor:pointer;box-shadow:0 0 14px rgba(126,42,255,.24)}.contact-submit:hover,.contact-submit:focus-visible{box-shadow:0 0 20px rgba(20,168,255,.34);outline:none}.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.contact-notice{width:min(860px,94vw);margin:24px auto 0!important;padding:13px 18px;border-radius:10px;font-size:.9rem!important;letter-spacing:0!important}.contact-success{border:1px solid #2f8b61;background:rgba(29,104,71,.18);color:#b8f4d7!important}.contact-error{border:1px solid #9d4658;background:rgba(120,39,57,.18);color:#ffd0d8!important}@media(max-width:620px){.contact{padding:70px 14px 90px}.eclipse-contact-form{width:100%;padding:22px 16px}.contact-field-grid{grid-template-columns:1fr;gap:14px}.contact-message-field{margin-top:14px}.eclipse-contact-form textarea{min-height:130px}} @keyframes flare{50%{transform:scale(1.4);opacity:.8}}@keyframes twinkleBright{from{opacity:.12}to{opacity:.72}}@keyframes oddTwinkle{0%,18%,46%,72%,100%{opacity:.12}9%,34%,61%,86%{opacity:.9}}@keyframes bounce{50%{transform:translateY(8px)}}@keyframes wave{50%{translate:0 8px}}@keyframes ctaFlash{0%,86%{transform:skewX(-24deg) translateX(-420%);opacity:0}88%{opacity:1}97%{transform:skewX(-24deg) translateX(690%);opacity:.9}98%,100%{transform:skewX(-24deg) translateX(690%);opacity:0}} @media(max-width:820px){.topbar .wp-block-navigation{display:none}.topbar{min-height:82px}.exact-header-logo{width:242px;height:61px}.hero{min-height:860px}.eclipse-wrap{transform:scale(.78);margin-bottom:-125px}.hero-copy{margin-top:0!important}.cards{max-width:600px}.trinity{font-size:.8rem;letter-spacing:.3em}.trinity em{margin:0 8px}} @media(max-width:520px){.topbar{min-height:72px;padding:12px 18px}.exact-header-logo{width:205px;height:52px}.hero{min-height:700px;padding-bottom:28px!important}.eclipse-wrap{transform:scale(.58);margin-bottom:-235px}.hero-copy{width:94vw;margin-top:0!important}.editor-solutions{margin-top:10px!important}.trinity{width:82vw!important;margin:22px auto 22px!important;font-size:.62rem;letter-spacing:.2em}.trinity em{margin:0 4px}.editor-cta-row .cta{width:72vw}.editor-cta-row .cta .wp-block-button__link{min-height:44px;font-size:.7rem;padding:0 12px}.down{margin-top:22px!important;font-size:1.7rem}.services{padding:42px 5% 70px!important}.section-head h1{font-size:1.9rem}.section-head>p:last-child br{display:none}.cards{display:flex!important;flex-direction:column;max-width:360px}.card{min-height:230px}} @media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}} .editor-styles-wrapper{background:#020204;color:#fff}.editor-styles-wrapper .hero{min-height:900px}.editor-styles-wrapper .eclipse-wrap{pointer-events:none}.editor-styles-wrapper .wp-block-navigation{color:#fff} /* Final sparse sky and flowing service waves. Hide stale saved shooting-star markup too. */ .shooting-star,.shooting-star:before,.shooting-star:after{display:none!important;visibility:hidden!important;animation:none!important} .stars{background-image:radial-gradient(circle,rgba(255,255,255,.86) 0 1px,transparent 1.8px),radial-gradient(circle,rgba(220,235,255,.6) 0 .8px,transparent 1.7px);background-size:360px 308px,546px 472px;background-position:18px 34px,122px 84px;opacity:.5;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.55))} .stars:before{background-image:radial-gradient(circle,rgba(255,255,255,.94) 0 1.4px,transparent 3px);background-size:794px 630px;background-position:160px 62px;animation:rareTwinkleOne 8.7s ease-in-out infinite} .stars:after{background:radial-gradient(circle at 14% 28%,rgba(255,255,255,.95) 0 1px,transparent 4px),radial-gradient(circle at 76% 63%,rgba(255,255,255,.82) 0 1px,transparent 4px);animation:rareTwinkleTwo 11.3s ease-in-out 2.1s infinite} .services{margin-top:-24px!important;padding-top:42px!important} .wave{top:-46px;width:48%;height:210px;border-radius:50% 50% 42% 58%/68% 62% 38% 32%;background-size:10px 10px;mask-image:radial-gradient(ellipse 78% 52% at 50% 48%,#000 15%,rgba(0,0,0,.92) 46%,transparent 75%);transform-origin:center;opacity:.62} .wave.left{left:-15%;transform:rotate(7deg) skewY(4deg);animation:waveLeft 6.8s ease-in-out infinite} .wave.right{right:-15%;transform:rotate(-7deg) skewY(-4deg);animation:waveRight 7.6s ease-in-out infinite} @keyframes rareTwinkleOne{0%,30%,48%,76%,100%{opacity:.08}38%{opacity:.7}84%{opacity:.42}} @keyframes rareTwinkleTwo{0%,24%,54%,79%,100%{opacity:.08}33%{opacity:.8}66%{opacity:.48}88%{opacity:.72}} @keyframes waveLeft{0%,100%{translate:0 0;rotate:-1deg;scale:1 .9}50%{translate:12px 14px;rotate:3deg;scale:1.08 1.04}} @keyframes waveRight{0%,100%{translate:0 0;rotate:1deg;scale:1 .92}50%{translate:-12px 16px;rotate:-3deg;scale:1.08 1.05}} @media(max-width:520px){.services{margin-top:-16px!important;padding-top:34px!important}.wave{top:-28px;height:130px;width:62%}} /* Click-to-flip About Eclipse panel. */ /* Editable project placeholders on the Portfolio back face. */ /* Editable pricing destination for the PRICE PLAN navigation tab. */ .pricing{position:relative;margin:0!important;padding:100px 20px;min-height:380px;display:grid;place-items:center;text-align:center;border-top:1px solid #15151b;background:radial-gradient(circle at 50% 25%,rgba(126,42,255,.15),transparent 48%),#020204}.pricing h2{margin:0 0 18px;font-size:clamp(2rem,5vw,3.2rem);font-weight:350;background:linear-gradient(90deg,#fff 15%,var(--violet),var(--blue));color:transparent;background-clip:text} @media(max-width:520px){.pricing{min-height:300px;padding:72px 20px}} /* Price Plan uses the same click-to-flip system as About and Portfolio. */ /* Prevent mirrored face content from bleeding through during a flip. */ /* Face visibility follows click state only; hover never changes the shown side. */ /* Responsive stage: anchor the fixed 660px artwork by its true center before scaling. */ @media(max-width:820px){ .eclipse-wrap{align-self:flex-start;left:50%;margin-left:-330px;transform:scale(.78);margin-bottom:-125px} .hero-copy{max-width:94vw} .cards{width:min(600px,92vw)} } @media(max-width:700px){ .eclipse-wrap{transform:scale(.70);margin-bottom:-170px} .cards{display:flex!important;flex-direction:column;max-width:380px} .card{width:100%;min-height:230px} } @media(max-width:520px){ .hero{padding-left:14px!important;padding-right:14px!important} .eclipse-wrap{transform:scale(.58);margin-bottom:-235px} .hero-copy{width:calc(100vw - 28px);max-width:none} .editor-wordmark,.editor-solutions{max-width:100%!important} .trinity{max-width:100%;white-space:normal;line-height:1.8} } @media(max-width:390px){ .eclipse-wrap{transform:scale(.52);margin-bottom:-275px} .editor-cta-row .cta{width:82vw} } @media(max-width:350px){ .eclipse-wrap{transform:scale(.46);margin-bottom:-310px} .trinity{font-size:.56rem;letter-spacing:.15em} } @media(min-width:521px) and (max-width:820px) and (orientation:landscape){ .eclipse-wrap{transform:scale(.68);margin-bottom:-180px} } /* A viewport-sized stage prevents the fixed artwork from widening or offsetting the flex layout. */ .eclipse-stage{position:relative;z-index:1;flex:0 0 auto;width:100%;height:570px;overflow:visible} .eclipse-stage>.eclipse-wrap{position:absolute;top:0;left:50%;width:660px;max-width:none;margin:0 0 0 -330px!important;align-self:auto;transform:scale(1);transform-origin:top center} @media(max-width:820px){.eclipse-stage{height:445px}.eclipse-stage>.eclipse-wrap{transform:scale(.78);margin-left:-330px!important;margin-bottom:0!important}} @media(max-width:700px){.eclipse-stage{height:399px}.eclipse-stage>.eclipse-wrap{transform:scale(.70);margin-bottom:0!important}} @media(max-width:520px){.eclipse-stage{height:331px}.eclipse-stage>.eclipse-wrap{transform:scale(.58);margin-bottom:0!important}} @media(max-width:390px){.eclipse-stage{height:296px}.eclipse-stage>.eclipse-wrap{transform:scale(.52);margin-bottom:0!important}} @media(max-width:350px){.eclipse-stage{height:262px}.eclipse-stage>.eclipse-wrap{transform:scale(.46);margin-bottom:0!important}} @media(min-width:521px) and (max-width:820px) and (orientation:landscape){.eclipse-stage{height:388px}.eclipse-stage>.eclipse-wrap{transform:scale(.68);margin-bottom:0!important}} /* * Responsive layout authority (2.3.0) * * The artwork is intentionally drawn on a fixed 660 x 570 canvas. On narrow * screens, size the stage from one fluid scale value and centre that canvas * inside it. This replaces the older accumulated pixel offsets above and also * supports a previously saved front-page template until particles.js adds the * stage wrapper. */ @media (max-width: 820px) { html, body, .wp-site-blocks, .eclipse-editor-page { width: 100%; max-width: 100%; overflow-x: clip; } .topbar { width: 100%; min-height: 0; padding: 12px 14px 10px; flex-direction: column; flex-wrap: nowrap !important; justify-content: center !important; gap: 8px; } .brand-link, .exact-header-logo { max-width: calc(100vw - 36px); } .brand-link { align-self: center; } /* The earlier mobile stylesheet hid this navigation completely. */ .topbar .wp-block-navigation { display: flex !important; width: 100%; max-width: 100%; justify-content: center; } .topbar .wp-block-navigation__responsive-container, .topbar .wp-block-navigation__responsive-container-content { display: flex !important; position: static !important; width: 100%; padding: 0 !important; background: transparent !important; } .topbar .wp-block-navigation__responsive-container-content { justify-content: center; } .topbar .wp-block-navigation__container { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center; width: 100%; gap: clamp(7px, 2.5vw, 18px) !important; } .topbar .wp-block-navigation-item { flex: 0 0 auto; } .topbar .wp-block-navigation a { display: block; padding: 7px 0; font-size: clamp(.5rem, 1.9vw, .68rem); line-height: 1; letter-spacing: .06em; white-space: nowrap; } .topbar .wp-block-navigation a:focus-visible, .topbar .wp-block-navigation a:active { color: var(--violet); } .hero { --eclipse-mobile-width: min(514.8px, calc(100vw - 20px)); --eclipse-mobile-height: min(444.6px, calc(86.3636vw - 17.27px)); --eclipse-mobile-clearance: 0px; box-sizing: border-box; width: 100%; min-height: 0 !important; height: auto !important; padding: 0 14px 30px !important; overflow: hidden; justify-content: flex-start !important; } .hero > * { margin-block-start: 0 !important; } /* Phone-only breathing room so the eclipse rim/glow is never clipped at the top. */ @media (max-width: 760px) { .hero { --eclipse-mobile-clearance: 18px; } } .eclipse-stage { position: relative; flex: 0 0 auto; width: 100%; max-width: 100%; height: calc(var(--eclipse-mobile-height) + var(--eclipse-mobile-clearance)); padding-top: var(--eclipse-mobile-clearance); margin: 0 !important; overflow: visible; } .eclipse-stage > .eclipse-wrap { position: relative; top: auto; left: auto; width: var(--eclipse-mobile-width); height: var(--eclipse-mobile-height); margin: 0 auto !important; transform: none !important; } /* Compatibility with an older template cached in WordPress. */ .hero > .eclipse-wrap { position: relative; left: auto; flex: 0 0 var(--eclipse-mobile-height); width: var(--eclipse-mobile-width); height: var(--eclipse-mobile-height); margin: 0 auto !important; transform: none !important; align-self: center; } .eclipse-wrap .spark-canvas { width: 100%; height: 100%; filter: saturate(1.15); } .eclipse-wrap .eclipse { left: 13.1818%; top: 7.8947%; width: 68.9394%; height: auto; aspect-ratio: 1; } .eclipse-wrap .exact-ew-logo { width: 72.5275%; height: 37.3626%; } /* Keep the rim flare proportional to the fluid eclipse on small screens. */ .eclipse-wrap .flare { z-index: 4; width: 2.4%; height: auto; aspect-ratio: 1; right: 1.5%; top: 18%; background: #fff; border: 0; box-shadow: 0 0 3px 1px #fff, 0 0 9px 5px #cf39ff, 0 0 22px 11px #7b16b8; overflow: visible; } .eclipse-wrap .flare::before, .eclipse-wrap .flare::after { content: none !important; display: none !important; } .hero-copy { position: relative; z-index: 4; flex: 0 0 auto; width: min(719px, calc(100vw - 28px)); max-width: calc(100vw - 28px); margin: 0 auto !important; } .editor-wordmark, .editor-solutions { width: 100% !important; max-width: 100% !important; } .trinity { width: 100% !important; max-width: 100%; white-space: normal; line-height: 1.8; } /* Avoid expensive full-layer filters while a mobile browser is scrolling. */ .stars { filter: none; } } /* Performance: avoid filtering two large animated layers during page scroll. */ .spark-canvas { filter: saturate(1.15); } .stars { filter: none; } .wave, .flare, .editor-cta-row .cta::after { will-change: transform, opacity; } /* Four editable Portfolio cards in one horizontal snap-scrolling track. */ /* Compact desktop dashboard row for the three interactive information tiles. */ .flip-tiles-row{position:relative;z-index:2;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;width:min(1400px,94vw);max-width:94vw;margin:72px auto!important;gap:clamp(18px,2vw,32px)!important} @media(max-width:899px){.flip-tiles-row{display:flex!important;flex-direction:column;width:100%;max-width:100%;margin:45px auto!important;padding:0 14px;gap:28px!important}} @media (max-width: 520px) { .hero { --eclipse-mobile-width: min(409.2px, calc(100vw - 12px)); --eclipse-mobile-height: min(353.4px, calc(86.3636vw - 10.36px)); } .hero-copy { width: calc(100vw - 28px); } .exact-header-logo { width: min(205px, calc(100vw - 36px)); height: 52px; } .trinity { margin: 20px auto !important; font-size: clamp(.56rem, 2.4vw, .68rem); letter-spacing: .18em; } .editor-cta-row .cta { width: min(82vw, 330px); } } /* * Site Editor visibility authority. * Show every flip face as a normal editable block; never apply live-site * transforms, fixed heights, clipping or click-state visibility in the editor. */ /* Scroll performance: promote 3D layers only during an actual tile flip. */ /* Eclipse Assistant and live-chat widget. */ .eclipse-chat{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:9998;font-family:inherit;color:#fff}.eclipse-chat-toggle{display:flex;align-items:center;justify-content:center;width:62px;height:62px;padding:0;border:1px solid rgba(199,75,255,.8);border-radius:50%;background:#05060c;box-shadow:0 0 20px rgba(184,45,255,.55),0 0 35px rgba(25,152,255,.25);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.eclipse-chat-toggle:hover,.eclipse-chat-toggle:focus-visible{transform:translateY(-2px) scale(1.04);box-shadow:0 0 25px rgba(196,57,255,.8),0 0 45px rgba(31,166,255,.4);outline:2px solid #fff;outline-offset:3px}.eclipse-chat-icon{position:relative;display:block;width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:radial-gradient(circle at 60% 43%,#11152a 0 44%,#020207 46% 100%);box-shadow:inset 0 0 4px #000}.eclipse-chat-icon:before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 210deg,#b91dff,#ff64e6 26%,#7b48ff 52%,#13a8ff 78%,#b91dff);z-index:-1;filter:drop-shadow(0 0 5px #a738ff)}.eclipse-chat-icon:after{content:"";position:absolute;right:-5px;top:4px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 8px 3px #d843ff}.eclipse-chat-toggle-label{position:absolute;right:72px;white-space:nowrap;padding:8px 12px;border:1px solid rgba(172,72,255,.45);border-radius:18px;background:rgba(5,6,12,.94);font-size:.74rem;letter-spacing:.04em;box-shadow:0 8px 24px rgba(0,0,0,.4)}.eclipse-chat-panel{position:absolute;right:0;bottom:76px;display:flex;flex-direction:column;width:min(370px,calc(100vw - 28px));height:min(540px,calc(100dvh - 120px));overflow:hidden;border:1px solid rgba(190,73,255,.65);border-radius:22px;background:linear-gradient(155deg,rgba(12,8,26,.99),rgba(2,12,24,.99));box-shadow:0 22px 70px rgba(0,0,0,.7),0 0 25px rgba(124,58,237,.28);transform:translateY(14px) scale(.96);transform-origin:bottom right;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s}.eclipse-chat.is-open .eclipse-chat-panel{transform:none;opacity:1;visibility:visible;pointer-events:auto}.eclipse-chat.is-open .eclipse-chat-toggle-label{display:none}.eclipse-chat-header{display:flex;align-items:center;gap:12px;padding:16px 17px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.22)}.eclipse-chat-title{min-width:0;flex:1}.eclipse-chat-title strong,.eclipse-chat-title span{display:block}.eclipse-chat-title strong{font-size:.92rem;letter-spacing:.05em}.eclipse-chat-status{margin-top:2px;color:#a9b4c8;font-size:.67rem}.eclipse-chat-status.is-online{color:#73f6c0}.eclipse-chat-close{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:1.35rem;line-height:1;cursor:pointer}.eclipse-chat-close:hover,.eclipse-chat-close:focus-visible{background:rgba(201,67,255,.25);outline:1px solid #d365ff}.eclipse-chat-messages{flex:1;display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding:16px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8637c4 transparent}.eclipse-chat-message{max-width:86%;padding:10px 13px;border-radius:15px;font-size:.82rem;line-height:1.48;white-space:pre-wrap}.eclipse-chat-message.bot,.eclipse-chat-message.agent{align-self:flex-start;border:1px solid rgba(94,191,255,.2);border-bottom-left-radius:4px;background:rgba(29,42,68,.76)}.eclipse-chat-message.agent:before{content:"Live agent";display:block;margin-bottom:3px;color:#73f6c0;font-size:.58rem;text-transform:uppercase;letter-spacing:.08em}.eclipse-chat-message.user{align-self:flex-end;border-bottom-right-radius:4px;background:linear-gradient(135deg,#8a2be2,#2569d8)}.eclipse-chat-message a{color:#bdeeff;text-decoration:underline;text-underline-offset:2px}.eclipse-chat-quick{display:flex;flex-wrap:wrap;gap:7px;padding:0 15px 12px}.eclipse-chat-quick button{padding:7px 10px;border:1px solid rgba(160,83,255,.5);border-radius:16px;background:rgba(71,33,111,.28);color:#fff;font:inherit;font-size:.7rem;cursor:pointer}.eclipse-chat-quick button:hover,.eclipse-chat-quick button:focus-visible{border-color:#5dd9ff;background:rgba(38,121,175,.25);outline:none}.eclipse-chat-quick .live-chat-choice{border-color:rgba(63,232,178,.65)}.eclipse-chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2)}.eclipse-chat-input{min-width:0;flex:1;height:42px;padding:0 13px;border:1px solid rgba(255,255,255,.17);border-radius:21px;background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:.8rem}.eclipse-chat-input::placeholder{color:#aeb4c4}.eclipse-chat-input:focus{border-color:#4fc7ff;outline:none;box-shadow:0 0 0 2px rgba(70,196,255,.14)}.eclipse-chat-send{width:42px;height:42px;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,#bd2eff,#168ee8);color:#fff;font-size:1.05rem;cursor:pointer}.eclipse-chat-send:hover,.eclipse-chat-send:focus-visible{filter:brightness(1.18);outline:2px solid rgba(255,255,255,.65);outline-offset:2px} @media(max-width:520px){.eclipse-chat{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}.eclipse-chat-toggle{width:56px;height:56px}.eclipse-chat-toggle-label{display:none}.eclipse-chat-panel{right:0;bottom:68px;height:min(510px,calc(100dvh - 94px));border-radius:18px}.eclipse-chat-message{font-size:.79rem}} @media(prefers-reduced-motion:reduce){.eclipse-chat-toggle,.eclipse-chat-panel{transition:none}} /* More compact contact form on desktop and mobile. */ .contact{padding:62px 20px 76px}.contact>h2{margin:7px 0 9px;font-size:clamp(1.8rem,4vw,2.75rem)}.eclipse-contact-form{margin-top:26px;padding:22px 24px;border-radius:18px}.contact-field-grid{gap:13px 16px}.eclipse-contact-form label span{margin-bottom:6px}.eclipse-contact-form input,.eclipse-contact-form textarea{padding:10px 12px}.contact-message-field{margin-top:13px}.eclipse-contact-form textarea{min-height:105px}.contact-submit{margin-top:17px;padding:11px 26px} @media(max-width:620px){.contact{padding:46px 12px 58px}.contact>h2{font-size:1.75rem}.eclipse-contact-form{margin-top:20px;padding:17px 14px;border-radius:16px}.contact-field-grid{gap:10px}.eclipse-contact-form label span{margin-bottom:5px}.eclipse-contact-form input,.eclipse-contact-form textarea{padding:9px 11px;font-size:16px}.contact-message-field{margin-top:10px}.eclipse-contact-form textarea{min-height:92px}.contact-submit{margin-top:14px;padding:10px 23px}} /* Stable tile order and matching horizontal controls for pricing. */ /* Price packages occupy one complete carousel viewport at a time. */ /* Exact shared geometry for Portfolio and Price Plan sub-tiles. */ /* Uniform compact mobile dimensions for all three flip tiles. */ /* Let a long mobile About biography expand instead of clipping above the card. */ /* Preserve the intended word break in the mobile services introduction. */ @media(max-width:520px){.section-head>p:last-child br{display:inline!important}} /* Solid-black eclipse center for the chat icon. */ .eclipse-chat-icon{background:#000!important} /* Keep the Price Plans front typography identical to About and Portfolio. */ /* * Desktop scroll stability: retain the two decorative service waves without * continuously repainting their large masked gradient layers. Scaling and * rotating those layers during wheel scrolling caused a visible stall near * the "Powerful Websites. Seamless Solutions." section on some PCs. */ .services .wave.left, .services .wave.right { animation: none !important; will-change: auto !important; } /* Consistent editable feature lists across every price-plan card. */ /* Override accidental block-level font changes so all plan headings match. */ /* Keep the first snap point reachable after font or content-width changes. */ /* Match pricing titles even when the Site Editor nests a heading differently. */ /* Build-payment and managed-care offers inside all three pricing tiles. */ /* Version 2.13.2: premium Eclipse typography. */ body, .editor-styles-wrapper { font-family: "Manrope", "Avenir Next", Avenir, "Segoe UI", sans-serif !important; font-weight: 400; letter-spacing: -.01em; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Refined, high-contrast pricing accents without harsh white numerals. */ /* * Version 2.13: dedicated pricing section. This deliberately removes nested * horizontal/vertical scrolling while keeping every price and description as * editable WordPress block content. */ /* One readable type size throughout every expanded plan-detail panel. */ /* Final cascade for the expanded pricing typography. */ /* Align Price Plans with the two-tile row and give each detail box more room. */ /* Wider, less text-heavy pricing cards on medium desktop screens. */ /* Let narrower Portfolio cards show their complete editable content. */ /* v2.14.2 — editable Selected Projects tiles */ /* Front-end carousel remains one project per slide. */ /* Let Gutenberg control content inside each project card. */ /* ========================================================= v2.15.0 — APPROVED ABOUT + HORIZONTAL PORTFOLIO REDESIGN ========================================================= */ /* Let About and Portfolio expand enough to present premium content. */ /* ---------- ABOUT ---------- */ /* ---------- PORTFOLIO ---------- */ /* Approved four-card horizontal layout. */ /* Desktop arrow controls sit outside the row; pagination dots are generated by JS. */ /* Old instructional hint is no longer needed in the premium back. */ /* Gutenberg: all four cards remain native editable columns and are easy to reorder. */ /* Tablet/mobile: 2 cards then 1 card with horizontal scrolling. */ /* Preserve accessibility. */ /* ========================================================= v2.16.0 — FULL-WIDTH STACKED PORTFOLIO + ABOUT Approved layout: equal-height full-width sections ========================================================= */ /* Break Portfolio and About out of the old two-column tile row. */ .flip-tiles-row{ display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:24px!important; width:100%!important; max-width:none!important; } /* Keep both front/back faces exactly the same height. */ /* Portfolio fills the new wide canvas. */ /* About: larger, more legible typography and balanced use of equal height. */ /* Site Editor: preserve the same stacked structure while keeping blocks editable. */ .editor-styles-wrapper .flip-tiles-row{ display:flex!important; flex-direction:column!important; gap:24px!important; } /* Responsive: equal desktop/tablet heights; natural height on phones for readability. */ @media (max-width:899px){ .flip-tiles-row{ gap:16px!important; } } /* ========================================================= v2.17.0 — ALIGN PORTFOLIO + ABOUT TO FLEXIBLE PACKAGES ========================================================= */ /* * The pricing/Flexible Packages panel is the master horizontal alignment. * Portfolio and About now use the same outer width and side gutters. */ .flip-tiles-row{ width:100%!important; max-width:none!important; margin-left:auto!important; margin-right:auto!important; padding-left:0!important; padding-right:0!important; } /* Match the pricing panel's full content width rather than a narrower tile width. */ /* Keep the visible rounded panel edges on exactly the same left/right line. */ /* * Normalize the shared parent gutters. The pricing section and stacked * Portfolio/About sections now align to the same page content rails. */ main > .wp-block-group.alignfull, .wp-site-blocks > main, .wp-site-blocks main{ box-sizing:border-box; } /* Desktop: use the same 28px visual inset seen on Flexible Packages. */ @media (min-width:900px){ .flip-tiles-row, .pricing{ width:calc(100% - 56px)!important; max-width:none!important; margin-left:28px!important; margin-right:28px!important; box-sizing:border-box!important; } /* Prevent legacy rules from making Portfolio/About narrower. */ } /* Tablet/mobile retain equal gutters without horizontal overflow. */ @media (max-width:899px){ .flip-tiles-row, .pricing{ width:calc(100% - 24px)!important; margin-left:12px!important; margin-right:12px!important; box-sizing:border-box!important; } } /* ========================================================= v2.18.0 — STATIC PORTFOLIO + FLIPPABLE ABOUT ========================================================= */ /* Portfolio is no longer a flip card: always show Selected Projects. */ /* About remains the only interactive flip tile. */ /* Refined front-facing Eclipse mark. */ /* Keep Portfolio/About aligned to Flexible Packages. */ /* v2.19.0 approved About flip */ /* ========================================================= v2.20.0 — FINAL BATCH FIXES - Portfolio fully static (no background-click flip) - Larger project cards - Full screenshots, never cropped - Approved eclipse graphic on About back - Larger secondary About typography ========================================================= */ /* ---------- PORTFOLIO: bigger cards and complete screenshots ---------- */ /* Desktop keeps all four substantial cards visible. */ /* ---------- PORTFOLIO: hard-disable flip behavior visually ---------- */ /* ---------- ABOUT BACK: use approved glowing eclipse image ---------- */ /* Increase all secondary About copy for legibility. */ /* Preserve good spacing after increasing type. */ /* Gutenberg editor mirrors full screenshots instead of crops. */ /* Tablet/mobile remain readable; cards swipe horizontally. */ /* ========================================================= v2.21.0 — FIX ABOUT ECLIPSE LEFT VISUAL Real Gutenberg image block replaces pseudo-element background. ========================================================= */ /* Turn off earlier pseudo-element artwork entirely. */ /* Real image fills the entire left side. */ /* All actual text/content stays on the right. */ /* Keep improved secondary typography. */ /* Editor shows the image normally and keeps all blocks editable. */ /* Mobile: image becomes a large visual at the top instead of a blank side column. */ /* ========================================================= v2.22.0 — FINAL POLISH Larger portfolio cards + sharper screenshots Crisp About secondary typography Smoother About flip ========================================================= */ /* ---------- GLOBAL TEXT RENDERING FOR THESE TWO SECTIONS ---------- */ /* ---------- PORTFOLIO: make the four cards genuinely larger ---------- */ /* Complete screenshot, no crop, no zoom, no blur-inducing transforms. */ /* Keep all four cards visible on large desktop. */ /* ---------- ABOUT: match Portfolio secondary-font crispness ---------- */ /* ---------- ABOUT FLIP: one transform, fixed geometry, smoother compositing ---------- */ /* Disable hover transforms on About that can fight the flip transform. */ /* Avoid animation-time layout changes. */ /* Gutenberg editor should not use 3D overlay geometry. */ /* Responsive card sizing without losing screenshot clarity. */ /* ========================================================= v2.23.0 — APPROVED ABOUT + 2x2 PORTFOLIO Price/Flexible Packages intentionally untouched. ========================================================= */ /* PORTFOLIO — approved 2 × 2 presentation */ /* Make screenshots dominate the section rather than leaving empty card space. */ /* Portfolio remains completely static. */ /* ABOUT — crisp secondary typography matching Portfolio */ /* About flip: fixed geometry + single GPU transform for smoother motion. */ /* Responsive: keep the approved 2x2 layout until phone widths. */ /* ========================================================= v2.24.0 — APPROVED PORTFOLIO + ABOUT + FLEXIBLE PACKAGES ========================================================= */ :root{ --eclipse-purple:#b43cff; --eclipse-violet:#7b4dff; --eclipse-blue:#168dff; --eclipse-panel:#070a12; --eclipse-line:rgba(145,78,255,.52); --eclipse-copy:#c4c9d3; } /* ---------- Shared integrated Option 2 section tab ---------- */ /* ---------- PORTFOLIO ---------- */ /* Portfolio is static: no flip/click animation. */ /* Reposition existing arrow controls/dots around 2×2 layout. */ /* ---------- ABOUT ---------- */ /* Keep existing smooth flip. */ /* WordPress editor: don't overlay/flip the revised sections. */ /* Responsive */ /* ========================================================= v2.26.0 — APPROVED ROUND Scope: - Portfolio Option 2 header + approved 2x2 tiles - Flexible Packages Option 2 header - Package icon + tagline top area only - No About, price, payment, feature-list, or unrelated changes ========================================================= */ :root{ --eclipse-purple:#b43cff; --eclipse-violet:#7b4dff; --eclipse-blue:#168dff; } /* Shared Option 2 integrated header tab */ /* ---------- PORTFOLIO ---------- */ /* ---------- FLEXIBLE PACKAGES HEADER ONLY ---------- */ /* ---------- PACKAGE TOP AREA ONLY ---------- */ /* Editor safety */ /* Responsive */ /* v2.27.0 approved correction round */ /* Package icons are a separate centered row above each title. */ /* Portfolio header uses the same Option 2 geometry and clean hierarchy. */ /* More vertical room: full screenshot aspect ratios are preserved, never cropped. */ /* About secondary typography matches pricing detail-panel clarity. */ /* ========================================================= v3.1.9 LOCKED APPROVED SECTIONS ABOUT / PORTFOLIO / FLEXIBLE PACKAGES ========================================================= */ .approved-section{ position:relative; width:calc(100vw - 48px)!important; max-width:none!important; margin:48px 0 48px calc(50% - 50vw + 24px)!important; box-sizing:border-box; } /* ABOUT: exact approved visual, real flip */ .approved-about{ perspective:1800px; background:transparent!important; } .approved-about-flip{ position:relative; width:100%; aspect-ratio:1512/492; transform-style:preserve-3d; transition:transform .72s cubic-bezier(.2,.72,.2,1); cursor:pointer; } .approved-about.is-flipped .approved-about-flip{transform:rotateY(180deg)} .approved-about-face{ position:absolute; inset:0; width:100%; height:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden; } .approved-about-back{transform:rotateY(180deg)} .approved-about-face img{ display:block; width:100%; height:100%; object-fit:fill; border:0; } /* PORTFOLIO: exact locked static design */ .approved-portfolio{ background:transparent!important; } .approved-portfolio>img{ display:block; width:100%; height:auto; border:0; } /* PACKAGES: code-based, functional, matches locked design */ .approved-packages{ padding:78px 30px 28px; color:#fff; border:1px solid transparent; border-radius:24px; background: linear-gradient(#050811,#050811) padding-box, linear-gradient(100deg,#c13cff 0%,#754cff 50%,#1595ff 100%) border-box; overflow:visible; } .approved-packages::before, .approved-packages::after{ content:""; position:absolute; top:-1px; height:1px; width:calc(50% - 190px); } .approved-packages::before{ left:18px; background:linear-gradient(90deg,#c13cff,#8d48ff); } .approved-packages::after{ right:18px; background:linear-gradient(90deg,#704dff,#1595ff); } .approved-tab{ position:absolute; top:-24px; left:50%; transform:translateX(-50%); z-index:10; width:390px; height:49px; display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; background:#060910; border-top:1px solid transparent; border-image:linear-gradient(90deg,#c13cff,#1595ff) 1; clip-path:polygon(9% 0,91% 0,100% 100%,0 100%); font-size:1rem; font-weight:800; letter-spacing:.055em; } .approved-tab span{color:#c84cff} .pkg-head{text-align:center;margin-bottom:34px} .pkg-head h2{ margin:0 0 9px; color:#fff; font-size:clamp(2.7rem,4.6vw,4.7rem); line-height:1; font-weight:500; } .pkg-head h2 span{ color:transparent; background:linear-gradient(90deg,#c13cff,#7651ff,#1595ff); -webkit-background-clip:text; background-clip:text; } .pkg-head p{ margin:0 auto; max-width:930px; color:#d0d4dc; font-size:16px; line-height:1.5; } .pkg-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .pkg-card{ display:flex; flex-direction:column; min-width:0; min-height:590px; padding:25px 20px 20px; box-sizing:border-box; border:1px solid rgba(132,145,170,.44); border-radius:16px; background:linear-gradient(155deg,#0a0d16,#05070d); } .pkg-top{ display:flex; align-items:center; gap:20px; min-height:95px; } .pkg-icon{ flex:0 0 88px; width:88px; height:88px; background-repeat:no-repeat; background-position:center; background-size:contain; filter:drop-shadow(0 0 12px rgba(169,61,255,.14)); } .pkg-launchpad .pkg-icon{background-image:url('assets/images/pricing-icons/launchpad.svg')} .pkg-ascend .pkg-icon{background-image:url('assets/images/pricing-icons/ascend.svg')} .pkg-orbit .pkg-icon{background-image:url('assets/images/pricing-icons/orbit.svg')} .pkg-top h3{margin:0 0 6px;font-size:1.3rem;color:#fff} .pkg-top p{margin:0;color:#c6cad2;font-size:.88rem} .pkg-price-row{ display:flex; align-items:baseline; justify-content:center; gap:12px; margin:18px 0; } .pkg-price-row strong{ color:#2f9dff; /* LOCKED BLUE PRICE */ font-size:2.55rem; line-height:1; } .pkg-price-row span{color:#c7cbd3;font-size:.95rem} .pkg-care{ padding:14px 16px; border:1px solid rgba(126,143,168,.32); border-radius:12px; background:rgba(9,13,22,.82); } .pkg-install{ padding-bottom:11px; border-bottom:1px solid rgba(255,255,255,.09); color:#cbd0da; font-size:.82rem; } .pkg-install b{color:#2f9dff} .pkg-care-head{ display:flex; justify-content:space-between; gap:12px; margin-top:12px; color:#fff; } .pkg-care-head b{color:#2f9dff} .pkg-combined{margin-top:9px;color:#aeb5c1;font-size:.77rem} .pkg-combined b{color:#2f9dff} .pkg-care ul{ margin:11px 0 0; padding-left:18px; } .pkg-care li{ margin:5px 0; color:#c5cad3; font-size:.75rem; line-height:1.35; } .pkg-details{ margin-top:15px; border:1px solid rgba(126,143,168,.34); border-radius:10px; background:rgba(6,9,15,.78); } .pkg-details summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; min-height:58px; padding:0 17px; cursor:pointer; color:#fff; font-weight:700; } .pkg-details summary::-webkit-details-marker{display:none} .pkg-details summary i{ color:#2f9dff; /* LOCKED + SYMBOL */ font-size:2rem; font-style:normal; font-weight:300; line-height:1; } .pkg-details[open] summary i{transform:rotate(45deg)} .pkg-details-body{ padding:0 17px 15px; border-top:1px solid rgba(255,255,255,.07); } .pkg-details-body ul{padding-left:18px} .pkg-details-body li{margin:7px 0;color:#c7ccd5;font-size:.78rem;line-height:1.4} .pkg-details-body p{margin:12px 0 0;color:#8f96a3;font-size:.68rem;line-height:1.4} .pkg-quote{ display:flex; align-items:center; justify-content:center; min-height:50px; margin-top:auto; color:#fff!important; border:1px solid transparent; border-radius:999px; background: linear-gradient(#070a11,#070a11) padding-box, linear-gradient(90deg,#c13cff,#1595ff) border-box; text-decoration:none!important; font-size:.9rem; font-weight:800; letter-spacing:.06em; } .pkg-benefits{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:30px; padding:24px 28px; border:1px solid rgba(126,143,168,.35); border-radius:14px; background:linear-gradient(180deg,rgba(13,17,28,.82),rgba(8,11,19,.82)); } .pkg-benefits>div{ display:flex; align-items:center; gap:15px; min-width:0; padding:0 24px; border-right:1px solid rgba(255,255,255,.09); } .pkg-benefits>div:first-child{padding-left:0} .pkg-benefits>div:last-child{border-right:0;padding-right:0} .pkg-benefits>div>span{ flex:0 0 48px; display:flex; width:48px; height:48px; align-items:center; justify-content:center; color:#b84cff; border:1px solid rgba(181,70,255,.7); border-radius:12px; font-size:1.4rem; } .pkg-benefits>div:last-child>span{color:#2f9dff;border-color:rgba(47,157,255,.7)} .pkg-benefits b{display:block;color:#fff;font-size:.92rem;margin-bottom:4px} .pkg-benefits small{display:block;color:#aeb5c1;font-size:.75rem;line-height:1.35} @media(max-width:1050px){ .pkg-grid{grid-template-columns:1fr} .pkg-card{min-height:0} .pkg-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .pkg-benefits>div{border-right:0;padding:0} } @media(max-width:760px){ .approved-section{ width:calc(100vw - 20px)!important; margin:34px 0 34px calc(50% - 50vw + 10px)!important; } .approved-about-flip{aspect-ratio:1512/492} .approved-tab{width:min(360px,82vw);font-size:.88rem} .approved-packages{padding:66px 14px 20px} .pkg-grid{grid-template-columns:1fr} .pkg-benefits{grid-template-columns:1fr} .pkg-top{align-items:center} } /* ========================================================= v3.1.9 APPROVED REFINEMENTS Typography clarity + About flip cue + unified section tabs ========================================================= */ /* ABOUT: front-side click cue integrated beside ABOUT ECLIPSE */ .approved-about-front .approved-about-flip-arrow{ position:absolute; z-index:6; top:3.2%; left:61.3%; transform:translate(-50%,-50%); color:#28a7ff; font-family:Arial,Helvetica,sans-serif; font-size:clamp(16px,1.55vw,29px); font-weight:500; line-height:1; text-shadow:0 0 9px rgba(40,167,255,.52); pointer-events:none; } /* ABOUT: sharpen secondary type on both faces without changing geometry. The approved faces remain unchanged; this increases perceived crispness at browser scaling and prevents soft interpolation. */ .approved-about-face img{ image-rendering:auto; -webkit-font-smoothing:antialiased; transform:translateZ(0); backface-visibility:hidden; } .approved-about{ -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } /* PACKAGES: force the same compact integrated diagonal tab proportions and purple-to-blue outline language as About / Portfolio. */ .approved-packages .approved-tab{ top:-1px; width:390px; height:49px; transform:translate(-50%,-50%); clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); background:#050811; border:0; box-shadow:none; } .approved-packages .approved-tab::before{ content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(90deg,#c13cff 0%,#7d4dff 50%,#1595ff 100%); clip-path:inherit; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .approved-packages .approved-tab b{ font-size:.98rem; font-weight:700; letter-spacing:.045em; } .approved-packages .approved-tab span{ font-size:.9rem; color:#c84cff; } @media(max-width:760px){ .approved-about-front .approved-about-flip-arrow{ top:3.2%; left:61.5%; font-size:15px; } .approved-packages .approved-tab{ width:min(360px,82vw); height:44px; } } /* ========================================================= v3.1.9 — LOCKED APPROVED UNIFIED DESIGN About / Portfolio / Flexible Packages share one frame system ========================================================= */ /* Identical frame geometry */ .unified-approved-frame{ position:relative; box-sizing:border-box; border:1px solid transparent!important; border-radius:18px!important; background: linear-gradient(#03060d,#03060d) padding-box, linear-gradient(100deg,#d13cff 0%,#874bff 49%,#00a8ff 100%) border-box!important; overflow:visible!important; } /* Shared Portfolio-style centered tab shape */ .unified-approved-tab{ position:absolute; top:-1px; left:50%; z-index:25; transform:translate(-50%,0); width:330px; height:38px; display:flex; align-items:center; justify-content:center; gap:11px; box-sizing:border-box; color:#fff; background:#050811; font-family:Arial,Helvetica,sans-serif; font-size:.92rem; font-weight:700; letter-spacing:.045em; line-height:1; clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); } .unified-approved-tab::before{ content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(90deg,#d13cff 0%,#7f4cff 50%,#00a8ff 100%); clip-path:inherit; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .unified-approved-tab .unified-diamond{ color:#b95cff; font-size:1.2rem; line-height:1; } /* Continue the exact upper outline through the header tab */ .unified-approved-frame::before, .unified-approved-frame::after{ content:""; position:absolute; z-index:20; top:-1px; height:1px; width:calc(50% - 165px); pointer-events:none; } .unified-approved-frame::before{ left:0; background:linear-gradient(90deg,#d13cff,#854cff); } .unified-approved-frame::after{ right:0; background:linear-gradient(90deg,#784cff,#00a8ff); } /* ABOUT: centered visual flip cue; no detached/floating arrow */ .approved-about{ border-radius:18px!important; } .approved-about::after{ /* visual click cue centered in the title-tab region of the approved artwork */ content:"→"; position:absolute; z-index:40; top:8px; left:calc(50% + 118px); width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:#20a8ff; font-family:Arial,Helvetica,sans-serif; font-size:20px; font-weight:500; line-height:1; text-shadow:0 0 8px rgba(32,168,255,.5); pointer-events:none; } /* About secondary-font clarity pass */ .approved-about-face img{ image-rendering:auto!important; transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; filter:contrast(1.035) saturate(1.015); } .approved-about{ -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } /* Packages now use exact unified frame/tab component */ .approved-packages{ border-radius:18px!important; padding-top:58px!important; } .approved-packages>.approved-tab{ display:none!important; } .approved-packages>.unified-approved-tab{ display:flex!important; } /* Remove prior package tab pseudo treatment so it cannot conflict */ .approved-packages .unified-approved-tab{ box-shadow:none!important; border:0!important; } /* Portfolio keeps its approved visual content while the outer frame is unified */ .approved-portfolio{ border-radius:18px!important; padding:0!important; background:#03060d!important; } .approved-portfolio>img{ border-radius:17px!important; } /* Keep all three widths identical */ .approved-section{ width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; margin-right:0!important; } /* Responsive consistency */ @media(max-width:760px){ .approved-section{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; } .unified-approved-tab{ width:min(300px,78vw); height:36px; font-size:.82rem; } .unified-approved-frame::before, .unified-approved-frame::after{ width:calc(50% - 150px); } .approved-about::after{ left:calc(50% + 104px); top:7px; font-size:17px; } } /* ========================================================= v3.1.9 REQUESTED FIXES - no duplicate frame lines - centered About arrow with transparent background - latest approved About back - Packages tab matches About/Portfolio outline geometry ========================================================= */ /* ABOUT / PORTFOLIO: Their approved visual assets already contain the perimeter frame and tab. Do NOT draw a second CSS border or pseudo-line over them. */ .approved-about, .approved-portfolio{ border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; } .approved-about::before, .approved-about::after, .approved-portfolio::before, .approved-portfolio::after{ content:none!important; display:none!important; } /* About arrow: clean standalone cyan arrow, no square/block/background. */ .approved-about::after{ content:"→"!important; display:flex!important; position:absolute; z-index:50; top:9px; left:calc(50% + 116px); width:24px; height:24px; align-items:center; justify-content:center; color:#21a8ff; background:transparent!important; border:0!important; outline:0!important; box-shadow:none!important; border-radius:0!important; font-family:Arial,Helvetica,sans-serif; font-size:20px; font-weight:500; line-height:1; text-shadow:0 0 7px rgba(33,168,255,.45); pointer-events:none; } /* Preserve crisp About rendering. */ .approved-about-face img{ display:block; width:100%; height:100%; object-fit:fill; image-rendering:auto; transform:translateZ(0); filter:contrast(1.045) saturate(1.01); } /* FLEXIBLE PACKAGES: ONE frame only. No pseudo-line duplicates. */ .shared-clean-frame{ position:relative; box-sizing:border-box; border:1px solid transparent!important; border-radius:18px!important; background: linear-gradient(#03060d,#03060d) padding-box, linear-gradient(100deg,#d13cff 0%,#824cff 49%,#00a8ff 100%) border-box!important; overflow:visible!important; } .shared-clean-frame::before, .shared-clean-frame::after{ content:none!important; display:none!important; } /* Exact Portfolio-style header silhouette: a single top line with diagonal sides integrated into the frame. */ .shared-clean-tab{ position:absolute; top:-1px; left:50%; z-index:30; transform:translateX(-50%); width:390px; height:54px; display:flex; align-items:center; justify-content:center; gap:12px; box-sizing:border-box; color:#fff; background:#050811; clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); font-family:Arial,Helvetica,sans-serif; font-size:1rem; font-weight:700; letter-spacing:.05em; } .shared-clean-tab::before{ content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(90deg,#d13cff 0%,#824cff 50%,#00a8ff 100%); clip-path:inherit; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .shared-clean-tab .shared-diamond{ color:#b85cff; font-size:1.2rem; line-height:1; } .approved-packages{ padding-top:72px!important; } .approved-packages>.approved-tab, .approved-packages>.unified-approved-tab{ display:none!important; } /* All sections remain same width. */ .approved-section{ width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; margin-right:0!important; } @media(max-width:760px){ .approved-section{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; } .shared-clean-tab{ width:min(330px,80vw); height:48px; font-size:.86rem; } .approved-about::after{ left:calc(50% + 102px); top:7px; font-size:17px; } } /* ========================================================= v3.1.9 — APPROVED ABOUT / FRAME / PACKAGES FIXES ========================================================= */ /* Shared page geometry */ .approved-section{ width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; margin-right:0!important; } /* ABOUT + PORTFOLIO approved artwork already contains its frame. Never draw a second line over those image-based frames. */ .approved-about, .approved-portfolio{ border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; } .approved-about::before, .approved-portfolio::before, .approved-portfolio::after{ content:none!important; display:none!important; } /* Front-only About arrow. It is transparent, aligned with the title row, and completely disappears after flip. */ .approved-about::after{ content:"→"; position:absolute; z-index:50; top:8px; left:calc(50% + 116px); width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:#21a8ff; background:none!important; border:0!important; outline:0!important; box-shadow:none!important; font:500 20px/1 Arial,Helvetica,sans-serif; text-shadow:0 0 7px rgba(33,168,255,.42); pointer-events:none; } .approved-about.is-flipped::after{ content:none!important; display:none!important; } /* About faces: front may fill its approved canvas. Back MUST retain the user's supplied reference aspect ratio — never stretch. */ .approved-about-face{ overflow:hidden; } .approved-about-front img{ width:100%; height:100%; object-fit:fill; display:block; } .approved-about-back{ background:#000; display:flex; align-items:center; justify-content:center; } .approved-about-back img{ width:100%; height:100%; object-fit:contain!important; object-position:center center!important; display:block; image-rendering:auto; } /* Keep the About tab visually centered on both faces. The approved back reference itself contains the centered tab treatment. */ .approved-about-front, .approved-about-back{ transform-style:preserve-3d; -webkit-backface-visibility:hidden; backface-visibility:hidden; } /* FLEXIBLE PACKAGES — one perimeter frame, no second line. Same centered diagonal-notch silhouette as the approved About/Portfolio tab. */ .approved-packages.shared-clean-frame{ position:relative; box-sizing:border-box; border:1px solid transparent!important; border-radius:18px!important; background: linear-gradient(#03060d,#03060d) padding-box, linear-gradient(100deg,#d13cff 0%,#824cff 49%,#00a8ff 100%) border-box!important; overflow:visible!important; padding-top:72px!important; } .approved-packages.shared-clean-frame::before, .approved-packages.shared-clean-frame::after{ content:none!important; display:none!important; } .eclipse-frame-tab{ position:absolute; top:-1px; left:50%; z-index:30; transform:translateX(-50%); width:390px; height:54px; display:flex; align-items:center; justify-content:center; gap:12px; box-sizing:border-box; color:#fff; background:#050811; clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); font:700 1rem/1 Arial,Helvetica,sans-serif; letter-spacing:.05em; } .eclipse-frame-tab::before{ content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(90deg,#d13cff 0%,#824cff 50%,#00a8ff 100%); clip-path:inherit; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .eclipse-frame-diamond{ color:#b85cff; font-size:1.2rem; line-height:1; } .approved-packages>.approved-tab, .approved-packages>.unified-approved-tab, .approved-packages>.shared-clean-tab{ display:none!important; } /* No old extra horizontal underline beneath the package title tab. */ .approved-packages .eclipse-frame-tab + *{ border-top:0; } @media(max-width:760px){ .approved-section{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; } .eclipse-frame-tab{ width:min(330px,80vw); height:48px; font-size:.86rem; } .approved-about::after{ left:calc(50% + 102px); top:7px; font-size:17px; } } /* ========================================================= v3.1.9 — NATIVE ABOUT BACK + INTEGRATED PACKAGES NOTCH ========================================================= */ .approved-section{ width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; margin-right:0!important; } /* Front About remains the approved face; arrow is front-only */ .approved-about{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important} .approved-about::before{content:none!important;display:none!important} .approved-about::after{ content:"→";position:absolute;z-index:50;top:8px;left:calc(50% + 116px); width:24px;height:24px;display:flex;align-items:center;justify-content:center; color:#21a8ff;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important; font:500 20px/1 Arial,Helvetica,sans-serif;text-shadow:0 0 7px rgba(33,168,255,.42);pointer-events:none } .approved-about.is-flipped::after{content:none!important;display:none!important} .approved-about-front img{width:100%;height:100%;object-fit:fill;display:block} /* Rebuilt native back */ .approved-about-back{background:#020409;overflow:visible!important} .approved-about-back>img{display:none!important} .about-back-native{ position:relative;width:100%;height:100%;overflow:hidden;box-sizing:border-box; border:1px solid transparent;border-radius:18px; background:linear-gradient(#020409,#020409) padding-box, linear-gradient(100deg,#d13cff 0%,#824cff 49%,#00a8ff 100%) border-box } .about-back-content{ display:grid;grid-template-columns:45% 55%;width:100%;height:100%; box-sizing:border-box;padding:62px 28px 22px } .about-back-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:0 34px 0 34px} .about-back-copy h2{ margin:0 0 12px;color:transparent; background:linear-gradient(90deg,#cf3cff,#7454ff,#1595ff); -webkit-background-clip:text;background-clip:text; font:500 clamp(2rem,2.6vw,3rem)/1.05 Arial,Helvetica,sans-serif } .about-back-intro{margin:0;color:#d7d9df;font:500 .9rem/1.55 Arial,Helvetica,sans-serif;max-width:640px} .about-back-divider{position:relative;height:1px;margin:18px 0 16px;background:linear-gradient(90deg,#c13cff,#824cff 58%,rgba(21,149,255,.14))} .about-back-divider span{position:absolute;right:16%;top:50%;width:7px;height:7px;transform:translate(50%,-50%) rotate(45deg);border:1px solid #9f4dff;background:#020409} .about-back-list{display:grid;gap:11px;margin:0;padding:0;list-style:none} .about-back-list li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start} .about-check{ display:flex;width:20px;height:20px;align-items:center;justify-content:center;margin-top:1px; border:1px solid #a84cff;border-radius:50%;color:#eee3ff; font:700 12px/1 Arial,Helvetica,sans-serif;box-shadow:0 0 10px rgba(168,76,255,.14) } .about-back-list b{color:#fff;font:700 .88rem/1.3 Arial,Helvetica,sans-serif} .about-back-list span:not(.about-check){color:#d0d3da;font:500 .82rem/1.4 Arial,Helvetica,sans-serif} .about-back-art{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden} .about-back-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center} .about-back-tagline{ position:absolute;right:7%;bottom:7%;color:transparent; background:linear-gradient(90deg,#ef34ff,#8b56ff,#00a8ff); -webkit-background-clip:text;background-clip:text; font-family:"Brush Script MT","Segoe Script",cursive; font-size:clamp(1.25rem,1.95vw,2.3rem);line-height:1;white-space:nowrap } .about-back-tab{ position:absolute;top:-1px;left:50%;z-index:15;transform:translateX(-50%); width:360px;height:46px;display:flex;align-items:center;justify-content:center;gap:11px; color:#fff;background:#050811;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); font:700 .95rem/1 Arial,Helvetica,sans-serif;letter-spacing:.04em } .about-back-tab::before{ content:"";position:absolute;inset:0;padding:1px; background:linear-gradient(90deg,#d13cff,#824cff 50%,#00a8ff); clip-path:inherit; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none } .about-back-diamond{color:#ba5cff;font-size:1.15rem} .about-back-return{ position:absolute;left:45%;top:50%;z-index:20;transform:translate(-50%,-50%); width:36px;height:36px;display:flex;align-items:center;justify-content:center; border:1px solid rgba(255,255,255,.75);border-radius:50%;color:#fff;background:#03060d; font-size:19px;cursor:pointer;box-shadow:0 0 14px rgba(153,76,255,.12) } /* Portfolio: no duplicate frame lines */ .approved-portfolio{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important} .approved-portfolio::before,.approved-portfolio::after{content:none!important;display:none!important} /* Packages: one frame with a real cut-in notch; no separate tab element */ .package-integrated-frame{ --notch-w:390px;--notch-h:54px; position:relative;isolation:isolate;box-sizing:border-box; padding:72px 30px 28px!important;border:0!important;border-radius:18px; background:#03060d!important;overflow:visible!important } .package-integrated-frame::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:18px;padding:1px; background:linear-gradient(100deg,#d13cff 0%,#824cff 49%,#00a8ff 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude } .package-integrated-frame::after{ content:attr(data-frame-title);position:absolute;top:-1px;left:50%;z-index:5;transform:translateX(-50%); width:var(--notch-w);height:var(--notch-h);display:flex;align-items:center;justify-content:center; box-sizing:border-box;color:#fff;background:#03060d; clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); font:700 1rem/1 Arial,Helvetica,sans-serif;letter-spacing:.05em;text-align:center } .package-integrated-frame>*{position:relative;z-index:2} .package-integrated-frame .pkg-head{margin-top:0} .package-integrated-frame .pkg-head::after{ content:"";position:absolute;z-index:6;top:-73px;left:50%;transform:translateX(-50%); width:var(--notch-w);height:var(--notch-h);padding:1px;box-sizing:border-box; background:linear-gradient(90deg,#d13cff,#824cff 50%,#00a8ff); clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none } .package-integrated-frame .pkg-head::before{ content:"◇";position:absolute;z-index:7;top:-64px;left:50%;transform:translateX(-108px); color:#ba5cff;font-size:1.15rem;line-height:1;pointer-events:none } .approved-packages>.approved-tab,.approved-packages>.unified-approved-tab, .approved-packages>.shared-clean-tab,.approved-packages>.eclipse-frame-tab{display:none!important} @media(max-width:1050px){ .about-back-content{grid-template-columns:1fr;grid-template-rows:48% 52%;padding:58px 20px 20px} .about-back-copy{padding:0 20px}.about-back-return{left:50%;top:48%} } @media(max-width:760px){ .approved-section{width:calc(100vw - 20px)!important;margin-left:calc(50% - 50vw + 10px)!important} .about-back-tab{width:min(320px,82vw);height:44px;font-size:.84rem} .about-back-copy h2{font-size:1.8rem}.about-back-intro{font-size:.82rem} .about-back-list b{font-size:.82rem}.about-back-list span:not(.about-check){font-size:.76rem} .package-integrated-frame{--notch-w:min(330px,80vw);--notch-h:48px;padding:64px 14px 20px!important} .package-integrated-frame::after{font-size:.86rem} .package-integrated-frame .pkg-head::before{top:-58px;transform:translateX(-94px)} .package-integrated-frame .pkg-head::after{top:-65px} } /* ========================================================= v3.1.9 — FINAL APPROVED FIXES ========================================================= */ .approved-section{ width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; margin-right:0!important; } /* ---------------- ABOUT FRONT ---------------- */ .approved-about{ position:relative; border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; } .approved-about::before, .approved-about::after{ content:none!important; display:none!important; } .approved-about-front{ overflow:hidden; } .approved-about-front img{ display:block; width:100%; height:100%; object-fit:fill; image-rendering:auto; filter:contrast(1.045) saturate(1.015); } /* mathematically centered full group: diamond + label + arrow */ .about-front-tab-overlay{ position:absolute; top:0; left:50%; z-index:60; transform:translateX(-50%); width:360px; height:46px; display:flex; align-items:center; justify-content:center; gap:14px; box-sizing:border-box; color:#fff; background:#050811; clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); font:700 .95rem/1 Arial,Helvetica,sans-serif; letter-spacing:.045em; } .about-front-tab-overlay::before{ content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(90deg,#d13cff 0%,#824cff 50%,#00a8ff 100%); clip-path:inherit; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .about-front-diamond{color:#b95cff;font-size:1.15rem} .about-front-arrow{color:#21a8ff;font-size:1.2rem;line-height:1;background:transparent!important} /* front overlay hidden when flipped */ .approved-about.is-flipped .about-front-tab-overlay{ opacity:0; visibility:hidden; pointer-events:none; } /* sharpen/slightly enlarge front secondary typography visually */ .approved-about-front{ -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } .approved-about-front img{ transform:scale(1.008); transform-origin:center; } /* ---------------- ABOUT BACK ---------------- */ .approved-about-back{ background:#020409; overflow:visible!important; } .approved-about-back>img{display:none!important} .about-back-native{ position:relative; width:100%; height:100%; overflow:hidden; box-sizing:border-box; border:1px solid transparent; border-radius:18px; background: linear-gradient(#020409,#020409) padding-box, linear-gradient(100deg,#d13cff 0%,#824cff 49%,#00a8ff 100%) border-box; } .about-back-tab{ position:absolute; top:0; left:50%; z-index:20; transform:translateX(-50%); width:360px; height:46px; display:flex; align-items:center; justify-content:center; gap:12px; color:#fff; background:#050811; clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); font:700 .95rem/1 Arial,Helvetica,sans-serif; letter-spacing:.045em; } .about-back-tab::before{ content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(90deg,#d13cff,#824cff 50%,#00a8ff); clip-path:inherit; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .about-back-diamond{color:#b95cff;font-size:1.15rem} .about-back-content{ display:grid; grid-template-columns:48% 52%; width:100%; height:100%; box-sizing:border-box; padding:62px 30px 24px; } .about-back-copy{ display:flex; flex-direction:column; justify-content:center; min-width:0; padding:0 34px 0 46px; } .about-back-copy h2{ margin:0 0 12px; color:transparent; background:linear-gradient(90deg,#d13cff,#7d50ff,#16a4ff); -webkit-background-clip:text; background-clip:text; font:500 clamp(2.1rem,2.8vw,3.1rem)/1.05 Arial,Helvetica,sans-serif; } .about-back-intro{ margin:0; max-width:650px; color:#d9dce3; font:500 .95rem/1.55 Arial,Helvetica,sans-serif; } .about-back-divider{ position:relative; height:1px; margin:19px 0 18px; background:linear-gradient(90deg,#d13cff 0%,#824cff 52%,rgba(0,168,255,.18) 100%); } .about-back-divider span{ position:absolute; right:18%; top:50%; width:7px; height:7px; transform:translate(50%,-50%) rotate(45deg); border:1px solid #a54eff; background:#020409; } .about-back-list{ display:grid; gap:14px; margin:0; padding:0; list-style:none; } .about-back-list li{ display:grid; grid-template-columns:58px 1fr; gap:14px; align-items:center; } .about-approach-icon{ display:flex; width:50px; height:50px; align-items:center; justify-content:center; border:1px solid transparent; border-radius:10px; background: linear-gradient(#060913,#060913) padding-box, linear-gradient(135deg,#d13cff,#00a8ff) border-box; color:#d35cff; font:700 1.15rem/1 Arial,Helvetica,sans-serif; box-shadow:0 0 16px rgba(121,76,255,.10); } .code-icon{font-size:.82rem;color:#b14fff} .rocket-icon{font-size:1.4rem;color:#cf4cff} .growth-icon{font-size:1.2rem;color:#5c87ff} .about-back-list b{ color:#fff; font:700 .92rem/1.28 Arial,Helvetica,sans-serif; } .about-back-list span:not(.about-approach-icon){ color:#d0d4dc; font:500 .84rem/1.4 Arial,Helvetica,sans-serif; } .about-back-art{ position:relative; display:flex; align-items:center; justify-content:center; min-width:0; overflow:hidden; } .about-back-art img{ display:block; width:100%; height:100%; object-fit:contain; object-position:center; } .about-back-tagline{ position:absolute; right:6%; bottom:8%; color:transparent; background:linear-gradient(90deg,#ef34ff,#8b56ff,#00a8ff); -webkit-background-clip:text; background-clip:text; font-family:"Brush Script MT","Segoe Script",cursive; font-size:clamp(1.35rem,2vw,2.4rem); line-height:1; white-space:nowrap; } /* ---------------- PORTFOLIO ---------------- */ .approved-portfolio{ border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; } .approved-portfolio::before, .approved-portfolio::after{ content:none!important; display:none!important; } /* ---------------- FLEXIBLE PACKAGES ---------------- */ .package-integrated-frame{ position:relative; box-sizing:border-box; padding:72px 30px 28px!important; border:1px solid transparent!important; border-radius:18px!important; background: linear-gradient(#03060d,#03060d) padding-box, linear-gradient(100deg,#d13cff 0%,#824cff 49%,#00a8ff 100%) border-box!important; overflow:visible!important; } /* remove all historical pseudo-header systems */ .package-integrated-frame::before, .package-integrated-frame::after{ content:none!important; display:none!important; } .package-integrated-frame .pkg-head::before, .package-integrated-frame .pkg-head::after{ content:none!important; display:none!important; } /* real notch element, same geometry as About tabs */ .package-frame-notch{ position:absolute; top:0; left:50%; z-index:30; transform:translateX(-50%); width:360px; height:46px; display:flex; align-items:center; justify-content:center; gap:12px; box-sizing:border-box; color:#fff; background:#03060d; clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); font:700 .95rem/1 Arial,Helvetica,sans-serif; letter-spacing:.045em; } .package-frame-notch::before{ content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(90deg,#d13cff,#824cff 50%,#00a8ff); clip-path:inherit; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .package-frame-notch span{ color:#b95cff; font-size:1.15rem; } .approved-packages>.approved-tab, .approved-packages>.unified-approved-tab, .approved-packages>.shared-clean-tab, .approved-packages>.eclipse-frame-tab{ display:none!important; } @media(max-width:1050px){ .about-back-content{ grid-template-columns:1fr; grid-template-rows:50% 50%; padding:58px 22px 20px; } .about-back-copy{padding:0 22px} } @media(max-width:760px){ .approved-section{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; } .about-front-tab-overlay, .about-back-tab, .package-frame-notch{ width:min(320px,82vw); height:44px; font-size:.84rem; } .about-back-copy h2{font-size:1.85rem} .about-back-intro{font-size:.84rem} .about-back-list b{font-size:.84rem} .about-back-list span:not(.about-approach-icon){font-size:.76rem} .about-approach-icon{width:46px;height:46px} .package-integrated-frame{padding:64px 14px 20px!important} } /* ========================================================= v3.1.9 — APPROVED STYLING RESTORED ========================================================= */ .approved-section{ width:calc(100vw - 48px)!important; max-width:none!important; margin:48px 0 48px calc(50% - 50vw + 24px)!important; box-sizing:border-box; } /* ABOUT: exact approved front/back visuals, true flip */ .approved-about-v259{ perspective:1800px; background:transparent!important; } .approved-about-v259-flip{ width:100%; aspect-ratio:1536/382; cursor:pointer; outline:none; } .approved-about-v259-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .72s cubic-bezier(.2,.72,.2,1); } .approved-about-v259.is-flipped .approved-about-v259-inner{ transform:rotateY(180deg); } .approved-about-v259-face{ position:absolute; inset:0; width:100%; height:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; border-radius:18px; background:#020409; } .approved-about-v259-front{transform:rotateY(0deg)} .approved-about-v259-back{transform:rotateY(180deg)} .approved-about-v259-face img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; } .approved-about-v259-back img{ object-fit:contain; background:#020409; } /* PORTFOLIO: keep approved visual untouched */ .approved-portfolio{ border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; } .approved-portfolio::before, .approved-portfolio::after{ content:none!important; display:none!important; } /* PACKAGES: approved cards/content with same portfolio-style notch */ .approved-packages-v259{ position:relative; padding:72px 30px 28px!important; border:1px solid transparent!important; border-radius:18px!important; background: linear-gradient(#03060d,#03060d) padding-box, linear-gradient(100deg,#d13cff 0%,#824cff 49%,#00a8ff 100%) border-box!important; overflow:visible!important; } .approved-packages-v259::before, .approved-packages-v259::after{ content:none!important; display:none!important; } .approved-shared-notch{ position:absolute; top:-1px; left:50%; z-index:30; transform:translateX(-50%); width:360px; height:46px; display:flex; align-items:center; justify-content:center; gap:12px; box-sizing:border-box; color:#fff; background:#03060d; clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); font:700 .95rem/1 Arial,Helvetica,sans-serif; letter-spacing:.045em; } .approved-shared-notch::before{ content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(90deg,#d13cff 0%,#824cff 50%,#00a8ff 100%); clip-path:inherit; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .approved-shared-diamond{ color:#b95cff; font-size:1.15rem; line-height:1; } /* remove any old package header systems */ .approved-packages-v259>.approved-tab, .approved-packages-v259>.unified-approved-tab, .approved-packages-v259>.shared-clean-tab, .approved-packages-v259>.eclipse-frame-tab, .approved-packages-v259>.package-frame-notch, .approved-packages-v259>.ews-clean-tab{ display:none!important; } .approved-packages-v259 .pkg-head::before, .approved-packages-v259 .pkg-head::after{ content:none!important; display:none!important; } @media(max-width:760px){ .approved-section{ width:calc(100vw - 20px)!important; margin:34px 0 34px calc(50% - 50vw + 10px)!important; } .approved-shared-notch{ width:min(320px,82vw); height:44px; font-size:.84rem; } } /* ========================================================= v3.1.9 — APPROVED ABOUT REBUILD + PACKAGES NOTCH ========================================================= */ .approved-section{ width:calc(100vw - 48px)!important; max-width:none!important; margin:48px 0 48px calc(50% - 50vw + 24px)!important; box-sizing:border-box; } /* ABOUT — exact approved visual faces, same dimensions, true flip */ .about-v260{ perspective:1800px; background:transparent!important; } .about-v260-flip{ width:100%; aspect-ratio:1500/463; cursor:pointer; outline:none; } .about-v260-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .72s cubic-bezier(.2,.72,.2,1); } .about-v260.is-flipped .about-v260-inner{ transform:rotateY(180deg); } .about-v260-face{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; border-radius:18px; background:#020409; backface-visibility:hidden; -webkit-backface-visibility:hidden; } .about-v260-front{ transform:rotateY(0deg); } .about-v260-back{ transform:rotateY(180deg); } .about-v260-face img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; } /* PORTFOLIO — preserve approved styling */ .approved-portfolio{ border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; } .approved-portfolio::before, .approved-portfolio::after{ content:none!important; display:none!important; } /* FLEXIBLE PACKAGES — one frame and one truly integrated notch */ .packages-v260{ --notch-w:360px; --notch-h:46px; position:relative; padding:72px 30px 28px!important; border:1px solid transparent!important; border-radius:18px!important; background: linear-gradient(#03060d,#03060d) padding-box, linear-gradient(100deg,#d13cff 0%,#824cff 49%,#00a8ff 100%) border-box!important; overflow:visible!important; } /* mask only the top border exactly behind the notch */ .packages-v260::before{ content:""; position:absolute; top:-2px; left:50%; z-index:10; width:calc(var(--notch-w) - 54px); height:4px; transform:translateX(-50%); background:#03060d; pointer-events:none; } .packages-v260::after{ content:none!important; display:none!important; } .packages-v260-notch{ position:absolute; top:-1px; left:50%; z-index:20; transform:translateX(-50%); width:var(--notch-w); height:var(--notch-h); display:flex; align-items:center; justify-content:center; gap:12px; box-sizing:border-box; color:#fff; background:#03060d; clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); font:700 .95rem/1 Arial,Helvetica,sans-serif; letter-spacing:.045em; } .packages-v260-notch::before{ content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(90deg,#d13cff 0%,#824cff 50%,#00a8ff 100%); clip-path:inherit; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .packages-v260-diamond{ color:#b95cff; font-size:1.15rem; line-height:1; } /* explicitly kill legacy header artifacts */ .packages-v260 .approved-tab, .packages-v260 .unified-approved-tab, .packages-v260 .shared-clean-tab, .packages-v260 .eclipse-frame-tab, .packages-v260 .package-frame-notch, .packages-v260 .approved-shared-notch, .packages-v260 .ews-clean-tab{ display:none!important; } .packages-v260 .pkg-head::before, .packages-v260 .pkg-head::after{ content:none!important; display:none!important; } @media(max-width:760px){ .approved-section{ width:calc(100vw - 20px)!important; margin:34px 0 34px calc(50% - 50vw + 10px)!important; } .packages-v260{ --notch-w:min(320px,82vw); --notch-h:44px; padding:64px 14px 20px!important; } .packages-v260-notch{ font-size:.84rem; } } /* ========================================================= v3.1.9 — PERMANENT APPROVED COMPONENT SYSTEM ========================================================= */ :root{--ews-notch-width:25.7161%;--ews-purple:#d13cff;--ews-violet:#824cff;--ews-cyan:#00a8ff;--ews-black:#020409;} .approved-section{width:calc(100vw - 48px)!important;max-width:none!important;margin:48px 0 48px calc(50% - 50vw + 24px)!important;box-sizing:border-box;} .ews-about-final{perspective:1800px;background:transparent!important} .ews-about-flip{width:100%;aspect-ratio:1502/449;cursor:pointer;outline:none} .ews-about-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.2,.72,.2,1)} .ews-about-final.is-flipped .ews-about-flip-inner{transform:rotateY(180deg)} .ews-about-face{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border-radius:18px;background:var(--ews-black);backface-visibility:hidden;-webkit-backface-visibility:hidden} .ews-about-front{transform:rotateY(0)}.ews-about-back{transform:rotateY(180deg)} .ews-about-face img{display:block;width:100%;height:100%;object-fit:cover;object-position:center} .approved-portfolio{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important} .approved-portfolio::before,.approved-portfolio::after{content:none!important;display:none!important} .ews-portfolio-notch{position:absolute;top:-1px;left:50%;z-index:30;transform:translateX(-50%);width:var(--ews-notch-width);min-width:310px;max-width:395px;height:54px;display:flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;color:#fff;background:var(--ews-black);clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);font:600 clamp(.78rem,.9vw,.95rem)/1 Arial,Helvetica,sans-serif;letter-spacing:.09em} .ews-portfolio-notch::before{content:"";position:absolute;inset:0;padding:1px;background:linear-gradient(90deg,var(--ews-purple),var(--ews-violet) 50%,var(--ews-cyan));clip-path:inherit;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .ews-notch-diamond{color:#b95cff;font-size:1.05em;line-height:1}.ews-notch-title{white-space:nowrap} .ews-packages-final{position:relative;padding:76px 30px 28px!important;border:1px solid transparent!important;border-radius:18px!important;background:linear-gradient(#03060d,#03060d) padding-box,linear-gradient(100deg,var(--ews-purple),var(--ews-violet) 49%,var(--ews-cyan)) border-box!important;overflow:visible!important} .ews-packages-final::before{content:"";position:absolute;top:-2px;left:50%;z-index:20;width:326px;height:4px;transform:translateX(-50%);background:#03060d;pointer-events:none} .ews-packages-final::after,.ews-packages-final .pkg-head::before,.ews-packages-final .pkg-head::after{content:none!important;display:none!important} @media(max-width:760px){.approved-section{width:calc(100vw - 20px)!important;margin:34px 0 34px calc(50% - 50vw + 10px)!important}.ews-portfolio-notch{width:310px;min-width:0;height:44px}.ews-packages-final{padding:64px 14px 20px!important}.ews-packages-final::before{width:255px}} /* ========================================================= v3.1.9 — APPROVED ABOUT + PERMANENT SHARED TAB SYSTEM ========================================================= */ :root{ --ews-tab-width:356px; --ews-tab-height:52px; --ews-purple:#d13cff; --ews-violet:#824cff; --ews-cyan:#00a8ff; --ews-bg:#020409; } .approved-section{ width:calc(100vw - 48px)!important; max-width:none!important; margin:48px 0 48px calc(50% - 50vw + 24px)!important; box-sizing:border-box; } /* ABOUT — two locked faces, exact flip */ .ews-about-v262{ perspective:1800px; background:transparent!important; } .ews-about-flip-v262{ width:100%; aspect-ratio:1500/870; cursor:pointer; outline:none; } .ews-about-inner-v262{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .72s cubic-bezier(.2,.72,.2,1); } .ews-about-v262.is-flipped .ews-about-inner-v262{ transform:rotateY(180deg); } .ews-about-face-v262{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; border-radius:18px; background:var(--ews-bg); backface-visibility:hidden; -webkit-backface-visibility:hidden; } .ews-about-front-v262{transform:rotateY(0deg)} .ews-about-back-v262{transform:rotateY(180deg)} .ews-about-face-v262 img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; } /* SHARED TAB — exact same size for About / Portfolio / Packages */ .ews-shared-tab{ position:absolute; top:-1px; left:50%; z-index:40; transform:translateX(-50%); width:var(--ews-tab-width); height:var(--ews-tab-height); display:flex; align-items:center; justify-content:center; gap:12px; box-sizing:border-box; color:#fff; background:var(--ews-bg); clip-path:polygon(9% 0,91% 0,100% 100%,0 100%); font:600 .88rem/1 Arial,Helvetica,sans-serif; letter-spacing:.09em; } .ews-shared-tab::before{ content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(90deg,var(--ews-purple),var(--ews-violet) 50%,var(--ews-cyan)); clip-path:inherit; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .ews-shared-diamond{ color:#b95cff; font-size:1.05rem; line-height:1; } .ews-shared-title{white-space:nowrap;} /* PORTFOLIO remains the visual master and is not redesigned */ .approved-portfolio{ border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; } .approved-portfolio::before, .approved-portfolio::after{ content:none!important; display:none!important; } /* PACKAGES — single frame with integrated notch; no arrow, no underline */ .ews-packages-v262{ position:relative; padding:74px 30px 28px!important; border:1px solid transparent!important; border-radius:18px!important; background: linear-gradient(#03060d,#03060d) padding-box, linear-gradient(100deg,var(--ews-purple),var(--ews-violet) 49%,var(--ews-cyan)) border-box!important; overflow:visible!important; } /* mask the top border directly under the shared notch so it is truly integrated */ .ews-packages-v262::before{ content:""; position:absolute; top:-2px; left:50%; z-index:30; width:calc(var(--ews-tab-width) - 52px); height:4px; transform:translateX(-50%); background:#03060d; pointer-events:none; } .ews-packages-v262::after{ content:none!important; display:none!important; } .ews-packages-v262 .pkg-head::before, .ews-packages-v262 .pkg-head::after{ content:none!important; display:none!important; } .ews-packages-tab-v262{ background:#03060d; } /* permanently disable legacy package tabs */ .ews-packages-v262 .approved-tab, .ews-packages-v262 .unified-approved-tab, .ews-packages-v262 .shared-clean-tab, .ews-packages-v262 .eclipse-frame-tab, .ews-packages-v262 .package-frame-notch, .ews-packages-v262 .approved-shared-notch, .ews-packages-v262 .ews-clean-tab, .ews-packages-v262 .packages-v260-notch{ display:none!important; } @media(max-width:760px){ :root{ --ews-tab-width:300px; --ews-tab-height:44px; } .approved-section{ width:calc(100vw - 20px)!important; margin:34px 0 34px calc(50% - 50vw + 10px)!important; } .ews-shared-tab{ font-size:.8rem; } .ews-packages-v262{ padding:64px 14px 20px!important; } } /* ========================================================= v3.1.9 — ABOUT FACE WIDTH + TRUE PACKAGES FRAME ========================================================= */ :root{ --ews-tab-width:356px; --ews-tab-height:52px; --ews-purple:#d13cff; --ews-violet:#824cff; --ews-cyan:#00a8ff; --ews-bg:#020409; } .approved-section{ width:calc(100vw - 48px)!important; max-width:none!important; margin:48px 0 48px calc(50% - 50vw + 24px)!important; box-sizing:border-box; } /* ABOUT — both faces occupy the exact same box */ .ews-about-v262{ perspective:1800px; background:transparent!important; } .ews-about-flip-v262{ width:100%!important; max-width:none!important; aspect-ratio:1500/870; cursor:pointer; outline:none; } .ews-about-inner-v262{ position:relative; width:100%!important; height:100%!important; transform-style:preserve-3d; transition:transform .72s cubic-bezier(.2,.72,.2,1); } .ews-about-v262.is-flipped .ews-about-inner-v262{ transform:rotateY(180deg); } .ews-about-face-v262{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; margin:0!important; padding:0!important; overflow:hidden; border-radius:18px; background:var(--ews-bg); backface-visibility:hidden; -webkit-backface-visibility:hidden; } .ews-about-front-v262{transform:rotateY(0deg)} .ews-about-back-v262{transform:rotateY(180deg)} .ews-about-face-v262 img{ display:block!important; width:100%!important; height:100%!important; max-width:none!important; object-fit:cover!important; object-position:center!important; margin:0!important; } /* PORTFOLIO remains untouched */ .approved-portfolio{ border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; } .approved-portfolio::before, .approved-portfolio::after{ content:none!important; display:none!important; } /* PACKAGES — single SVG outline with notch in the path itself */ .ews-packages-v263{ position:relative; padding:72px 30px 28px!important; border:0!important; border-radius:18px!important; background:#03060d!important; overflow:visible!important; } .ews-packages-v263::before, .ews-packages-v263::after, .ews-packages-v263 .pkg-head::before, .ews-packages-v263 .pkg-head::after{ content:none!important; display:none!important; } .ews-packages-frame-svg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; overflow:visible; pointer-events:none; } .ews-packages-frame-path{ fill:none; stroke:url(#ewsPackagesStroke); stroke-width:1.2; vector-effect:non-scaling-stroke; } .ews-packages-frame-title{ position:absolute; top:1px; left:50%; z-index:4; transform:translateX(-50%); width:210px; height:46px; display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font:700 .9rem/1 Arial,Helvetica,sans-serif; letter-spacing:.06em; white-space:nowrap; pointer-events:none; } .ews-packages-frame-diamond{ color:#b95cff; font-size:1rem; line-height:1; } .ews-packages-v263 > *:not(.ews-packages-frame-svg):not(.ews-packages-frame-title){ position:relative; z-index:2; } /* kill all legacy pricing header systems */ .ews-packages-v263 .ews-shared-tab, .ews-packages-v263 .ews-packages-tab-v262, .ews-packages-v263 .package-frame-notch, .ews-packages-v263 .approved-shared-notch, .ews-packages-v263 .packages-v260-notch, .ews-packages-v263 .eclipse-frame-tab, .ews-packages-v263 .approved-tab, .ews-packages-v263 .unified-approved-tab, .ews-packages-v263 .shared-clean-tab{ display:none!important; } @media(max-width:760px){ .approved-section{ width:calc(100vw - 20px)!important; margin:34px 0 34px calc(50% - 50vw + 10px)!important; } .ews-packages-v263{ padding:64px 14px 20px!important; } .ews-packages-frame-title{ width:200px; height:42px; font-size:.78rem; } } /* ========================================================= v3.1.9 — APPROVED BUILD / PORTFOLIO PRESERVED Scoped overrides only. Base theme CSS remains intact. ========================================================= */ /* ABOUT — exact approved visuals, true two-face horizontal flip */ .about-v266 { position:relative; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; perspective:1800px; background:transparent!important; } .about-v266-flip { width:100%; aspect-ratio:1644/358; cursor:pointer; outline:none; } .about-v266-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .72s cubic-bezier(.2,.72,.2,1); } .about-v266.is-flipped .about-v266-inner { transform:rotateY(180deg); } .about-v266-face { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; border-radius:18px; background:#020409; backface-visibility:hidden; -webkit-backface-visibility:hidden; } .about-v266-front { transform:rotateY(0deg); } .about-v266-back { transform:rotateY(180deg); } .about-v266-face img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; } /* PORTFOLIO — deliberately untouched */ /* FLEXIBLE PACKAGES — approved black panel with thin purple→cyan outline. Top notch is shallow and compact; no gradient fill. */ .packages-v266 { position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; padding:74px 30px 28px!important; border:1px solid #6b56d8!important; border-radius:18px!important; background:#03060d!important; overflow:visible!important; box-shadow: inset 1px 0 0 rgba(209,60,255,.65), inset -1px 0 0 rgba(0,168,255,.65)!important; } .packages-v266::before { content:""; position:absolute; top:-1px; left:0; right:0; height:1px; border-radius:18px 18px 0 0; background:linear-gradient(90deg,#d13cff 0%,#824cff 50%,#00a8ff 100%); z-index:4; pointer-events:none; } .packages-v266::after { content:""; position:absolute; top:-2px; left:50%; transform:translateX(-50%); width:300px; height:4px; background:#03060d; z-index:5; pointer-events:none; } .packages-v266-top { position:absolute; top:-1px; left:50%; z-index:6; transform:translateX(-50%); width:356px; height:52px; display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; background:#03060d; clip-path:polygon(9% 0,91% 0,100% 100%,0 100%); font:600 .88rem/1 Arial,Helvetica,sans-serif; letter-spacing:.085em; white-space:nowrap; } .packages-v266-top::before { content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(90deg,#d13cff,#824cff 50%,#00a8ff); clip-path:inherit; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .packages-v266-icon { color:#b95cff; font-size:1rem; } .packages-v266 .pkg-head::before, .packages-v266 .pkg-head::after { content:none!important; display:none!important; } /* keep cards black regardless of prior experimental gradients */ .packages-v266 .pkg-card, .packages-v266 .pricing-card, .packages-v266 .package-card { background:#050913!important; } @media(max-width:760px) { .about-v266, .packages-v266 { width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; } .packages-v266 { padding:64px 14px 20px!important; } .packages-v266-top { width:300px; height:44px; font-size:.78rem; } .packages-v266::after { width:250px; } } /* ========================================================= v3.1.9 — FRAME REPAIR Structural top lines + notch; no floating underline. ========================================================= */ /* ABOUT bottom outline always visible */ .about-v266{ position:relative!important; } .about-v266::after{ content:""; position:absolute; left:1px; right:1px; bottom:0; height:1px; z-index:70; background:linear-gradient(90deg,#d13cff 0%,#824cff 50%,#00a8ff 100%); pointer-events:none; } /* About back side gets its own complete frame/tab */ .about-v267-back-frame{ position:absolute; inset:0; z-index:65; pointer-events:none; opacity:0; transition:opacity .18s ease; border-left:1px solid #d13cff; border-right:1px solid #00a8ff; border-bottom:1px solid transparent; border-radius:18px; } .about-v266.is-flipped .about-v267-back-frame{ opacity:1; } .about-v267-back-frame::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,#d13cff,#824cff 50%,#00a8ff); } .about-v267-top-left, .about-v267-top-right{ position:absolute; top:0; height:1px; } .about-v267-top-left{ left:0; width:calc(50% - 178px); background:linear-gradient(90deg,#d13cff,#824cff); } .about-v267-top-right{ right:0; width:calc(50% - 178px); background:linear-gradient(90deg,#824cff,#00a8ff); } .about-v267-notch{ position:absolute; top:0; left:50%; width:356px; height:52px; transform:translateX(-50%); overflow:visible; } .about-v267-tab-label{ position:absolute; top:0; left:50%; width:356px; height:52px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font:600 .88rem/1 Arial,Helvetica,sans-serif; letter-spacing:.085em; } .about-v267-tab-label span{color:#b95cff} /* PACKAGES: black background, structural frame only */ .packages-v267{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; padding:74px 30px 28px!important; border:0!important; border-radius:18px!important; background:#03060d!important; overflow:visible!important; box-shadow:none!important; } .packages-v267::before, .packages-v267::after, .packages-v267 .pkg-head::before, .packages-v267 .pkg-head::after{ content:none!important; display:none!important; } .packages-v267-frame{ position:absolute; inset:0; z-index:1; pointer-events:none; border-left:1px solid #d13cff; border-right:1px solid #00a8ff; border-bottom:1px solid transparent; border-radius:18px; } .packages-v267-frame::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,#d13cff,#824cff 50%,#00a8ff); } .packages-v267-top-left, .packages-v267-top-right{ position:absolute; top:0; height:1px; } .packages-v267-top-left{ left:0; width:calc(50% - 178px); background:linear-gradient(90deg,#d13cff,#824cff); } .packages-v267-top-right{ right:0; width:calc(50% - 178px); background:linear-gradient(90deg,#824cff,#00a8ff); } .packages-v267-notch{ position:absolute; top:0; left:50%; width:356px; height:52px; transform:translateX(-50%); overflow:visible; } .packages-v267-tab-label{ position:absolute; top:0; left:50%; width:356px; height:52px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font:600 .88rem/1 Arial,Helvetica,sans-serif; letter-spacing:.085em; white-space:nowrap; } .packages-v267-tab-label span{color:#b95cff} .packages-v267 > *:not(.packages-v267-frame){ position:relative; z-index:2; } /* hard-disable any previous visible package header artifacts */ .packages-v267 .packages-v266-top, .packages-v267 .ews-shared-tab, .packages-v267 .package-frame-notch, .packages-v267 .approved-shared-notch, .packages-v267 .eclipse-frame-tab, .packages-v267 .approved-tab, .packages-v267 .unified-approved-tab, .packages-v267 .shared-clean-tab, .packages-v267 .ews-clean-tab{ display:none!important; } @media(max-width:760px){ .about-v267-notch, .about-v267-tab-label, .packages-v267-notch, .packages-v267-tab-label{ width:300px; height:44px; } .about-v267-top-left, .packages-v267-top-left{ width:calc(50% - 150px); } .about-v267-top-right, .packages-v267-top-right{ width:calc(50% - 150px); } .packages-v267{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; padding:64px 14px 20px!important; } .about-v267-tab-label, .packages-v267-tab-label{ font-size:.78rem; } } /* ========================================================= v3.1.9 — APPROVED CONTINUOUS FRAME SYSTEM Single SVG perimeter = no missing top/corner/bottom segments. ========================================================= */ /* ABOUT FRONT: ensure its approved image reaches the frame and bottom outline remains visible. */ .about-v266{ position:relative!important; overflow:visible!important; } .about-v266::after{ content:none!important; display:none!important; } /* Hide obsolete v267 frame pieces completely. */ .about-v267-back-frame, .about-v267-top-left, .about-v267-top-right, .about-v267-notch, .about-v267-tab-label, .packages-v267-frame, .packages-v267-top-left, .packages-v267-top-right, .packages-v267-notch, .packages-v267-tab-label{ display:none!important; } /* ABOUT BACK: one continuous perimeter */ .about-v268-back-frame{ position:absolute; inset:0; z-index:75; pointer-events:none; opacity:0; transition:opacity .15s ease; } .about-v266.is-flipped .about-v268-back-frame{opacity:1} .about-v268-back-frame svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; } .about-v268-label{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:300px; height:52px; display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font:600 .88rem/1 Arial,Helvetica,sans-serif; letter-spacing:.085em; white-space:nowrap; } .about-v268-label span{color:#b95cff} /* PACKAGES: exact same continuous perimeter geometry */ .packages-v268{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; padding:74px 30px 28px!important; border:0!important; border-radius:0!important; background:#03060d!important; overflow:visible!important; box-shadow:none!important; } .packages-v268::before, .packages-v268::after, .packages-v268 .pkg-head::before, .packages-v268 .pkg-head::after{ content:none!important; display:none!important; } .packages-v268-frame{ position:absolute; inset:0; z-index:1; pointer-events:none; } .packages-v268-frame svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; } .packages-v268-label{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:300px; height:52px; display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font:600 .88rem/1 Arial,Helvetica,sans-serif; letter-spacing:.085em; white-space:nowrap; } .packages-v268-label span{color:#b95cff} .packages-v268 > *:not(.packages-v268-frame){ position:relative; z-index:2; } /* No legacy/floating headers. */ .packages-v268 .packages-v266-top, .packages-v268 .packages-v267-frame, .packages-v268 .ews-shared-tab, .packages-v268 .package-frame-notch, .packages-v268 .approved-shared-notch, .packages-v268 .eclipse-frame-tab, .packages-v268 .approved-tab, .packages-v268 .unified-approved-tab, .packages-v268 .shared-clean-tab, .packages-v268 .ews-clean-tab{ display:none!important; } @media(max-width:760px){ .packages-v268{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; padding:64px 14px 20px!important; } .about-v268-label, .packages-v268-label{ width:250px; height:44px; font-size:.76rem; } } /* ========================================================= v3.1.9 — ABOUT FLIP FUNCTION REPAIR Back frame now lives inside the rotating back face. ========================================================= */ .about-v266-flip{ position:relative!important; display:block!important; width:100%!important; height:auto!important; aspect-ratio:1850/358!important; cursor:pointer!important; z-index:10!important; } .about-v266-inner{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; transform-style:preserve-3d!important; -webkit-transform-style:preserve-3d!important; transition:transform .72s cubic-bezier(.2,.72,.2,1)!important; } .about-v266.is-flipped .about-v266-inner{ transform:rotateY(180deg)!important; } .about-v266-face{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; overflow:hidden!important; } .about-v266-front{ transform:rotateY(0deg)!important; z-index:2; } .about-v266-back{ transform:rotateY(180deg)!important; z-index:1; } .about-v266.is-flipped .about-v266-front{z-index:1} .about-v266.is-flipped .about-v266-back{z-index:2} .about-v268-back-frame{ opacity:1!important; display:block!important; position:absolute!important; inset:0!important; z-index:5!important; pointer-events:none!important; } .about-v266-face > img{ position:absolute!important; inset:0!important; z-index:1!important; width:100%!important; height:100%!important; object-fit:cover!important; } /* ========================================================= v3.1.9 — FINAL APPROVED TAB SYSTEM Master tabs = 356x52 desktop / 300x44 mobile. Solid tab top edges + clean Packages heading. ========================================================= */ :root{ --ews-master-tab-w:356px; --ews-master-tab-h:52px; } /* Explicitly disable obsolete frame remnants. */ .about-v267-back-frame, .about-v268-back-frame, .packages-v266-top, .packages-v267-frame, .packages-v268-frame{ display:none!important; } /* ABOUT BACK */ .about-v270-back-frame{ position:absolute!important; inset:0!important; z-index:6!important; pointer-events:none!important; display:block!important; } .about-v270-back-frame svg{ position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; } .about-v270-label{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:var(--ews-master-tab-w); height:var(--ews-master-tab-h); display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font:600 .88rem/1 Arial,Helvetica,sans-serif; letter-spacing:.085em; white-space:nowrap; } .about-v270-label span{ color:#b95cff; font-size:1rem; } /* FLEXIBLE PACKAGES */ .packages-v270{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; padding:64px 30px 28px!important; border:0!important; border-radius:0!important; background:#03060d!important; box-shadow:none!important; overflow:visible!important; } .packages-v270::before, .packages-v270::after, .packages-v270 .pkg-head::before, .packages-v270 .pkg-head::after{ content:none!important; display:none!important; } .packages-v270-frame{ position:absolute; inset:0; z-index:1; pointer-events:none; } .packages-v270-frame svg{ position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; } .packages-v270-label{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:var(--ews-master-tab-w); height:var(--ews-master-tab-h); display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font:600 .88rem/1 Arial,Helvetica,sans-serif; letter-spacing:.085em; white-space:nowrap; } .packages-v270-label span{ color:#b95cff; font-size:1rem; } .packages-v270 > *:not(.packages-v270-frame){ position:relative; z-index:2; } /* Redundant heading is removed in markup. Keep only the approved description directly beneath the tab. */ .packages-v270 .pkg-head{ margin:0 0 16px!important; padding:0!important; text-align:center; } .packages-v270 .pkg-head p{ margin:2px auto 0!important; } /* Disable any legacy tab/header implementation that survives elsewhere. */ .packages-v270 .ews-shared-tab, .packages-v270 .package-frame-notch, .packages-v270 .approved-shared-notch, .packages-v270 .eclipse-frame-tab, .packages-v270 .approved-tab, .packages-v270 .unified-approved-tab, .packages-v270 .shared-clean-tab, .packages-v270 .ews-clean-tab{ display:none!important; } @media(max-width:760px){ :root{ --ews-master-tab-w:300px; --ews-master-tab-h:44px; } .packages-v270{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; padding:56px 14px 20px!important; } .about-v270-label, .packages-v270-label{ font-size:.78rem; } } /* ========================================================= v3.1.9 — CLEAN ABOUT + PACKAGES REPAIR ========================================================= */ :root{ --ews-tab-w:356px; --ews-tab-h:52px; } /* kill all previous About/Packages experimental layers */ .about-v266, .about-v267-back-frame, .about-v268-back-frame, .about-v270-back-frame, .packages-v266, .packages-v267, .packages-v268, .packages-v270, .packages-v266-top, .packages-v267-frame, .packages-v268-frame, .packages-v270-frame{ } /* ABOUT */ .about-v271{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; perspective:1800px!important; background:transparent!important; } .about-v271-flip{ position:relative!important; width:100%!important; aspect-ratio:1850/358!important; cursor:pointer!important; outline:none!important; } .about-v271-inner{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; transform-style:preserve-3d!important; -webkit-transform-style:preserve-3d!important; transition:transform .72s cubic-bezier(.2,.72,.2,1)!important; } .about-v271.is-flipped .about-v271-inner{ transform:rotateY(180deg)!important; } .about-v271-face{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; overflow:hidden!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; background:#020409!important; border-radius:18px!important; } .about-v271-front{ transform:rotateY(0deg)!important; } .about-v271-back{ transform:rotateY(180deg)!important; } .about-v271-face > img{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; display:block!important; } .about-v271-frame{ position:absolute!important; inset:0!important; z-index:3!important; pointer-events:none!important; } .about-v271-frame svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; } .about-v271-label{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:var(--ews-tab-w); height:var(--ews-tab-h); display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font:600 .88rem/1 Arial,Helvetica,sans-serif; letter-spacing:.085em; white-space:nowrap; } .about-v271-label span{ color:#b95cff; font-size:1rem; } /* PACKAGES */ .packages-v271{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; padding:60px 30px 28px!important; border:0!important; border-radius:0!important; background:#03060d!important; overflow:visible!important; box-shadow:none!important; } .packages-v271::before, .packages-v271::after, .packages-v271 .pkg-head::before, .packages-v271 .pkg-head::after{ content:none!important; display:none!important; } .packages-v271-frame{ position:absolute; inset:0; z-index:1; pointer-events:none; } .packages-v271-frame svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; } .packages-v271-label{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:var(--ews-tab-w); height:var(--ews-tab-h); display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font:600 .88rem/1 Arial,Helvetica,sans-serif; letter-spacing:.085em; white-space:nowrap; } .packages-v271-label span{ color:#b95cff; font-size:1rem; } .packages-v271 > *:not(.packages-v271-frame){ position:relative; z-index:2; } .packages-v271 .pkg-head{ margin:0 0 16px!important; padding:0!important; text-align:center!important; } .packages-v271 .pkg-head h2{ display:none!important; } .packages-v271 .pkg-head p{ margin:2px auto 0!important; } /* hard-disable any stale header/frame markup from previous versions */ #about .about-v267-top-right, #about .about-v267-notch, #about .about-v267-tab-label, #about .about-v267-back-frame, #about .about-v268-back-frame, #about .about-v270-back-frame, #pricing .packages-v266-top, #pricing .packages-v267-frame, #pricing .packages-v268-frame, #pricing .packages-v270-frame, #pricing .ews-shared-tab, #pricing .package-frame-notch, #pricing .approved-shared-notch, #pricing .eclipse-frame-tab{ display:none!important; } @media(max-width:760px){ :root{ --ews-tab-w:300px; --ews-tab-h:44px; } .about-v271, .packages-v271{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; } .packages-v271{ padding:54px 14px 20px!important; } .about-v271-label, .packages-v271-label{ font-size:.78rem; } } /* ========================================================= Eclipse Web Solutions v3.1.9 — CLEAN RECOVERY BUILD About + Packages rebuilt from scratch. Portfolio untouched. ========================================================= */ :root{ --ews3-bg:#020409; --ews3-purple:#d13cff; --ews3-violet:#824cff; --ews3-cyan:#00a8ff; --ews3-tab-w:356px; --ews3-tab-h:52px; } /* ---------- ABOUT ---------- */ .ews3-about{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; background:transparent!important; perspective:1800px!important; } .ews3-about-flip{ position:relative!important; width:100%!important; aspect-ratio:1850/472!important; cursor:pointer!important; outline:none!important; } .ews3-about-inner{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; transform-style:preserve-3d!important; -webkit-transform-style:preserve-3d!important; transition:transform .72s cubic-bezier(.2,.72,.2,1)!important; } .ews3-about.is-flipped .ews3-about-inner{ transform:rotateY(180deg)!important; } .ews3-about-face{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; background:var(--ews3-bg)!important; border-radius:18px!important; overflow:hidden!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; } .ews3-about-front{transform:rotateY(0deg)!important;} .ews3-about-back{transform:rotateY(180deg)!important;} .ews3-about-face > img{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; display:block!important; object-fit:contain!important; object-position:center center!important; background:var(--ews3-bg)!important; } /* Single continuous outer perimeter. */ .ews3-frame{ position:absolute!important; inset:0!important; z-index:5!important; border-radius:18px!important; padding:1px!important; background:linear-gradient(90deg,var(--ews3-purple),var(--ews3-violet) 50%,var(--ews3-cyan))!important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)!important; -webkit-mask-composite:xor!important; mask-composite:exclude!important; pointer-events:none!important; } /* One closed tab shape: top, both angles, and bottom are all real borders. */ .ews3-tab{ position:absolute!important; top:0!important; left:50%!important; transform:translateX(-50%)!important; z-index:7!important; width:var(--ews3-tab-w)!important; height:var(--ews3-tab-h)!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:10px!important; color:#fff!important; background:var(--ews3-bg)!important; font:600 .88rem/1 Arial,Helvetica,sans-serif!important; letter-spacing:.085em!important; white-space:nowrap!important; clip-path:polygon(0 0,100% 0,91% 100%,9% 100%)!important; pointer-events:none!important; } /* Closed gradient stroke around the tab. */ .ews3-tab::before{ content:""!important; position:absolute!important; inset:0!important; padding:1px!important; clip-path:inherit!important; background:linear-gradient(90deg,var(--ews3-purple),var(--ews3-violet) 50%,var(--ews3-cyan))!important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)!important; -webkit-mask-composite:xor!important; mask-composite:exclude!important; z-index:1!important; } .ews3-tab > *{ position:relative!important; z-index:2!important; } .ews3-diamond{ color:#b95cff!important; font-size:1rem!important; } /* ---------- FLEXIBLE PACKAGES ---------- */ .ews3-packages{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; padding:72px 30px 28px!important; background:#03060d!important; border-radius:18px!important; overflow:hidden!important; border:0!important; box-shadow:none!important; } .ews3-packages > *:not(.ews3-frame):not(.ews3-tab){ position:relative!important; z-index:2!important; } .ews3-packages .pkg-head{ margin:0 0 18px!important; padding:0!important; text-align:center!important; } .ews3-packages .pkg-head h2{ display:none!important; } .ews3-packages .pkg-head p{ margin:0 auto!important; } /* Remove old decorative pseudo-elements from package heading only. */ .ews3-packages::before, .ews3-packages::after, .ews3-packages .pkg-head::before, .ews3-packages .pkg-head::after{ content:none!important; display:none!important; } /* ---------- MOBILE ---------- */ @media(max-width:760px){ :root{ --ews3-tab-w:300px; --ews3-tab-h:44px; } .ews3-about, .ews3-packages{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; } .ews3-about-flip{ aspect-ratio:1850/560!important; } .ews3-packages{ padding:60px 14px 20px!important; } .ews3-tab{ font-size:.78rem!important; } } /* ========================================================= Eclipse Web Solutions v3.1.9 — APPROVED ABOUT + PACKAGES ========================================================= */ /* ABOUT — approved artwork contains its own frame and integrated tab */ .about-v310{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; background:transparent!important; perspective:1800px!important; } .about-v310-flip{ position:relative!important; width:100%!important; aspect-ratio:1508/451!important; cursor:pointer!important; outline:none!important; } .about-v310-inner{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; transform-style:preserve-3d!important; -webkit-transform-style:preserve-3d!important; transition:transform .72s cubic-bezier(.2,.72,.2,1)!important; } .about-v310.is-flipped .about-v310-inner{ transform:rotateY(180deg)!important; } .about-v310-face{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; overflow:hidden!important; background:#020409!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; } .about-v310-front{transform:rotateY(0deg)!important;} .about-v310-back{transform:rotateY(180deg)!important;} .about-v310-face img{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:contain!important; object-position:center center!important; display:block!important; background:#020409!important; } /* FLEXIBLE PACKAGES — one frame, one integrated tab, no duplicate line systems */ .packages-v310{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; padding:92px 30px 28px!important; background:#03060d!important; border:0!important; border-radius:18px!important; overflow:hidden!important; box-shadow:none!important; } .packages-v310-frame{ position:absolute!important; inset:0!important; z-index:1!important; pointer-events:none!important; } .packages-v310-frame svg{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; display:block!important; overflow:visible!important; } .packages-v310-label{ position:absolute!important; top:0!important; left:50%!important; transform:translateX(-50%)!important; width:400px!important; height:66px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:10px!important; color:#fff!important; font:600 .88rem/1 Arial,Helvetica,sans-serif!important; letter-spacing:.085em!important; white-space:nowrap!important; } .packages-v310-label span{ color:#b95cff!important; font-size:1rem!important; } .packages-v310 > *:not(.packages-v310-frame){ position:relative!important; z-index:2!important; } .packages-v310 .pkg-head{ margin:0 0 18px!important; padding:0!important; text-align:center!important; } .packages-v310 .pkg-head h2{display:none!important;} .packages-v310 .pkg-head p{margin:0 auto!important;} .packages-v310::before, .packages-v310::after, .packages-v310 .pkg-head::before, .packages-v310 .pkg-head::after{ content:none!important; display:none!important; } @media(max-width:760px){ .about-v310, .packages-v310{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; } .packages-v310{ padding:76px 14px 20px!important; } .packages-v310-label{ width:300px!important; height:52px!important; font-size:.78rem!important; } } /* ========================================================= Eclipse Web Solutions v3.1.9 APPROVED SINGLE-BORDER / IDENTICAL-TAB BUILD ========================================================= */ :root{ --ews311-bg:#020409; --ews311-tab-w:400px; --ews311-tab-h:66px; } /* ABOUT */ .about-v311{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; background:transparent!important; perspective:1800px!important; } .about-v311-flip{ position:relative!important; width:100%!important; aspect-ratio:1510/451!important; cursor:pointer!important; outline:none!important; } .about-v311-inner{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; transform-style:preserve-3d!important; -webkit-transform-style:preserve-3d!important; transition:transform .72s cubic-bezier(.2,.72,.2,1)!important; } .about-v311.is-flipped .about-v311-inner{ transform:rotateY(180deg)!important; } .about-v311-face{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; background:var(--ews311-bg)!important; overflow:hidden!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; } .about-v311-front{transform:rotateY(0deg)!important;} .about-v311-back{transform:rotateY(180deg)!important;} .about-v311-face > img{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; display:block!important; object-fit:contain!important; object-position:center center!important; background:var(--ews311-bg)!important; } /* ONE frame + ONE identical closed tab */ .ews311-frame{ position:absolute!important; inset:0!important; z-index:8!important; pointer-events:none!important; } .ews311-frame svg{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; display:block!important; overflow:visible!important; } .ews311-tab-label{ position:absolute!important; top:0!important; left:50%!important; transform:translateX(-50%)!important; width:var(--ews311-tab-w)!important; height:var(--ews311-tab-h)!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:10px!important; color:#fff!important; font:600 .88rem/1 Arial,Helvetica,sans-serif!important; letter-spacing:.085em!important; white-space:nowrap!important; } .ews311-tab-label span{ color:#b95cff!important; font-size:1rem!important; } /* PACKAGES */ .packages-v311{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; padding:92px 30px 28px!important; background:#03060d!important; border:0!important; border-radius:18px!important; overflow:hidden!important; box-shadow:none!important; } .packages-v311 > *:not(.ews311-packages-frame){ position:relative!important; z-index:2!important; } .packages-v311 .pkg-head{ margin:0 0 18px!important; padding:0!important; text-align:center!important; } .packages-v311 .pkg-head h2{display:none!important;} .packages-v311 .pkg-head p{margin:0 auto!important;} .packages-v311::before, .packages-v311::after, .packages-v311 .pkg-head::before, .packages-v311 .pkg-head::after{ content:none!important; display:none!important; } @media(max-width:760px){ :root{ --ews311-tab-w:300px; --ews311-tab-h:52px; } .about-v311, .packages-v311{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; } .packages-v311{ padding:76px 14px 20px!important; } .ews311-tab-label{ font-size:.78rem!important; } } /* ========================================================= v3.1.9 — REMOVE BAKED ABOUT INNER BORDER ========================================================= */ .about-v311-face > img{ inset:0!important; width:100%!important; height:100%!important; object-fit:contain!important; object-position:center center!important; background:#020409!important; border:0!important; outline:0!important; box-shadow:none!important; } /* Only this SVG frame is allowed to draw the About perimeter/tab. */ .about-v311-face{ border:0!important; outline:0!important; box-shadow:none!important; } .about-v311-face::before, .about-v311-face::after{ content:none!important; display:none!important; } /* ========================================================= v3.1.9 — ABOUT LOGO + FLEXIBLE PACKAGES TAB FIX ========================================================= */ /* About front image now contains the approved compact horizontal brand lockup. */ .about-v311-front > img{ object-fit:contain!important; object-position:center center!important; } /* Disable old stretched package frame/tab component. */ .packages-v311 .ews311-packages-frame{ display:none!important; } /* Independent package outer frame with top gap. */ .ews313-packages-frame{ position:absolute!important; inset:0!important; z-index:1!important; pointer-events:none!important; } .ews313-packages-frame svg{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; display:block!important; } /* Fixed-size closed package tab: cannot stretch with section height. */ .ews313-packages-tab{ position:absolute!important; top:0!important; left:50%!important; transform:translateX(-50%)!important; width:400px!important; height:66px!important; z-index:3!important; pointer-events:none!important; } .ews313-packages-tab svg{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; display:block!important; } .ews313-packages-tab-label{ position:absolute!important; inset:0!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:10px!important; color:#fff!important; font:600 .88rem/1 Arial,Helvetica,sans-serif!important; letter-spacing:.085em!important; white-space:nowrap!important; } .ews313-packages-tab-label span{ color:#b95cff!important; font-size:1rem!important; } .packages-v311 > *:not(.ews313-packages-frame):not(.ews313-packages-tab){ position:relative!important; z-index:2!important; } @media(max-width:760px){ .ews313-packages-tab{ width:300px!important; height:52px!important; } .ews313-packages-tab-label{ font-size:.78rem!important; } } /* ========================================================= v3.1.9 — ONE SHARED TAB COMPONENT FOR ALL THREE TABS ========================================================= */ :root{ --ews314-tab-w:400px; --ews314-tab-h:66px; } /* Disable previous tab implementations */ .ews311-tab-label, .ews313-packages-tab{ display:none!important; } /* Literal shared component used by About front, About back, Packages */ .ews314-tab{ position:absolute!important; top:0!important; left:50%!important; transform:translateX(-50%)!important; width:var(--ews314-tab-w)!important; height:var(--ews314-tab-h)!important; z-index:12!important; pointer-events:none!important; } .ews314-tab svg{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; display:block!important; overflow:visible!important; } .ews314-tab-label{ position:absolute!important; inset:0!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:10px!important; color:#fff!important; font:600 .88rem/1 Arial,Helvetica,sans-serif!important; letter-spacing:.085em!important; white-space:nowrap!important; } .ews314-tab-label span{ color:#b95cff!important; font-size:1rem!important; } /* Preserve outer frames separately from the tab component */ .about-v311 .ews311-frame{ z-index:8!important; } .packages-v311 .ews313-packages-frame{ z-index:1!important; } .packages-v311 > *:not(.ews313-packages-frame):not(.ews314-tab){ position:relative!important; z-index:2!important; } @media(max-width:760px){ :root{ --ews314-tab-w:300px; --ews314-tab-h:52px; } .ews314-tab-label{ font-size:.78rem!important; } } /* ========================================================= v3.2.1 — RELATIVE-ASSET FIX Approved visual layout preserved; no hard-coded theme paths. ========================================================= */ /* ABOUT artwork layers: same approved composition, now loaded relative to style.css */ .about-v311-face{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; background:#020409!important; overflow:hidden!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; } .about-v321-art{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; background-color:#020409!important; background-repeat:no-repeat!important; background-position:center center!important; background-size:contain!important; z-index:1!important; } .about-v321-art-front{ background-image:url("assets/images/about-front-content-v310.png")!important; } .about-v321-art-back{ background-image:url("assets/images/about-back-content-v312.png")!important; } /* Keep the approved frame/tab above the artwork */ .about-v311 .ews311-frame, .about-v311 .ews314-tab{ z-index:8!important; } /* PORTFOLIO artwork: use relative CSS asset path */ .portfolio-v321-art{ display:block!important; width:100%!important; aspect-ratio:1850/400!important; background-color:#020409!important; background-image:url("assets/images/approved-portfolio-v250.jpg")!important; background-repeat:no-repeat!important; background-position:center center!important; background-size:contain!important; } /* Prevent broken-image placeholders from legacy markup */ #about img[alt="About Eclipse front"], #about img[alt="About Eclipse back"], #portfolio img[src*="approved-portfolio-v250"]{ display:none!important; } /* ========================================================= v3.2.2 — PORTFOLIO + FLEXIBLE PACKAGES ONLY ABOUT SECTION IS LOCKED / UNTOUCHED ========================================================= */ /* PORTFOLIO — restore full-width visual presentation */ .portfolio-v322{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; padding:0!important; background:#020409!important; } .portfolio-v322 .portfolio-v321-art{ display:block!important; width:100%!important; aspect-ratio:1850/400!important; margin:0!important; background-image:url("assets/images/approved-portfolio-v250.jpg")!important; background-repeat:no-repeat!important; background-position:center center!important; background-size:cover!important; } /* FLEXIBLE PACKAGES — integrated frame/tab */ .packages-v322{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; padding:92px 30px 28px!important; background:#03060d!important; border:0!important; border-radius:18px!important; overflow:hidden!important; box-shadow:none!important; } .packages-v322-shell{ position:absolute!important; inset:0!important; z-index:1!important; pointer-events:none!important; } .packages-v322-shell svg{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; display:block!important; } .packages-v322-label{ position:absolute!important; top:0!important; left:50%!important; transform:translateX(-50%)!important; width:400px!important; height:66px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:10px!important; color:#fff!important; font:600 .88rem/1 Arial,Helvetica,sans-serif!important; letter-spacing:.085em!important; white-space:nowrap!important; } .packages-v322-label span{ color:#b95cff!important; font-size:1rem!important; } .packages-v322 > *:not(.packages-v322-shell){ position:relative!important; z-index:2!important; } .packages-v322 .pkg-head{ margin:0 0 18px!important; padding:0!important; text-align:center!important; } .packages-v322 .pkg-head h2{ display:none!important; } .packages-v322 .pkg-head p{ margin:0 auto!important; } @media(max-width:760px){ .portfolio-v322, .packages-v322{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; } .portfolio-v322 .portfolio-v321-art{ background-size:contain!important; } .packages-v322{ padding:76px 14px 20px!important; } .packages-v322-label{ width:300px!important; height:52px!important; font-size:.78rem!important; } } /* ========================================================= v3.2.3 — PORTFOLIO FULL RESTORATION ONLY ABOUT + PRICING LOCKED ========================================================= */ .portfolio-v322{ overflow:visible!important; min-height:0!important; } .portfolio-v322 .portfolio-v321-art{ display:block!important; width:100%!important; height:auto!important; aspect-ratio:1448/1086!important; min-height:0!important; background-image:url("assets/images/approved-portfolio-v250.jpg")!important; background-repeat:no-repeat!important; background-position:center center!important; background-size:contain!important; background-color:#020409!important; margin:0!important; padding:0!important; } @media(max-width:760px){ .portfolio-v322 .portfolio-v321-art{ aspect-ratio:1448/1086!important; background-size:contain!important; } } /* ========================================================= v3.2.4 — FLEXIBLE PACKAGES ALIGNMENT ONLY ABOUT + PORTFOLIO LOCKED ========================================================= */ /* Match About / Portfolio outer footprint exactly */ .packages-v322{ box-sizing:border-box!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; margin-right:0!important; padding:92px 28px 34px!important; border-radius:18px!important; overflow:hidden!important; } /* Give the package content a true inset inside the framed shell */ .packages-v322 .pkg-head, .packages-v322 .packages-grid, .packages-v322 .pricing-grid, .packages-v322 .plans-grid, .packages-v322 .package-grid, .packages-v322 .packages, .packages-v322 > .wp-block-columns{ width:100%!important; max-width:none!important; margin-left:auto!important; margin-right:auto!important; box-sizing:border-box!important; } /* Ensure three package cards stay comfortably inside the outer border */ .packages-v322 .package-card, .packages-v322 .price-card, .packages-v322 .plan-card, .packages-v322 .pkg-card, .packages-v322 .wp-block-column{ min-width:0!important; box-sizing:border-box!important; } /* The integrated shell must match the section bounds exactly */ .packages-v322-shell{ inset:0!important; border-radius:18px!important; overflow:visible!important; } .packages-v322-shell svg{ width:100%!important; height:100%!important; } /* Desktop breathing room between border and first / last cards */ @media(min-width:761px){ .packages-v322{ padding-left:28px!important; padding-right:28px!important; } } /* Mobile keeps the same section alignment language */ @media(max-width:760px){ .packages-v322{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; padding:76px 12px 22px!important; } } /* ========================================================= v3.2.5 VERIFIED WORKING COPY — PRICING GRID ONLY ABOUT + PORTFOLIO UNTOUCHED ========================================================= */ /* Keep the full outer frame footprint */ .packages-v322{ box-sizing:border-box!important; width:calc(100vw - 48px)!important; margin-left:calc(50% - 50vw + 24px)!important; padding:92px 28px 42px!important; overflow:hidden!important; } /* ACTUAL GRID FIX: smaller, centered 3-card group */ .packages-v322 .pkg-grid{ width:calc(100% - 96px)!important; max-width:1680px!important; margin-left:auto!important; margin-right:auto!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:24px!important; box-sizing:border-box!important; } /* Keep every card inside the grid */ .packages-v322 .pkg-card{ width:100%!important; max-width:none!important; min-width:0!important; box-sizing:border-box!important; } /* Make bottom frame clearance deliberate */ .packages-v322 .pkg-grid{ margin-bottom:20px!important; } @media(max-width:1200px){ .packages-v322 .pkg-grid{ width:calc(100% - 48px)!important; gap:18px!important; } } @media(max-width:760px){ .packages-v322{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; padding:76px 12px 28px!important; } .packages-v322 .pkg-grid{ width:100%!important; grid-template-columns:1fr!important; gap:16px!important; margin-bottom:10px!important; } } /* ========================================================= v3.2.5 VERIFIED WIDTH LOCK ABOUT / PORTFOLIO / PACKAGES use identical outer footprint ========================================================= */ .about-v311, .portfolio-v322, .packages-v322{ width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; margin-right:0!important; box-sizing:border-box!important; } @media(max-width:760px){ .about-v311, .portfolio-v322, .packages-v322{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; } } /* ========================================================= v3.2.6 VERIFIED PACKAGES GEOMETRY — WORKING COPY ONLY ========================================================= */ .packages-v322{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; padding:92px 34px 46px!important; box-sizing:border-box!important; overflow:visible!important; } /* True inset grid: 88% of available content, centered */ .packages-v322 .pkg-grid{ width:88%!important; max-width:1520px!important; margin:0 auto 22px!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:24px!important; box-sizing:border-box!important; } /* Cards never exceed their grid tracks */ .packages-v322 .pkg-card{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } /* Guaranteed continuous outer border, independent of SVG stretching */ .packages-v322::before{ content:""!important; position:absolute!important; inset:0!important; border-radius:18px!important; padding:1px!important; background:linear-gradient(90deg,#d13cff 0%,#824cff 50%,#00a8ff 100%)!important; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important; -webkit-mask-composite:xor!important; mask-composite:exclude!important; pointer-events:none!important; z-index:5!important; } /* Keep integrated tab visually above the guaranteed border */ .packages-v322-shell{ z-index:6!important; } @media(max-width:1200px){ .packages-v322 .pkg-grid{ width:92%!important; gap:18px!important; } } @media(max-width:760px){ .packages-v322{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; padding:76px 14px 28px!important; } .packages-v322 .pkg-grid{ width:100%!important; grid-template-columns:1fr!important; gap:16px!important; } } /* ========================================================= v3.3.0 — FLEXIBLE PACKAGES REBUILT FROM SCRATCH ABOUT + PORTFOLIO LOCKED ========================================================= */ .packages-v330{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; margin-right:0!important; box-sizing:border-box!important; padding:96px 0 46px!important; background:#03060d!important; border-radius:18px!important; overflow:hidden!important; } .packages-v330-frame{ position:absolute!important; inset:0!important; z-index:1!important; pointer-events:none!important; } .packages-v330-frame svg{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; display:block!important; } .packages-v330-tab-label{ position:absolute!important; top:0!important; left:50%!important; transform:translateX(-50%)!important; width:400px!important; height:66px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:10px!important; color:#fff!important; font:600 .88rem/1 Arial,Helvetica,sans-serif!important; letter-spacing:.085em!important; white-space:nowrap!important; } .packages-v330-tab-label span{ color:#b95cff!important; font-size:1rem!important; } .packages-v330-content{ position:relative!important; z-index:2!important; width:88%!important; max-width:1520px!important; margin:0 auto!important; box-sizing:border-box!important; } .packages-v330-description{ margin:0 auto 42px!important; text-align:center!important; color:#fff!important; font-size:1rem!important; line-height:1.5!important; } .packages-v330-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:24px!important; width:100%!important; margin:0!important; padding:0!important; box-sizing:border-box!important; } .packages-v330-grid > .pkg-card{ width:100%!important; max-width:none!important; min-width:0!important; min-height:0!important; display:flex!important; flex-direction:column!important; box-sizing:border-box!important; padding:24px 20px 20px!important; border:1px solid rgba(132,145,170,.44)!important; border-radius:16px!important; background:linear-gradient(155deg,#0a0d16,#05070d)!important; } .packages-v330-grid .pkg-top{ display:flex!important; align-items:center!important; gap:20px!important; min-height:95px!important; } .packages-v330-grid .pkg-icon{ flex:0 0 88px!important; width:88px!important; height:88px!important; } .packages-v330-grid .pkg-price-row{ display:flex!important; justify-content:center!important; align-items:baseline!important; gap:14px!important; } .packages-v330-grid .pkg-care, .packages-v330-grid .pkg-details{ width:100%!important; box-sizing:border-box!important; } .packages-v330-grid .pkg-quote{ width:100%!important; box-sizing:border-box!important; margin-top:auto!important; } @media(max-width:1200px){ .packages-v330-content{ width:92%!important; } .packages-v330-grid{ gap:18px!important; } } @media(max-width:760px){ .packages-v330{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; padding:78px 0 28px!important; } .packages-v330-tab-label{ width:300px!important; height:52px!important; font-size:.78rem!important; } .packages-v330-content{ width:calc(100% - 24px)!important; } .packages-v330-description{ margin-bottom:24px!important; font-size:.92rem!important; } .packages-v330-grid{ grid-template-columns:1fr!important; gap:16px!important; } } /* ========================================================= v3.3.2 — APPROVED BORDER + PRICE POLISH ========================================================= */ /* 1) PORTFOLIO: exact same outer footprint as ABOUT */ .about-v311, .portfolio-v322{ width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; margin-right:0!important; box-sizing:border-box!important; } /* Portfolio frame uses the same visible line weight as About */ .portfolio-v322{ position:relative!important; border-radius:18px!important; overflow:hidden!important; } /* Guarantee a complete portfolio perimeter even if image/frame art changes */ .portfolio-v322::before{ content:""!important; position:absolute!important; inset:0!important; border-radius:18px!important; padding:1.35px!important; background:linear-gradient(90deg,#d13cff 0%,#824cff 50%,#00a8ff 100%)!important; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important; -webkit-mask-composite:xor!important; mask-composite:exclude!important; pointer-events:none!important; z-index:20!important; } /* 2) PACKAGES: solid, continuous four-corner outer border */ .packages-v330{ position:relative!important; overflow:hidden!important; border-radius:18px!important; } /* Independent perimeter guarantees all four corners connect */ .packages-v330::before{ content:""!important; position:absolute!important; inset:0!important; border-radius:18px!important; padding:1.35px!important; background:linear-gradient(90deg,#d13cff 0%,#824cff 50%,#00a8ff 100%)!important; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important; -webkit-mask-composite:xor!important; mask-composite:exclude!important; pointer-events:none!important; z-index:4!important; } /* Keep existing integrated tab above the complete perimeter */ .packages-v330-frame{ z-index:5!important; } .packages-v330-content{ z-index:6!important; } /* 3) PACKAGE PRICES: approved purple instead of blue */ .packages-v330-grid .pkg-price-row strong{ color:#b83cff!important; text-shadow:0 0 14px rgba(184,60,255,.12)!important; } /* Keep care prices visually coordinated */ .packages-v330-grid .pkg-care-head b, .packages-v330-grid .pkg-install b, .packages-v330-grid .pkg-combined b{ color:#c04bff!important; } @media(max-width:760px){ .about-v311, .portfolio-v322{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; } } /* ========================================================= v3.3.3 — PORTFOLIO SINGLE OUTER BORDER Remove only the added inner/duplicate portfolio perimeter. ========================================================= */ .portfolio-v322::before{ content:none!important; display:none!important; background:none!important; padding:0!important; border:0!important; box-shadow:none!important; } /* Suppress legacy nested frame borders while retaining the approved outer Portfolio frame/tab and all project-card borders. */ .portfolio-v322 .portfolio-v311, .portfolio-v322 .portfolio-frame, .portfolio-v322 .portfolio-inner-frame, .portfolio-v322 .ews-portfolio-frame{ border:none!important; box-shadow:none!important; outline:none!important; } /* ========================================================= v3.3.4 — PORTFOLIO OUTER BORDER RESTORED / ALIGNED Single outer border only, aligned with About. ========================================================= */ .portfolio-v322{ position:relative!important; width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; margin-right:0!important; box-sizing:border-box!important; border-radius:18px!important; overflow:hidden!important; } /* Single continuous outer perimeter */ .portfolio-v322::after{ content:""!important; position:absolute!important; inset:0!important; border-radius:18px!important; padding:1.35px!important; background:linear-gradient(90deg,#d13cff 0%,#824cff 50%,#00a8ff 100%)!important; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important; -webkit-mask-composite:xor!important; mask-composite:exclude!important; pointer-events:none!important; z-index:30!important; } /* Keep the duplicate inner perimeter disabled */ .portfolio-v322::before{ content:none!important; display:none!important; } @media(max-width:760px){ .portfolio-v322{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; } } /* ========================================================= v3.3.5 — FIX ORIGINAL PORTFOLIO FRAME, NO EXTRA OUTER LAYER ========================================================= */ /* Disable synthetic perimeter added in v3.3.4 */ .portfolio-v322::after{ content:none!important; display:none!important; background:none!important; padding:0!important; } /* Keep previous duplicate pseudo-frame disabled */ .portfolio-v322::before{ content:none!important; display:none!important; } /* Make the actual Portfolio section/frame occupy the exact About footprint */ .portfolio-v322{ width:calc(100vw - 48px)!important; max-width:none!important; margin-left:calc(50% - 50vw + 24px)!important; margin-right:0!important; box-sizing:border-box!important; } /* Expand the ORIGINAL embedded portfolio frame/art to the section edges */ .portfolio-v322 .portfolio-v321-art{ width:100%!important; max-width:none!important; margin:0!important; box-sizing:border-box!important; } /* If the original frame is represented by nested frame wrappers/SVG, stretch those actual elements rather than adding another border. */ .portfolio-v322 .portfolio-frame, .portfolio-v322 .portfolio-inner-frame, .portfolio-v322 .ews-portfolio-frame, .portfolio-v322 [class*="portfolio"][class*="frame"], .portfolio-v322 svg{ width:100%!important; max-width:none!important; left:0!important; right:0!important; margin-left:0!important; margin-right:0!important; box-sizing:border-box!important; } /* Restore visible original frame styles where legacy rules suppressed them */ .portfolio-v322 .portfolio-frame, .portfolio-v322 .portfolio-inner-frame, .portfolio-v322 .ews-portfolio-frame, .portfolio-v322 [class*="portfolio"][class*="frame"]{ border:1.35px solid transparent!important; border-radius:18px!important; background: linear-gradient(#020409,#020409) padding-box, linear-gradient(90deg,#d13cff 0%,#824cff 50%,#00a8ff 100%) border-box!important; } /* Mobile: same exact alignment language as About */ @media(max-width:760px){ .portfolio-v322{ width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; } } /* ========================================================= v5.0 — EDITABLE REBUILD USING v3.3.5 AS VISUAL REFERENCE ========================================================= */ body .ew5-section, body .ew5-section *{box-sizing:border-box!important} body .ew5-section{ position:relative!important;width:calc(100vw - 48px)!important;max-width:none!important; margin:18px 0 18px calc(50% - 50vw + 24px)!important;padding:82px 28px 30px!important; border:0!important;border-radius:18px!important;background:#020409!important;color:#fff!important; overflow:hidden!important;height:auto!important;min-height:0!important;max-height:none!important; } body .ew5-section > *:not(.ew5-frame):not(.ew5-tab){position:relative!important;z-index:2!important} body .ew5-frame{position:absolute!important;inset:0!important;border-radius:18px!important;padding:1.35px!important; background:linear-gradient(90deg,#d13cff 0%,#824cff 50%,#00a8ff 100%)!important; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important; -webkit-mask-composite:xor!important;mask-composite:exclude!important;z-index:1!important;pointer-events:none!important} body .ew5-tab{position:absolute!important;top:0!important;left:50%!important;transform:translateX(-50%)!important; width:400px!important;height:66px!important;display:flex!important;align-items:center!important;justify-content:center!important; gap:10px!important;background:#020409!important;clip-path:polygon(0 0,100% 0,91% 100%,9% 100%)!important; color:#fff!important;font:700 .9rem/1 Arial,sans-serif!important;letter-spacing:.085em!important;z-index:10!important} body .ew5-tab:before{content:""!important;position:absolute!important;inset:0!important;padding:1.35px!important;clip-path:inherit!important; background:linear-gradient(90deg,#d13cff,#824cff 50%,#00a8ff)!important; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important; -webkit-mask-composite:xor!important;mask-composite:exclude!important} body .ew5-tab>*{position:relative!important;z-index:2!important}.ew5-tab span{color:#b95cff!important} body .ew5-section .wp-block-columns{margin:0!important}.ew5-section .wp-block-column{min-width:0!important} .ew5-eyebrow{color:#d13cff!important;font-weight:700!important;letter-spacing:.08em!important;margin:0 0 8px!important} /* ABOUT FLIP */ .ew5-about{padding:0!important;overflow:visible!important;background:transparent!important} .ew5-about .ew5-frame{display:none!important} .ew5-about-flip{position:relative!important;width:100%!important;min-height:500px!important;perspective:1600px!important} .ew5-about-inner{position:relative!important;width:100%!important;min-height:500px!important;transform-style:preserve-3d!important;transition:transform .75s ease!important} .ew5-about-flip.is-flipped .ew5-about-inner{transform:rotateY(180deg)!important} .ew5-about-face{position:absolute!important;inset:0!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important; width:100%!important;min-height:500px!important;padding:82px 28px 28px!important;border-radius:18px!important;background:#020409!important;overflow:hidden!important} .ew5-about-face:before{content:""!important;position:absolute!important;inset:0!important;border-radius:18px!important;padding:1.35px!important; background:linear-gradient(90deg,#d13cff,#824cff 50%,#00a8ff)!important; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;-webkit-mask-composite:xor!important;mask-composite:exclude!important;pointer-events:none!important} .ew5-about-back{transform:rotateY(180deg)!important} .ew5-flip-toggle{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;background:transparent!important;border:0!important;z-index:40!important;cursor:pointer!important} .ew5-about-face .ew5-tab{z-index:20!important} .ew5-about-front-grid{display:grid!important;grid-template-columns:32% 68%!important;gap:28px!important;align-items:center!important;height:auto!important} .ew5-about-left{height:100%!important;padding-right:28px!important;border-right:1px solid #7a7f8a!important;display:flex!important;flex-direction:column!important;justify-content:center!important} .ew5-about-logo,.ew5-about-wave{margin:0!important}.ew5-about-logo img,.ew5-about-wave img{display:block!important;width:100%!important;height:auto!important;object-fit:contain!important} .ew5-about-wave{margin-top:38px!important} .ew5-about-title{font-size:clamp(2rem,2.7vw,3.2rem)!important;line-height:1.05!important;margin:0 0 12px!important;font-weight:500!important} .ew5-about-title span{background:linear-gradient(90deg,#d13cff,#824cff,#168fff);-webkit-background-clip:text;background-clip:text;color:transparent} .ew5-about-intro{font-size:1rem!important;line-height:1.45!important;color:#f0f1f3!important;margin:0 0 24px!important} .ew5-feature-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important} .ew5-feature{padding:0 8px!important}.ew5-feature h4{margin:0 0 10px!important;font-size:1rem!important;line-height:1.25!important}.ew5-feature p{margin:0!important;color:#c9cbd1!important;font-size:.9rem!important;line-height:1.45!important} .ew5-about-back-grid{display:grid!important;grid-template-columns:34% 66%!important;gap:0!important;align-items:stretch!important} .ew5-astronaut-col{padding-right:18px!important}.ew5-astronaut{margin:0!important;height:100%!important}.ew5-astronaut img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important} .ew5-process-grid>.wp-block-columns{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;height:100%!important} .ew5-process{padding:0 16px!important;border-left:1px solid #7a7f8a!important;text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important} .ew5-process:first-child{border-left:0!important}.ew5-process figure{margin:0 0 8px!important}.ew5-process img{width:110px!important;height:90px!important;object-fit:cover!important} .ew5-process h4{margin:0 0 12px!important;font-size:1rem!important}.ew5-process p{margin:0!important;color:#d0d2d7!important;font-size:.9rem!important;line-height:1.55!important} /* PORTFOLIO */ .ew5-portfolio{padding-top:80px!important} .ew5-portfolio-title{font-size:clamp(2rem,3vw,3.4rem)!important;margin:0 0 6px!important}.ew5-portfolio-title span{background:linear-gradient(90deg,#d13cff,#824cff,#168fff);-webkit-background-clip:text;background-clip:text;color:transparent} .ew5-portfolio-intro{margin:0 auto 22px!important;color:#d6d7dc!important} .ew5-project-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important} .ew5-project{border:1px solid transparent!important;border-radius:16px!important;background: linear-gradient(#020409,#020409) padding-box,linear-gradient(90deg,#d13cff,#824cff 50%,#00a8ff) border-box!important;overflow:hidden!important;padding:0 0 12px!important} .ew5-project figure{margin:0!important}.ew5-project img{display:block!important;width:100%!important;height:auto!important} .ew5-project h4{font-size:1rem!important;margin:10px 14px 2px!important}.ew5-project p{color:#c94bff!important;margin:0 14px 8px!important;font-size:.88rem!important} .ew5-project .wp-block-buttons{margin:0 14px!important}.ew5-project .wp-element-button{background:transparent!important;padding:0!important;color:#fff!important;font-size:.82rem!important} /* PACKAGES */ .ew5-packages{padding-top:84px!important} .ew5-package-intro{margin:0 auto 28px!important;color:#fff!important} .ew5-package-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;width:88%!important;max-width:1520px!important;margin:0 auto!important} .ew5-package{padding:24px 20px 18px!important;border:1px solid rgba(132,145,170,.44)!important;border-radius:16px!important;background:linear-gradient(155deg,#0a0d16,#05070d)!important;display:flex!important;flex-direction:column!important} .ew5-package h3{font-size:1.3rem!important;margin:0 0 4px!important}.ew5-package>p{margin:0 0 10px!important;color:#d0d2d7!important} .ew5-price-row{display:flex!important;align-items:baseline!important;justify-content:center!important;gap:14px!important;margin:6px 0 12px!important} .ew5-price{color:#b83cff!important;font-size:2.8rem!important;margin:0!important}.ew5-price-row p{margin:0!important;color:#fff!important} .ew5-care-box{padding:14px 14px 10px!important;border:1px solid rgba(132,145,170,.34)!important;border-radius:10px!important;background:#070a12!important} .ew5-care-box p{margin:0 0 8px!important}.ew5-care-box strong,.ew5-care-box h4 span{color:#c04bff!important}.ew5-care-box h4{display:flex!important;justify-content:space-between!important;gap:12px!important;margin:10px 0 8px!important} .ew5-care-box ul{margin:8px 0 0!important;padding-left:18px!important}.ew5-care-box li{margin:4px 0!important} .ew5-package details{margin:14px 0!important;border:1px solid rgba(132,145,170,.34)!important;border-radius:10px!important;background:#070a12!important;padding:12px 14px!important} .ew5-package summary{cursor:pointer!important;font-weight:700!important}.ew5-package .wp-block-buttons{margin-top:auto!important}.ew5-package .wp-element-button{width:100%!important;background:transparent!important;border:1px solid #8657ff!important;border-radius:999px!important} /* TABLET */ @media(max-width:1024px){ .ew5-about-flip,.ew5-about-inner,.ew5-about-face{min-height:760px!important} .ew5-about-front-grid,.ew5-about-back-grid{grid-template-columns:1fr!important} .ew5-about-left{border-right:0!important;border-bottom:1px solid #7a7f8a!important;padding:0 0 20px!important} .ew5-about-logo img{max-width:320px!important;margin:auto!important}.ew5-about-wave img{max-width:430px!important;margin:auto!important} .ew5-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} .ew5-astronaut-col{padding:0 0 16px!important}.ew5-astronaut img{max-height:320px!important} .ew5-process-grid>.wp-block-columns{grid-template-columns:repeat(2,minmax(0,1fr))!important} .ew5-package-grid{width:94%!important} } /* MOBILE */ @media(max-width:760px){ body .ew5-section{width:calc(100vw - 20px)!important;margin:14px 0 14px calc(50% - 50vw + 10px)!important;padding-left:12px!important;padding-right:12px!important} body .ew5-tab{width:300px!important;height:52px!important;font-size:.78rem!important} .ew5-about-flip,.ew5-about-inner{min-height:1120px!important}.ew5-about-face{min-height:1120px!important;padding:68px 12px 20px!important} .ew5-feature-grid{grid-template-columns:1fr!important}.ew5-feature{padding:10px!important;border:1px solid rgba(120,130,155,.22)!important;border-radius:10px!important} .ew5-process-grid>.wp-block-columns{grid-template-columns:1fr!important}.ew5-process{border-left:0!important;border-top:1px solid #555a63!important;padding:18px 4px!important} .ew5-process:first-child{border-top:0!important} .ew5-project-grid,.ew5-package-grid{grid-template-columns:1fr!important;width:100%!important} } /* EDITOR */ .editor-styles-wrapper .ew5-section{width:100%!important;margin:16px 0!important;overflow:visible!important} .editor-styles-wrapper .ew5-frame{display:none!important} .editor-styles-wrapper .ew5-tab{position:relative!important;top:auto!important;left:auto!important;transform:none!important;margin:0 auto 18px!important} .editor-styles-wrapper .ew5-about-flip,.editor-styles-wrapper .ew5-about-inner{min-height:0!important;perspective:none!important} .editor-styles-wrapper .ew5-about-face{position:relative!important;transform:none!important;backface-visibility:visible!important;min-height:0!important;margin-bottom:24px!important} .editor-styles-wrapper .ew5-flip-toggle{display:none!important} /* ========================================================= v5.1 — TRUE FULL-WIDTH EDITABLE HOME SECTIONS ========================================================= */ /* Break the three editable sections out of any WordPress constrained container */ body .wp-site-blocks .ew5-section, body main .ew5-section, body .is-layout-constrained > .ew5-section, body .is-layout-flow > .ew5-section, body .ew5-section{ position:relative!important; left:50%!important; right:auto!important; width:calc(100vw - 32px)!important; max-width:calc(100vw - 32px)!important; margin-left:-50vw!important; margin-right:0!important; padding-left:28px!important; padding-right:28px!important; box-sizing:border-box!important; } /* Keep inner content broad instead of re-constraining it */ body .ew5-section > .wp-block-columns, body .ew5-section > .wp-block-group, body .ew5-section > .wp-block-heading, body .ew5-section > p{ max-width:none!important; } /* ABOUT: use more of the horizontal space */ body .ew5-about-front-grid{ grid-template-columns:minmax(360px,30%) minmax(0,70%)!important; gap:34px!important; } body .ew5-about-left{ padding-left:8px!important; padding-right:34px!important; } body .ew5-about-logo img{ width:100%!important; max-width:430px!important; margin:0 auto!important; } body .ew5-about-wave img{ width:100%!important; max-width:500px!important; margin:0 auto!important; } body .ew5-about-main{ width:100%!important; max-width:none!important; } body .ew5-feature-grid{ width:100%!important; grid-template-columns:repeat(5,minmax(150px,1fr))!important; gap:20px!important; } /* BACK SIDE: same full horizontal treatment */ body .ew5-about-back-grid{ grid-template-columns:minmax(420px,34%) minmax(0,66%)!important; } body .ew5-process-grid{ width:100%!important; max-width:none!important; } /* Portfolio and Packages share the same edge-to-edge footprint */ body .ew5-project-grid, body .ew5-package-grid{ max-width:none!important; } body .ew5-package-grid{ width:92%!important; } /* Tablet */ @media(max-width:1024px){ body .wp-site-blocks .ew5-section, body main .ew5-section, body .is-layout-constrained > .ew5-section, body .is-layout-flow > .ew5-section, body .ew5-section{ width:calc(100vw - 20px)!important; max-width:calc(100vw - 20px)!important; margin-left:-50vw!important; padding-left:18px!important; padding-right:18px!important; } body .ew5-about-front-grid, body .ew5-about-back-grid{ grid-template-columns:1fr!important; } } /* Mobile */ @media(max-width:760px){ body .wp-site-blocks .ew5-section, body main .ew5-section, body .is-layout-constrained > .ew5-section, body .is-layout-flow > .ew5-section, body .ew5-section{ width:calc(100vw - 12px)!important; max-width:calc(100vw - 12px)!important; margin-left:-50vw!important; padding-left:12px!important; padding-right:12px!important; } } /* ========================================================= v5.2 — VERIFIED SECTION ALIGNMENT One outer footprint + centered inner gutters for all 3 sections. ========================================================= */ /* EXACT SAME OUTER WIDTH / POSITION FOR ABOUT, PORTFOLIO, PACKAGES */ body .wp-site-blocks .ew5-section, body main .ew5-section, body .is-layout-constrained > .ew5-section, body .is-layout-flow > .ew5-section, body .ew5-section{ position:relative!important; left:auto!important; right:auto!important; transform:none!important; width:calc(100vw - 32px)!important; max-width:calc(100vw - 32px)!important; margin-left:calc(50% - 50vw + 16px)!important; margin-right:calc(50% - 50vw + 16px)!important; padding-left:28px!important; padding-right:28px!important; box-sizing:border-box!important; } /* Neutralize Gutenberg constrained-layout offsets inside these sections */ body .ew5-section > :where(.wp-block-columns,.wp-block-group,.wp-block-heading,p), body .ew5-section :where(.ew5-about-front-grid,.ew5-about-back-grid,.ew5-project-grid,.ew5-package-grid){ float:none!important; clear:both!important; left:auto!important; right:auto!important; transform:none!important; } /* COMMON INNER CONTENT GUTTER */ body .ew5-about-front-grid, body .ew5-about-back-grid, body .ew5-project-grid, body .ew5-package-grid{ width:94%!important; max-width:1720px!important; margin-left:auto!important; margin-right:auto!important; box-sizing:border-box!important; } /* ABOUT */ body .ew5-about-front-grid{ grid-template-columns:minmax(360px,30%) minmax(0,70%)!important; gap:34px!important; } body .ew5-about-back-grid{ grid-template-columns:minmax(420px,34%) minmax(0,66%)!important; } /* PORTFOLIO */ body .ew5-portfolio .ew5-project-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:22px!important; } body .ew5-portfolio .ew5-project{ width:100%!important; max-width:none!important; margin:0!important; } /* PACKAGES */ body .ew5-packages .ew5-package-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:22px!important; } body .ew5-packages .ew5-package{ width:100%!important; max-width:none!important; margin:0!important; } /* Center section intro text independently but keep it within the same section */ body .ew5-portfolio > .ew5-eyebrow, body .ew5-portfolio > .ew5-portfolio-title, body .ew5-portfolio > .ew5-portfolio-intro, body .ew5-packages > .ew5-package-intro{ width:94%!important; max-width:1720px!important; margin-left:auto!important; margin-right:auto!important; } /* TABLET */ @media(max-width:1024px){ body .wp-site-blocks .ew5-section, body main .ew5-section, body .is-layout-constrained > .ew5-section, body .is-layout-flow > .ew5-section, body .ew5-section{ width:calc(100vw - 20px)!important; max-width:calc(100vw - 20px)!important; margin-left:calc(50% - 50vw + 10px)!important; margin-right:calc(50% - 50vw + 10px)!important; padding-left:18px!important; padding-right:18px!important; } body .ew5-about-front-grid, body .ew5-about-back-grid, body .ew5-project-grid, body .ew5-package-grid{ width:96%!important; } body .ew5-about-front-grid, body .ew5-about-back-grid{ grid-template-columns:1fr!important; } body .ew5-packages .ew5-package-grid{ grid-template-columns:1fr!important; } } /* MOBILE */ @media(max-width:760px){ body .wp-site-blocks .ew5-section, body main .ew5-section, body .is-layout-constrained > .ew5-section, body .is-layout-flow > .ew5-section, body .ew5-section{ width:calc(100vw - 12px)!important; max-width:calc(100vw - 12px)!important; margin-left:calc(50% - 50vw + 6px)!important; margin-right:calc(50% - 50vw + 6px)!important; padding-left:12px!important; padding-right:12px!important; } body .ew5-about-front-grid, body .ew5-about-back-grid, body .ew5-project-grid, body .ew5-package-grid{ width:100%!important; max-width:none!important; } body .ew5-portfolio .ew5-project-grid, body .ew5-packages .ew5-package-grid{ grid-template-columns:1fr!important; } } /* ========================================================= v5.3 — NATIVE GUTENBERG FULL-WIDTH SECTIONS Uses alignfull at the block/template level instead of CSS breakout hacks. ========================================================= */ body .wp-site-blocks > .ew5-section.alignfull, body main > .ew5-section.alignfull, body .ew5-section.alignfull{ position:relative!important; left:auto!important; right:auto!important; transform:none!important; width:calc(100vw - 24px)!important; max-width:calc(100vw - 24px)!important; margin-left:calc(50% - 50vw + 12px)!important; margin-right:calc(50% - 50vw + 12px)!important; padding-left:28px!important; padding-right:28px!important; box-sizing:border-box!important; } /* WordPress layout engines must not re-constrain these full-width groups */ body .is-layout-constrained > .ew5-section.alignfull, body .is-layout-flow > .ew5-section.alignfull, body .wp-site-blocks .ew5-section.alignfull{ max-width:calc(100vw - 24px)!important; } /* Keep all three inner layouts centered inside the SAME full-width frame */ body .ew5-section.alignfull .ew5-about-front-grid, body .ew5-section.alignfull .ew5-about-back-grid, body .ew5-section.alignfull .ew5-project-grid, body .ew5-section.alignfull .ew5-package-grid{ width:94%!important; max-width:1760px!important; margin-left:auto!important; margin-right:auto!important; } /* Portfolio must never drift outside its own frame */ body .ew5-portfolio.alignfull .ew5-project-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:22px!important; } /* Packages stays centered and contained */ body .ew5-packages.alignfull .ew5-package-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:22px!important; } @media(max-width:1024px){ body .wp-site-blocks > .ew5-section.alignfull, body main > .ew5-section.alignfull, body .ew5-section.alignfull{ width:calc(100vw - 16px)!important; max-width:calc(100vw - 16px)!important; margin-left:calc(50% - 50vw + 8px)!important; margin-right:calc(50% - 50vw + 8px)!important; padding-left:18px!important; padding-right:18px!important; } body .ew5-section.alignfull .ew5-about-front-grid, body .ew5-section.alignfull .ew5-about-back-grid, body .ew5-section.alignfull .ew5-project-grid, body .ew5-section.alignfull .ew5-package-grid{ width:96%!important; } } @media(max-width:760px){ body .wp-site-blocks > .ew5-section.alignfull, body main > .ew5-section.alignfull, body .ew5-section.alignfull{ width:calc(100vw - 10px)!important; max-width:calc(100vw - 10px)!important; margin-left:calc(50% - 50vw + 5px)!important; margin-right:calc(50% - 50vw + 5px)!important; padding-left:12px!important; padding-right:12px!important; } body .ew5-section.alignfull .ew5-project-grid, body .ew5-section.alignfull .ew5-package-grid{ width:100%!important; grid-template-columns:1fr!important; } } /* ========================================================= v5.4 — PORTFOLIO FRAME + IMAGE FIX ONLY ========================================================= */ /* ONE frame only per project card */ body .ew5-portfolio .ew5-project{ position:relative!important; border:1px solid transparent!important; outline:0!important; box-shadow:none!important; background: linear-gradient(#020409,#020409) padding-box, linear-gradient(90deg,#d13cff 0%,#824cff 50%,#00a8ff 100%) border-box!important; border-radius:16px!important; overflow:hidden!important; } /* kill any pseudo-border / legacy duplicate line */ body .ew5-portfolio .ew5-project::before, body .ew5-portfolio .ew5-project::after{ content:none!important; display:none!important; border:0!important; outline:0!important; box-shadow:none!important; background:none!important; } /* no extra border on image wrappers */ body .ew5-portfolio .ew5-project figure, body .ew5-portfolio .ew5-project .wp-block-image{ border:0!important; outline:0!important; box-shadow:none!important; margin:0!important; padding:0!important; background:transparent!important; } /* show the ENTIRE screenshot instead of cropping */ body .ew5-portfolio .ew5-project img{ display:block!important; width:100%!important; height:auto!important; max-width:100%!important; max-height:none!important; object-fit:contain!important; object-position:center top!important; margin:0!important; padding:0!important; } /* keep editable caption area clean and inside the same single frame */ body .ew5-portfolio .ew5-project h4{ margin:12px 16px 3px!important; } body .ew5-portfolio .ew5-project > p{ margin:0 16px 8px!important; } body .ew5-portfolio .ew5-project .wp-block-buttons{ margin:0 16px 14px!important; } /* equal card geometry */ body .ew5-portfolio .ew5-project-grid{ align-items:start!important; } body .ew5-portfolio .ew5-project{ height:auto!important; min-height:0!important; } /* ========================================================= v5.5 — APPROVED EDITABLE FLEXIBLE PACKAGES ========================================================= */ body .ew55-packages{ padding-top:78px!important; padding-bottom:34px!important; overflow:hidden!important; } body .ew55-eyebrow{ margin:0 0 5px!important; color:#b84cff!important; font-size:.76rem!important; font-weight:700!important; letter-spacing:.14em!important; } body .ew55-title{ margin:0 0 5px!important; color:#fff!important; font-size:clamp(1.75rem,2.1vw,2.8rem)!important; font-weight:500!important; line-height:1.15!important; } body .ew55-intro{ margin:0 auto 26px!important; max-width:900px!important; color:#d4d7de!important; font-size:.98rem!important; line-height:1.45!important; } body .ew55-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:26px!important; width:92%!important; max-width:1700px!important; margin:0 auto!important; align-items:stretch!important; } body .ew55-package{ position:relative!important; display:flex!important; flex-direction:column!important; width:100%!important; min-width:0!important; min-height:0!important; height:auto!important; padding:24px 24px 20px!important; border:1px solid rgba(132,145,170,.52)!important; border-radius:16px!important; background: radial-gradient(circle at 10% 0%,rgba(150,50,255,.06),transparent 24%), linear-gradient(155deg,#090d17,#05070d)!important; box-shadow:none!important; overflow:hidden!important; } body .ew55-package-head{ display:grid!important; grid-template-columns:82px minmax(0,1fr)!important; gap:18px!important; align-items:center!important; min-height:90px!important; margin:0!important; } body .ew55-package-head h3{ margin:0 0 5px!important; color:#fff!important; font-size:1.42rem!important; line-height:1.15!important; } body .ew55-package-head p{ margin:0!important; color:#d3d6de!important; font-size:.94rem!important; line-height:1.45!important; } body .ew55-icon{ width:76px!important; height:76px!important; position:relative!important; border-radius:50%!important; } body .ew55-launchpad .ew55-icon::before{ content:"🚀"!important; } body .ew55-ascend .ew55-icon::before{ content:"↗"!important; } body .ew55-orbit .ew55-icon::before{ content:"◉"!important; } body .ew55-icon::before{ position:absolute!important; inset:0!important; display:flex!important; align-items:center!important; justify-content:center!important; color:#b84cff!important; font-size:3rem!important; line-height:1!important; font-family:Arial,sans-serif!important; text-shadow:0 0 10px rgba(114,80,255,.28)!important; } body .ew55-rule{ height:1px!important; width:100%!important; margin:12px 0 15px!important; border:0!important; background:linear-gradient(90deg,#b83cff,#714cff 48%,#1594ff)!important; opacity:.72!important; } body .ew55-price-row{ display:flex!important; align-items:baseline!important; justify-content:center!important; gap:16px!important; margin:0 0 12px!important; } body .ew55-price{ margin:0!important; color:#b83cff!important; font-size:2.85rem!important; font-weight:700!important; line-height:1!important; } body .ew55-price-row p{ margin:0!important; color:#fff!important; font-size:.94rem!important; } body .ew55-finance-box{ margin:0 0 18px!important; padding:12px 14px!important; border:1px solid rgba(132,145,170,.44)!important; border-radius:10px!important; background:#070a12!important; } body .ew55-finance-box > p{ margin:0!important; color:#f1f3f6!important; font-size:.92rem!important; line-height:1.35!important; } body .ew55-finance-box strong, body .ew55-care-line strong, body .ew55-combined strong{ color:#1594ff!important; font-weight:700!important; } body .ew55-finance-box hr{ border:0!important; height:1px!important; margin:10px 0!important; background:rgba(132,145,170,.28)!important; } body .ew55-care-line{ display:flex!important; justify-content:space-between!important; align-items:center!important; gap:14px!important; margin:0!important; } body .ew55-care-line p{ margin:0!important; color:#e2e5ea!important; font-size:.92rem!important; line-height:1.35!important; } body .ew55-combined{ margin-top:7px!important; color:#aeb4c0!important; font-size:.84rem!important; } body .ew55-feature-list{ margin:0 0 8px!important; padding:0!important; list-style:none!important; } body .ew55-feature-list li{ position:relative!important; margin:0 0 9px!important; padding-left:28px!important; color:#e0e3e8!important; font-size:.92rem!important; line-height:1.45!important; } body .ew55-feature-list li::before{ content:"✓"!important; position:absolute!important; left:0!important; top:.05em!important; width:18px!important; height:18px!important; display:flex!important; align-items:center!important; justify-content:center!important; border:1px solid #1594ff!important; border-radius:50%!important; color:#1594ff!important; font-size:.7rem!important; line-height:1!important; } body .ew55-disclaimer{ margin:0 0 14px!important; color:#b9bec8!important; font-size:.77rem!important; line-height:1.48!important; } body .ew55-details{ margin:0 0 14px!important; padding:0!important; border:1px solid transparent!important; border-radius:10px!important; background: linear-gradient(#070a12,#070a12) padding-box, linear-gradient(90deg,#b83cff,#714cff 48%,#1594ff) border-box!important; overflow:hidden!important; } body .ew55-details summary{ position:relative!important; display:flex!important; align-items:center!important; gap:10px!important; width:100%!important; padding:13px 14px!important; cursor:pointer!important; list-style:none!important; color:#fff!important; font-size:.96rem!important; font-weight:700!important; line-height:1.2!important; } body .ew55-details summary::-webkit-details-marker{ display:none!important; } body .ew55-details summary::marker{ content:""!important; } body .ew55-plus, body .ew55-detail-label{ background:linear-gradient(90deg,#c43cff,#744cff 48%,#1594ff)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; } body .ew55-plus{ font-size:1.65rem!important; font-weight:400!important; line-height:.8!important; } body .ew55-details[open] .ew55-plus{ transform:rotate(45deg)!important; } body .ew55-details .wp-block-details__content{ padding:0 16px 14px!important; } body .ew55-details .wp-block-details__content ul{ margin:0!important; padding-left:20px!important; } body .ew55-details .wp-block-details__content li{ margin:6px 0!important; color:#cbd0d9!important; font-size:.86rem!important; line-height:1.4!important; } body .ew55-quote{ margin-top:auto!important; } body .ew55-quote .wp-block-button{ width:100%!important; } body .ew55-quote .wp-element-button{ width:100%!important; text-align:center!important; padding:.75em 1em!important; border:1px solid #784cff!important; border-radius:999px!important; background:transparent!important; color:#fff!important; font-size:.86rem!important; } /* Tablet */ @media(max-width:1100px){ body .ew55-grid{ width:96%!important; gap:16px!important; } body .ew55-package{ padding:20px 16px 16px!important; } } /* Mobile */ @media(max-width:760px){ body .ew55-grid{ grid-template-columns:1fr!important; width:100%!important; } body .ew55-package{ margin-bottom:16px!important; } body .ew55-package-head{ grid-template-columns:68px minmax(0,1fr)!important; } body .ew55-icon{ width:60px!important; height:60px!important; } body .ew55-icon::before{ font-size:2.4rem!important; } body .ew55-price{ font-size:2.45rem!important; } } /* Editor */ .editor-styles-wrapper .ew55-grid{ width:100%!important; } .editor-styles-wrapper .ew55-package{ min-height:0!important; } /* ========================================================= v5.6 APPROVED POLISH — ABOUT + PORTFOLIO ASSETS + PACKAGES ========================================================= */ /* About: preserve compact v5.5 flip/frame, remove divider, center eyebrow only. */ body .ew5-about-left{border-right:0!important;padding-right:18px!important} body .ew5-about-main{text-align:left!important} body .ew5-about-main>.ew5-eyebrow{text-align:center!important;margin:0 0 12px!important;font-size:.96rem!important;letter-spacing:.13em!important} body .ew5-about-title{text-align:left!important;font-size:clamp(2rem,2.55vw,3rem)!important;line-height:1.08!important;letter-spacing:-.025em!important;margin-bottom:14px!important} body .ew5-about-intro{text-align:left!important;color:#d9dde5!important;line-height:1.55!important} body .ew5-feature-grid{text-align:left!important;gap:18px!important} body .ew5-feature{padding:0 10px!important;text-align:left!important} body .ew5-feature-icon{margin:0 0 10px!important;width:42px!important;height:42px!important} body .ew5-feature-icon img{display:block!important;width:42px!important;height:42px!important;object-fit:contain!important} body .ew5-feature h4{font-size:.98rem!important;line-height:1.25!important;margin:0 0 8px!important} body .ew5-feature p{font-size:.86rem!important;line-height:1.5!important;color:#bfc5cf!important} body .ew5-about-logo img{max-width:470px!important} body .ew5-about-wave img{max-width:540px!important} /* Portfolio: one frame only; show complete screenshot naturally. */ body .ew5-project{border:1px solid transparent!important;box-shadow:none!important;background:linear-gradient(#020409,#020409) padding-box,linear-gradient(90deg,#d13cff,#824cff 50%,#00a8ff) border-box!important} body .ew5-project::before,body .ew5-project::after{display:none!important;content:none!important} body .ew5-project figure{width:100%!important;overflow:hidden!important;background:#020409!important} body .ew5-project img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:top center!important} /* Flexible Packages: approved visual hierarchy and spacing. */ body .ew55-eyebrow,body .ew55-title{display:none!important} body .ew55-intro{margin:0 auto 28px!important;max-width:980px!important;color:#e2e5eb!important;font-size:1rem!important;text-align:center!important} body .ew55-grid{width:96%!important;max-width:none!important;gap:22px!important} body .ew55-package{padding:22px 22px 20px!important;border-color:rgba(132,145,170,.5)!important;border-radius:16px!important;background:linear-gradient(155deg,#090d17,#05070d)!important} body .ew55-package-head{grid-template-columns:82px minmax(0,1fr)!important;min-height:92px!important;gap:18px!important} body figure.ew55-icon{margin:0!important;width:76px!important;height:76px!important;border-radius:0!important} body figure.ew55-icon::before{display:none!important;content:none!important} body figure.ew55-icon img{display:block!important;width:76px!important;height:76px!important;object-fit:contain!important} body .ew55-package-head h3{font-size:1.34rem!important;letter-spacing:-.015em!important} body .ew55-package-head p{font-size:.92rem!important;color:#cbd0d9!important} body .ew55-price{font-size:2.9rem!important;color:#b83cff!important;letter-spacing:-.035em!important} body .ew55-finance-box strong,body .ew55-care-line strong,body .ew55-combined strong{color:#1594ff!important} body .ew55-feature-list{margin:2px 0 12px!important} body .ew55-feature-list li{font-size:.9rem!important;line-height:1.45!important;margin-bottom:9px!important;color:#e3e6eb!important} body .ew55-feature-list li::before{content:"✓"!important;border-color:#b83cff!important;color:#1594ff!important} body .ew55-disclaimer{font-size:.75rem!important;color:#aeb5c1!important;line-height:1.5!important} body .ew55-details{margin-top:10px!important} body .ew55-details summary{font-size:.94rem!important} body .ew55-quote .wp-element-button{border:1px solid transparent!important;background:linear-gradient(#070a12,#070a12) padding-box,linear-gradient(90deg,#b83cff,#714cff 48%,#1594ff) border-box!important} @media(max-width:1024px){body .ew55-grid{grid-template-columns:1fr!important;width:100%!important}body .ew55-package{max-width:760px!important;margin:0 auto!important;width:100%!important}body .ew5-about-left{border-bottom:0!important}} @media(max-width:760px){body .ew5-feature-grid{grid-template-columns:1fr!important}body .ew5-feature{padding:12px!important}body .ew55-package-head{grid-template-columns:66px minmax(0,1fr)!important}body figure.ew55-icon,body figure.ew55-icon img{width:60px!important;height:60px!important}} /* v5.6.1 — Portfolio screenshot asset cleanup only */ body .ew5-portfolio{ overflow:visible!important; } body .ew5-portfolio .ew5-portfolio-title{ position:relative!important; z-index:2!important; overflow:visible!important; } body .ew5-portfolio .ew5-project-grid{ position:relative!important; z-index:2!important; } body .ew5-portfolio .ew5-project figure{ width:100%!important; margin:0!important; overflow:hidden!important; background:#020409!important; } body .ew5-portfolio .ew5-project img{ display:block!important; width:100%!important; height:auto!important; aspect-ratio:650/355!important; object-fit:contain!important; object-position:center!important; margin:0!important; } /* v5.6.2 Flexible Packages: editable Gutenberg typography polish */ .ew5-packages .ew5-care-finance,.ew5-packages .ew5-care-rate,.ew5-packages .ew5-care-total{margin:0 0 10px!important;line-height:1.45!important} .ew5-packages .ew5-care-finance strong,.ew5-packages .ew5-care-rate strong,.ew5-packages .ew5-care-total strong{color:#159cff!important;font-weight:700!important} .ew5-packages .ew5-care-rate{display:flex!important;justify-content:space-between!important;gap:18px!important} .ew5-packages .ew5-package-card ul{margin:18px 0 16px!important;padding-left:1.35em!important} .ew5-packages .ew5-package-card li{margin-bottom:8px!important;line-height:1.45!important} .ew5-packages .ew5-package-card li::marker{color:#159cff!important} .ew5-packages .ew5-package-note{margin:18px 0 0!important;padding:14px 16px!important;border-top:1px solid rgba(148,163,184,.22)!important;color:#aeb8c7!important;font-size:.82em!important;line-height:1.55!important;font-weight:400!important} .ew5-packages details{margin-top:18px!important;padding-top:14px!important;border-top:1px solid rgba(148,163,184,.2)!important} @media(max-width:782px){.ew5-packages .ew5-package-note{font-size:.88em!important}} /* v5.6.3 — force CLEAN/FULL Portfolio screenshots */ body .ew5-portfolio .ew5-project figure{ display:block!important; width:100%!important; height:auto!important; margin:0!important; padding:0!important; overflow:hidden!important; background:#020409!important; } body .ew5-portfolio .ew5-project figure img{ display:block!important; width:100%!important; max-width:100%!important; height:auto!important; aspect-ratio:auto!important; object-fit:contain!important; object-position:center top!important; margin:0!important; padding:0!important; } body .ew5-portfolio .ew5-project{ overflow:hidden!important; } @media(max-width:760px){ body .ew5-portfolio .ew5-project figure img{ width:100%!important; height:auto!important; object-fit:contain!important; } } /* ========================================================= v5.6.4 — POLISHED EDITABLE FLEXIBLE PACKAGES Based on approved v5.6.3. Portfolio untouched. ========================================================= */ /* Card balance */ body .ew5-packages .ew55-package{ display:flex!important; flex-direction:column!important; padding:28px 26px 24px!important; } /* Header spacing */ body .ew5-packages .ew55-package-head{ margin-bottom:8px!important; } body .ew5-packages .ew55-package-head h3{ margin-bottom:5px!important; line-height:1.18!important; } body .ew5-packages .ew55-package-head p{ color:#c7cdd7!important; line-height:1.4!important; } /* Main price remains purple */ body .ew5-packages .ew55-price{ color:#b63cff!important; font-weight:700!important; letter-spacing:-.035em!important; } /* Clean finance/care summary */ body .ew5-packages .ew55-finance-box{ margin:2px 0 18px!important; padding:16px 18px!important; border:1px solid rgba(112,128,154,.42)!important; border-radius:12px!important; background:#070b13!important; } body .ew5-packages .ew55-finance-box > p{ margin:0!important; line-height:1.45!important; } body .ew5-packages .ew55-finance-box strong, body .ew5-packages .ew55-care-line strong, body .ew5-packages .ew55-combined strong{ color:#169cff!important; font-weight:700!important; } body .ew5-packages .ew55-finance-box hr{ margin:12px 0!important; border:0!important; height:1px!important; background:rgba(130,145,166,.25)!important; } body .ew5-packages .ew55-care-line{ display:flex!important; justify-content:space-between!important; align-items:baseline!important; gap:16px!important; margin:0!important; } body .ew5-packages .ew55-care-line p{ margin:0!important; color:#e6e9ee!important; } body .ew5-packages .ew55-combined{ margin:7px 0 0!important; color:#b8c0cc!important; font-size:.9rem!important; } /* Feature checklist */ body .ew5-packages .ew564-feature-list{ margin:2px 0 18px!important; padding:0!important; list-style:none!important; } body .ew5-packages .ew564-feature-list li{ position:relative!important; margin:0 0 11px!important; padding:0 0 0 30px!important; color:#e5e9ef!important; font-size:.95rem!important; line-height:1.45!important; font-weight:400!important; } body .ew5-packages .ew564-feature-list li::before{ content:"✓"!important; position:absolute!important; left:0!important; top:.05em!important; width:18px!important; height:18px!important; display:flex!important; align-items:center!important; justify-content:center!important; border:1px solid #a63dff!important; border-radius:50%!important; color:#169cff!important; font-size:.68rem!important; font-weight:700!important; line-height:1!important; } /* Remove the visual need for the old separator above the disclaimer */ body .ew5-packages .ew55-feature-list + .ew55-rule, body .ew5-packages .ew564-feature-list + .ew55-rule{ opacity:.35!important; margin:4px 0 14px!important; } /* Billing note — compact, subdued, still editable paragraph */ body .ew5-packages .ew564-billing-note{ margin:0 0 18px!important; padding:13px 15px!important; border:1px solid rgba(100,116,139,.25)!important; border-radius:10px!important; background:rgba(255,255,255,.018)!important; color:#9fa8b7!important; font-size:.79rem!important; line-height:1.55!important; font-weight:400!important; } /* Details control */ body .ew5-packages .ew55-details{ margin-top:auto!important; border:1px solid rgba(105,120,145,.32)!important; border-radius:11px!important; overflow:hidden!important; } body .ew5-packages .ew55-details summary{ padding:14px 16px!important; font-weight:700!important; letter-spacing:-.01em!important; cursor:pointer!important; } body .ew5-packages .ew55-detail-label, body .ew5-packages .ew55-plus{ background:linear-gradient(90deg,#c63cff,#744cff 50%,#169cff)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; } /* CTA spacing */ body .ew5-packages .ew55-quote{ margin-top:18px!important; } /* Ensure equal visual alignment */ body .ew5-packages .ew55-package-grid{ align-items:stretch!important; } /* Responsive */ @media(max-width:1100px){ body .ew5-packages .ew55-package{ padding:24px 22px!important; } } @media(max-width:760px){ body .ew5-packages .ew55-care-line{ gap:10px!important; } body .ew5-packages .ew564-billing-note{ font-size:.84rem!important; } body .ew5-packages .ew564-feature-list li{ font-size:.94rem!important; } } /* Gutenberg editor: no fake content; all text/list blocks stay directly editable */ .editor-styles-wrapper .ew564-feature-list, .editor-styles-wrapper .ew564-billing-note{ display:block!important; } /* ========================================================= v5.6.5 — CLEAN EDITABLE PACKAGES / NEW THEME INSTANCE ========================================================= */ /* Keep package body hierarchy compact and premium. */ body .ew55-packages .ew55-package{ display:flex!important; flex-direction:column!important; padding:28px 26px 24px!important; } /* Finance summary is the ONLY visible finance/care summary. */ body .ew55-packages .ew55-finance-box{ margin:4px 0 22px!important; padding:15px 17px!important; border:1px solid rgba(109,125,151,.46)!important; border-radius:12px!important; background:linear-gradient(145deg,#070b13,#050810)!important; } body .ew55-packages .ew55-finance-box>p{ margin:0!important; color:#eef1f5!important; font-size:.94rem!important; line-height:1.45!important; } body .ew55-packages .ew55-finance-box strong, body .ew55-packages .ew55-care-line strong, body .ew55-packages .ew55-combined strong{ color:#159cff!important; font-weight:700!important; } body .ew55-packages .ew55-finance-box hr{ margin:11px 0!important; border:0!important; height:1px!important; background:rgba(139,151,171,.24)!important; } body .ew55-packages .ew55-care-line{ display:flex!important; justify-content:space-between!important; align-items:baseline!important; gap:18px!important; margin:0!important; } body .ew55-packages .ew55-care-line p{ margin:0!important; color:#e5e9ef!important; font-size:.93rem!important; } body .ew55-packages .ew55-combined{ margin:6px 0 0!important; color:#aeb7c5!important; font-size:.86rem!important; } /* * Defensive cleanup for sites where an old cached customized template injected * a second legacy pricing group. The clean template does not contain these * nodes, but these selectors prevent the old unclassed duplicate block from * visually reappearing when stale content is briefly cached. */ body .ew55-package > .ew5-care-finance, body .ew55-package > .ew5-care-rate, body .ew55-package > .ew5-care-total{ display:none!important; } /* Features */ body .ew55-packages .ew565-feature-list{ margin:0 0 18px!important; padding:0!important; list-style:none!important; } body .ew55-packages .ew565-feature-list li{ position:relative!important; margin:0 0 11px!important; padding-left:30px!important; color:#e4e8ee!important; font-size:.94rem!important; line-height:1.45!important; font-weight:400!important; } body .ew55-packages .ew565-feature-list li::before{ content:"✓"!important; position:absolute!important; left:0!important; top:.08em!important; width:18px!important; height:18px!important; display:flex!important; align-items:center!important; justify-content:center!important; border:1px solid #ab3dff!important; border-radius:50%!important; color:#169cff!important; font-size:.67rem!important; font-weight:700!important; } /* Remove extra visual separator before note. */ body .ew55-packages .ew565-feature-list + .ew55-rule{ margin:1px 0 13px!important; opacity:.23!important; } /* Billing note becomes supporting fine print, not a wall of white text. */ body .ew55-packages .ew565-billing-note{ margin:0 0 18px!important; padding:12px 14px!important; border-left:2px solid #824cff!important; border-radius:0 9px 9px 0!important; background:linear-gradient(90deg,rgba(123,52,255,.075),rgba(21,156,255,.018))!important; color:#9da8b8!important; font-size:.76rem!important; line-height:1.55!important; font-weight:400!important; } /* -------- POLISHED DETAILS DROPDOWN -------- */ body .ew55-packages .ew565-details{ margin:0 0 18px!important; padding:0!important; border:1px solid rgba(108,124,150,.36)!important; border-radius:12px!important; background:linear-gradient(145deg,#080c15,#050810)!important; overflow:hidden!important; box-shadow:none!important; } body .ew55-packages .ew565-details summary{ position:relative!important; display:flex!important; align-items:center!important; gap:11px!important; min-height:52px!important; margin:0!important; padding:13px 16px!important; cursor:pointer!important; list-style:none!important; color:#fff!important; font-size:.93rem!important; font-weight:700!important; line-height:1.25!important; border:0!important; background:transparent!important; } body .ew55-packages .ew565-details summary::-webkit-details-marker{ display:none!important; } body .ew55-packages .ew565-details summary::marker{ content:""!important; } body .ew55-packages .ew565-details .ew55-plus{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 24px!important; width:24px!important; height:24px!important; border:1px solid #a63dff!important; border-radius:50%!important; background:none!important; -webkit-background-clip:initial!important; color:#159cff!important; font-size:1.15rem!important; font-weight:400!important; line-height:1!important; transition:transform .22s ease!important; } body .ew55-packages .ew565-details .ew55-detail-label{ background:linear-gradient(90deg,#c63cff 0%,#8c42ff 45%,#159cff 100%)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; } body .ew55-packages .ew565-details[open] summary{ border-bottom:1px solid rgba(119,134,158,.22)!important; } body .ew55-packages .ew565-details[open] .ew55-plus{ transform:rotate(45deg)!important; } /* Expanded content is integrated, not a second oversized card. */ body .ew55-packages .ew565-details .wp-block-details__content{ margin:0!important; padding:14px 16px 15px!important; background:rgba(2,5,10,.36)!important; } body .ew55-packages .ew565-details .wp-block-details__content ul{ margin:0!important; padding:0!important; list-style:none!important; } body .ew55-packages .ew565-details .wp-block-details__content li{ position:relative!important; margin:0 0 9px!important; padding-left:25px!important; color:#c7cfda!important; font-size:.84rem!important; line-height:1.45!important; font-weight:400!important; } body .ew55-packages .ew565-details .wp-block-details__content li:last-child{ margin-bottom:0!important; } body .ew55-packages .ew565-details .wp-block-details__content li::before{ content:"✓"!important; position:absolute!important; left:0!important; top:.08em!important; width:15px!important; height:15px!important; display:flex!important; align-items:center!important; justify-content:center!important; border:1px solid #844cff!important; border-radius:50%!important; color:#159cff!important; font-size:.55rem!important; } /* CTA follows details cleanly. */ body .ew55-packages .ew55-quote{ margin-top:auto!important; } /* Keep cards equal-height on desktop. */ body .ew55-packages .ew55-grid{ align-items:stretch!important; } /* Tablet / mobile */ @media(max-width:1100px){ body .ew55-packages .ew55-package{ padding:24px 22px!important; } } @media(max-width:760px){ body .ew55-packages .ew55-care-line{ gap:10px!important; } body .ew55-packages .ew565-billing-note{ font-size:.82rem!important; } body .ew55-packages .ew565-details .wp-block-details__content li{ font-size:.88rem!important; } } /* Gutenberg remains directly editable. */ .editor-styles-wrapper .ew565-feature-list, .editor-styles-wrapper .ew565-billing-note, .editor-styles-wrapper .ew565-details{ display:block!important; } /* ========================================================= v5.6.6 — EQUAL HEIGHT ADDITIONAL DETAILS PANELS Keeps v5.6.5 dropdown design/behavior unchanged. ========================================================= */ /* All three expandable inner tiles use the same overall height when open. */ body .ew55-packages .ew565-details[open]{ min-height:330px!important; display:flex!important; flex-direction:column!important; } /* Header keeps its compact approved height. */ body .ew55-packages .ew565-details[open] > summary{ flex:0 0 52px!important; } /* Content area fills remaining space so each inner tile ends on the same line. */ body .ew55-packages .ew565-details[open] .wp-block-details__content{ flex:1 1 auto!important; min-height:276px!important; display:flex!important; flex-direction:column!important; justify-content:flex-start!important; } /* Keep the list itself aligned consistently across all plans. */ body .ew55-packages .ew565-details[open] .wp-block-details__content ul{ width:100%!important; margin:0!important; } /* Tablet/mobile can expand naturally to avoid unnecessary empty space. */ @media(max-width:1100px){ body .ew55-packages .ew565-details[open]{ min-height:0!important; } body .ew55-packages .ew565-details[open] .wp-block-details__content{ min-height:0!important; } } /* ========================================================= v5.6.7 — PRICING TYPOGRAPHY + BULLET POLISH ========================================================= */ /* Smaller pricing figures blue; large package price remains purple. */ body .ew55-packages .ew55-finance-box strong, body .ew55-packages .ew55-care-line strong, body .ew55-packages .ew55-combined strong, body .ew55-packages .ew5-care-finance strong, body .ew55-packages .ew5-care-rate strong, body .ew55-packages .ew5-care-total strong{ color:#159cff!important; font-weight:700!important; } /* Main plan feature typography matches Additional Details typography. */ body .ew55-packages .ew565-feature-list li, body .ew55-packages .ew564-feature-list li, body .ew55-packages .ew55-feature-list li{ font-size:.84rem!important; font-weight:400!important; line-height:1.45!important; color:#c7cfda!important; text-align:left!important; margin:0 0 9px!important; padding-left:25px!important; } /* Left-aligned purple check/bullet treatment. */ body .ew55-packages .ew565-feature-list, body .ew55-packages .ew564-feature-list, body .ew55-packages .ew55-feature-list{ width:100%!important; margin-left:0!important; padding-left:0!important; list-style:none!important; text-align:left!important; } body .ew55-packages .ew565-feature-list li::before, body .ew55-packages .ew564-feature-list li::before, body .ew55-packages .ew55-feature-list li::before{ content:"✓"!important; position:absolute!important; left:0!important; top:.08em!important; width:15px!important; height:15px!important; display:flex!important; align-items:center!important; justify-content:center!important; border:1px solid #a63dff!important; border-radius:50%!important; color:#a63dff!important; font-size:.55rem!important; font-weight:700!important; line-height:1!important; } /* Match expanded Additional Details list appearance. */ body .ew55-packages .ew565-details .wp-block-details__content li{ font-size:.84rem!important; font-weight:400!important; line-height:1.45!important; color:#c7cfda!important; } /* Mobile readability remains natural. */ @media(max-width:760px){ body .ew55-packages .ew565-feature-list li, body .ew55-packages .ew564-feature-list li, body .ew55-packages .ew55-feature-list li, body .ew55-packages .ew565-details .wp-block-details__content li{ font-size:.88rem!important; } } /* ========================================================= v5.6.8 CLEAN PRICING RESET New theme slug prevents stale WordPress template overrides. ========================================================= */ /* Large build prices stay purple */ body .ew55-packages .ew55-price{ color:#b63cff!important; } /* ALL smaller pricing figures blue */ body .ew55-packages .ew55-finance-box p strong, body .ew55-packages .ew55-care-line p strong, body .ew55-packages p.ew55-combined strong{ color:#159cff!important; font-weight:700!important; } /* Main plan features exactly match Additional Details typography */ body .ew55-packages ul.ew55-feature-list, body .ew55-packages ul.ew565-feature-list{ width:100%!important; margin:0 0 18px!important; padding:0!important; list-style:none!important; text-align:left!important; } body .ew55-packages ul.ew55-feature-list > li, body .ew55-packages ul.ew565-feature-list > li{ position:relative!important; margin:0 0 9px!important; padding:0 0 0 25px!important; color:#c7cfda!important; font-size:.84rem!important; font-weight:400!important; line-height:1.45!important; text-align:left!important; list-style:none!important; } body .ew55-packages ul.ew55-feature-list > li::marker, body .ew55-packages ul.ew565-feature-list > li::marker{ content:""!important; } /* Purple left-aligned circular checks */ body .ew55-packages ul.ew55-feature-list > li::before, body .ew55-packages ul.ew565-feature-list > li::before{ content:"✓"!important; position:absolute!important; left:0!important; top:.08em!important; width:15px!important; height:15px!important; display:flex!important; align-items:center!important; justify-content:center!important; border:1px solid #a63dff!important; border-radius:50%!important; color:#a63dff!important; font-size:.55rem!important; font-weight:700!important; line-height:1!important; } /* Additional Details typography stays the reference standard */ body .ew55-packages .ew565-details .wp-block-details__content li{ color:#c7cfda!important; font-size:.84rem!important; font-weight:400!important; line-height:1.45!important; } /* Billing note stays subdued */ body .ew55-packages .ew565-billing-note{ color:#9da8b8!important; font-size:.76rem!important; line-height:1.55!important; } /* Equal open panel height retained */ body .ew55-packages .ew565-details[open]{ min-height:330px!important; display:flex!important; flex-direction:column!important; } body .ew55-packages .ew565-details[open] > summary{ flex:0 0 52px!important; } body .ew55-packages .ew565-details[open] .wp-block-details__content{ flex:1 1 auto!important; min-height:276px!important; } /* Mobile/tablet expands naturally */ @media(max-width:1100px){ body .ew55-packages .ew565-details[open], body .ew55-packages .ew565-details[open] .wp-block-details__content{ min-height:0!important; } } @media(max-width:760px){ body .ew55-packages ul.ew55-feature-list > li, body .ew55-packages ul.ew565-feature-list > li, body .ew55-packages .ew565-details .wp-block-details__content li{ font-size:.88rem!important; } } /* ========================================================= v6.0 — FULLY EDITABLE GUTENBERG CONTENT LAYER ========================================================= */ .ews-edit-section{ position:relative!important; width:calc(100vw - 24px)!important; max-width:calc(100vw - 24px)!important; margin:42px 0 42px calc(50% - 50vw + 12px)!important; padding:76px 34px 34px!important; border:1px solid transparent!important; border-radius:18px!important; background: linear-gradient(#020409,#020409) padding-box, linear-gradient(90deg,#c63cff,#784cff 50%,#159cff) border-box!important; box-sizing:border-box!important; overflow:hidden!important; } .ews-edit-section>h3{ margin:0 auto 24px!important; color:#fff!important; letter-spacing:.14em!important; font-size:1.05rem!important; } .ews-edit-about-grid{display:grid!important;grid-template-columns:minmax(360px,34%) minmax(0,66%)!important;gap:38px!important;align-items:center!important;margin:0!important} .ews-edit-about-brand{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important} .ews-edit-about-logo,.ews-edit-about-wave{width:100%!important;margin:0!important} .ews-edit-about-logo img{display:block!important;width:100%!important;max-width:500px!important;height:auto!important;margin:auto!important} .ews-edit-about-wave{margin-top:26px!important}.ews-edit-about-wave img{display:block!important;width:100%!important;max-width:560px!important;height:auto!important;margin:auto!important} .ews-edit-eyebrow{margin:0 0 10px!important;color:#c63cff!important;font-size:.9rem!important;font-weight:700!important;letter-spacing:.12em!important} .ews-edit-about-title{margin:0 0 18px!important;color:#fff!important;font-size:clamp(2rem,3vw,3.4rem)!important;line-height:1.08!important;font-weight:500!important} .ews-edit-about-title strong{font-weight:500!important;background:linear-gradient(90deg,#c63cff,#784cff 50%,#159cff)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important} .ews-edit-about-copy>p:not(.ews-edit-eyebrow){color:#d8dde5!important;line-height:1.6!important} .ews-edit-about-features{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;margin-top:28px!important} .ews-edit-about-feature{position:relative!important;padding:0 13px!important;text-align:left!important} .ews-edit-about-feature:not(:first-child)::before{content:""!important;position:absolute!important;left:0!important;top:4px!important;bottom:4px!important;width:1px!important;background:#3e4550!important} .ews-edit-about-icon{margin:0 0 10px!important;color:#159cff!important;font-size:1.8rem!important} .ews-edit-about-feature h4{margin:0 0 8px!important;color:#fff!important;font-size:.95rem!important;line-height:1.35!important} .ews-edit-about-feature p{margin:0!important;color:#bfc6d1!important;font-size:.82rem!important;line-height:1.45!important} .ews-edit-about-details{margin-top:26px!important;padding:0!important;border:1px solid rgba(120,136,160,.34)!important;border-radius:12px!important;background:#070a12!important;overflow:hidden!important} .ews-edit-about-details summary{padding:14px 16px!important;cursor:pointer!important;color:#fff!important;font-weight:700!important} .ews-edit-process-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;padding:18px!important} .ews-edit-process-grid h4{color:#fff!important}.ews-edit-process-grid p{color:#bcc4cf!important;font-size:.88rem!important;line-height:1.45!important} .ews-edit-portfolio-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important;width:94%!important;max-width:1720px!important;margin:24px auto 0!important} .ews-edit-project{overflow:hidden!important;border:1px solid transparent!important;border-radius:16px!important;background:linear-gradient(#020409,#020409) padding-box,linear-gradient(90deg,#c63cff,#784cff 50%,#159cff) border-box!important} .ews-edit-project figure{margin:0!important}.ews-edit-project img{display:block!important;width:100%!important;height:auto!important} .ews-edit-project h4{margin:14px 16px 4px!important;color:#fff!important}.ews-edit-project>p{margin:0 16px 12px!important;color:#c5cbd5!important} .ews-edit-project .wp-block-buttons{margin:0 16px 16px!important} .ews-edit-package-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;width:94%!important;max-width:1720px!important;margin:28px auto 0!important;align-items:stretch!important} .ews-edit-package{display:flex!important;flex-direction:column!important;padding:26px 24px!important;border:1px solid rgba(116,132,156,.45)!important;border-radius:16px!important;background:linear-gradient(155deg,#090d17,#05070d)!important} .ews-edit-package-icon{margin:0 0 10px!important;color:#c63cff!important;font-size:2.4rem!important} .ews-edit-package h3{margin:0 0 4px!important;color:#fff!important}.ews-edit-package>p{color:#c9cfda!important} .ews-edit-build-price{margin:18px 0 14px!important;color:#b63cff!important;font-size:2.65rem!important;line-height:1!important} .ews-edit-finance{margin:0 0 18px!important;padding:14px 16px!important;border:1px solid rgba(112,128,154,.42)!important;border-radius:12px!important;background:#070b13!important} .ews-edit-finance p{margin:0 0 8px!important;color:#e7ebf0!important}.ews-edit-finance p:last-child{margin-bottom:0!important}.ews-edit-finance strong{color:#159cff!important} .ews-edit-feature-list{margin:0 0 18px!important;padding:0!important;list-style:none!important} .ews-edit-feature-list li{position:relative!important;margin:0 0 9px!important;padding-left:25px!important;color:#c7cfda!important;font-size:.84rem!important;line-height:1.45!important} .ews-edit-feature-list li::before{content:"✓"!important;position:absolute!important;left:0!important;top:.08em!important;width:15px!important;height:15px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1px solid #a63dff!important;border-radius:50%!important;color:#a63dff!important;font-size:.55rem!important} .ews-edit-billing-note{margin:0 0 18px!important;padding:12px 14px!important;border-left:2px solid #824cff!important;border-radius:0 9px 9px 0!important;background:linear-gradient(90deg,rgba(123,52,255,.075),rgba(21,156,255,.018))!important;color:#9da8b8!important;font-size:.76rem!important;line-height:1.55!important} .ews-edit-details{margin:0 0 18px!important;border:1px solid rgba(108,124,150,.36)!important;border-radius:12px!important;background:linear-gradient(145deg,#080c15,#050810)!important;overflow:hidden!important} .ews-edit-details summary{padding:14px 16px!important;cursor:pointer!important;background:linear-gradient(90deg,#c63cff,#784cff 50%,#159cff)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;font-weight:700!important} .ews-edit-details>ul{margin:0!important;padding:14px 18px 15px 40px!important}.ews-edit-details li{margin-bottom:8px!important;color:#c7cfda!important;font-size:.84rem!important;line-height:1.45!important} .ews-edit-package .wp-block-buttons{margin-top:auto!important} .ews-edit-contact{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;margin:42px 0 42px calc(50% - 50vw + 12px)!important;padding:54px 24px!important;background:#020409!important} .ews-edit-contact h2{color:#fff!important} @media(max-width:1100px){ .ews-edit-about-grid{grid-template-columns:1fr!important} .ews-edit-about-features{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:24px!important} .ews-edit-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} .ews-edit-package-grid{grid-template-columns:1fr!important} } @media(max-width:760px){ .ews-edit-section{width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;margin-left:calc(50% - 50vw + 5px)!important;padding:60px 12px 22px!important} .ews-edit-about-features,.ews-edit-process-grid,.ews-edit-portfolio-grid,.ews-edit-package-grid{grid-template-columns:1fr!important;width:100%!important} .ews-edit-about-feature{padding:14px 4px!important}.ews-edit-about-feature::before{display:none!important} } /* Gutenberg editor: make every editable block visible in normal flow. */ .editor-styles-wrapper .ews-edit-section, .editor-styles-wrapper .ews-edit-contact{width:100%!important;max-width:none!important;margin:24px 0!important} /* v6.1 premium editable About */ body .ews61-about{position:relative!important;width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;min-height:610px!important;margin:42px 0 42px calc(50% - 50vw + 12px)!important;padding:0!important;border:1px solid transparent!important;border-radius:18px!important;background:linear-gradient(#020409,#020409) padding-box,linear-gradient(90deg,#c63cff,#784cff 50%,#159cff) border-box!important;overflow:hidden!important;perspective:1600px!important} body .ews61-about-face{position:absolute!important;inset:0!important;width:100%!important;min-height:610px!important;padding:24px 42px 30px!important;background:#020409!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;transform-style:preserve-3d!important;transition:transform .68s cubic-bezier(.2,.75,.25,1)!important} body .ews61-about-front{transform:rotateY(0deg)!important}body .ews61-about-back{transform:rotateY(180deg)!important}body .ews61-about.is-flipped .ews61-about-front{transform:rotateY(180deg)!important}body .ews61-about.is-flipped .ews61-about-back{transform:rotateY(360deg)!important} body .ews61-about-head{position:relative!important;display:flex!important;justify-content:center!important;align-items:center!important;min-height:48px!important;margin:0!important} body .ews61-about-label{margin:0!important;color:#fff!important;font-size:1.08rem!important;font-weight:700!important;letter-spacing:.16em!important} body .ews61-flip-controls{position:absolute!important;right:0!important;margin:0!important;z-index:5!important} body .ews61-flip-button .wp-element-button{padding:8px 13px!important;border:1px solid transparent!important;border-radius:999px!important;background:linear-gradient(#070a12,#070a12) padding-box,linear-gradient(90deg,#c63cff,#784cff 50%,#159cff) border-box!important;color:#dce2ea!important;font-size:.72rem!important;font-weight:700!important;letter-spacing:.04em!important} body .ews61-about-rule{width:30%!important;height:1px!important;margin:3px auto 20px!important;border:0!important;background:linear-gradient(90deg,#c63cff,#784cff 50%,#159cff)!important} body .ews61-about-grid{display:grid!important;grid-template-columns:minmax(360px,34%) minmax(0,66%)!important;gap:38px!important;width:96%!important;max-width:1780px!important;margin:0 auto!important;align-items:center!important} body .ews61-brand{min-height:470px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important} body .ews61-logo,body .ews61-wave{width:100%!important;margin:0!important} body .ews61-logo img{display:block!important;width:100%!important;max-width:500px!important;height:auto!important;margin:0 auto!important} body .ews61-wave{margin-top:28px!important}body .ews61-wave img{display:block!important;width:100%!important;max-width:570px!important;height:auto!important;margin:0 auto!important} body .ews61-copy{padding-left:10px!important;text-align:left!important} body .ews61-eyebrow{margin:0 0 9px!important;color:#c63cff!important;font-size:.88rem!important;font-weight:700!important;letter-spacing:.12em!important;text-align:left!important} body .ews61-title{margin:0 0 16px!important;color:#fff!important;font-size:clamp(2.25rem,3vw,3.9rem)!important;font-weight:500!important;line-height:1.05!important;text-align:left!important} body .ews61-title strong{font-weight:500!important;background:linear-gradient(90deg,#c63cff,#784cff 50%,#159cff)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important} body .ews61-intro{max-width:1080px!important;margin:0 0 28px!important;color:#d7dde6!important;font-size:1rem!important;line-height:1.6!important;text-align:left!important} body .ews61-features{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important;margin:0!important} body .ews61-feature{min-width:0!important;padding:14px 12px!important;border:1px solid rgba(112,128,154,.24)!important;border-radius:13px!important;background:linear-gradient(145deg,rgba(13,17,29,.88),rgba(5,8,14,.88))!important;text-align:left!important} body .ews61-icon{width:44px!important;height:44px!important;margin:0 0 12px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1px solid transparent!important;border-radius:12px!important;background:linear-gradient(#070a12,#070a12) padding-box,linear-gradient(135deg,#c63cff,#784cff 50%,#159cff) border-box!important;color:#159cff!important;font-size:1.45rem!important;line-height:1!important} body .ews61-code-icon{font-family:monospace!important;font-size:.9rem!important;font-weight:700!important} body .ews61-feature h4{margin:0 0 7px!important;color:#fff!important;font-size:.9rem!important;line-height:1.3!important} body .ews61-feature>p:not(.ews61-icon){margin:0!important;color:#bfc7d2!important;font-size:.78rem!important;line-height:1.45!important} body .ews61-back-grid{display:grid!important;grid-template-columns:minmax(360px,34%) minmax(0,66%)!important;gap:30px!important;width:96%!important;max-width:1780px!important;margin:0 auto!important;align-items:stretch!important} body .ews61-back-art figure{height:100%!important;margin:0!important}body .ews61-back-art img{display:block!important;width:100%!important;height:100%!important;max-height:475px!important;object-fit:cover!important;border-radius:15px!important} body .ews61-process-wrap{display:flex!important;flex-direction:column!important;justify-content:center!important} body .ews61-process-title{margin:0 0 26px!important;color:#fff!important;font-size:clamp(1.7rem,2.4vw,2.6rem)!important;font-weight:500!important} body .ews61-process-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;margin:0!important} body .ews61-process{padding:16px 14px!important;border:1px solid rgba(112,128,154,.25)!important;border-radius:13px!important;background:#070a12!important;text-align:left!important} body .ews61-process figure{margin:0 0 10px!important}body .ews61-process img{width:72px!important;height:58px!important;object-fit:cover!important} body .ews61-process h4{margin:0 0 8px!important;color:#fff!important;font-size:.9rem!important}body .ews61-process p{margin:0!important;color:#bcc4cf!important;font-size:.78rem!important;line-height:1.45!important} .editor-styles-wrapper .ews61-about{min-height:0!important;perspective:none!important;overflow:visible!important} .editor-styles-wrapper .ews61-about-face{position:relative!important;inset:auto!important;min-height:0!important;transform:none!important;margin-bottom:26px!important;border:1px solid rgba(112,128,154,.25)!important;border-radius:14px!important} .editor-styles-wrapper .ews61-flip-controls{display:none!important} @media(max-width:1100px){body .ews61-about{min-height:970px!important}body .ews61-about-face{min-height:970px!important}body .ews61-about-grid,body .ews61-back-grid{grid-template-columns:1fr!important}body .ews61-brand{min-height:300px!important}body .ews61-features{grid-template-columns:repeat(3,minmax(0,1fr))!important}body .ews61-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:760px){ body .ews61-about{ width:calc(100vw - 20px)!important; max-width:calc(100vw - 20px)!important; min-height:1280px!important; margin-left:calc(50% - 50vw + 10px)!important; } body .ews61-about-face{min-height:1280px!important;padding:18px 14px 24px!important} body .ews61-about-head{justify-content:center!important;flex-wrap:wrap!important} body .ews61-about-label{width:100%!important;text-align:center!important;font-size:.9rem!important} body .ews61-flip-controls{position:static!important;margin:10px auto 0!important} body .ews61-about-rule{width:100%!important;margin:2px auto 14px!important} body .ews61-about-grid{grid-template-columns:1fr!important;gap:16px!important;width:100%!important;align-items:start!important} body .ews61-brand{min-height:0!important;gap:10px!important;justify-content:flex-start!important} body .ews61-logo,body .ews61-wave{width:100%!important;margin:0!important} body .ews61-logo img{width:min(100%,360px)!important;max-width:360px!important;height:auto!important;max-height:190px!important;object-fit:contain!important} body .ews61-wave img{width:100%!important;max-width:100%!important;height:120px!important;object-fit:cover!important;object-position:center 72%!important;border-radius:10px!important} body .ews61-copy{padding-left:0!important;width:100%!important} body .ews61-title{font-size:2.05rem!important;line-height:1.04!important;margin-bottom:14px!important} body .ews61-intro{font-size:.95rem!important;line-height:1.5!important;margin-bottom:18px!important} body .ews61-features{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important} body .ews61-feature{padding:12px 10px!important} body .ews61-feature:last-child{grid-column:1/-1!important} body .ews61-process-grid{grid-template-columns:1fr!important} } /* v6.2 approved polish — hybrid Gutenberg retained */ body .ews61-wave{margin-top:20px!important;width:112%!important;max-width:none!important;margin-left:-6%!important} body .ews61-wave img{display:block!important;width:100%!important;max-width:none!important;height:285px!important;object-fit:cover!important;object-position:center 72%!important;border-radius:10px!important} body .ews62-launchpad-icon,body .ews62-ascend-icon,body .ews62-orbit-icon{ width:58px!important;height:58px!important;display:flex!important;align-items:center!important;justify-content:center!important; margin:0 0 18px!important;border:1px solid transparent!important;border-radius:50%!important; background:linear-gradient(#080c15,#080c15) padding-box,linear-gradient(135deg,#d13cff,#7a4cff 48%,#159cff) border-box!important; box-shadow:0 0 22px rgba(126,76,255,.2)!important;color:#55b8ff!important;font-size:1.65rem!important;line-height:1!important; text-shadow:0 0 12px rgba(77,169,255,.3)!important } body .ews62-orbit-icon{position:relative!important} body .ews62-orbit-icon::after{content:"";position:absolute;width:32px;height:17px;border:1px solid #b344ff;border-radius:50%;transform:rotate(-25deg);opacity:.85} body img[src*="portfolio-northroast-option1-v62"]{display:block!important;width:100%!important;height:auto!important;object-fit:contain!important;object-position:center!important} /* ========================================================= v6.3 — ALL APPROVED HYBRID GUTENBERG POLISH ========================================================= */ /* ---------- ABOUT ---------- */ body .ews61-wave{ margin-top:16px!important; width:116%!important; max-width:none!important; margin-left:-8%!important; } body .ews61-wave img{ display:block!important; width:100%!important; max-width:none!important; height:300px!important; object-fit:cover!important; object-position:center 74%!important; border-radius:10px!important; } /* ---------- FLEXIBLE PACKAGES ---------- */ /* Stronger section intro typography */ body .ews-edit-packages > h3, body .ews55-packages > h3, body #pricing > h3{ font-size:1.2rem!important; letter-spacing:.14em!important; font-weight:700!important; } body .ews-edit-packages > p:first-of-type, body .ews55-packages > p:first-of-type, body #pricing > p:first-of-type{ max-width:1120px!important; margin:0 auto 34px!important; font-size:1.08rem!important; line-height:1.55!important; color:#e7ebf1!important; } /* Package titles and taglines larger / more premium */ body .ews-edit-package h3, body .ew55-package h3, body .ew57-package h3{ line-height:1.18!important; font-weight:700!important; letter-spacing:-.018em!important; margin-bottom:7px!important; } body .ews-edit-package > p:not(.ews-edit-package-icon):not(.ews-edit-billing-note), body .ew55-package-head p, body .ew57-pkg-head p{ font-size:1rem!important; line-height:1.45!important; color:#d1d7e0!important; } /* Approved large premium package icons */ body .ews63-launchpad-icon, body .ews63-ascend-icon, body .ews63-orbit-icon{ width:86px!important; height:86px!important; display:flex!important; align-items:center!important; justify-content:center!important; margin:0 0 22px!important; border:2px solid transparent!important; border-radius:50%!important; background: radial-gradient(circle at 50% 50%,rgba(19,28,48,.95),rgba(5,8,14,.96)) padding-box, linear-gradient(135deg,#e13cff 0%,#8b50ff 46%,#26a8ff 100%) border-box!important; box-shadow: 0 0 0 1px rgba(120,70,255,.12), 0 0 28px rgba(129,68,255,.22)!important; color:#5ac4ff!important; font-size:2.35rem!important; line-height:1!important; text-shadow:0 0 16px rgba(91,185,255,.42)!important; } body .ews63-launchpad-icon{font-size:2.55rem!important} body .ews63-ascend-icon{font-family:Arial,sans-serif!important;font-size:2.25rem!important;font-weight:700!important} body .ews63-orbit-icon{ position:relative!important; font-size:2.05rem!important; } body .ews63-orbit-icon::before, body .ews63-orbit-icon::after{ content:""; position:absolute; width:48px; height:23px; border:2px solid #9b45ff; border-radius:50%; opacity:.92; } body .ews63-orbit-icon::before{transform:rotate(-24deg)} body .ews63-orbit-icon::after{transform:rotate(24deg);border-color:#29a8ff} /* Approved purple -> violet -> blue gradient build prices */ body .ews-edit-build-price, body .ew55-price, body .ew57-price{ line-height:1!important; font-weight:750!important; letter-spacing:-.04em!important; background:linear-gradient(90deg,#d63cff 0%,#8b4dff 48%,#2b9cff 100%)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; text-shadow:0 0 24px rgba(112,63,255,.12)!important; } /* Secondary numbers remain blue */ body .ews-edit-finance strong, body .ew55-finance-box strong, body .ew55-care-line strong, body .ew55-combined strong, body .ew57-finance strong{ color:#159cff!important; font-weight:700!important; } /* Give each package more visual breathing room */ body .ews-edit-package, body .ew55-package, body .ew57-package{ padding:30px 28px 26px!important; } /* ---------- PORTFOLIO ---------- */ /* 2x2 equal cards */ body .ews-edit-portfolio-grid, body .ew5-project-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-auto-rows:1fr!important; gap:22px!important; align-items:stretch!important; } body .ews-edit-project, body .ew5-project{ display:flex!important; flex-direction:column!important; height:100%!important; min-height:0!important; overflow:hidden!important; border:1px solid transparent!important; border-radius:16px!important; background: linear-gradient(#020409,#020409) padding-box, linear-gradient(90deg,#c63cff,#784cff 50%,#159cff) border-box!important; } /* One border only: neutralize nested/image borders */ body .ews-edit-project figure, body .ews-edit-project figure *, body .ew5-project figure, body .ew5-project figure *{ border:0!important; outline:0!important; box-shadow:none!important; } /* All screenshots occupy the same visual area and fill the tile */ body .ews-edit-project figure, body .ew5-project figure{ width:100%!important; margin:0!important; aspect-ratio:16/10!important; overflow:hidden!important; background:#020409!important; flex:0 0 auto!important; } body .ews-edit-project figure img, body .ew5-project figure img{ display:block!important; width:100%!important; height:100%!important; min-height:100%!important; object-fit:cover!important; object-position:center top!important; margin:0!important; padding:0!important; } /* Clean Northroast: absolutely no extra internal frame */ body img[src*="portfolio-northroast-clean-v63"], body img[src*="portfolio-northroast-clean-v63"]::before, body img[src*="portfolio-northroast-clean-v63"]::after{ border:0!important; outline:0!important; box-shadow:none!important; } /* Align project metadata/button area across all four cards */ body .ews-edit-project h4, body .ew5-project h4{ margin-top:16px!important; } body .ews-edit-project .wp-block-buttons, body .ew5-project .wp-block-buttons{ margin-top:auto!important; padding-top:8px!important; } /* ---------- RESPONSIVE ---------- */ @media(max-width:1100px){ body .ews63-launchpad-icon, body .ews63-ascend-icon, body .ews63-orbit-icon{ width:78px!important; height:78px!important; } } @media(max-width:760px){ body .ews-edit-portfolio-grid, body .ew5-project-grid{ grid-template-columns:1fr!important; grid-auto-rows:auto!important; } body .ews-edit-project figure, body .ew5-project figure{ aspect-ratio:16/10!important; } } /* Editor stays easy to drill into */ .editor-styles-wrapper .ews63-launchpad-icon, .editor-styles-wrapper .ews63-ascend-icon, .editor-styles-wrapper .ews63-orbit-icon{ min-width:86px!important; min-height:86px!important; } .editor-styles-wrapper .ews-edit-project, .editor-styles-wrapper .ew5-project{ height:auto!important; } /* ========================================================= v6.4 — APPROVED HYBRID FINAL POLISH ========================================================= */ /* ========================= PORTFOLIO — equal cards, full screenshots, no crop ========================= */ body .ews-edit-portfolio-grid, body .ew5-project-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:22px!important; align-items:stretch!important; } body .ews-edit-project, body .ew5-project{ display:flex!important; flex-direction:column!important; min-height:0!important; height:100%!important; overflow:hidden!important; border:1px solid transparent!important; border-radius:16px!important; background: linear-gradient(#020409,#020409) padding-box, linear-gradient(90deg,#c63cff,#784cff 50%,#159cff) border-box!important; } body .ews-edit-project figure, body .ew5-project figure{ width:100%!important; height:auto!important; min-height:0!important; aspect-ratio:auto!important; margin:0!important; padding:0!important; overflow:visible!important; background:#020409!important; border:0!important; outline:0!important; box-shadow:none!important; } body .ews-edit-project figure img, body .ew5-project figure img{ display:block!important; width:100%!important; height:auto!important; max-width:100%!important; max-height:none!important; aspect-ratio:auto!important; object-fit:contain!important; object-position:center top!important; margin:0!important; padding:0!important; border:0!important; outline:0!important; box-shadow:none!important; } /* Northroast specifically: no nested frame and never hidden */ body img[src*="portfolio-northroast-v64"]{ display:block!important; visibility:visible!important; opacity:1!important; width:100%!important; height:auto!important; max-height:none!important; object-fit:contain!important; border:0!important; outline:0!important; box-shadow:none!important; } /* Equal metadata footprint lets all 4 cards finish at same height. */ body .ews-edit-project h4, body .ew5-project h4{ margin:14px 16px 4px!important; } body .ews-edit-project > p, body .ew5-project > p{ margin:0 16px 10px!important; } body .ews-edit-project .wp-block-buttons, body .ew5-project .wp-block-buttons{ margin:0 16px 16px!important; margin-top:auto!important; } /* ========================= PACKAGES — bigger icons, smaller prices ========================= */ body .ews64-launchpad-icon, body .ews64-ascend-icon, body .ews64-orbit-icon{ width:118px!important; height:118px!important; min-width:118px!important; min-height:118px!important; display:flex!important; align-items:center!important; justify-content:center!important; margin:0 0 22px!important; border:3px solid transparent!important; border-radius:50%!important; background: radial-gradient(circle at 50% 50%,rgba(15,22,38,.98),rgba(4,7,12,.98)) padding-box, linear-gradient(135deg,#df3cff 0%,#9150ff 46%,#25aaff 100%) border-box!important; box-shadow:0 0 32px rgba(125,70,255,.28)!important; color:#58c3ff!important; font-size:3rem!important; line-height:1!important; text-shadow:0 0 18px rgba(86,184,255,.45)!important; } body .ews64-launchpad-icon{font-size:3.15rem!important} body .ews64-ascend-icon{font-family:Arial,sans-serif!important;font-size:3rem!important;font-weight:700!important} body .ews64-orbit-icon{position:relative!important;font-size:2.55rem!important} body .ews64-orbit-icon::before, body .ews64-orbit-icon::after{ content:""; position:absolute; width:64px; height:30px; border:2px solid #9f45ff; border-radius:50%; } body .ews64-orbit-icon::before{transform:rotate(-26deg)} body .ews64-orbit-icon::after{transform:rotate(26deg);border-color:#25aaff} /* Main build prices smaller, still approved gradient */ body .ews-edit-build-price, body .ew55-price, body .ew57-price{ line-height:1!important; font-weight:750!important; letter-spacing:-.035em!important; background:linear-gradient(90deg,#d63cff 0%,#8b4dff 48%,#2b9cff 100%)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; } /* Package titles/taglines remain larger and polished */ body .ews-edit-package h3, body .ew55-package h3, body .ew57-package h3{ line-height:1.18!important; font-weight:700!important; margin-bottom:7px!important; } body .ews-edit-package > p:not(.ews-edit-package-icon):not(.ews-edit-billing-note), body .ew55-package-head p{ line-height:1.45!important; } /* ========================= ADDITIONAL DETAILS — equal alignment/heights ========================= */ body .ews-edit-package, body .ew55-package, body .ew57-package{ display:flex!important; flex-direction:column!important; height:100%!important; } /* Push details to consistent vertical start */ body .ews-edit-details, body .ew565-details, body .ew55-details{ margin-top:auto!important; } /* Equal closed/open panel width and min height */ body .ews-edit-details, body .ew565-details, body .ew55-details{ width:100%!important; min-height:58px!important; border-radius:12px!important; } body .ews-edit-details[open], body .ew565-details[open], body .ew55-details[open]{ min-height:310px!important; display:flex!important; flex-direction:column!important; } body .ews-edit-details[open] > summary, body .ew565-details[open] > summary, body .ew55-details[open] > summary{ flex:0 0 54px!important; } body .ews-edit-details[open] > ul, body .ews-edit-details[open] .wp-block-details__content, body .ew565-details[open] .wp-block-details__content, body .ew55-details[open] .wp-block-details__content{ flex:1 1 auto!important; min-height:250px!important; } /* Quote buttons align on same baseline */ body .ews-edit-package > .wp-block-buttons, body .ew55-package > .wp-block-buttons, body .ew57-package > .wp-block-buttons{ margin-top:18px!important; } body .ews-edit-package .wp-block-button, body .ew55-package .wp-block-button, body .ew57-package .wp-block-button{ margin-top:0!important; } /* ========================= Responsive ========================= */ @media(max-width:1100px){ body .ews64-launchpad-icon, body .ews64-ascend-icon, body .ews64-orbit-icon{ width:100px!important; height:100px!important; min-width:100px!important; min-height:100px!important; } body .ews-edit-details[open], body .ew565-details[open], body .ew55-details[open], body .ews-edit-details[open] > ul, body .ews-edit-details[open] .wp-block-details__content, body .ew565-details[open] .wp-block-details__content, body .ew55-details[open] .wp-block-details__content{ min-height:0!important; } } @media(max-width:760px){ body .ews-edit-portfolio-grid, body .ew5-project-grid{ grid-template-columns:1fr!important; } body .ews64-launchpad-icon, body .ews64-ascend-icon, body .ews64-orbit-icon{ width:90px!important; height:90px!important; min-width:90px!important; min-height:90px!important; } body .ews-edit-build-price, body .ew55-price, body .ew57-price{ } } /* Editor: preserve easy block editing */ .editor-styles-wrapper .ews-edit-project, .editor-styles-wrapper .ew5-project, .editor-styles-wrapper .ews-edit-package, .editor-styles-wrapper .ew55-package, .editor-styles-wrapper .ew57-package{ height:auto!important; } /* ========================================================= v6.4.2 — Editable pricing typography + expanded About back ========================================================= */ /* Gutenberg owns editable pricing font sizes. These selectors intentionally do NOT declare font-size. */ body .ews-edit-package h3, body .ew55-package h3, body .ew57-package h3{ line-height:1.18; font-weight:700; margin-bottom:7px; } body .ews-edit-build-price, body .ew55-price, body .ew57-price{ line-height:1; font-weight:750; letter-spacing:-.035em; background:linear-gradient(90deg,#d63cff 0%,#8b4dff 48%,#2b9cff 100%)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; } /* About back: use the available panel height more intentionally */ body .ews61-about-back{ min-height:720px!important; height:auto!important; align-items:stretch!important; } body .ews61-about-back .ews61-about-back-inner, body .ews61-about-back > .wp-block-group__inner-container{ min-height:720px!important; } body .ews61-about-back figure{ align-self:stretch!important; height:100%!important; min-height:610px!important; } body .ews61-about-back figure img{ width:100%!important; height:100%!important; min-height:610px!important; object-fit:cover!important; object-position:center!important; border-radius:16px!important; } body .ews642-about-process-intro{ max-width:1000px!important; margin:0 0 24px!important; color:#b9c0cc!important; font-size:1.05rem!important; line-height:1.65!important; } body .ews642-about-value-grid{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:18px!important; margin-top:22px!important; } body .ews642-about-value-card{ min-height:170px!important; padding:22px!important; border:1px solid #263143!important; border-radius:16px!important; background:linear-gradient(145deg,rgba(10,15,25,.94),rgba(4,7,13,.96))!important; } body .ews642-about-value-card h4{ margin:0 0 10px!important; font-size:1.05rem!important; color:#fff!important; } body .ews642-about-value-card p{ margin:0!important; color:#b9c0cc!important; line-height:1.55!important; } /* Do not make the editor itself awkwardly tall */ .editor-styles-wrapper .ews61-about-back, .editor-styles-wrapper .ews61-about-back figure, .editor-styles-wrapper .ews61-about-back figure img{ min-height:0!important; height:auto!important; } @media(max-width:1100px){ body .ews642-about-value-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} body .ews61-about-back figure, body .ews61-about-back figure img{min-height:500px!important} } @media(max-width:760px){ body .ews61-about-back{min-height:0!important} body .ews642-about-value-grid{grid-template-columns:1fr!important} body .ews61-about-back figure, body .ews61-about-back figure img{min-height:0!important;height:auto!important;object-fit:contain!important} } /* ========================================================= v6.4.3 — Portfolio + Flexible Packages match About header ========================================================= */ /* Pull the section content upward to match About Eclipse */ body .ews-edit-portfolio, body .ews-edit-packages{ padding-top:24px!important; } /* Match centered diamond/title styling */ body .ews643-section-title{ margin:0 auto!important; color:#fff!important; font-size:1.08rem!important; font-weight:700!important; letter-spacing:.16em!important; line-height:1.25!important; text-align:center!important; } /* Match About Eclipse purple → blue underline */ body .ews643-section-rule{ width:30%!important; max-width:530px!important; height:1px!important; margin:18px auto 28px!important; border:0!important; background:linear-gradient(90deg,#c63cff,#784cff 50%,#159cff)!important; opacity:1!important; } /* Reduce any inherited extra whitespace above the first section content */ body .ews-edit-portfolio > .ews643-section-title:first-child, body .ews-edit-packages > .ews643-section-title:first-child{ margin-top:0!important; } /* Keep intro text spacing clean after the underline */ body .ews-edit-portfolio > .ews643-section-rule + p, body .ews-edit-packages > .ews643-section-rule + p{ margin-top:0!important; } /* Editor should reflect the same hierarchy without awkward full-width behavior */ .editor-styles-wrapper .ews643-section-rule{ width:30%!important; max-width:530px!important; margin:18px auto 28px!important; } /* Mobile keeps the same treatment, just a slightly wider underline */ @media(max-width:760px){ body .ews-edit-portfolio, body .ews-edit-packages{ padding-top:20px!important; } body .ews643-section-rule{ width:58%!important; margin:14px auto 22px!important; } } /* ========================================================= ABOUT BACK CORRECTION — process icons contained, art large ========================================================= */ /* Keep the left astronaut artwork large and visually dominant. */ body .ews61-about-back .ews61-back-art{ display:flex!important; align-items:stretch!important; justify-content:center!important; } body .ews61-about-back .ews61-back-art figure{ width:100%!important; height:100%!important; min-height:560px!important; margin:0!important; } body .ews61-about-back .ews61-back-art img{ display:block!important; width:100%!important; height:100%!important; min-height:560px!important; max-height:640px!important; object-fit:cover!important; object-position:center!important; border-radius:15px!important; } /* Process card layout remains four across on desktop. */ body .ews61-about-back .ews61-process-grid{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:16px!important; align-items:stretch!important; } /* Each process card gets a natural, compact icon area. */ body .ews61-about-back .ews61-process{ display:flex!important; flex-direction:column!important; min-height:245px!important; padding:18px 16px!important; border:1px solid rgba(112,128,154,.28)!important; border-radius:14px!important; background:linear-gradient(145deg,#080c15,#050810)!important; overflow:hidden!important; } /* Critical fix: stop the process images from stretching to the card height. */ body .ews61-about-back .ews61-process figure{ display:flex!important; align-items:center!important; justify-content:flex-start!important; width:78px!important; height:78px!important; min-width:78px!important; min-height:78px!important; max-width:78px!important; max-height:78px!important; margin:0 0 14px!important; padding:0!important; overflow:hidden!important; flex:0 0 78px!important; border-radius:12px!important; background:#020409!important; } /* Critical fix: contain the icon artwork instead of covering/cropping it. */ body .ews61-about-back .ews61-process figure img{ display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:78px!important; max-height:78px!important; object-fit:contain!important; object-position:center!important; margin:0!important; padding:6px!important; border:0!important; border-radius:10px!important; } /* Keep process typography polished and readable. */ body .ews61-about-back .ews61-process h4{ margin:0 0 8px!important; color:#fff!important; font-size:1rem!important; line-height:1.3!important; } body .ews61-about-back .ews61-process p{ margin:0!important; color:#bcc4cf!important; font-size:.86rem!important; line-height:1.5!important; } /* Let the added professional content fill the lower-right area cleanly. */ body .ews61-about-back .ews642-about-value-grid{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:16px!important; margin-top:20px!important; } body .ews61-about-back .ews642-about-value-card{ min-height:145px!important; padding:18px!important; } /* Editor remains easy to work with. */ .editor-styles-wrapper .ews61-about-back .ews61-process figure, .editor-styles-wrapper .ews61-about-back .ews61-process figure img{ width:78px!important; height:78px!important; min-width:78px!important; min-height:78px!important; max-width:78px!important; max-height:78px!important; } /* Responsive */ @media(max-width:1100px){ body .ews61-about-back .ews61-process-grid, body .ews61-about-back .ews642-about-value-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } body .ews61-about-back .ews61-back-art figure, body .ews61-about-back .ews61-back-art img{ min-height:460px!important; max-height:520px!important; } } @media(max-width:760px){ body .ews61-about-back .ews61-process-grid, body .ews61-about-back .ews642-about-value-grid{ grid-template-columns:1fr!important; } body .ews61-about-back .ews61-back-art figure, body .ews61-about-back .ews61-back-art img{ min-height:0!important; max-height:none!important; height:auto!important; object-fit:contain!important; } } /* ========================================================= v6.4.5 — ABOUT BACK FULL / BALANCED / HD ========================================================= */ body .ews61-about{ min-height:760px!important; } body .ews61-about-back{ min-height:760px!important; padding:24px 28px 26px!important; } /* Make the body use the whole available width and height */ body .ews61-about-back .ews61-back-grid{ display:grid!important; grid-template-columns:minmax(500px,35%) minmax(0,65%)!important; gap:34px!important; width:100%!important; max-width:none!important; margin:0!important; align-items:stretch!important; } /* Anchor astronaut art harder to the LEFT edge */ body .ews61-about-back .ews61-back-art{ margin-left:-2px!important; padding-left:0!important; align-self:stretch!important; } body .ews61-about-back .ews61-back-art figure{ width:100%!important; height:100%!important; min-height:620px!important; margin:0!important; overflow:hidden!important; border-radius:14px!important; } body .ews61-about-back .ews61-back-art img{ display:block!important; width:100%!important; height:100%!important; min-height:620px!important; max-height:660px!important; object-fit:cover!important; object-position:36% center!important; border-radius:14px!important; } /* Tighten/right-side composition so it fills the panel */ body .ews61-about-back .ews61-process-wrap{ display:flex!important; flex-direction:column!important; justify-content:flex-start!important; min-height:620px!important; padding:6px 0 0!important; } body .ews61-about-back .ews61-process-title{ margin:0 0 8px!important; font-size:clamp(2rem,2.6vw,3rem)!important; line-height:1.08!important; } body .ews61-about-back .ews645-process-intro{ max-width:1080px!important; margin:0 0 22px!important; color:#c5ccd6!important; font-size:.98rem!important; line-height:1.6!important; } /* First row: process cards */ body .ews61-about-back .ews61-process-grid{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:16px!important; margin:0 0 18px!important; } body .ews61-about-back .ews61-process{ min-height:218px!important; padding:16px!important; } body .ews61-about-back .ews61-process figure{ width:68px!important; height:68px!important; min-width:68px!important; min-height:68px!important; max-width:68px!important; max-height:68px!important; flex:0 0 68px!important; margin:0 0 12px!important; } body .ews61-about-back .ews61-process figure img{ width:68px!important; height:68px!important; min-width:0!important; min-height:0!important; max-width:68px!important; max-height:68px!important; object-fit:contain!important; padding:5px!important; } /* Second row fills the previously empty lower-right area */ body .ews61-about-back .ews645-about-value-grid{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:16px!important; margin:0!important; flex:1 1 auto!important; align-items:stretch!important; } body .ews61-about-back .ews645-about-value-card{ min-height:190px!important; padding:18px 16px!important; border:1px solid rgba(112,128,154,.28)!important; border-radius:14px!important; background:linear-gradient(145deg,#080c15,#050810)!important; } body .ews61-about-back .ews645-value-icon{ margin:0 0 11px!important; color:#a63dff!important; font-size:1.45rem!important; line-height:1!important; } body .ews61-about-back .ews645-about-value-card h4{ margin:0 0 8px!important; color:#fff!important; font-size:.98rem!important; line-height:1.25!important; } body .ews61-about-back .ews645-about-value-card p:not(.ews645-value-icon){ margin:0!important; color:#bcc4cf!important; font-size:.82rem!important; line-height:1.5!important; } /* Keep editor easy to work with */ .editor-styles-wrapper .ews61-about-back, .editor-styles-wrapper .ews61-about-back .ews61-back-art figure, .editor-styles-wrapper .ews61-about-back .ews61-back-art img, .editor-styles-wrapper .ews61-about-back .ews61-process-wrap{ min-height:0!important; height:auto!important; } @media(max-width:1200px){ body .ews61-about-back .ews61-back-grid{ grid-template-columns:1fr!important; } body .ews61-about-back .ews61-back-art figure, body .ews61-about-back .ews61-back-art img{ min-height:440px!important; max-height:520px!important; } body .ews61-about-back .ews61-process-grid, body .ews61-about-back .ews645-about-value-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } @media(max-width:760px){ body .ews61-about, body .ews61-about-back{ min-height:0!important; } body .ews61-about-back .ews61-process-grid, body .ews61-about-back .ews645-about-value-grid{ grid-template-columns:1fr!important; } body .ews61-about-back .ews61-back-art figure, body .ews61-about-back .ews61-back-art img{ min-height:0!important; max-height:none!important; height:auto!important; object-fit:contain!important; } } /* ========================================================= v6.4.6 — APPROVED FINAL CHANGES ========================================================= */ /* Reduce rendered prices and override all older sizing rules. */ body .ews-edit-build-price, body .ews-edit-package .ews-edit-build-price, body .ew55-price, body .ew57-price, body .ews-edit-package [class*="build-price"]{ font-size:2.05rem!important; line-height:1.02!important; } /* Premium custom Launchpad line-art rocket. */ body .ews646-launchpad-rocket{ display:flex!important; width:68px!important; height:68px!important; align-items:center!important; justify-content:center!important; } body .ews646-launchpad-rocket svg{ display:block!important; width:54px!important; height:54px!important; } /* Final About positioning/density. */ body .ews61-about-back .ews61-back-grid{ grid-template-columns:minmax(520px,36%) minmax(0,64%)!important; gap:28px!important; } body .ews61-about-back .ews61-back-art{ margin-left:-18px!important; } body .ews61-about-back .ews61-back-art img{ object-position:30% center!important; } body .ews61-about-back .ews645-about-value-grid{ gap:14px!important; } body .ews61-about-back .ews645-about-value-card{ min-height:180px!important; } /* Gutenberg editor can still control typography while editing. */ .editor-styles-wrapper .ews-edit-build-price{ font-size:inherit!important; } @media(max-width:1100px){ body .ews-edit-build-price, body .ews-edit-package .ews-edit-build-price, body .ew55-price, body .ew57-price{font-size:1.95rem!important} } @media(max-width:760px){ body .ews-edit-build-price, body .ews-edit-package .ews-edit-build-price, body .ew55-price, body .ew57-price{font-size:1.8rem!important} body .ews61-about-back .ews61-back-art{margin-left:0!important} } /* ========================================================= v6.5.1 — STABLE ABOUT + NEW APPROVED PORTFOLIO ========================================================= */ /* ABOUT: shorten the back face without replacing Gutenberg markup */ body .ews61-about, body .ews61-about-back{ min-height:0!important; height:auto!important; } body .ews61-about-back{ padding-bottom:22px!important; } /* Stable saved Gutenberg layout */ body .ews61-about-back .ews61-back-grid{ display:grid!important; grid-template-columns:minmax(0,34%) minmax(0,66%)!important; gap:26px!important; align-items:stretch!important; width:100%!important; margin:0!important; } body .ews61-about-back .ews61-back-art{ margin:0!important; padding:0!important; min-width:0!important; } body .ews61-about-back .ews61-back-art figure{ width:100%!important; height:100%!important; min-height:500px!important; max-height:560px!important; margin:0!important; overflow:hidden!important; border-radius:14px!important; } body .ews61-about-back .ews61-back-art img{ width:100%!important; height:100%!important; min-height:500px!important; max-height:560px!important; object-fit:cover!important; object-position:50% 50%!important; transform:none!important; } /* Right side: compact, no huge dead area */ body .ews61-about-back .ews61-process-wrap{ display:flex!important; flex-direction:column!important; min-height:0!important; padding-top:4px!important; } body .ews61-about-back .ews61-process-title{ margin:0 0 8px!important; font-size:clamp(2rem,2.4vw,2.75rem)!important; line-height:1.08!important; } body .ews61-about-back .ews645-process-intro{ margin:0 0 16px!important; color:#c3cad4!important; font-size:.96rem!important; line-height:1.5!important; } /* Process cards */ body .ews61-about-back .ews61-process-grid{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:14px!important; margin:0 0 14px!important; } body .ews61-about-back .ews61-process{ min-height:215px!important; padding:16px!important; } body .ews61-about-back .ews61-process figure{ width:68px!important; height:68px!important; min-width:68px!important; min-height:68px!important; max-width:68px!important; max-height:68px!important; margin:0 0 12px!important; } body .ews61-about-back .ews61-process figure img{ width:68px!important; height:68px!important; min-width:0!important; min-height:0!important; max-width:68px!important; max-height:68px!important; object-fit:contain!important; object-position:center!important; } /* Existing second row from v6.4.6 fills the lower area */ body .ews61-about-back .ews645-about-value-grid{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:14px!important; margin-top:0!important; } body .ews61-about-back .ews645-about-value-card{ min-height:160px!important; } /* PORTFOLIO: show entire approved screenshots; no clipping */ body .ews-edit-project figure, body .ew5-project figure{ width:100%!important; height:auto!important; aspect-ratio:auto!important; overflow:hidden!important; background:#020409!important; } body .ews-edit-project figure img, body .ew5-project figure img{ display:block!important; width:100%!important; height:auto!important; max-width:100%!important; max-height:none!important; object-fit:contain!important; object-position:center!important; margin:0!important; padding:0!important; border:0!important; box-shadow:none!important; } /* Equal outer cards */ body .ews-edit-portfolio-grid, body .ew5-project-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:22px!important; align-items:stretch!important; } body .ews-edit-project, body .ew5-project{ display:flex!important; flex-direction:column!important; height:100%!important; } /* Pricing remains approved from v6.4.6 */ body .ews-edit-build-price, body .ew55-price, body .ew57-price{ font-size:1.95rem!important; line-height:1.02!important; } /* Section headers stay matched to About */ body .ews643-section-rule{ width:30%!important; max-width:530px!important; height:1px!important; margin:18px auto 28px!important; border:0!important; background:linear-gradient(90deg,#c63cff,#784cff 50%,#159cff)!important; opacity:1!important; } @media(max-width:1100px){ body .ews61-about-back .ews61-back-grid{grid-template-columns:1fr!important} body .ews61-about-back .ews61-process-grid, body .ews61-about-back .ews645-about-value-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:760px){ body .ews61-about-back .ews61-process-grid, body .ews61-about-back .ews645-about-value-grid, body .ews-edit-portfolio-grid, body .ew5-project-grid{grid-template-columns:1fr!important} body .ews61-about-back .ews61-back-art figure, body .ews61-about-back .ews61-back-art img{ min-height:0!important; max-height:none!important; height:auto!important; object-fit:contain!important; } } /* ========================================================= v6.6.1 — HOME TEMPLATE REPAIR front-page.html, home.html and index.html all render the same approved Eclipse Home layout. ========================================================= */ body .eclipse-editor-page, body .eclipse-editor-page #home, body .eclipse-editor-page #about, body .eclipse-editor-page #portfolio, body .eclipse-editor-page #pricing, body .eclipse-editor-page #contact{ visibility:visible!important; opacity:1!important; } /* Prevent the default post loop from appearing on the Home template. */ body.home .wp-block-query, body.blog .wp-block-query{ display:none!important; } /* Preserve About flip behavior while ensuring its wrapper renders. */ body .ews61-about{ display:block!important; visibility:visible!important; opacity:1!important; } /* ========================================================= v6.6.2 — PHP HOME ROUTING FIX front-page.php, home.php and index.php explicitly render templates/front-page.html through do_blocks(). ========================================================= */ body .eclipse-editor-page{ display:block!important; visibility:visible!important; opacity:1!important; } /* ========================================================= v6.6.3 — ABOUT LIVE RENDER GUARANTEE About is emitted directly by the PHP homepage renderer. ========================================================= */ body #about.ews61-about{ display:block!important; position:relative!important; visibility:visible!important; opacity:1!important; width:calc(100vw - 24px)!important; max-width:calc(100vw - 24px)!important; min-height:620px!important; height:620px!important; margin:42px 0 42px calc(50% - 50vw + 12px)!important; overflow:hidden!important; perspective:1600px!important; } /* Both faces exist; transforms alone control which face is visible. */ body #about .ews61-about-face{ display:block!important; visibility:visible!important; opacity:1!important; position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-height:0!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; } body #about .ews61-about-front{ transform:rotateY(0deg)!important; z-index:2!important; } body #about .ews61-about-back{ transform:rotateY(180deg)!important; z-index:1!important; } body #about.is-flipped .ews61-about-front{ transform:rotateY(180deg)!important; z-index:1!important; } body #about.is-flipped .ews61-about-back{ transform:rotateY(360deg)!important; z-index:2!important; } /* Keep the approved back artwork centered and contained within the shorter panel. */ body #about .ews61-back-art figure{ max-height:520px!important; min-height:0!important; height:520px!important; } body #about .ews61-back-art img{ width:100%!important; height:100%!important; min-height:0!important; max-height:none!important; object-fit:cover!important; object-position:50% 50%!important; } /* Editor is intentionally unaffected. */ .editor-styles-wrapper #about.ews61-about{ height:auto!important; min-height:0!important; } @media(max-width:1100px){ body #about.ews61-about{ height:980px!important; min-height:980px!important; } } @media(max-width:760px){ body #about.ews61-about{ width:calc(100vw - 10px)!important; max-width:calc(100vw - 10px)!important; height:1510px!important; min-height:1510px!important; margin-left:calc(50% - 50vw + 5px)!important; } } /* v6.7.2 approved visual, editable text, icons restored, single Return */ body #about .ews672-about-back{position:absolute!important;inset:0!important;padding:0!important;overflow:hidden!important;background:#010307!important;border-radius:18px!important} body #about .ews672-approved-image{position:absolute!important;inset:0!important;margin:0!important;width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1!important;background:#010307!important} body #about .ews672-approved-image img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important} body #about .ews672-text{position:absolute!important;z-index:4!important;width:14.2%!important;text-align:center!important;background:#070b12!important;padding:0 5px!important} body #about .ews672-text1{left:32.1%!important;top:21.5%!important} body #about .ews672-text2{left:48.35%!important;top:21.5%!important} body #about .ews672-text3{left:64.55%!important;top:21.5%!important} body #about .ews672-text4{left:80.75%!important;top:21.5%!important} body #about .ews672-num{margin:0!important;color:#b43cff!important;font-size:1.9rem!important;font-weight:600!important} body #about .ews672-text h3{position:absolute!important;top:190px!important;width:100%!important;margin:0!important;color:#fff!important;font-size:1rem!important;line-height:1.2!important;background:#070b12!important;padding:5px 2px!important} body #about .ews672-text>p:not(.ews672-num){position:absolute!important;top:235px!important;width:100%!important;margin:0!important;color:#d6d9df!important;font-size:.78rem!important;line-height:1.55!important;background:#070b12!important;padding:4px 3px!important} body #about .ews672-icon{position:absolute!important;z-index:6!important;top:30.8%!important;width:64px!important;height:64px!important;padding:13px!important;border:1px solid transparent!important;border-radius:15px!important;background:linear-gradient(#060a11,#060a11) padding-box,linear-gradient(135deg,#d52cff,#00a8ff) border-box!important;box-sizing:border-box!important} body #about .ews672-icon1{left:36%!important} body #about .ews672-icon2{left:52.25%!important} body #about .ews672-icon3{left:68.45%!important} body #about .ews672-icon4{left:84.65%!important} body #about .ews672-icon svg{width:100%!important;height:100%!important;fill:none!important;stroke:#00a8ff!important;stroke-width:2.7!important;stroke-linecap:round!important;stroke-linejoin:round!important} .editor-styles-wrapper #about.ews61-about{height:auto!important;overflow:visible!important}.editor-styles-wrapper #about .ews61-about-front{position:relative!important;transform:none!important}.editor-styles-wrapper #about .ews672-about-back{position:relative!important;inset:auto!important;transform:none!important;visibility:visible!important;opacity:1!important;min-height:760px!important;height:auto!important;margin-top:30px!important}.editor-styles-wrapper #about .ews672-approved-image{position:relative!important;min-height:760px!important}.editor-styles-wrapper #about .ews672-text,.editor-styles-wrapper #about .ews672-return-button{pointer-events:auto!important} /* v6.7.3 verified live header + front-style Return */ body .ews673-live-header{display:flex!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:9999!important;width:100%!important;min-height:96px!important;box-sizing:border-box!important;padding:12px 28px!important;align-items:center!important;justify-content:space-between!important;gap:28px!important;background:#000!important} body .ews673-live-brand{display:block!important;visibility:visible!important;opacity:1!important;flex:0 0 auto!important} body .ews673-live-brand img{display:block!important;width:330px!important;max-width:36vw!important;height:auto!important;object-fit:contain!important} body .ews673-live-nav{display:flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:flex-end!important;gap:clamp(18px,2.2vw,34px)!important;flex:1 1 auto!important} body .ews673-live-nav a{display:inline-block!important;visibility:visible!important;opacity:1!important;color:#fff!important;text-decoration:none!important;font-size:.82rem!important;font-weight:500!important;white-space:nowrap!important} body .ews673-live-nav a:hover{color:#b83cff!important} body #about .ews672-about-back:after{content:""!important;position:absolute!important;z-index:7!important;right:.8%!important;top:.5%!important;width:19%!important;height:11%!important;background:#010307!important;pointer-events:none!important} body #about .ews673-return-button{position:absolute!important;z-index:9!important;right:3.1%!important;top:3.1%!important;margin:0!important} body #about .ews673-return-button .wp-block-button__link{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:154px!important;min-height:42px!important;padding:9px 18px!important;border:1px solid transparent!important;border-radius:999px!important;background:linear-gradient(#070a10,#070a10) padding-box,linear-gradient(90deg,#c83cff,#00a8ff) border-box!important;color:#f5f7fb!important;font-size:.82rem!important;font-weight:700!important;line-height:1!important;text-decoration:none!important;box-shadow:none!important} body #about .ews673-return-button .wp-block-button__link:hover{background:linear-gradient(#0a0d14,#0a0d14) padding-box,linear-gradient(90deg,#d74cff,#12b8ff) border-box!important} .editor-styles-wrapper #about .ews673-return-button{pointer-events:auto!important} @media(max-width:900px){body .ews673-live-header{flex-wrap:wrap!important}body .ews673-live-brand img{width:270px!important;max-width:70vw!important}body .ews673-live-nav{width:100%!important;justify-content:flex-start!important;overflow-x:auto!important;padding-bottom:6px!important}} /* ========================================================= v6.7.4 — BLOCK THEME HEADER + DYNAMIC ASSET RESOLUTION ========================================================= */ body .ews674-block-header{ display:flex!important; visibility:visible!important; opacity:1!important; position:relative!important; z-index:9999!important; width:100%!important; min-height:96px!important; box-sizing:border-box!important; padding:12px 28px!important; align-items:center!important; justify-content:space-between!important; gap:28px!important; background:#000!important; } body .ews674-block-brand{ display:block!important; visibility:visible!important; opacity:1!important; flex:0 0 auto!important; } body .ews674-block-brand img{ display:block!important; width:330px!important; max-width:36vw!important; height:auto!important; min-height:1px!important; object-fit:contain!important; } body .ews674-block-nav{ display:flex!important; visibility:visible!important; opacity:1!important; align-items:center!important; justify-content:flex-end!important; gap:clamp(18px,2.2vw,34px)!important; flex:1 1 auto!important; } body .ews674-block-nav a{ display:inline-block!important; visibility:visible!important; opacity:1!important; color:#fff!important; text-decoration:none!important; font-size:.82rem!important; font-weight:500!important; white-space:nowrap!important; } body .ews674-block-nav a:hover{color:#b83cff!important} @media(max-width:900px){ body .ews674-block-header{flex-wrap:wrap!important} body .ews674-block-brand img{width:270px!important;max-width:70vw!important} body .ews674-block-nav{ width:100%!important; justify-content:flex-start!important; overflow-x:auto!important; padding-bottom:6px!important; } } /* ========================================================= v6.7.9 CLEAN ABOUT BACK — one set of cards/text, full-width geometry ========================================================= */ body:not(.wp-admin) #about.ews61-about{ display:block!important; position:relative!important; width:calc(100vw - 24px)!important; max-width:calc(100vw - 24px)!important; height:620px!important; min-height:620px!important; margin:42px 0 42px calc(50% - 50vw + 12px)!important; overflow:hidden!important; perspective:1600px!important; } body:not(.wp-admin) #about .ews61-about-face{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-height:0!important; margin:0!important; padding:0!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; transform-style:preserve-3d!important; transition:transform .68s cubic-bezier(.2,.75,.25,1)!important; } body:not(.wp-admin) #about .ews61-about-front{transform:rotateY(0deg)!important;z-index:2!important} body:not(.wp-admin) #about .ews61-about-back{transform:rotateY(180deg)!important;z-index:1!important} body:not(.wp-admin) #about.is-flipped .ews61-about-front{transform:rotateY(180deg)!important;z-index:1!important} body:not(.wp-admin) #about.is-flipped .ews61-about-back{transform:rotateY(360deg)!important;z-index:2!important} body:not(.wp-admin) #about .ews679-about-back{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; padding:18px 22px 0!important; overflow:hidden!important; border:1px solid transparent!important; border-radius:18px!important; background:linear-gradient(#010307,#010307) padding-box, linear-gradient(90deg,#cf25ff,#3478ff) border-box!important; } /* Exact same button styling as front-side Discover Eclipse */ body:not(.wp-admin) #about .ews679-return{ position:absolute!important; z-index:9!important; top:24px!important; right:30px!important; margin:0!important; } body:not(.wp-admin) #about .ews679-return .wp-element-button{ padding:8px 13px!important; border:1px solid transparent!important; border-radius:999px!important; background:linear-gradient(#070a12,#070a12) padding-box, linear-gradient(90deg,#c63cff,#784cff 50%,#159cff) border-box!important; color:#dce2ea!important; font-size:.72rem!important; font-weight:700!important; letter-spacing:.04em!important; } body:not(.wp-admin) #about .ews679-main{ position:relative!important; z-index:4!important; display:flex!important; width:100%!important; height:440px!important; margin:62px 0 0!important; gap:18px!important; align-items:stretch!important; } body:not(.wp-admin) #about .ews679-left{ flex:0 0 29%!important; height:100%!important; min-width:0!important; } body:not(.wp-admin) #about .ews679-art{ width:100%!important; height:100%!important; margin:0!important; overflow:hidden!important; background:#010307!important; } body:not(.wp-admin) #about .ews679-art img{ display:block!important; width:100%!important; height:100%!important; object-fit:contain!important; object-position:center bottom!important; } body:not(.wp-admin) #about .ews679-right{ flex:1 1 71%!important; min-width:0!important; display:flex!important; align-items:center!important; } body:not(.wp-admin) #about .ews679-grid{ width:100%!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:14px!important; } body:not(.wp-admin) #about .ews679-card{ min-height:350px!important; padding:16px 12px 14px!important; display:flex!important; flex-direction:column!important; align-items:center!important; text-align:center!important; border:1px solid #303642!important; border-radius:14px!important; background:linear-gradient(155deg,#080c14,#03060b)!important; } body:not(.wp-admin) #about .ews679-num{ width:100%!important; margin:0 0 14px!important; text-align:center!important; color:#b83cff!important; font-size:1.45rem!important; line-height:1!important; font-weight:650!important; } body:not(.wp-admin) #about .ews679-icon{ width:62px!important; height:62px!important; margin:0 auto 20px!important; padding:13px!important; display:grid!important; place-items:center!important; border:1px solid transparent!important; border-radius:14px!important; box-sizing:border-box!important; background:linear-gradient(#060a11,#060a11) padding-box, linear-gradient(135deg,#d328ff,#2d74ff) border-box!important; } body:not(.wp-admin) #about .ews679-icon svg{ width:100%!important; height:100%!important; fill:none!important; stroke:#168dff!important; stroke-width:2.4!important; stroke-linecap:round!important; stroke-linejoin:round!important; } body:not(.wp-admin) #about .ews679-card h3{ margin:0 0 14px!important; color:#fff!important; font-size:.96rem!important; line-height:1.2!important; font-weight:650!important; } body:not(.wp-admin) #about .ews679-card>p:not(.ews679-num){ margin:0!important; color:#d1d5dc!important; font-size:.78rem!important; line-height:1.5!important; } body:not(.wp-admin) #about .ews679-accent{ width:72%!important; height:2px!important; margin:auto auto 0!important; border:0!important; background:linear-gradient(90deg,#ee20ff,#2d74ff)!important; opacity:1!important; } /* Fully visible robust bottom graphic */ body:not(.wp-admin) #about .ews679-wave{ position:absolute!important; z-index:2!important; left:0!important; right:0!important; bottom:0!important; width:100%!important; height:150px!important; margin:0!important; overflow:hidden!important; pointer-events:none!important; } body:not(.wp-admin) #about .ews679-wave img{ display:block!important; width:100%!important; height:100%!important; object-fit:fill!important; object-position:center bottom!important; } /* Editor: both faces visible vertically and text remains editable */ .editor-styles-wrapper #about.ews61-about{ width:100%!important; max-width:100%!important; height:auto!important; min-height:0!important; margin:20px 0!important; overflow:visible!important; } .editor-styles-wrapper #about .ews61-about-front, .editor-styles-wrapper #about .ews679-about-back{ position:relative!important; inset:auto!important; transform:none!important; width:100%!important; min-height:620px!important; height:auto!important; margin-bottom:30px!important; visibility:visible!important; opacity:1!important; } .editor-styles-wrapper #about .ews679-main{height:auto!important;min-height:440px!important} .editor-styles-wrapper #about .ews679-wave{position:relative!important;height:150px!important} .editor-styles-wrapper #about .ews679-card, .editor-styles-wrapper #about .ews679-return{pointer-events:auto!important} /* ========================================================= v6.7.10 — ABOUT BACK ROOT CSS FIX Defeats legacy .ews61-about-back figure/img min-height rules. ========================================================= */ /* Main live back geometry */ body:not(.wp-admin) #about .ews679-about-back{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-height:0!important; max-height:none!important; overflow:hidden!important; } /* LEFT ART: never inherit legacy 610px figure/image minimums */ body:not(.wp-admin) #about .ews679-left, body:not(.wp-admin) #about .ews679-art, body:not(.wp-admin) #about .ews679-art img{ min-height:0!important; max-height:none!important; } body:not(.wp-admin) #about .ews679-art{ position:relative!important; height:440px!important; width:100%!important; margin:0!important; padding:0!important; overflow:hidden!important; } body:not(.wp-admin) #about .ews679-art img{ display:block!important; height:100%!important; width:100%!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; object-position:center bottom!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; } /* WAVE: hard lock to bottom 150px; old generic figure rules cannot expand it */ body:not(.wp-admin) #about .ews679-wave{ position:absolute!important; z-index:2!important; left:0!important; right:0!important; top:auto!important; bottom:0!important; width:100%!important; height:150px!important; min-height:0!important; max-height:150px!important; margin:0!important; padding:0!important; overflow:hidden!important; pointer-events:none!important; } body:not(.wp-admin) #about .ews679-wave img{ display:block!important; width:100%!important; height:150px!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:150px!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; object-fit:cover!important; object-position:center bottom!important; } /* Keep cards above the wave */ body:not(.wp-admin) #about .ews679-main{ position:relative!important; z-index:4!important; height:420px!important; margin-top:64px!important; } body:not(.wp-admin) #about .ews679-card{ min-height:335px!important; height:335px!important; max-height:335px!important; } /* One smaller number per card */ body:not(.wp-admin) #about .ews679-num{ font-size:1.38rem!important; margin:0 0 13px!important; } /* Return exactly follows front Discover Eclipse pill language */ body:not(.wp-admin) #about .ews679-return{ top:24px!important; right:30px!important; } body:not(.wp-admin) #about .ews679-return .wp-block-button__link{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:auto!important; min-height:auto!important; padding:8px 13px!important; border:1px solid transparent!important; border-radius:999px!important; background: linear-gradient(#070a12,#070a12) padding-box, linear-gradient(90deg,#c63cff,#784cff 50%,#159cff) border-box!important; color:#dce2ea!important; font-size:.72rem!important; font-weight:700!important; line-height:1!important; letter-spacing:.04em!important; text-decoration:none!important; box-shadow:none!important; } /* Editor reset too, so Gutenberg doesn't blow up these figures */ .editor-styles-wrapper #about .ews679-art, .editor-styles-wrapper #about .ews679-art img, .editor-styles-wrapper #about .ews679-wave, .editor-styles-wrapper #about .ews679-wave img{ min-height:0!important; max-height:none!important; } .editor-styles-wrapper #about .ews679-wave, .editor-styles-wrapper #about .ews679-wave img{ height:150px!important; max-height:150px!important; } /* ========================================================= v6.7.11 — APPROVED ABOUT BACK SINGLE OUTER OUTLINE / IMPROVED FIT ========================================================= */ /* The About back face is the ONE and ONLY outer outline. */ body:not(.wp-admin) #about .ews679-about-back{ border:1px solid transparent!important; border-radius:18px!important; background: linear-gradient(#010307,#010307) padding-box, linear-gradient(90deg,#d326ff 0%,#7551ff 52%,#00a8ff 100%) border-box!important; box-shadow:none!important; } /* Kill every possible legacy nested/inner outline. */ body:not(.wp-admin) #about .ews679-main, body:not(.wp-admin) #about .ews679-left, body:not(.wp-admin) #about .ews679-right, body:not(.wp-admin) #about .ews679-art, body:not(.wp-admin) #about .ews679-art figure, body:not(.wp-admin) #about .ews679-art img, body:not(.wp-admin) #about .ews679-wave, body:not(.wp-admin) #about .ews679-wave figure, body:not(.wp-admin) #about .ews679-wave img{ border:0!important; outline:0!important; box-shadow:none!important; border-radius:0!important; } /* Better use of the available width/height. */ body:not(.wp-admin) #about .ews679-main{ left:auto!important; right:auto!important; width:100%!important; height:430px!important; margin:60px 0 0!important; padding:0!important; gap:24px!important; align-items:stretch!important; } /* Left artwork is wider and fills naturally without stretching. */ body:not(.wp-admin) #about .ews679-left{ flex:0 0 29.5%!important; width:29.5%!important; height:430px!important; min-width:0!important; overflow:hidden!important; } body:not(.wp-admin) #about .ews679-art{ width:100%!important; height:430px!important; min-height:0!important; max-height:430px!important; margin:0!important; padding:0!important; overflow:hidden!important; background:transparent!important; } body:not(.wp-admin) #about .ews679-art img{ display:block!important; width:100%!important; height:100%!important; min-height:0!important; max-height:430px!important; object-fit:cover!important; object-position:center 48%!important; margin:0!important; padding:0!important; } /* Right content fills the remaining area cleanly. */ body:not(.wp-admin) #about .ews679-right{ flex:1 1 auto!important; width:auto!important; min-width:0!important; height:430px!important; padding:0 0 0 0!important; margin:0!important; display:flex!important; align-items:center!important; } body:not(.wp-admin) #about .ews679-grid{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; width:100%!important; gap:14px!important; margin:0!important; padding:0!important; } body:not(.wp-admin) #about .ews679-card{ width:100%!important; min-width:0!important; height:345px!important; min-height:345px!important; max-height:345px!important; padding:18px 12px 14px!important; box-sizing:border-box!important; } /* Bottom wave is fully visible and belongs to the outer composition only. */ body:not(.wp-admin) #about .ews679-wave{ position:absolute!important; left:0!important; right:0!important; bottom:0!important; width:100%!important; height:150px!important; min-height:0!important; max-height:150px!important; margin:0!important; padding:0!important; overflow:hidden!important; pointer-events:none!important; } body:not(.wp-admin) #about .ews679-wave img{ display:block!important; width:100%!important; height:150px!important; min-height:0!important; max-height:150px!important; object-fit:cover!important; object-position:center bottom!important; } /* Keep the cards and astronaut visually above the wave. */ body:not(.wp-admin) #about .ews679-main{z-index:4!important} body:not(.wp-admin) #about .ews679-wave{z-index:2!important} /* Approved smaller single numbers. */ body:not(.wp-admin) #about .ews679-num{ font-size:1.35rem!important; line-height:1!important; margin:0 0 13px!important; } /* Return uses the same pill language as the About-front control. */ body:not(.wp-admin) #about .ews679-return{ position:absolute!important; top:24px!important; right:30px!important; z-index:10!important; margin:0!important; } body:not(.wp-admin) #about .ews679-return .wp-block-button__link{ display:inline-flex!important; align-items:center!important; justify-content:center!important; padding:8px 13px!important; border:1px solid transparent!important; border-radius:999px!important; background: linear-gradient(#070a12,#070a12) padding-box, linear-gradient(90deg,#c63cff,#784cff 50%,#159cff) border-box!important; color:#dce2ea!important; font-size:.72rem!important; font-weight:700!important; line-height:1!important; letter-spacing:.04em!important; text-decoration:none!important; box-shadow:none!important; } /* Gutenberg: preserve editability without adding a second outline. */ .editor-styles-wrapper #about .ews679-about-back{ border:1px solid transparent!important; background: linear-gradient(#010307,#010307) padding-box, linear-gradient(90deg,#d326ff,#7551ff,#00a8ff) border-box!important; } .editor-styles-wrapper #about .ews679-main, .editor-styles-wrapper #about .ews679-left, .editor-styles-wrapper #about .ews679-right, .editor-styles-wrapper #about .ews679-art, .editor-styles-wrapper #about .ews679-art img, .editor-styles-wrapper #about .ews679-wave, .editor-styles-wrapper #about .ews679-wave img{ outline:0!important; box-shadow:none!important; } /* v6.7.12 SINGLE OUTLINE FIX — surgical change from approved v6.7.11 */ body:not(.wp-admin) #about .ews679-about-back{ border:1px solid transparent!important; outline:0!important; box-shadow:none!important; border-radius:18px!important; background:linear-gradient(#010307,#010307) padding-box, linear-gradient(90deg,#d326ff 0%,#7551ff 52%,#00a8ff 100%) border-box!important; } body:not(.wp-admin) #about .ews679-about-back > .ews679-main, body:not(.wp-admin) #about .ews679-about-back .ews679-left, body:not(.wp-admin) #about .ews679-about-back .ews679-right, body:not(.wp-admin) #about .ews679-about-back .ews679-art, body:not(.wp-admin) #about .ews679-about-back .ews679-art img, body:not(.wp-admin) #about .ews679-about-back > .ews679-wave, body:not(.wp-admin) #about .ews679-about-back > .ews679-wave img{ border:0!important; outline:0!important; box-shadow:none!important; } body:not(.wp-admin) #about .ews679-about-back > .ews679-main::before, body:not(.wp-admin) #about .ews679-about-back > .ews679-main::after, body:not(.wp-admin) #about .ews679-about-back .ews679-left::before, body:not(.wp-admin) #about .ews679-about-back .ews679-left::after, body:not(.wp-admin) #about .ews679-about-back .ews679-art::before, body:not(.wp-admin) #about .ews679-about-back .ews679-art::after, body:not(.wp-admin) #about .ews679-about-back > .ews679-wave::before, body:not(.wp-admin) #about .ews679-about-back > .ews679-wave::after{ content:none!important; display:none!important; border:0!important; outline:0!important; box-shadow:none!important; } .editor-styles-wrapper #about .ews679-about-back > .ews679-main, .editor-styles-wrapper #about .ews679-about-back .ews679-left, .editor-styles-wrapper #about .ews679-about-back .ews679-right, .editor-styles-wrapper #about .ews679-about-back .ews679-art, .editor-styles-wrapper #about .ews679-about-back .ews679-art img, .editor-styles-wrapper #about .ews679-about-back > .ews679-wave, .editor-styles-wrapper #about .ews679-about-back > .ews679-wave img{ border:0!important; outline:0!important; box-shadow:none!important; } /* ========================================================= v6.7.14 — APPROVED FIXES 1) no header-logo refresh flash 2) front Discover button matches back Return button 3) approved cleaned bottom-wave asset ========================================================= */ /* Front About button: same size and top-right position as approved Return button. */ body:not(.wp-admin) #about .ews61-about-front .ews714-discover{ position:absolute!important; top:24px!important; right:30px!important; z-index:10!important; margin:0!important; } body:not(.wp-admin) #about .ews61-about-front .ews714-discover .wp-block-button__link{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:auto!important; min-height:auto!important; padding:8px 13px!important; border:1px solid transparent!important; border-radius:999px!important; background: linear-gradient(#070a12,#070a12) padding-box, linear-gradient(90deg,#c63cff,#784cff 50%,#159cff) border-box!important; color:#dce2ea!important; font-size:.72rem!important; font-weight:700!important; line-height:1!important; letter-spacing:.04em!important; text-decoration:none!important; box-shadow:none!important; } /* Keep back Return explicitly identical. */ body:not(.wp-admin) #about .ews679-return{ top:24px!important; right:30px!important; } body:not(.wp-admin) #about .ews679-return .wp-block-button__link{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:auto!important; min-height:auto!important; padding:8px 13px!important; border:1px solid transparent!important; border-radius:999px!important; background: linear-gradient(#070a12,#070a12) padding-box, linear-gradient(90deg,#c63cff,#784cff 50%,#159cff) border-box!important; color:#dce2ea!important; font-size:.72rem!important; font-weight:700!important; line-height:1!important; letter-spacing:.04em!important; text-decoration:none!important; box-shadow:none!important; } /* Gutenberg: keep Discover editable/selectable in its normal block flow. */ .editor-styles-wrapper #about .ews714-discover{ position:relative!important; top:auto!important; right:auto!important; pointer-events:auto!important; } /* v6.7.15 — Discover anchored to full About front face */ body:not(.wp-admin) #about .ews61-about-front{position:absolute!important} body:not(.wp-admin) #about .ews61-about-front > .ews715-discover{ position:absolute!important;top:24px!important;right:30px!important;left:auto!important;bottom:auto!important; z-index:20!important;margin:0!important;transform:none!important; } body:not(.wp-admin) #about .ews61-about-front > .ews715-discover .wp-block-button__link{ display:inline-flex!important;align-items:center!important;justify-content:center!important; min-width:auto!important;min-height:auto!important;padding:8px 13px!important;border:1px solid transparent!important; border-radius:999px!important;background:linear-gradient(#070a12,#070a12) padding-box, linear-gradient(90deg,#c63cff,#784cff 50%,#159cff) border-box!important; color:#dce2ea!important;font-size:.72rem!important;font-weight:700!important;line-height:1!important; letter-spacing:.04em!important;text-decoration:none!important;box-shadow:none!important; } body:not(.wp-admin) #about .ews714-discover{display:none!important} .editor-styles-wrapper #about .ews715-discover{ position:relative!important;top:auto!important;right:auto!important;left:auto!important; margin:0 0 18px auto!important;width:max-content!important;pointer-events:auto!important; } /* ========================================================= v6.7.16 — SMOOTH REFRESH / NO BLANK FLASH / NO LAYOUT SHIFT ========================================================= */ /* Header keeps its exact footprint from first paint. */ body .ews674-block-brand{ width:330px!important; max-width:36vw!important; min-width:0!important; min-height:72px!important; height:72px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; overflow:hidden!important; } /* Never visibility:hidden dynamic assets: that caused blank/jump refreshes. */ body img[data-ews-src]{ visibility:visible!important; } /* Transparent placeholder stays transparent; final asset fades in very subtly without changing layout dimensions. */ body .ews674-block-brand img[data-ews-src]{ display:block!important; width:330px!important; max-width:100%!important; height:auto!important; min-height:1px!important; opacity:0!important; background:transparent!important; transition:opacity .08s linear!important; } body .ews674-block-brand img[data-ews-src].ews-asset-loaded{ opacity:1!important; } /* Other dynamic images remain in flow from first paint. No opacity/visibility hiding on content sections. */ body img[data-ews-src]:not(.ews674-block-brand img){ visibility:visible!important; } /* Stabilize main homepage media boxes while images resolve. */ body .ews61-logo, body .ews61-wave, body .ews679-art, body .ews679-wave{ contain:layout paint!important; } /* Prevent browser from animating layout changes during initial asset swap. */ html:not(.ews-ready) *, body:not(.ews-ready) *{ scroll-behavior:auto!important; } /* Mobile header footprint stays reserved too. */ @media(max-width:900px){ body .ews674-block-brand{ width:270px!important; max-width:70vw!important; height:60px!important; min-height:60px!important; } body .ews674-block-brand img[data-ews-src]{ width:270px!important; max-width:100%!important; } } /* ========================================================= v6.9.0 — CRISP ABOUT BACKSIDE REBUILD Sharp live typography + vector icons + native-proportion art. ========================================================= */ body:not(.wp-admin) #about.ews61-about{ position:relative!important; width:calc(100vw - 24px)!important; max-width:calc(100vw - 24px)!important; height:620px!important; min-height:620px!important; margin:42px 0 42px calc(50% - 50vw + 12px)!important; overflow:hidden!important; perspective:1600px!important; } body:not(.wp-admin) #about .ews61-about-face{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; transform-style:preserve-3d!important; transition:transform .68s cubic-bezier(.2,.75,.25,1)!important; } body:not(.wp-admin) #about .ews61-about-front{transform:rotateY(0deg)!important;z-index:2!important} body:not(.wp-admin) #about .ews690-about-back{transform:rotateY(180deg)!important;z-index:1!important} body:not(.wp-admin) #about.is-flipped .ews61-about-front{transform:rotateY(180deg)!important;z-index:1!important} body:not(.wp-admin) #about.is-flipped .ews690-about-back{transform:rotateY(360deg)!important;z-index:2!important} body:not(.wp-admin) #about .ews690-about-back{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; padding:18px 22px 0!important; box-sizing:border-box!important; overflow:hidden!important; border:1px solid transparent!important; border-radius:18px!important; background: linear-gradient(#010307,#010307) padding-box, linear-gradient(90deg,#d326ff 0%,#7651ff 52%,#00a8ff 100%) border-box!important; box-shadow:none!important; } /* Return button: real, crisp, functional */ body:not(.wp-admin) #about .ews690-return{ position:absolute!important; top:22px!important; right:28px!important; z-index:20!important; margin:0!important; } body:not(.wp-admin) #about .ews690-return .wp-block-button__link{ display:inline-flex!important; align-items:center!important; justify-content:center!important; padding:8px 13px!important; border:1px solid transparent!important; border-radius:999px!important; background: linear-gradient(#070a12,#070a12) padding-box, linear-gradient(90deg,#c63cff,#784cff 50%,#159cff) border-box!important; color:#e7ebf2!important; font-size:.72rem!important; font-weight:700!important; line-height:1!important; letter-spacing:.04em!important; text-decoration:none!important; box-shadow:none!important; } /* Main layout */ body:not(.wp-admin) #about .ews690-main{ position:relative!important; z-index:4!important; display:flex!important; width:100%!important; height:455px!important; margin:56px 0 0!important; gap:18px!important; align-items:stretch!important; } /* Native-proportion astronaut/planet art */ body:not(.wp-admin) #about .ews690-left{ flex:0 0 31.5%!important; height:455px!important; min-width:0!important; overflow:hidden!important; } body:not(.wp-admin) #about .ews690-art{ width:100%!important; height:100%!important; margin:0!important; overflow:hidden!important; background:#010307!important; } body:not(.wp-admin) #about .ews690-art img{ display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; object-position:center bottom!important; margin:0!important; padding:0!important; border:0!important; outline:0!important; box-shadow:none!important; } /* Four crisp cards */ body:not(.wp-admin) #about .ews690-right{ flex:1 1 auto!important; min-width:0!important; height:455px!important; display:flex!important; align-items:center!important; } body:not(.wp-admin) #about .ews690-grid{ width:100%!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:12px!important; margin:0!important; padding:0!important; } body:not(.wp-admin) #about .ews690-card{ height:355px!important; min-height:355px!important; padding:18px 12px 14px!important; box-sizing:border-box!important; display:flex!important; flex-direction:column!important; align-items:center!important; text-align:center!important; border:1px solid #303642!important; border-radius:14px!important; background:linear-gradient(155deg,#080c14,#03060b)!important; box-shadow:none!important; } body:not(.wp-admin) #about .ews690-num{ width:100%!important; margin:0 0 14px!important; text-align:center!important; color:#b83cff!important; font-size:1.42rem!important; line-height:1!important; font-weight:700!important; } body:not(.wp-admin) #about .ews690-icon{ width:62px!important; height:62px!important; margin:0 auto 20px!important; padding:13px!important; display:grid!important; place-items:center!important; box-sizing:border-box!important; border:1px solid transparent!important; border-radius:14px!important; background: linear-gradient(#060a11,#060a11) padding-box, linear-gradient(135deg,#d328ff,#2d74ff) border-box!important; } body:not(.wp-admin) #about .ews690-icon svg{ width:100%!important; height:100%!important; fill:none!important; stroke:#168dff!important; stroke-width:2.4!important; stroke-linecap:round!important; stroke-linejoin:round!important; } body:not(.wp-admin) #about .ews690-title{ margin:0 0 14px!important; color:#fff!important; font-size:.98rem!important; line-height:1.22!important; font-weight:700!important; text-rendering:optimizeLegibility!important; -webkit-font-smoothing:antialiased!important; } body:not(.wp-admin) #about .ews690-desc{ margin:0!important; color:#d1d5dc!important; font-size:.78rem!important; line-height:1.55!important; text-rendering:optimizeLegibility!important; -webkit-font-smoothing:antialiased!important; } body:not(.wp-admin) #about .ews690-accent{ width:74%!important; height:2px!important; margin:auto auto 0!important; border:0!important; background:linear-gradient(90deg,#ee20ff,#2d74ff)!important; opacity:1!important; } /* Bottom wave is independent, sharp, and never stretches vertically */ body:not(.wp-admin) #about .ews690-wave{ position:absolute!important; z-index:3!important; left:0!important; right:0!important; bottom:0!important; width:100%!important; height:155px!important; min-height:0!important; max-height:155px!important; margin:0!important; overflow:hidden!important; pointer-events:none!important; border:0!important; outline:0!important; box-shadow:none!important; } body:not(.wp-admin) #about .ews690-wave img{ display:block!important; width:100%!important; height:155px!important; min-height:0!important; max-height:155px!important; object-fit:cover!important; object-position:center bottom!important; margin:0!important; border:0!important; outline:0!important; box-shadow:none!important; } /* Editor: both faces visible vertically; typography remains editable */ .editor-styles-wrapper #about.ews61-about{ width:100%!important; max-width:100%!important; height:auto!important; min-height:0!important; margin:20px 0!important; overflow:visible!important; } .editor-styles-wrapper #about .ews61-about-front, .editor-styles-wrapper #about .ews690-about-back{ position:relative!important; inset:auto!important; transform:none!important; width:100%!important; min-height:620px!important; height:auto!important; margin-bottom:30px!important; visibility:visible!important; opacity:1!important; } .editor-styles-wrapper #about .ews690-main{height:auto!important;min-height:455px!important} .editor-styles-wrapper #about .ews690-wave{position:relative!important;height:155px!important} .editor-styles-wrapper #about .ews690-card, .editor-styles-wrapper #about .ews690-return{pointer-events:auto!important} /* ========================================================= v7.0.0 — CLEAN MULTIPAGE WORDPRESS ARCHITECTURE Real Pages + real WordPress navigation; approved visual CSS preserved. ========================================================= */ .ews674-block-nav .ews700-menu{ display:flex!important; align-items:center!important; gap:clamp(14px,2vw,30px)!important; margin:0!important; padding:0!important; list-style:none!important; } .ews674-block-nav .ews700-menu > li{margin:0!important;padding:0!important;list-style:none!important} .ews674-block-nav .ews700-menu > li > a{ color:inherit!important; text-decoration:none!important; } .ews674-block-nav .current-menu-item > a, .ews674-block-nav .current_page_item > a{color:#fff!important} .eclipse-page-content{min-height:70vh} body:not(.home) .eclipse-inner-page{padding-top:92px} @media(max-width:900px){ .ews674-block-nav .ews700-menu{gap:12px!important;flex-wrap:wrap!important;justify-content:flex-end!important} } /* ========================================================= v7.0.1 — CLEAN REFRESH PIPELINE Direct image URLs only; no placeholder swapping. ========================================================= */ img{ image-rendering:auto; } .wp-block-image img, .ews674-block-brand img{ visibility:visible; opacity:1; } /* ========================================================= v7.1.0 — CLEAN HOME PAGE Immediate render, no reveal dependency, no placeholder layer. ========================================================= */ body.home .ews710-home{ position:relative; min-height:calc(100vh - 92px); overflow:hidden; background:#000; } body.home .ews710-home .eclipse-stage, body.home .ews710-home .ews710-hero-copy{ visibility:visible; opacity:1; } body.home .ews710-home .ews710-hero-copy{ position:relative; z-index:5; } body.home .ews710-home .exact-eclipse-wordmark img, body.home .ews710-home .solutions-line img{ display:block; opacity:1; visibility:visible; image-rendering:auto; } /* Prevent any legacy reveal class from hiding the rebuilt Home content. */ body.home .ews710-home .ews710-hero-copy, body.home .ews710-home .ews710-hero-copy.reveal{ transform:none!important; opacity:1!important; visibility:visible!important; } /* ========================================================= v7.1.3 — VERIFIED HOME POLISH Source: clean v7.1.0 baseline. No failed effect layers carried forward. ========================================================= */ /* Header: corrected crop makes the approved logo genuinely larger/sharper. */ body .ews674-block-header{ min-height:96px!important; padding:8px 22px 8px 10px!important; align-items:center!important; } body .ews674-block-brand{ width:390px!important; max-width:40vw!important; height:80px!important; min-height:80px!important; margin-left:-2px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; overflow:visible!important; } body .ews674-block-brand img{ width:390px!important; max-width:100%!important; height:auto!important; max-height:80px!important; object-fit:contain!important; object-position:left center!important; image-rendering:auto!important; } body .ews674-block-nav{ align-self:center!important; } body .ews674-block-nav .ews700-menu > li > a{ transition:color .22s ease,text-shadow .22s ease!important; } body .ews674-block-nav .ews700-menu > li > a:hover, body .ews674-block-nav .ews700-menu > li > a:focus-visible{ color:#c83cff!important; text-shadow:0 0 11px rgba(200,60,255,.50)!important; } /* Keep the entire Home composition slightly higher so it remains visible. */ .ews710-home .eclipse-stage{ transform:translateY(-24px)!important; transform-origin:center top!important; } .ews710-home .ews710-hero-copy{ transform:translateY(-60px)!important; } /* Make sure hero content sits above the star field. */ .ews710-home .eclipse-stage, .ews710-home .ews710-hero-copy{ position:relative!important; z-index:3!important; } 81%{left:-34%;opacity:.95} 92%{left:118%;opacity:1} 93%,100%{left:118%;opacity:0} } @media(max-width:900px){ body .ews674-block-header{padding-left:8px!important} body .ews674-block-brand{ width:305px!important; max-width:72vw!important; height:66px!important; min-height:66px!important; margin-left:0!important; } body .ews674-block-brand img{ width:305px!important; max-height:66px!important; } .ews710-home .eclipse-stage{transform:translateY(-10px)!important} .ews710-home .ews710-hero-copy{transform:translateY(-32px)!important} } /* ========================================================= v7.2.0 — AUTHORITATIVE HOME MODULE One source of truth for Home background, services, and CTA. ========================================================= */ 55%{opacity:.46;filter:brightness(1.08) contrast(1.16) drop-shadow(0 0 .8px rgba(255,255,255,.20))} 100%{opacity:.72;filter:brightness(1.26) contrast(1.22) drop-shadow(0 0 1.4px rgba(255,255,255,.32))} } /* Premium service row: directly in Home markup, no runtime rebuild. */ .ews710-home .ews720-services{ width:min(720px,78vw)!important; margin:14px auto 18px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:28px!important; color:#f6f7fb!important; font-family:"Space Grotesk","Manrope",sans-serif!important; font-size:1rem!important; font-weight:500!important; line-height:1!important; letter-spacing:.18em!important; white-space:nowrap!important; } .ews710-home .ews720-service{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:13px!important; min-width:145px!important; } .ews710-home .ews720-icon{ width:30px!important; height:30px!important; display:grid!important; place-items:center!important; flex:0 0 30px!important; } .ews710-home .ews720-icon svg{ width:28px!important; height:28px!important; fill:none!important; stroke-width:2.1!important; stroke-linecap:round!important; stroke-linejoin:round!important; } .ews710-home .ews720-design-icon svg{stroke:#c936ff!important} .ews710-home .ews720-develop-icon svg{stroke:#b83cff!important} .ews710-home .ews720-host-icon svg{stroke:#169cff!important} .ews710-home .ews720-label{color:#f4f5f8!important} .ews710-home .ews720-divider{ width:1px!important; height:38px!important; background:linear-gradient(to bottom,transparent,rgba(255,255,255,.9),transparent)!important; box-shadow:0 0 7px rgba(255,255,255,.22)!important; } /* CTA: directly in Home markup and fully visible before JS runs. */ .ews710-home .ews720-actions{ width:100%!important; display:flex!important; justify-content:center!important; margin:18px auto 0!important; } .ews710-home .ews720-cta{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; width:min(610px,78vw)!important; min-height:66px!important; padding:0 32px!important; overflow:hidden!important; isolation:isolate!important; box-sizing:border-box!important; border:1.5px solid transparent!important; border-radius:999px!important; background: linear-gradient(180deg,#30343a 0%,#24282e 52%,#2c3036 100%) padding-box, linear-gradient(90deg,#d329ff 0%,#7650ff 50%,#10a8ff 100%) border-box!important; color:#fff!important; text-decoration:none!important; box-shadow:0 0 18px rgba(177,50,255,.18),0 0 12px rgba(16,168,255,.10),inset 0 1px 0 rgba(255,255,255,.13)!important; } .ews710-home .ews720-cta-label{ position:relative!important; z-index:3!important; color:#fff!important; font-family:"Space Grotesk","Manrope",sans-serif!important; font-size:1.12rem!important; font-weight:500!important; letter-spacing:.055em!important; white-space:nowrap!important; } .ews710-home .ews720-cta-shine{ position:absolute!important; z-index:5!important; top:-60%!important; left:0!important; width:22%!important; height:220%!important; opacity:0; pointer-events:none!important; transform:translateX(-230%) skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(245,248,255,.68),#fff,rgba(225,230,240,.7),transparent)!important; box-shadow:0 0 14px 4px rgba(255,255,255,.38),0 0 28px 7px rgba(218,226,240,.20)!important; } @media(max-width:760px){ .ews710-home .ews720-services{ width:92vw!important; gap:12px!important; font-size:.72rem!important; letter-spacing:.11em!important; } .ews710-home .ews720-service{min-width:auto!important;gap:7px!important} .ews710-home .ews720-icon{width:22px!important;height:22px!important;flex-basis:22px!important} .ews710-home .ews720-icon svg{width:21px!important;height:21px!important} .ews710-home .ews720-divider{height:28px!important} .ews710-home .ews720-cta{width:min(92vw,520px)!important;min-height:56px!important;padding:0 22px!important} .ews710-home .ews720-cta-label{font-size:.82rem!important;letter-spacing:.035em!important} } /* ========================================================= v7.2.4 — CLEAN SINGLE-CANVAS SPACE BACKGROUND One background system only. Foreground remains unchanged. ========================================================= */ .ews710-home{ position:relative!important; background:#000!important; overflow:hidden!important; } .ews710-home .ews724-space-bg{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; display:block!important; z-index:1!important; pointer-events:none!important; background:#000!important; } .ews710-home .eclipse-stage, .ews710-home .ews710-hero-copy{ position:relative!important; z-index:3!important; } /* ========================================================= v7.2.7 — SERVICE ROW REBUILT FROM SCRATCH One grid, three equal cells, two independent separators. ========================================================= */ .ews710-home .ews727-services{ width:min(720px,78vw)!important; margin:18px auto 0!important; display:grid!important; grid-template-columns:1fr 1px 1fr 1px 1fr!important; align-items:center!important; justify-items:stretch!important; column-gap:0!important; } .ews710-home .ews727-item{ width:100%!important; min-width:0!important; display:grid!important; grid-template-rows:30px 20px!important; align-items:center!important; justify-items:center!important; row-gap:10px!important; margin:0!important; padding:0 24px!important; box-sizing:border-box!important; } .ews710-home .ews727-icon{ width:28px!important; height:28px!important; display:grid!important; place-items:center!important; margin:0!important; } .ews710-home .ews727-icon svg{ width:26px!important; height:26px!important; display:block!important; fill:none!important; stroke-width:2.15!important; stroke-linecap:round!important; stroke-linejoin:round!important; } .ews710-home .ews727-design svg{ stroke:#c936ff!important; } .ews710-home .ews727-develop svg{ stroke:#b83cff!important; } .ews710-home .ews727-host svg{ stroke:#169cff!important; } .ews710-home .ews727-label{ display:block!important; margin:0!important; padding:0!important; color:#fff!important; font-family:"Montserrat","Avenir Next","Segoe UI",Arial,sans-serif!important; font-size:15px!important; font-weight:600!important; line-height:20px!important; letter-spacing:.10em!important; text-transform:uppercase!important; text-align:center!important; white-space:nowrap!important; } .ews710-home .ews727-separator{ display:block!important; width:1px!important; height:48px!important; align-self:center!important; justify-self:center!important; background:linear-gradient( to bottom, transparent 0%, rgba(255,255,255,.30) 15%, rgba(255,255,255,.88) 50%, rgba(255,255,255,.30) 85%, transparent 100% )!important; box-shadow:0 0 6px rgba(255,255,255,.18)!important; } /* Keep the premium CTA type from the approved direction. */ .ews710-home .ews720-cta-shine{ font-family:Georgia,"Times New Roman",serif!important; font-size:17px!important; font-weight:500!important; letter-spacing:.14em!important; line-height:1.15!important; text-transform:uppercase!important; text-rendering:geometricPrecision!important; -webkit-font-smoothing:antialiased!important; -moz-osx-font-smoothing:grayscale!important; } @media(max-width:640px){ .ews710-home .ews727-services{ width:min(94vw,520px)!important; } .ews710-home .ews727-item{ grid-template-rows:24px 18px!important; row-gap:7px!important; padding:0 8px!important; } .ews710-home .ews727-icon{ width:22px!important; height:22px!important; } .ews710-home .ews727-icon svg{ width:20px!important; height:20px!important; } .ews710-home .ews727-label{ font-size:11px!important; line-height:18px!important; letter-spacing:.06em!important; } .ews710-home .ews727-separator{ height:40px!important; } .ews710-home .ews720-cta-shine{ font-size:13px!important; letter-spacing:.09em!important; } } /* ========================================================= v7.4.0 — ABOUT BACKSIDE COMPOSITE REBUILD Astronaut + wave are one image. Cards and Return remain editable. ========================================================= */ body:not(.wp-admin) #about .ews740-about-back{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; overflow:hidden!important; isolation:isolate!important; box-sizing:border-box!important; border:1px solid transparent!important; border-radius:18px!important; background: linear-gradient(#010307,#010307) padding-box, linear-gradient(100deg,#d921ff 0%,#7b46ff 52%,#00a0ff 100%) border-box!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; transform:rotateY(180deg)!important; z-index:1!important; } body:not(.wp-admin) #about.is-flipped .ews740-about-back{ transform:rotateY(360deg)!important; z-index:2!important; } /* Single composite visual layer */ body:not(.wp-admin) #about .ews740-composite-bg{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; z-index:2!important; overflow:hidden!important; pointer-events:none!important; } body:not(.wp-admin) #about .ews740-composite-bg img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center center!important; margin:0!important; border:0!important; } /* Return stays separate and editable */ body:not(.wp-admin) #about .ews740-return{ position:absolute!important; top:40px!important; right:42px!important; left:auto!important; z-index:70!important; margin:0!important; } body:not(.wp-admin) #about .ews740-return .wp-block-button__link{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:40px!important; padding:8px 18px!important; border:1px solid transparent!important; border-radius:999px!important; background: linear-gradient(#080b11,#080b11) padding-box, linear-gradient(100deg,#d42cff,#078dff) border-box!important; color:#fff!important; font-size:13px!important; font-weight:700!important; line-height:1!important; text-decoration:none!important; } /* Cards above composite image */ body:not(.wp-admin) #about .ews740-cards{ position:absolute!important; left:32.5%!important; right:28px!important; top:145px!important; height:468px!important; margin:0!important; padding:0!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:16px!important; align-items:stretch!important; z-index:60!important; } body:not(.wp-admin) #about .ews740-card{ position:relative!important; min-width:0!important; height:468px!important; margin:0!important; padding:24px 18px 20px!important; box-sizing:border-box!important; display:flex!important; flex-direction:column!important; align-items:center!important; text-align:center!important; overflow:hidden!important; border:1px solid #303744!important; border-radius:18px!important; background:linear-gradient(180deg,rgba(8,12,18,.97),rgba(5,8,13,.98))!important; color:#fff!important; box-shadow:0 18px 42px rgba(0,0,0,.22)!important; } body:not(.wp-admin) #about .ews740-num{ margin:0 0 16px!important; padding:0!important; color:#c334ff!important; font-size:29px!important; line-height:1!important; font-weight:700!important; } body:not(.wp-admin) #about .ews740-icon{ width:76px!important; height:76px!important; flex:0 0 76px!important; margin:0 0 24px!important; display:grid!important; place-items:center!important; border:1px solid transparent!important; border-radius:18px!important; background: linear-gradient(#070b11,#070b11) padding-box, linear-gradient(135deg,#d02dff,#078dff) border-box!important; } body:not(.wp-admin) #about .ews740-icon svg{ width:39px!important; height:39px!important; fill:none!important; stroke:#078dff!important; stroke-width:2.3!important; stroke-linecap:round!important; stroke-linejoin:round!important; } body:not(.wp-admin) #about .ews740-title{ margin:0 0 17px!important; padding:0!important; color:#fff!important; font-size:18px!important; line-height:1.18!important; font-weight:700!important; white-space:nowrap!important; } body:not(.wp-admin) #about .ews740-copy{ margin:0!important; padding:0!important; color:#d3d7df!important; font-size:14px!important; line-height:1.55!important; font-weight:400!important; text-align:center!important; } body:not(.wp-admin) #about .ews740-accent{ width:72%!important; height:2px!important; margin-top:auto!important; display:block!important; background:linear-gradient(90deg,#d52cff,#078dff)!important; } /* Gutenberg editing view */ .editor-styles-wrapper #about .ews740-about-back{ position:relative!important; inset:auto!important; width:100%!important; height:auto!important; min-height:860px!important; margin-top:32px!important; padding:24px!important; transform:none!important; overflow:visible!important; visibility:visible!important; opacity:1!important; background:#010307!important; } .editor-styles-wrapper #about .ews740-composite-bg, .editor-styles-wrapper #about .ews740-return, .editor-styles-wrapper #about .ews740-cards{ position:relative!important; inset:auto!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; } .editor-styles-wrapper #about .ews740-composite-bg{ height:430px!important; margin-bottom:20px!important; } .editor-styles-wrapper #about .ews740-cards{ width:100%!important; height:auto!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; z-index:auto!important; } .editor-styles-wrapper #about .ews740-card{ height:auto!important; min-height:405px!important; } .editor-styles-wrapper #about .ews740-return{ margin:0 0 16px!important; } @media(max-width:1200px){ body:not(.wp-admin) #about .ews740-cards{ left:31.5%!important; right:20px!important; gap:10px!important; } body:not(.wp-admin) #about .ews740-card{ padding-left:10px!important; padding-right:10px!important; } body:not(.wp-admin) #about .ews740-title{ font-size:15px!important; } body:not(.wp-admin) #about .ews740-copy{ font-size:12px!important; } } /* ========================================================= v7.4.1 — APPROVED ABOUT BACK MATCH Front side untouched. Approved backside image is one layer. Live Gutenberg cards/Return cover the baked reference cards. ========================================================= */ body:not(.wp-admin) #about .ews741-about-back{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; overflow:hidden!important; isolation:isolate!important; border:0!important; border-radius:0!important; background:#000!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; transform:rotateY(180deg)!important; z-index:1!important; } body:not(.wp-admin) #about.is-flipped .ews741-about-back{ transform:rotateY(360deg)!important; z-index:2!important; } body:not(.wp-admin) #about .ews741-approved-bg{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; z-index:1!important; pointer-events:none!important; } body:not(.wp-admin) #about .ews741-approved-bg img{ display:block!important; width:100%!important; height:100%!important; object-fit:fill!important; object-position:center!important; margin:0!important; padding:0!important; border:0!important; } /* Exact card geometry measured from approved 1235x614 reference: x=405..1190, y=94..433 => percentages below. */ body:not(.wp-admin) #about .ews741-cards{ position:absolute!important; left:32.79%!important; right:3.64%!important; top:15.31%!important; height:55.21%!important; margin:0!important; padding:0!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:1.03%!important; align-items:stretch!important; z-index:20!important; } body:not(.wp-admin) #about .ews741-card{ position:relative!important; min-width:0!important; height:100%!important; margin:0!important; padding:4.7% 5.5% 4.7%!important; box-sizing:border-box!important; display:flex!important; flex-direction:column!important; align-items:center!important; text-align:center!important; overflow:hidden!important; border:1px solid #2f3742!important; border-radius:12px!important; background:linear-gradient(180deg,#070b11 0%,#05080d 100%)!important; color:#fff!important; } body:not(.wp-admin) #about .ews741-num{ margin:0 0 7.5%!important; padding:0!important; color:#c334ff!important; font-size:clamp(18px,1.65vw,27px)!important; line-height:1!important; font-weight:700!important; } body:not(.wp-admin) #about .ews741-icon{ width:58px!important; height:58px!important; flex:0 0 58px!important; margin:0 0 9%!important; display:grid!important; place-items:center!important; border:1px solid transparent!important; border-radius:12px!important; background:linear-gradient(#070b11,#070b11) padding-box, linear-gradient(135deg,#d02dff,#078dff) border-box!important; } body:not(.wp-admin) #about .ews741-icon svg{ width:31px!important; height:31px!important; fill:none!important; stroke:#078dff!important; stroke-width:2.2!important; stroke-linecap:round!important; stroke-linejoin:round!important; } body:not(.wp-admin) #about .ews741-title{ margin:0 0 7%!important; padding:0!important; color:#fff!important; font-size:clamp(12px,1.18vw,17px)!important; line-height:1.2!important; font-weight:700!important; white-space:nowrap!important; } body:not(.wp-admin) #about .ews741-copy{ margin:0!important; padding:0!important; color:#d3d7df!important; font-size:clamp(9px,.88vw,13px)!important; line-height:1.5!important; font-weight:400!important; text-align:center!important; } body:not(.wp-admin) #about .ews741-accent{ display:block!important; width:76%!important; height:1.5px!important; margin-top:auto!important; background:linear-gradient(90deg,#d52cff,#078dff)!important; } /* Cover the baked Return with a live button in the same approved position. */ body:not(.wp-admin) #about .ews741-return{ position:absolute!important; top:3.25%!important; right:4.15%!important; left:auto!important; z-index:30!important; margin:0!important; } body:not(.wp-admin) #about .ews741-return .wp-block-button__link{ min-height:29px!important; padding:5px 13px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; border:1px solid transparent!important; border-radius:999px!important; background:linear-gradient(#070b11,#070b11) padding-box, linear-gradient(100deg,#d42cff,#078dff) border-box!important; color:#fff!important; font-size:11px!important; line-height:1!important; font-weight:700!important; text-decoration:none!important; } /* Editor: make rebuilt backside easy to edit without changing front. */ .editor-styles-wrapper #about .ews741-about-back{ position:relative!important; inset:auto!important; width:100%!important; height:auto!important; min-height:820px!important; margin-top:32px!important; padding:20px!important; transform:none!important; overflow:visible!important; visibility:visible!important; opacity:1!important; background:#010307!important; } .editor-styles-wrapper #about .ews741-approved-bg, .editor-styles-wrapper #about .ews741-return, .editor-styles-wrapper #about .ews741-cards{ position:relative!important; inset:auto!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; } .editor-styles-wrapper #about .ews741-approved-bg{height:420px!important;margin-bottom:18px!important;} .editor-styles-wrapper #about .ews741-approved-bg img{object-fit:contain!important;} .editor-styles-wrapper #about .ews741-return{margin:0 0 16px!important;} .editor-styles-wrapper #about .ews741-cards{ width:100%!important; height:auto!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; } .editor-styles-wrapper #about .ews741-card{height:auto!important;min-height:390px!important;} /* ========================================================= v7.4.2 — ABOUT BACK SHARP CLEAN FIX No white frame, no stretched artwork, no duplicate Return. ========================================================= */ body:not(.wp-admin) #about, body:not(.wp-admin) #about .ews741-about-back{ background:#000!important; } body:not(.wp-admin) #about .ews741-about-back{ border:0!important; outline:0!important; box-shadow:none!important; border-radius:18px!important; overflow:hidden!important; } body:not(.wp-admin) #about .ews741-approved-bg{ position:absolute!important; inset:0!important; margin:0!important; padding:0!important; border:0!important; outline:0!important; box-shadow:none!important; background:#000!important; overflow:hidden!important; } body:not(.wp-admin) #about .ews741-approved-bg img{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; display:block!important; object-fit:cover!important; object-position:center center!important; margin:0!important; padding:0!important; border:0!important; outline:0!important; box-shadow:none!important; image-rendering:auto!important; transform:none!important; } /* Remove any generic figure decoration around the approved image. */ body:not(.wp-admin) #about figure.ews741-approved-bg, body:not(.wp-admin) #about figure.ews741-approved-bg::before, body:not(.wp-admin) #about figure.ews741-approved-bg::after{ background:#000!important; border:0!important; outline:0!important; box-shadow:none!important; } /* Single live editable Return button only. */ body:not(.wp-admin) #about .ews741-return{ z-index:90!important; } /* ========================================================= v7.4.3 — ABOUT TILE ALL FIXES Shared neon border front/back, clean art-only background, one Return, editable Gutenberg cards, no white edges. ========================================================= */ /* One shared perimeter border around the whole flip tile */ body:not(.wp-admin) #about{ position:relative!important; border:1px solid transparent!important; border-radius:18px!important; background: linear-gradient(#010307,#010307) padding-box, linear-gradient(100deg,#d921ff 0%,#7b46ff 52%,#00a0ff 100%) border-box!important; overflow:hidden!important; box-shadow:0 0 14px rgba(120,50,255,.10)!important; } /* Prevent face-level white/duplicate borders */ body:not(.wp-admin) #about .ews61-about-front, body:not(.wp-admin) #about .ews743-about-back{ border:0!important; outline:0!important; box-shadow:none!important; border-radius:17px!important; background:#010307!important; overflow:hidden!important; } /* New clean back face */ body:not(.wp-admin) #about .ews743-about-back{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; transform:rotateY(180deg)!important; z-index:1!important; } body:not(.wp-admin) #about.is-flipped .ews743-about-back{ transform:rotateY(360deg)!important; z-index:2!important; } /* Art-only backdrop: astronaut + wave already composited together */ body:not(.wp-admin) #about .ews743-art-bg{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; z-index:1!important; overflow:hidden!important; background:#000!important; pointer-events:none!important; border:0!important; } body:not(.wp-admin) #about .ews743-art-bg img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center center!important; margin:0!important; padding:0!important; border:0!important; outline:0!important; box-shadow:none!important; } /* Four live editable cards above the art */ body:not(.wp-admin) #about .ews743-cards{ position:absolute!important; left:32.6%!important; right:2.8%!important; top:16.0%!important; height:54.5%!important; margin:0!important; padding:0!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:1.15%!important; align-items:stretch!important; z-index:20!important; } body:not(.wp-admin) #about .ews743-card{ position:relative!important; min-width:0!important; height:100%!important; margin:0!important; padding:5.5% 5.3% 5%!important; box-sizing:border-box!important; display:flex!important; flex-direction:column!important; align-items:center!important; text-align:center!important; overflow:hidden!important; border:1px solid #303744!important; border-radius:16px!important; background:linear-gradient(180deg,rgba(8,12,18,.985),rgba(5,8,13,.99))!important; color:#fff!important; box-shadow:0 16px 34px rgba(0,0,0,.22)!important; } body:not(.wp-admin) #about .ews743-num{ margin:0 0 8%!important; padding:0!important; color:#c334ff!important; font-size:clamp(18px,1.65vw,28px)!important; line-height:1!important; font-weight:700!important; } body:not(.wp-admin) #about .ews743-icon{ width:64px!important; height:64px!important; flex:0 0 64px!important; margin:0 0 9%!important; display:grid!important; place-items:center!important; border:1px solid transparent!important; border-radius:14px!important; background: linear-gradient(#070b11,#070b11) padding-box, linear-gradient(135deg,#d02dff,#078dff) border-box!important; } body:not(.wp-admin) #about .ews743-icon svg{ width:33px!important; height:33px!important; fill:none!important; stroke:#078dff!important; stroke-width:2.25!important; stroke-linecap:round!important; stroke-linejoin:round!important; } body:not(.wp-admin) #about .ews743-title{ margin:0 0 7%!important; padding:0!important; color:#fff!important; font-size:clamp(13px,1.15vw,18px)!important; line-height:1.2!important; font-weight:700!important; white-space:nowrap!important; } body:not(.wp-admin) #about .ews743-copy{ margin:0!important; padding:0!important; color:#d3d7df!important; font-size:clamp(10px,.88vw,14px)!important; line-height:1.5!important; font-weight:400!important; text-align:center!important; } body:not(.wp-admin) #about .ews743-accent{ display:block!important; width:76%!important; height:2px!important; margin-top:auto!important; background:linear-gradient(90deg,#d52cff,#078dff)!important; } /* Exactly one live Return */ body:not(.wp-admin) #about .ews743-return{ position:absolute!important; top:4.2%!important; right:3.6%!important; left:auto!important; z-index:30!important; margin:0!important; } body:not(.wp-admin) #about .ews743-return .wp-block-button__link{ min-height:34px!important; padding:6px 15px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; border:1px solid transparent!important; border-radius:999px!important; background: linear-gradient(#070b11,#070b11) padding-box, linear-gradient(100deg,#d42cff,#078dff) border-box!important; color:#fff!important; font-size:12px!important; line-height:1!important; font-weight:700!important; text-decoration:none!important; } /* Mobile About back: centered 2x2 process cards with artwork visible above. */ @media(max-width:760px){ body:not(.wp-admin) #about .ews743-about-back{height:100%!important} body:not(.wp-admin) #about .ews743-art-bg img{ object-fit:cover!important; object-position:28% center!important; } body:not(.wp-admin) #about .ews743-return{top:14px!important;right:14px!important} body:not(.wp-admin) #about .ews743-return .wp-block-button__link{ min-height:38px!important;padding:7px 16px!important;font-size:12px!important; } body:not(.wp-admin) #about .ews743-cards{ left:14px!important; right:14px!important; top:42%!important; bottom:20px!important; height:auto!important; width:auto!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:repeat(2,minmax(0,1fr))!important; gap:10px!important; align-items:stretch!important; } body:not(.wp-admin) #about .ews743-card{ height:100%!important; min-height:0!important; padding:12px 10px 10px!important; border-radius:14px!important; } body:not(.wp-admin) #about .ews743-num{margin:0 0 8px!important;font-size:18px!important} body:not(.wp-admin) #about .ews743-icon{ width:48px!important;height:48px!important;flex-basis:48px!important;margin:0 0 9px!important;border-radius:12px!important; } body:not(.wp-admin) #about .ews743-icon svg{width:26px!important;height:26px!important} body:not(.wp-admin) #about .ews743-title{ margin:0 0 7px!important; font-size:12px!important; line-height:1.25!important; white-space:normal!important; min-height:30px!important; } body:not(.wp-admin) #about .ews743-copy{font-size:11px!important;line-height:1.42!important} body:not(.wp-admin) #about .ews743-accent{width:72%!important} } /* Gutenberg editing */ .editor-styles-wrapper #about .ews743-about-back{ position:relative!important; inset:auto!important; width:100%!important; height:auto!important; min-height:850px!important; margin-top:30px!important; padding:20px!important; transform:none!important; overflow:visible!important; visibility:visible!important; opacity:1!important; } .editor-styles-wrapper #about .ews743-art-bg, .editor-styles-wrapper #about .ews743-return, .editor-styles-wrapper #about .ews743-cards{ position:relative!important; inset:auto!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; } .editor-styles-wrapper #about .ews743-art-bg{ height:430px!important; margin-bottom:18px!important; } .editor-styles-wrapper #about .ews743-art-bg img{ object-fit:contain!important; } .editor-styles-wrapper #about .ews743-return{ margin-bottom:16px!important; } .editor-styles-wrapper #about .ews743-cards{ width:100%!important; height:auto!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; } .editor-styles-wrapper #about .ews743-card{ height:auto!important; min-height:390px!important; } /* v7.4.4: artwork-only update — translucent wave overlays astronaut lower legs. */ /* ========================================================= v7.5.0 — APPROVED CONTACT REBUILD Contact only. About and all other approved sections untouched. ========================================================= */ body:not(.wp-admin) #contact.ews750-contact{ position:relative!important; width:100%!important; max-width:none!important; min-height:calc(100vh - 72px)!important; margin:0!important; padding:24px 24px 28px!important; box-sizing:border-box!important; overflow:hidden!important; background: radial-gradient(circle at 50% 18%,rgba(126,42,255,.075),transparent 34%), linear-gradient(180deg,#02050a 0%,#010307 100%)!important; color:#fff!important; text-align:center!important; } body:not(.wp-admin) #contact .ews750-kicker{ position:relative!important; width:max-content!important; margin:0 auto 10px!important; padding:0 90px!important; color:#a9b8ff!important; font-size:13px!important; line-height:1!important; font-weight:600!important; letter-spacing:.34em!important; } body:not(.wp-admin) #contact .ews750-kicker:before, body:not(.wp-admin) #contact .ews750-kicker:after{ content:""!important; position:absolute!important; top:50%!important; width:64px!important; height:1px!important; transform:translateY(-50%)!important; } body:not(.wp-admin) #contact .ews750-kicker:before{ left:0!important; background:linear-gradient(90deg,transparent,#c42cff)!important; } body:not(.wp-admin) #contact .ews750-kicker:after{ right:0!important; background:linear-gradient(90deg,#078dff,transparent)!important; } body:not(.wp-admin) #contact .ews750-contact-title{ position:relative!important; width:max-content!important; max-width:94vw!important; margin:0 auto 8px!important; padding:0 0 14px!important; color:#fff!important; font-size:clamp(32px,3.2vw,52px)!important; line-height:1.04!important; font-weight:720!important; letter-spacing:-.035em!important; text-wrap:balance!important; text-shadow:0 4px 24px rgba(255,255,255,.08)!important; } body:not(.wp-admin) #contact .ews750-contact-title span{ background:linear-gradient(90deg,#d05cff 0%,#9a42ff 56%,#8b8cff 100%)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; } body:not(.wp-admin) #contact .ews750-contact-title:after{ content:""!important; position:absolute!important; left:18%!important; right:18%!important; bottom:2px!important; height:2px!important; background:linear-gradient(90deg,transparent,#cc2cff 22%,#a82fff 46%,#078dff 72%,transparent)!important; box-shadow:0 0 12px rgba(150,47,255,.65)!important; } body:not(.wp-admin) #contact .ews750-contact-subtitle{ margin:0 auto 18px!important; color:#d7dae3!important; font-size:clamp(15px,1.25vw,19px)!important; line-height:1.45!important; font-weight:400!important; } body:not(.wp-admin) #contact .ews750-form{ position:relative!important; width:min(1150px,92vw)!important; margin:0 auto!important; padding:28px 34px 20px!important; box-sizing:border-box!important; border:1px solid transparent!important; border-radius:24px!important; background: linear-gradient(145deg,rgba(5,8,15,.985),rgba(2,5,10,.99)) padding-box, linear-gradient(110deg,#d541ff 0%,#9b43ff 43%,#078dff 100%) border-box!important; box-shadow: 0 24px 60px rgba(0,0,0,.48), 0 0 28px rgba(112,38,255,.12)!important; text-align:left!important; } body:not(.wp-admin) #contact .ews750-field-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; column-gap:28px!important; row-gap:16px!important; } body:not(.wp-admin) #contact .ews750-field{ display:block!important; min-width:0!important; margin:0!important; } body:not(.wp-admin) #contact .ews750-field>span:first-child{ display:block!important; margin:0 0 8px!important; color:#f1f1f5!important; font-size:14px!important; line-height:1.2!important; font-weight:500!important; letter-spacing:.01em!important; } body:not(.wp-admin) #contact .ews750-input-wrap{ position:relative!important; display:block!important; width:100%!important; border:1px solid transparent!important; border-radius:12px!important; background: linear-gradient(#050913,#050913) padding-box, linear-gradient(110deg,rgba(197,55,255,.82),rgba(7,141,255,.85)) border-box!important; transition:box-shadow .22s ease,transform .22s ease!important; } body:not(.wp-admin) #contact .ews750-input-wrap:focus-within{ box-shadow:0 0 0 2px rgba(115,58,255,.11),0 0 19px rgba(43,100,255,.18)!important; } body:not(.wp-admin) #contact .ews750-input-wrap>svg{ position:absolute!important; left:18px!important; top:50%!important; width:23px!important; height:23px!important; transform:translateY(-50%)!important; fill:none!important; stroke:#b340ff!important; stroke-width:1.65!important; stroke-linecap:round!important; stroke-linejoin:round!important; pointer-events:none!important; } body:not(.wp-admin) #contact .ews750-field:nth-child(even) .ews750-input-wrap>svg{ stroke:#7f4cff!important; } body:not(.wp-admin) #contact .ews750-input-wrap input, body:not(.wp-admin) #contact .ews750-input-wrap textarea{ display:block!important; width:100%!important; margin:0!important; box-sizing:border-box!important; border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; color:#fff!important; font:inherit!important; } body:not(.wp-admin) #contact .ews750-input-wrap input{ height:58px!important; padding:0 18px 0 62px!important; border-radius:12px!important; } body:not(.wp-admin) #contact .ews750-input-wrap textarea{ min-height:132px!important; height:132px!important; padding:18px 18px 18px 62px!important; border-radius:12px!important; resize:vertical!important; line-height:1.5!important; } body:not(.wp-admin) #contact .ews750-input-wrap input::placeholder, body:not(.wp-admin) #contact .ews750-input-wrap textarea::placeholder{ color:#868b99!important; opacity:1!important; } body:not(.wp-admin) #contact .ews750-message{ margin-top:16px!important; } body:not(.wp-admin) #contact .ews750-textarea-wrap>svg{ top:20px!important; transform:none!important; } body:not(.wp-admin) #contact .ews750-submit{ display:flex!important; align-items:center!important; justify-content:center!important; gap:14px!important; min-width:355px!important; height:58px!important; margin:22px auto 14px!important; padding:0 34px!important; border:1px solid rgba(210,80,255,.85)!important; border-radius:999px!important; background:linear-gradient(105deg,#ac25f7 0%,#7043ff 52%,#078dff 100%)!important; color:#fff!important; font-size:15px!important; line-height:1!important; font-weight:700!important; letter-spacing:.19em!important; cursor:pointer!important; box-shadow:0 0 24px rgba(128,42,255,.35)!important; transition:transform .2s ease,box-shadow .2s ease!important; } body:not(.wp-admin) #contact .ews750-submit:hover, body:not(.wp-admin) #contact .ews750-submit:focus-visible{ transform:translateY(-2px)!important; box-shadow:0 0 30px rgba(36,132,255,.38),0 0 22px rgba(180,41,255,.28)!important; outline:none!important; } body:not(.wp-admin) #contact .ews750-submit svg{ width:24px!important; height:24px!important; fill:none!important; stroke:#fff!important; stroke-width:1.7!important; stroke-linecap:round!important; stroke-linejoin:round!important; } body:not(.wp-admin) #contact .ews750-privacy{ display:flex!important; align-items:center!important; justify-content:center!important; gap:9px!important; margin:0!important; color:#c0c4ce!important; font-size:13px!important; line-height:1.3!important; text-align:center!important; } body:not(.wp-admin) #contact .ews750-privacy svg{ width:18px!important; height:18px!important; flex:0 0 18px!important; fill:none!important; stroke:#cbd0da!important; stroke-width:1.5!important; stroke-linecap:round!important; stroke-linejoin:round!important; } /* Notices preserve function while matching the new form. */ body:not(.wp-admin) #contact .contact-notice{ width:min(1150px,92vw)!important; margin:0 auto 12px!important; } /* Keep the approved layout on common laptop/desktop heights. */ @media (min-width:761px) and (max-height:850px){ body:not(.wp-admin) #contact.ews750-contact{padding-top:14px!important;padding-bottom:18px!important} body:not(.wp-admin) #contact .ews750-kicker{margin-bottom:7px!important} body:not(.wp-admin) #contact .ews750-contact-title{font-size:clamp(30px,2.8vw,44px)!important;padding-bottom:11px!important;margin-bottom:5px!important} body:not(.wp-admin) #contact .ews750-contact-subtitle{margin-bottom:12px!important} body:not(.wp-admin) #contact .ews750-form{padding:20px 30px 14px!important} body:not(.wp-admin) #contact .ews750-field-grid{row-gap:11px!important} body:not(.wp-admin) #contact .ews750-field>span:first-child{margin-bottom:6px!important} body:not(.wp-admin) #contact .ews750-input-wrap input{height:50px!important} body:not(.wp-admin) #contact .ews750-input-wrap textarea{height:108px!important;min-height:108px!important} body:not(.wp-admin) #contact .ews750-message{margin-top:11px!important} body:not(.wp-admin) #contact .ews750-submit{height:50px!important;margin-top:14px!important;margin-bottom:10px!important} } /* Mobile */ @media(max-width:760px){ body:not(.wp-admin) #contact.ews750-contact{ min-height:0!important; padding:30px 12px 50px!important; } body:not(.wp-admin) #contact .ews750-kicker{ padding:0 56px!important; font-size:11px!important; letter-spacing:.26em!important; } body:not(.wp-admin) #contact .ews750-kicker:before, body:not(.wp-admin) #contact .ews750-kicker:after{width:42px!important} body:not(.wp-admin) #contact .ews750-contact-title{ width:auto!important; font-size:31px!important; line-height:1.08!important; } body:not(.wp-admin) #contact .ews750-contact-subtitle{ font-size:15px!important; margin-bottom:18px!important; } body:not(.wp-admin) #contact .ews750-form{ width:100%!important; padding:20px 14px 18px!important; border-radius:19px!important; } body:not(.wp-admin) #contact .ews750-field-grid{ grid-template-columns:1fr!important; gap:13px!important; } body:not(.wp-admin) #contact .ews750-message{margin-top:13px!important} body:not(.wp-admin) #contact .ews750-input-wrap input{ height:54px!important; font-size:16px!important; } body:not(.wp-admin) #contact .ews750-input-wrap textarea{ min-height:125px!important; height:125px!important; font-size:16px!important; } body:not(.wp-admin) #contact .ews750-submit{ min-width:0!important; width:min(310px,94%)!important; height:54px!important; padding:0 20px!important; font-size:14px!important; } body:not(.wp-admin) #contact .ews750-privacy{ align-items:flex-start!important; font-size:12px!important; padding:0 8px!important; } } /* Gutenberg editor presentation: heading/subtitle remain normal editable blocks. */ .editor-styles-wrapper #contact.ews750-contact{ width:100%!important; max-width:none!important; min-height:0!important; margin:24px 0!important; padding:30px!important; background:#02050a!important; } .editor-styles-wrapper #contact .ews750-form{ width:100%!important; max-width:1100px!important; margin:20px auto!important; } /* ========================================================= v7.5.1 — PRICING: EDITABLE PRICE TYPOGRAPHY ONLY Converts plan prices to native Gutenberg paragraph blocks. ========================================================= */ body:not(.wp-admin) .ews751-editable-price{ margin:0!important; color:#bd36ff!important; font-size:clamp(36px,3vw,48px)!important; line-height:1!important; font-weight:700!important; letter-spacing:-.035em!important; } /* Keep editable price blocks easy to select in Gutenberg. */ .editor-styles-wrapper .ews751-editable-price{ display:block!important; margin:12px 0!important; color:#bd36ff!important; font-size:42px!important; line-height:1!important; font-weight:700!important; } /* ========================================================= v7.5.2 — PRICING DETAILS ALIGNMENT + DOWNWARD EXPANSION Pricing only. About and Contact remain locked. ========================================================= */ /* All three plan cards use the same three-row structure: 1) equal flexible plan content 2) fixed-position Additional Details 3) quote button */ body:not(.wp-admin) #pricing .ews-edit-package-grid{ align-items:stretch!important; } body:not(.wp-admin) #pricing .ews-edit-package{ display:grid!important; grid-template-rows:minmax(0,1fr) auto auto!important; align-content:start!important; height:100%!important; } /* Equal flexible area above the dropdowns. */ body:not(.wp-admin) #pricing .ews752-plan-top{ min-width:0!important; margin:0!important; padding:0!important; align-self:stretch!important; } /* Anchor every Additional Details box to the exact same row. Remove the legacy auto-margin that allowed vertical shifting. */ body:not(.wp-admin) #pricing .ews-edit-details{ width:100%!important; min-height:58px!important; margin:22px 0 0!important; align-self:start!important; overflow:hidden!important; } /* The summary never moves when opened. */ body:not(.wp-admin) #pricing .ews-edit-details > summary{ display:flex!important; align-items:center!important; min-height:58px!important; box-sizing:border-box!important; margin:0!important; padding:14px 38px!important; cursor:pointer!important; list-style:none!important; } body:not(.wp-admin) #pricing .ews-edit-details > summary::-webkit-details-marker{ display:none!important; } /* Keep the user's + indicator and change it to − while open. */ body:not(.wp-admin) #pricing .ews-edit-details > summary{ position:relative!important; } body:not(.wp-admin) #pricing .ews-edit-details > summary::before{ content:"+"!important; display:inline-block!important; margin-right:6px!important; } body:not(.wp-admin) #pricing .ews-edit-details[open] > summary::before{ content:"−"!important; } /* Strip any literal leading + from visual output without changing Gutenberg text. The pseudo icon above supplies it consistently. */ body:not(.wp-admin) #pricing .ews-edit-details > summary{ text-indent:-9px!important; } /* Opening adds content ONLY BELOW the summary. No flex re-centering, no negative margins and no upward translation. */ body:not(.wp-admin) #pricing .ews-edit-details[open]{ display:block!important; min-height:0!important; height:auto!important; margin-top:22px!important; transform:none!important; translate:none!important; } body:not(.wp-admin) #pricing .ews-edit-details[open] > ul, body:not(.wp-admin) #pricing .ews-edit-details[open] .wp-block-details__content{ display:block!important; min-height:250px!important; margin:0!important; box-sizing:border-box!important; transform:none!important; } /* Keep all three expanded boxes visually even. */ body:not(.wp-admin) #pricing .ews-edit-details[open]{ min-height:320px!important; } /* Buttons remain below the dropdown and are not allowed to pull it upward. */ body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons{ margin:18px 0 0!important; align-self:start!important; } /* On mobile, natural document flow is preferable and the dropdown still opens down. */ @media(max-width:760px){ body:not(.wp-admin) #pricing .ews-edit-package{ display:flex!important; flex-direction:column!important; height:auto!important; } body:not(.wp-admin) #pricing .ews752-plan-top{ display:block!important; } body:not(.wp-admin) #pricing .ews-edit-details{ margin-top:20px!important; } body:not(.wp-admin) #pricing .ews-edit-details[open]{ min-height:0!important; } body:not(.wp-admin) #pricing .ews-edit-details[open] > ul, body:not(.wp-admin) #pricing .ews-edit-details[open] .wp-block-details__content{ min-height:0!important; } } /* Gutenberg: keep the new wrapper and details fully editable. */ .editor-styles-wrapper #pricing .ews-edit-package{ height:auto!important; } .editor-styles-wrapper #pricing .ews752-plan-top{ display:block!important; } .editor-styles-wrapper #pricing .ews-edit-details{ margin-top:20px!important; } /* ========================================================= v7.5.3 — NATIVE GUTENBERG EDITABLE PRICES Prices are real Heading blocks, not nested/raw markup. ========================================================= */ body:not(.wp-admin) #pricing h2.ews-edit-build-price.ews751-editable-price{ color:#bd36ff!important; } .editor-styles-wrapper #pricing h2.ews-edit-build-price.ews751-editable-price{ display:block!important; position:relative!important; visibility:visible!important; pointer-events:auto!important; user-select:text!important; cursor:text!important; color:#bd36ff!important; margin:12px 0!important; min-height:1em!important; } /* ========================================================= v7.5.4 — STABLE PRICING DETAILS DROPDOWNS Fixes the row-stretch/jumping behavior shown in the video. ========================================================= */ /* Do NOT equalize the full card heights. Each card grows independently. */ body:not(.wp-admin) #pricing .ews-edit-package-grid{ align-items:start!important; } body:not(.wp-admin) #pricing .ews-edit-package{ display:flex!important; flex-direction:column!important; height:auto!important; min-height:0!important; align-self:start!important; } /* JS equalizes only this upper content area, which pins all three Additional Details summaries to the same vertical starting line. */ body:not(.wp-admin) #pricing .ews752-plan-top{ flex:0 0 auto!important; align-self:stretch!important; height:auto!important; } /* Details stays in normal flow directly below the equalized upper section. */ body:not(.wp-admin) #pricing .ews-edit-details{ flex:0 0 auto!important; width:100%!important; min-height:58px!important; height:auto!important; margin:22px 0 0!important; align-self:stretch!important; overflow:hidden!important; transform:none!important; } /* Opening one dropdown expands only that card downward. */ body:not(.wp-admin) #pricing .ews-edit-details[open]{ display:block!important; width:100%!important; min-height:0!important; height:auto!important; margin:22px 0 0!important; align-self:stretch!important; transform:none!important; } /* Remove old forced open heights that caused other cards to reposition. */ body:not(.wp-admin) #pricing .ews-edit-details[open] > ul, body:not(.wp-admin) #pricing .ews-edit-details[open] .wp-block-details__content{ display:block!important; min-height:0!important; height:auto!important; margin:0!important; box-sizing:border-box!important; } /* Quote button follows only its own opened dropdown. */ body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons{ flex:0 0 auto!important; margin:18px 0 0!important; align-self:flex-start!important; } /* Clean + / − spacing without shifting the summary text. */ body:not(.wp-admin) #pricing .ews-edit-details > summary{ position:relative!important; text-indent:0!important; display:flex!important; align-items:center!important; gap:6px!important; } body:not(.wp-admin) #pricing .ews-edit-details > summary::before{ content:"+"!important; display:inline-block!important; flex:0 0 auto!important; margin:0!important; } body:not(.wp-admin) #pricing .ews-edit-details[open] > summary::before{ content:"−"!important; } /* Mobile remains natural stacked flow. */ @media(max-width:760px){ body:not(.wp-admin) #pricing .ews-edit-package-grid{ align-items:stretch!important; } body:not(.wp-admin) #pricing .ews-edit-package{ width:100%!important; } body:not(.wp-admin) #pricing .ews752-plan-top{ min-height:0!important; } body:not(.wp-admin) #pricing .ews-edit-details, body:not(.wp-admin) #pricing .ews-edit-details[open]{ margin-top:20px!important; } } /* ========================================================= v7.6.0 — PRICE PLAN CONTROLS REBUILT FROM SCRATCH ========================================================= */ /* Let each pricing card grow independently. */ body:not(.wp-admin) #pricing .ews-edit-package-grid{ align-items:start!important; } body:not(.wp-admin) #pricing .ews-edit-package{ display:flex!important; flex-direction:column!important; height:auto!important; min-height:0!important; align-self:start!important; } /* Native Gutenberg price heading. Front-end defaults only; Gutenberg's own typography/color controls remain available in editor. */ body:not(.wp-admin) #pricing .ews760-editable-price{ margin:22px 0 16px!important; color:#bd36ff; font-size:44px; font-weight:700; line-height:1; } /* Completely rebuilt details component. */ body:not(.wp-admin) #pricing .ews760-details{ width:100%!important; margin:22px 0 0!important; padding:0!important; box-sizing:border-box!important; border:1px solid #303744!important; border-radius:16px!important; background:#050912!important; overflow:hidden!important; } body:not(.wp-admin) #pricing .ews760-details-toggle{ margin:0!important; padding:0!important; } body:not(.wp-admin) #pricing .ews760-details-toggle .wp-block-button__link{ display:flex!important; align-items:center!important; gap:6px!important; width:100%!important; min-height:58px!important; box-sizing:border-box!important; padding:15px 38px!important; border:0!important; border-radius:0!important; background:transparent!important; color:#bd36ff!important; font-size:18px!important; line-height:1.2!important; font-weight:600!important; text-align:left!important; text-decoration:none!important; box-shadow:none!important; } body:not(.wp-admin) #pricing .ews760-symbol{ flex:0 0 auto!important; width:12px!important; text-align:center!important; } /* Body is genuinely below the fixed header. */ body:not(.wp-admin) #pricing .ews760-details-body[hidden]{ display:none!important; } body:not(.wp-admin) #pricing .ews760-details-body{ display:block!important; width:100%!important; margin:0!important; padding:8px 28px 26px 48px!important; box-sizing:border-box!important; } body:not(.wp-admin) #pricing .ews760-details-body ul{ margin:0!important; padding-left:18px!important; } body:not(.wp-admin) #pricing .ews760-details-body li{ margin:0 0 12px!important; color:#eef1f7!important; font-size:16px!important; line-height:1.45!important; } /* No old equal-height/open-state rules are allowed to affect new component. */ body:not(.wp-admin) #pricing .ews760-details, body:not(.wp-admin) #pricing .ews760-details.is-open{ height:auto!important; min-height:0!important; transform:none!important; translate:none!important; align-self:stretch!important; } /* Gutenberg: everything remains selectable/editable. */ .editor-styles-wrapper #pricing .ews760-editable-price{ display:block!important; position:relative!important; visibility:visible!important; pointer-events:auto!important; user-select:text!important; cursor:text!important; } .editor-styles-wrapper #pricing .ews760-details{ display:block!important; margin:20px 0!important; padding:14px!important; border:1px solid #303744!important; } .editor-styles-wrapper #pricing .ews760-details-body[hidden]{ display:block!important; } .editor-styles-wrapper #pricing .ews760-details-body{ display:block!important; } @media(max-width:760px){ body:not(.wp-admin) #pricing .ews760-editable-price{ font-size:40px; } body:not(.wp-admin) #pricing .ews760-details{ margin-top:18px!important; } body:not(.wp-admin) #pricing .ews760-details-toggle .wp-block-button__link{ padding:14px 22px!important; font-size:17px!important; } body:not(.wp-admin) #pricing .ews760-details-body{ padding:6px 20px 22px 34px!important; } } /* ========================================================= v7.6.1 — EVEN PRICING DETAIL TILES Same top edge + same bottom edge when expanded. ========================================================= */ body:not(.wp-admin) #pricing .ews760-details{ box-sizing:border-box!important; } /* When open, each detail tile becomes a column so the body stretches to fill the equalized height cleanly. */ body:not(.wp-admin) #pricing .ews760-details.is-open{ display:flex!important; flex-direction:column!important; } body:not(.wp-admin) #pricing .ews760-details.is-open .ews760-details-toggle{ flex:0 0 auto!important; } body:not(.wp-admin) #pricing .ews760-details.is-open .ews760-details-body{ display:flex!important; flex:1 1 auto!important; flex-direction:column!important; } body:not(.wp-admin) #pricing .ews760-details.is-open .ews760-details-body ul{ flex:1 1 auto!important; } /* Quote buttons follow their own detail tile only. */ body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons{ margin-top:18px!important; } @media(max-width:760px){ body:not(.wp-admin) #pricing .ews760-details, body:not(.wp-admin) #pricing .ews760-details.is-open{ min-height:0!important; } } /* ========================================================= v7.6.2 — CENTERED REQUEST A QUOTE BUTTONS Matches approved compact neon pill style. ========================================================= */ body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons{ width:100%!important; margin:18px 0 0!important; display:flex!important; justify-content:center!important; align-items:center!important; align-self:stretch!important; } body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button{ margin:0!important; } body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button__link{ min-width:230px!important; min-height:54px!important; padding:0 28px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; border:1px solid transparent!important; border-radius:999px!important; background: linear-gradient(#0a0f16,#0a0f16) padding-box, linear-gradient(100deg,#d22cff 0%,#8b42ff 52%,#078dff 100%) border-box!important; color:#fff!important; font-size:16px!important; line-height:1!important; font-weight:600!important; letter-spacing:.01em!important; text-transform:uppercase!important; text-decoration:none!important; box-shadow:0 0 18px rgba(110,42,255,.14)!important; transition:transform .2s ease,box-shadow .2s ease!important; } body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button__link:hover, body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button__link:focus-visible{ transform:translateY(-1px)!important; box-shadow:0 0 24px rgba(76,95,255,.22),0 0 18px rgba(186,43,255,.16)!important; outline:none!important; } @media(max-width:760px){ body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button__link{ min-width:210px!important; min-height:50px!important; font-size:15px!important; } } /* ========================================================= v7.6.3 — PRICING FULL ALIGNMENT + CONTACT BUTTON MATCH ========================================================= */ /* OUTER cards: same top and bottom alignment. */ body:not(.wp-admin) #pricing .ews-edit-package-grid{ align-items:stretch!important; } body:not(.wp-admin) #pricing .ews-edit-package{ display:flex!important; flex-direction:column!important; height:auto!important; box-sizing:border-box!important; align-self:stretch!important; } /* INNER details: same top line; JS handles exact offset and open-height equalization. */ body:not(.wp-admin) #pricing .ews760-details{ flex:0 0 auto!important; width:100%!important; box-sizing:border-box!important; } body:not(.wp-admin) #pricing .ews760-details.is-open{ display:flex!important; flex-direction:column!important; } body:not(.wp-admin) #pricing .ews760-details.is-open .ews760-details-body{ display:flex!important; flex:1 1 auto!important; flex-direction:column!important; } /* Quote button row stays at the bottom of every equal-height outer card. */ body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons{ width:100%!important; margin:auto 0 0!important; padding-top:22px!important; display:flex!important; justify-content:center!important; align-items:center!important; align-self:stretch!important; } /* EXACT visual language from Contact .ews750-submit */ body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button{ margin:0!important; } body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button__link{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:14px!important; min-width:355px!important; height:58px!important; margin:0!important; padding:0 34px!important; box-sizing:border-box!important; border:1px solid rgba(210,80,255,.85)!important; border-radius:999px!important; background:linear-gradient(105deg,#ac25f7 0%,#7043ff 52%,#078dff 100%)!important; color:#fff!important; font-size:15px!important; line-height:1!important; font-weight:700!important; letter-spacing:.19em!important; text-transform:none!important; text-decoration:none!important; cursor:pointer!important; box-shadow:0 0 24px rgba(128,42,255,.35)!important; transition:transform .2s ease,box-shadow .2s ease!important; } body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button__link:hover, body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button__link:focus-visible{ transform:translateY(-2px)!important; box-shadow:0 0 30px rgba(36,132,255,.38),0 0 22px rgba(180,41,255,.28)!important; outline:none!important; } body:not(.wp-admin) #pricing .ews763-quote-icon{ width:24px!important; height:24px!important; flex:0 0 24px!important; fill:none!important; stroke:#fff!important; stroke-width:1.7!important; stroke-linecap:round!important; stroke-linejoin:round!important; } /* Keep inner/outer alignment natural on mobile. */ @media(max-width:760px){ body:not(.wp-admin) #pricing .ews-edit-package{ min-height:0!important; } body:not(.wp-admin) #pricing .ews760-details{ min-height:0!important; margin-top:18px!important; } body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons{ margin-top:18px!important; padding-top:0!important; } body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button__link{ min-width:0!important; width:min(310px,94%)!important; height:54px!important; padding:0 20px!important; font-size:14px!important; } } /* ========================================================= v7.6.4 — FINAL PRICING ALIGNMENT + CONTACT LINKS ========================================================= */ /* Force all three outer cards to use the same flex geometry. */ body:not(.wp-admin) #pricing .ews-edit-package-grid{ align-items:stretch!important; } body:not(.wp-admin) #pricing .ews-edit-package{ display:flex!important; flex-direction:column!important; align-self:stretch!important; height:auto!important; box-sizing:border-box!important; } /* Runtime JS supplies the exact top offset for each inner tile. */ body:not(.wp-admin) #pricing .ews760-details{ flex:0 0 auto!important; align-self:stretch!important; width:100%!important; box-sizing:border-box!important; } /* Quote button row always occupies the bottom row of its outer card. */ body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons{ margin-top:auto!important; padding-top:22px!important; flex:0 0 auto!important; } /* Preserve normal stacked flow on mobile. */ @media(max-width:760px){ body:not(.wp-admin) #pricing .ews-edit-package{ min-height:0!important; } body:not(.wp-admin) #pricing .ews760-details{ margin-top:18px!important; min-height:0!important; } body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons{ margin-top:18px!important; padding-top:0!important; } } /* ========================================================= v7.8.2 — HORIZONTAL PRICING + EXACT APPROVED QUOTE BUTTONS Preserve v7.8.1 Additional Details dropdown behavior. ========================================================= */ /* DESKTOP: force the three plans back to a horizontal row. */ @media(min-width:761px){ body:not(.wp-admin) #pricing .ews780-plan-grid, body:not(.wp-admin) #pricing .ews-edit-package-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-auto-flow:column!important; gap:28px!important; align-items:stretch!important; width:100%!important; } body:not(.wp-admin) #pricing .ews780-plan-card, body:not(.wp-admin) #pricing .ews-edit-package{ width:auto!important; max-width:none!important; min-width:0!important; height:100%!important; } } /* Mobile remains intentionally stacked. */ @media(max-width:760px){ body:not(.wp-admin) #pricing .ews780-plan-grid, body:not(.wp-admin) #pricing .ews-edit-package-grid{ display:flex!important; flex-direction:column!important; gap:22px!important; } } /* REQUEST A QUOTE — exact approved Contact Send Message treatment. */ body:not(.wp-admin) #pricing .ews780-quote-row, body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons{ width:100%!important; margin:22px 0 0!important; padding:0!important; display:flex!important; justify-content:center!important; align-items:center!important; } body:not(.wp-admin) #pricing .ews780-quote-row .wp-block-button, body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button{ margin:0!important; } body:not(.wp-admin) #pricing .ews780-quote-row .wp-block-button__link, body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button__link{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:14px!important; min-width:355px!important; height:58px!important; margin:0!important; padding:0 34px!important; box-sizing:border-box!important; border:1px solid rgba(210,80,255,.85)!important; border-radius:999px!important; background:linear-gradient(105deg,#ac25f7 0%,#7043ff 52%,#078dff 100%)!important; color:#fff!important; font-size:15px!important; line-height:1!important; font-weight:700!important; letter-spacing:.19em!important; text-transform:none!important; text-decoration:none!important; cursor:pointer!important; box-shadow:0 0 24px rgba(128,42,255,.35)!important; transition:transform .2s ease,box-shadow .2s ease!important; } body:not(.wp-admin) #pricing .ews780-quote-row .wp-block-button__link:hover, body:not(.wp-admin) #pricing .ews780-quote-row .wp-block-button__link:focus-visible, body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button__link:hover, body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button__link:focus-visible{ transform:translateY(-2px)!important; box-shadow:0 0 30px rgba(36,132,255,.38),0 0 22px rgba(180,41,255,.28)!important; outline:none!important; } body:not(.wp-admin) #pricing .ews780-quote-icon, body:not(.wp-admin) #pricing .ews763-quote-icon{ width:24px!important; height:24px!important; flex:0 0 24px!important; fill:none!important; stroke:#fff!important; stroke-width:1.7!important; stroke-linecap:round!important; stroke-linejoin:round!important; } @media(max-width:760px){ body:not(.wp-admin) #pricing .ews780-quote-row .wp-block-button__link, body:not(.wp-admin) #pricing .ews-edit-package > .wp-block-buttons .wp-block-button__link{ min-width:0!important; width:min(310px,94%)!important; height:54px!important; padding:0 20px!important; font-size:14px!important; } } /* ========================================================= v7.8.3 — MOBILE COMPATIBILITY PASS Desktop v7.8.2 preserved. Mobile/tablet only overrides. ========================================================= */ /* Prevent accidental horizontal page overflow. */ @media(max-width:1024px){ html,body{ max-width:100%!important; overflow-x:hidden!important; } img,svg,video,iframe{ max-width:100%; } } /* TABLET: pricing remains readable without squeezing three cards. */ @media(min-width:761px) and (max-width:1100px){ body:not(.wp-admin) #pricing .ews780-plan-grid, body:not(.wp-admin) #pricing .ews-edit-package-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-auto-flow:row!important; } } /* PHONE */ @media(max-width:760px){ /* Pricing */ body:not(.wp-admin) #pricing.ews780-pricing{ padding:28px 14px 38px!important; } body:not(.wp-admin) #pricing .ews780-plan-grid, body:not(.wp-admin) #pricing .ews-edit-package-grid{ display:flex!important; flex-direction:column!important; width:100%!important; gap:20px!important; } body:not(.wp-admin) #pricing .ews780-plan-card, body:not(.wp-admin) #pricing .ews-edit-package{ width:100%!important; max-width:100%!important; min-width:0!important; height:auto!important; padding:20px!important; box-sizing:border-box!important; } body:not(.wp-admin) #pricing .ews780-plan-name{ font-size:21px!important; } body:not(.wp-admin) #pricing .ews780-plan-tag{ font-size:16px!important; } body:not(.wp-admin) #pricing .ews780-price{ font-size:38px!important; } body:not(.wp-admin) #pricing .ews780-note{ width:100%!important; min-height:0!important; padding:13px 14px!important; } /* Preserve the now-approved DOWNWARD dropdown behavior. */ body:not(.wp-admin) #pricing .ews780-details{ position:relative!important; inset:auto!important; transform:none!important; width:100%!important; margin:18px 0 0!important; overflow:hidden!important; } body:not(.wp-admin) #pricing .ews780-details-toggle .wp-block-button__link{ min-height:64px!important; padding:0 20px!important; font-size:17px!important; } body:not(.wp-admin) #pricing .ews780-details-body{ position:static!important; transform:none!important; width:auto!important; padding:6px 18px 22px 28px!important; } body:not(.wp-admin) #pricing .ews780-details-body li{ font-size:15px!important; line-height:1.45!important; } /* Approved quote button, scaled only to fit narrow screens. */ body:not(.wp-admin) #pricing .ews780-quote-row{ width:100%!important; margin-top:18px!important; } body:not(.wp-admin) #pricing .ews780-quote-row .wp-block-button{ width:100%!important; display:flex!important; justify-content:center!important; } body:not(.wp-admin) #pricing .ews780-quote-row .wp-block-button__link{ width:min(100%,355px)!important; min-width:0!important; height:54px!important; padding:0 18px!important; gap:10px!important; font-size:13px!important; letter-spacing:.14em!important; white-space:nowrap!important; } body:not(.wp-admin) #pricing .ews780-quote-icon{ width:21px!important; height:21px!important; flex-basis:21px!important; } /* Contact: fit comfortably within phone viewport. */ body:not(.wp-admin) #contact, body:not(.wp-admin) .ews750-contact{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } body:not(.wp-admin) .ews750-contact-shell, body:not(.wp-admin) .ews750-contact-form{ width:calc(100% - 28px)!important; max-width:100%!important; margin-left:auto!important; margin-right:auto!important; box-sizing:border-box!important; } body:not(.wp-admin) .ews750-contact-grid{ grid-template-columns:1fr!important; } /* About: never allow flip faces/artwork to create horizontal overflow. */ body:not(.wp-admin) #about, body:not(.wp-admin) .ews61-about, body:not(.wp-admin) .ews61-about-face{ max-width:100%!important; box-sizing:border-box!important; } body:not(.wp-admin) #about img{ max-width:100%!important; height:auto; } } @media(max-width:390px){ body:not(.wp-admin) #pricing .ews780-plan-card{ padding:17px!important; } body:not(.wp-admin) #pricing .ews780-details-toggle .wp-block-button__link{ padding:0 15px!important; font-size:16px!important; } body:not(.wp-admin) #pricing .ews780-quote-row .wp-block-button__link{ font-size:12px!important; letter-spacing:.11em!important; padding:0 14px!important; } } /* ========================================================= v7.8.4 — ACTUAL EWS781 PRICING ROOT FIX ========================================================= */ @media (min-width:761px){ body:not(.wp-admin) #pricing .ews781-plan-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-template-rows:auto auto auto auto auto auto!important; grid-auto-flow:row!important; column-gap:30px!important; row-gap:0!important; align-items:stretch!important; width:100%!important; } body:not(.wp-admin) #pricing .ews781-card{ grid-row:1 / span 6!important; display:grid!important; grid-template-rows:subgrid!important; row-gap:0!important; width:auto!important; min-width:0!important; max-width:none!important; height:auto!important; margin:0!important; padding:28px!important; box-sizing:border-box!important; border:1px solid #303744!important; border-radius:18px!important; background:linear-gradient(180deg,#060a12,#03070d)!important; } body:not(.wp-admin) #pricing .ews781-card-1{grid-column:1!important} body:not(.wp-admin) #pricing .ews781-card-2{grid-column:2!important} body:not(.wp-admin) #pricing .ews781-card-3{grid-column:3!important} body:not(.wp-admin) #pricing .ews781-head{grid-row:1!important;margin:0!important} body:not(.wp-admin) #pricing .ews781-finance{grid-row:2!important;margin:16px 0 0!important} body:not(.wp-admin) #pricing .ews781-care{grid-row:3!important;margin:18px 0 0!important} body:not(.wp-admin) #pricing .ews781-note{grid-row:4!important;margin:18px 0 0!important;align-self:end!important} body:not(.wp-admin) #pricing .ews781-details-row{ grid-row:5!important;margin:22px 0 0!important;align-self:start!important; position:static!important;transform:none!important;translate:none!important } body:not(.wp-admin) #pricing .ews781-button-row{grid-row:6!important;margin:22px 0 0!important;align-self:end!important} body:not(.wp-admin) #pricing .ews781-details-row .ews760-details, body:not(.wp-admin) #pricing .ews781-details-row .ews760-details.is-open{ position:static!important;inset:auto!important;width:100%!important;margin:0!important; min-height:76px!important;height:auto!important;box-sizing:border-box!important; transform:none!important;translate:none!important } } body:not(.wp-admin) #pricing .ews781-button-row > .wp-block-buttons{ width:100%!important;margin:0!important;padding:0!important;display:flex!important; justify-content:center!important;align-items:center!important } body:not(.wp-admin) #pricing .ews781-button-row .wp-block-button{margin:0!important} body:not(.wp-admin) #pricing .ews781-button-row .wp-block-button__link{ display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:14px!important; min-width:355px!important;height:58px!important;padding:0 34px!important;box-sizing:border-box!important; border:1px solid rgba(210,80,255,.85)!important;border-radius:999px!important; background:linear-gradient(105deg,#ac25f7 0%,#7043ff 52%,#078dff 100%)!important; color:#fff!important;font-size:15px!important;line-height:1!important;font-weight:700!important; letter-spacing:.19em!important;text-transform:none!important;text-decoration:none!important; box-shadow:0 0 24px rgba(128,42,255,.35)!important; transition:transform .2s ease,box-shadow .2s ease!important } body:not(.wp-admin) #pricing .ews781-button-row .wp-block-button__link:hover, body:not(.wp-admin) #pricing .ews781-button-row .wp-block-button__link:focus-visible{ transform:translateY(-2px)!important; box-shadow:0 0 30px rgba(36,132,255,.38),0 0 22px rgba(180,41,255,.28)!important;outline:none!important } body:not(.wp-admin) #pricing .ews781-button-row .ews763-quote-icon{ width:24px!important;height:24px!important;flex:0 0 24px!important;fill:none!important;stroke:#fff!important; stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important } @media (max-width:760px){ body:not(.wp-admin) #pricing .ews781-plan-grid{ display:flex!important;flex-direction:column!important;width:100%!important;gap:22px!important } body:not(.wp-admin) #pricing .ews781-card{ display:block!important;width:100%!important;min-width:0!important;max-width:100%!important; height:auto!important;padding:20px!important;box-sizing:border-box!important } body:not(.wp-admin) #pricing .ews781-finance, body:not(.wp-admin) #pricing .ews781-care, body:not(.wp-admin) #pricing .ews781-note, body:not(.wp-admin) #pricing .ews781-details-row, body:not(.wp-admin) #pricing .ews781-button-row{margin-top:18px!important} body:not(.wp-admin) #pricing .ews781-details-row, body:not(.wp-admin) #pricing .ews781-details-row .ews760-details, body:not(.wp-admin) #pricing .ews781-details-row .ews760-details.is-open{ position:static!important;inset:auto!important;transform:none!important;translate:none!important } body:not(.wp-admin) #pricing .ews781-button-row .wp-block-button__link{ min-width:0!important;width:min(310px,94%)!important;height:54px!important;padding:0 20px!important;font-size:14px!important } } /* ========================================================= v7.8.6 — STRUCTURAL SUBGRID EQUAL-BOTTOM FIX Uses the existing shared subgrid row. No fixed pixel heights. ========================================================= */ @media (min-width:761px){ body:not(.wp-admin) #pricing .ews781-details-row{ align-self:stretch!important; display:flex!important; flex-direction:column!important; } body:not(.wp-admin) #pricing .ews781-details-row .ews760-details.is-open{ flex:1 1 auto!important; height:100%!important; min-height:0!important; align-self:stretch!important; } body:not(.wp-admin) #pricing .ews781-details-row .ews760-details.is-open .ews760-details-body{ flex:1 1 auto!important; } } /* ========================================================= v7.8.7 — APPROVED FLEXIBLE PACKAGES + PORTFOLIO HEADERS CSS-only. All locked v7.8.6 structure/behavior preserved. ========================================================= */ /* FLEXIBLE PACKAGES — approved heading, divider, spacing and gradient subtitle */ body:not(.wp-admin) #pricing .has-text-align-center.ews643-section-title{ position:relative!important; margin-bottom:34px!important; padding-bottom:18px!important; } body:not(.wp-admin) #pricing .has-text-align-center.ews643-section-title::after{ content:""!important; position:absolute!important; left:50%!important; bottom:0!important; transform:translateX(-50%)!important; width:min(92%,760px)!important; height:2px!important; border-radius:999px!important; background:linear-gradient(90deg,#d52cff 0%,#8b52ff 48%,#149cff 100%)!important; box-shadow:0 0 10px rgba(130,70,255,.22)!important; } body:not(.wp-admin) #pricing .has-text-align-center{ margin-top:0!important; background:linear-gradient(90deg,#d52cff 0%,#8b52ff 48%,#149cff 100%)!important; -webkit-background-clip:text!important; background-clip:text!important; -webkit-text-fill-color:transparent!important; color:transparent!important; } /* PORTFOLIO — same approved treatment */ body:not(.wp-admin) #portfolio .has-text-align-center.ews643-section-title{ position:relative!important; margin-bottom:34px!important; padding-bottom:18px!important; } body:not(.wp-admin) #portfolio .has-text-align-center.ews643-section-title::after{ content:""!important; position:absolute!important; left:50%!important; bottom:0!important; transform:translateX(-50%)!important; width:min(92%,760px)!important; height:2px!important; border-radius:999px!important; background:linear-gradient(90deg,#d52cff 0%,#8b52ff 48%,#149cff 100%)!important; box-shadow:0 0 10px rgba(130,70,255,.22)!important; } body:not(.wp-admin) #portfolio .has-text-align-center{ margin-top:0!important; background:linear-gradient(90deg,#d52cff 0%,#8b52ff 48%,#149cff 100%)!important; -webkit-background-clip:text!important; background-clip:text!important; -webkit-text-fill-color:transparent!important; color:transparent!important; } @media(max-width:760px){ body:not(.wp-admin) #pricing .has-text-align-center.ews643-section-title, body:not(.wp-admin) #portfolio .has-text-align-center.ews643-section-title{ margin-bottom:26px!important; padding-bottom:15px!important; } body:not(.wp-admin) #pricing .has-text-align-center.ews643-section-title::after, body:not(.wp-admin) #portfolio .has-text-align-center.ews643-section-title::after{ width:min(88%,560px)!important; } } /* ========================================================= v7.8.8 — APPROVED WHITE SECTION HEADINGS ONLY FLEXIBLE PACKAGES + PORTFOLIO live headings. ========================================================= */ body:not(.wp-admin) #pricing h3.ews643-section-title, body:not(.wp-admin) #portfolio h3.ews643-section-title{ color:#fff!important; -webkit-text-fill-color:#fff!important; background:none!important; background-image:none!important; } /* ========================================================= v7.9.1 — MOBILE-ONLY HOME HEADER + ABOUT FIT Desktop/tablet above 760px intentionally untouched. ========================================================= */ @media (max-width:760px){ /* HOME HEADER — centered logo + centered full navigation row. */ body:not(.wp-admin) .ews674-block-header{ width:100%!important; padding:18px 12px 12px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:14px!important; box-sizing:border-box!important; } body:not(.wp-admin) .ews674-block-brand{ width:min(270px,78vw)!important; max-width:78vw!important; height:64px!important; min-height:64px!important; margin:0 auto!important; display:flex!important; align-items:center!important; justify-content:center!important; overflow:visible!important; } body:not(.wp-admin) .ews674-block-brand img{ width:100%!important; max-width:270px!important; max-height:64px!important; margin:0 auto!important; object-position:center center!important; } body:not(.wp-admin) .ews674-block-nav{ width:100%!important; max-width:100%!important; margin:0 auto!important; padding:0!important; display:flex!important; justify-content:center!important; align-items:center!important; overflow:visible!important; } body:not(.wp-admin) .ews674-block-nav .ews700-menu{ width:100%!important; margin:0 auto!important; padding:0!important; display:flex!important; flex-wrap:wrap!important; justify-content:center!important; align-items:center!important; gap:8px 15px!important; } body:not(.wp-admin) .ews674-block-nav .ews700-menu > li > a{ font-size:13px!important; line-height:1.2!important; white-space:nowrap!important; text-align:center!important; } /* ABOUT — one mobile geometry shared by front and back. */ body:not(.wp-admin) #about.ews61-about{ width:calc(100vw - 20px)!important; max-width:calc(100vw - 20px)!important; height:980px!important; min-height:980px!important; margin:28px 0 28px calc(50% - 50vw + 10px)!important; padding:0!important; overflow:hidden!important; border-radius:18px!important; } body:not(.wp-admin) #about .ews61-about-face{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-height:0!important; padding:16px 14px 18px!important; box-sizing:border-box!important; overflow:hidden!important; } /* FRONT — compact visual, then all copy/details fully inside the tile. */ body:not(.wp-admin) #about .ews61-about-front > .ews715-discover{ top:54px!important; left:50%!important; right:auto!important; transform:translateX(-50%)!important; margin:0!important; } body:not(.wp-admin) #about .ews61-about-front > .ews715-discover .wp-block-button__link{ min-height:36px!important; padding:7px 15px!important; font-size:12px!important; white-space:nowrap!important; } body:not(.wp-admin) #about .ews61-about-head{ min-height:32px!important; margin:0!important; padding:0!important; justify-content:center!important; } body:not(.wp-admin) #about .ews61-about-label{ width:100%!important; margin:0!important; font-size:15px!important; line-height:1.2!important; letter-spacing:.15em!important; text-align:center!important; white-space:nowrap!important; } body:not(.wp-admin) #about .ews61-about-rule{ width:100%!important; height:1px!important; margin:50px auto 12px!important; } body:not(.wp-admin) #about .ews61-about-grid{ width:100%!important; height:auto!important; margin:0!important; display:grid!important; grid-template-columns:1fr!important; gap:12px!important; align-items:start!important; } body:not(.wp-admin) #about .ews61-brand{ min-height:0!important; height:285px!important; gap:0!important; display:grid!important; grid-template-rows:82px 195px!important; align-items:stretch!important; justify-items:stretch!important; overflow:hidden!important; } body:not(.wp-admin) #about .ews61-logo, body:not(.wp-admin) #about .ews61-wave{ width:100%!important; max-width:100%!important; height:100%!important; margin:0!important; overflow:hidden!important; } body:not(.wp-admin) #about .ews61-logo img{ display:block!important; width:min(330px,90%)!important; max-width:330px!important; height:82px!important; max-height:82px!important; margin:0 auto!important; object-fit:contain!important; object-position:center!important; } body:not(.wp-admin) #about .ews61-wave img{ display:block!important; width:100%!important; max-width:none!important; height:195px!important; max-height:195px!important; margin:0!important; object-fit:cover!important; object-position:center 69%!important; border-radius:8px!important; } body:not(.wp-admin) #about .ews61-copy{ width:100%!important; min-width:0!important; padding:0 2px!important; margin:0!important; text-align:left!important; } body:not(.wp-admin) #about .ews61-eyebrow{ margin:0 0 6px!important; font-size:12px!important; line-height:1.2!important; letter-spacing:.15em!important; } body:not(.wp-admin) #about .ews61-title{ margin:0 0 10px!important; font-size:28px!important; line-height:1.03!important; letter-spacing:-.02em!important; } body:not(.wp-admin) #about .ews61-intro{ margin:0 0 12px!important; font-size:12.5px!important; line-height:1.45!important; } body:not(.wp-admin) #about .ews61-features{ width:100%!important; margin:0!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; } body:not(.wp-admin) #about .ews61-feature{ min-height:100px!important; padding:9px 8px!important; border-radius:11px!important; } body:not(.wp-admin) #about .ews61-feature:last-child{ grid-column:1 / -1!important; min-height:82px!important; } body:not(.wp-admin) #about .ews61-icon{ width:30px!important; height:30px!important; margin:0 0 6px!important; border-radius:9px!important; font-size:16px!important; } body:not(.wp-admin) #about .ews61-code-icon{font-size:10px!important} body:not(.wp-admin) #about .ews61-feature h4{ margin:0 0 4px!important; font-size:11px!important; line-height:1.2!important; } body:not(.wp-admin) #about .ews61-feature > p:not(.ews61-icon){ margin:0!important; font-size:9.5px!important; line-height:1.34!important; } /* BACK — artwork as decoration; process content is a true centered 2 × 2 grid. */ body:not(.wp-admin) #about .ews743-about-back{ width:100%!important; height:100%!important; min-height:0!important; padding:0!important; overflow:hidden!important; } body:not(.wp-admin) #about .ews743-art-bg{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; opacity:.72!important; } body:not(.wp-admin) #about .ews743-art-bg img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:31% center!important; } body:not(.wp-admin) #about .ews743-about-back::after{ content:""!important; position:absolute!important; inset:0!important; z-index:2!important; pointer-events:none!important; background:linear-gradient(180deg,rgba(1,3,7,.08) 0%,rgba(1,3,7,.32) 28%,rgba(1,3,7,.70) 100%)!important; } body:not(.wp-admin) #about .ews743-return{ top:16px!important; right:16px!important; z-index:40!important; } body:not(.wp-admin) #about .ews743-return .wp-block-button__link{ min-height:38px!important; padding:7px 16px!important; font-size:12px!important; } body:not(.wp-admin) #about .ews743-cards{ position:absolute!important; z-index:30!important; left:14px!important; right:14px!important; top:260px!important; bottom:18px!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:repeat(2,minmax(0,1fr))!important; gap:10px!important; align-items:stretch!important; } body:not(.wp-admin) #about .ews743-card{ width:100%!important; height:100%!important; min-height:0!important; margin:0!important; padding:12px 9px 10px!important; border-radius:13px!important; overflow:hidden!important; } body:not(.wp-admin) #about .ews743-num{ margin:0 0 7px!important; font-size:19px!important; } body:not(.wp-admin) #about .ews743-icon{ width:46px!important; height:46px!important; flex:0 0 46px!important; margin:0 0 8px!important; border-radius:11px!important; } body:not(.wp-admin) #about .ews743-icon svg{ width:25px!important; height:25px!important; } body:not(.wp-admin) #about .ews743-title{ min-height:29px!important; margin:0 0 6px!important; font-size:11.5px!important; line-height:1.24!important; white-space:normal!important; } body:not(.wp-admin) #about .ews743-copy{ margin:0!important; font-size:10px!important; line-height:1.36!important; } body:not(.wp-admin) #about .ews743-accent{ width:72%!important; height:2px!important; margin-top:auto!important; } } @media (max-width:390px){ body:not(.wp-admin) #about.ews61-about{height:1010px!important;min-height:1010px!important} body:not(.wp-admin) #about .ews61-title{font-size:25px!important} body:not(.wp-admin) #about .ews61-intro{font-size:12px!important} body:not(.wp-admin) #about .ews674-block-nav .ews700-menu{gap:7px 11px!important} } /* ========================================================= v7.9.2 — LOCKED MOBILE ABOUT FRONT + BACK MOBILE ONLY. Desktop/tablet >760px intentionally untouched. Approved scope: - centered About front logo + expanded wave visual - front 2x2 feature grid (mobile) with tap-to-focus - compact back 2x2 process grid moved to top - approved astronaut/planet artwork fills lower back area - back cards use same tap-to-focus interaction ========================================================= */ @media (max-width:760px){ /* Keep the approved section roomy enough to present both locked faces. */ body:not(.wp-admin) #about.ews61-about{ height:1120px!important; min-height:1120px!important; } /* ---------- FRONT: locked approved composition ---------- */ body:not(.wp-admin) #about .ews61-about-front{ padding:18px 20px 22px!important; } body:not(.wp-admin) #about .ews61-about-front > .ews715-discover{ top:66px!important; } body:not(.wp-admin) #about .ews61-about-rule{ margin:62px auto 18px!important; } body:not(.wp-admin) #about .ews61-about-grid{ gap:14px!important; } body:not(.wp-admin) #about .ews61-brand{ height:405px!important; min-height:405px!important; grid-template-rows:145px 260px!important; align-items:stretch!important; justify-items:center!important; } body:not(.wp-admin) #about .ews61-logo{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; height:145px!important; } body:not(.wp-admin) #about .ews61-logo img{ width:min(430px,96%)!important; max-width:430px!important; height:140px!important; max-height:140px!important; margin:0 auto!important; object-fit:contain!important; object-position:center center!important; } body:not(.wp-admin) #about .ews61-wave{ width:calc(100% + 40px)!important; margin-left:-20px!important; height:260px!important; border-radius:0!important; } body:not(.wp-admin) #about .ews61-wave img{ width:100%!important; height:260px!important; max-height:260px!important; object-fit:cover!important; object-position:center 62%!important; border-radius:0!important; } body:not(.wp-admin) #about .ews61-copy{ padding:0 2px!important; } body:not(.wp-admin) #about .ews61-eyebrow{ font-size:14px!important; margin:2px 0 7px!important; } body:not(.wp-admin) #about .ews61-title{ font-size:29px!important; line-height:1.02!important; margin:0 0 12px!important; } body:not(.wp-admin) #about .ews61-intro{ font-size:12.5px!important; line-height:1.48!important; margin:0 0 14px!important; } body:not(.wp-admin) #about .ews61-features{ position:relative!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; isolation:isolate!important; } /* Locked mobile front shows the approved four cards only. Desktop remains five. */ body:not(.wp-admin) #about .ews61-feature:nth-child(n+5){ display:none!important; } body:not(.wp-admin) #about .ews61-feature{ position:relative!important; display:flex!important; flex-direction:column!important; min-height:126px!important; padding:12px 11px!important; border-radius:14px!important; transform:translateZ(0) scale(1)!important; transform-origin:center!important; transition:transform .25s ease,opacity .22s ease,box-shadow .25s ease,border-color .25s ease!important; cursor:pointer!important; -webkit-tap-highlight-color:transparent!important; } body:not(.wp-admin) #about .ews61-feature .ews61-icon{ width:38px!important; height:38px!important; margin:0 0 8px!important; } body:not(.wp-admin) #about .ews61-feature h4{ font-size:12.5px!important; line-height:1.2!important; margin:0 0 5px!important; } body:not(.wp-admin) #about .ews61-feature > p:not(.ews61-icon){ font-size:10.2px!important; line-height:1.38!important; } /* ---------- FRONT tap-to-focus ---------- */ body:not(.wp-admin) #about .ews61-features.has-mobile-focus .ews61-feature:not(.is-mobile-focused){ opacity:.18!important; } body:not(.wp-admin) #about .ews61-feature.is-mobile-focused{ position:absolute!important; z-index:90!important; left:50%!important; top:50%!important; width:min(86vw,360px)!important; min-height:230px!important; height:auto!important; transform:translate(-50%,-50%)!important; padding:24px 22px!important; border-color:rgba(56,164,255,.9)!important; box-shadow:0 18px 60px rgba(0,0,0,.72),0 0 30px rgba(172,55,255,.35),0 0 24px rgba(0,145,255,.22)!important; background:linear-gradient(155deg,rgba(10,14,24,.99),rgba(3,5,12,.995))!important; } body:not(.wp-admin) #about .ews61-feature.is-mobile-focused .ews61-icon{ width:52px!important; height:52px!important; font-size:23px!important; } body:not(.wp-admin) #about .ews61-feature.is-mobile-focused h4{ font-size:18px!important; margin-bottom:10px!important; } body:not(.wp-admin) #about .ews61-feature.is-mobile-focused > p:not(.ews61-icon){ font-size:15px!important; line-height:1.5!important; } /* ---------- BACK: compact grid top + locked astronaut scene bottom ---------- */ body:not(.wp-admin) #about .ews743-about-back{ background:#010207!important; } body:not(.wp-admin) #about .ews743-art-bg{ display:none!important; } body:not(.wp-admin) #about .ews743-about-back::before{ content:""!important; display:block!important; position:absolute!important; z-index:1!important; left:0!important; right:0!important; top:580px!important; bottom:0!important; background-image:url('assets/images/about-back-mobile-astronaut-v792.jpg')!important; background-repeat:no-repeat!important; background-size:cover!important; background-position:center bottom!important; pointer-events:none!important; } body:not(.wp-admin) #about .ews743-about-back::after{ z-index:2!important; background:linear-gradient(180deg,rgba(1,2,7,.02) 0%,rgba(1,2,7,.06) 48%,rgba(1,2,7,.18) 100%)!important; } body:not(.wp-admin) #about .ews743-return{ top:18px!important; right:18px!important; } body:not(.wp-admin) #about .ews743-cards{ position:absolute!important; z-index:30!important; left:20px!important; right:20px!important; top:112px!important; bottom:auto!important; width:auto!important; height:440px!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:repeat(2,210px)!important; gap:12px!important; isolation:isolate!important; } body:not(.wp-admin) #about .ews743-card{ position:relative!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-start!important; width:100%!important; height:210px!important; min-height:210px!important; padding:12px 10px 10px!important; border-radius:15px!important; overflow:hidden!important; cursor:pointer!important; transition:transform .25s ease,opacity .22s ease,box-shadow .25s ease,border-color .25s ease!important; -webkit-tap-highlight-color:transparent!important; } body:not(.wp-admin) #about .ews743-num{ margin:0 0 5px!important; font-size:20px!important; line-height:1!important; } body:not(.wp-admin) #about .ews743-icon{ width:42px!important; height:42px!important; flex:0 0 42px!important; margin:0 0 7px!important; } body:not(.wp-admin) #about .ews743-icon svg{ width:23px!important; height:23px!important; } body:not(.wp-admin) #about .ews743-title{ min-height:0!important; margin:0 0 7px!important; font-size:11px!important; line-height:1.2!important; text-align:center!important; } body:not(.wp-admin) #about .ews743-copy{ margin:0!important; font-size:9.6px!important; line-height:1.35!important; text-align:center!important; } body:not(.wp-admin) #about .ews743-accent{ width:72%!important; height:2px!important; margin-top:auto!important; } /* ---------- BACK tap-to-focus ---------- */ body:not(.wp-admin) #about .ews743-cards.has-mobile-focus .ews743-card:not(.is-mobile-focused){ opacity:.16!important; } body:not(.wp-admin) #about .ews743-card.is-mobile-focused{ position:absolute!important; z-index:95!important; left:50%!important; top:50%!important; width:min(86vw,360px)!important; height:auto!important; min-height:270px!important; transform:translate(-50%,-50%)!important; padding:24px 22px 20px!important; border-color:rgba(56,164,255,.92)!important; box-shadow:0 18px 60px rgba(0,0,0,.78),0 0 30px rgba(172,55,255,.38),0 0 26px rgba(0,145,255,.24)!important; background:linear-gradient(155deg,rgba(10,14,24,.995),rgba(3,5,12,.998))!important; overflow:visible!important; } body:not(.wp-admin) #about .ews743-card.is-mobile-focused .ews743-num{ font-size:28px!important; margin-bottom:10px!important; } body:not(.wp-admin) #about .ews743-card.is-mobile-focused .ews743-icon{ width:58px!important; height:58px!important; flex-basis:58px!important; margin-bottom:12px!important; } body:not(.wp-admin) #about .ews743-card.is-mobile-focused .ews743-icon svg{ width:31px!important; height:31px!important; } body:not(.wp-admin) #about .ews743-card.is-mobile-focused .ews743-title{ font-size:18px!important; margin-bottom:12px!important; } body:not(.wp-admin) #about .ews743-card.is-mobile-focused .ews743-copy{ font-size:15px!important; line-height:1.48!important; } body:not(.wp-admin) #about .ews743-card.is-mobile-focused .ews743-accent{ margin-top:18px!important; } } @media (max-width:390px){ body:not(.wp-admin) #about.ews61-about{ height:1140px!important; min-height:1140px!important; } body:not(.wp-admin) #about .ews61-brand{ height:385px!important; min-height:385px!important; grid-template-rows:135px 250px!important; } body:not(.wp-admin) #about .ews61-logo img{ height:130px!important; max-height:130px!important; } body:not(.wp-admin) #about .ews61-wave, body:not(.wp-admin) #about .ews61-wave img{ height:250px!important; max-height:250px!important; } body:not(.wp-admin) #about .ews743-cards{ left:14px!important; right:14px!important; gap:9px!important; } } /* ========================================================= v7.9.3 — MOBILE ABOUT DUPLICATE LOGO CLEANUP Mobile only. Removes the embedded second Eclipse logo from the wave artwork while preserving the locked desktop design. ========================================================= */ @media (max-width:760px){ body:not(.wp-admin) #about .ews61-wave{ background-image:url("assets/images/about-wave-mobile-clean-v793.png")!important; background-repeat:no-repeat!important; background-size:cover!important; background-position:center 54%!important; } body:not(.wp-admin) #about .ews61-wave img{ opacity:0!important; visibility:hidden!important; } }