:root{ --bg:#ffffff; --bg-alt:#f4f7fb; --surface:#ffffff; --surface-2:#f4f7fb; --text:#000000; --heading:#0a284c; --muted:#000000; --border:#e3eaf2; --primary:#0a284c; --primary-deep:#071e42; --accent:#2f86c5; --accent-bright:#5dade2; --cta:#1f9d57; --cta-hover:#18854a; --hero-1:#071e42; --hero-2:#0a284c; --hero-3:#13243c; --card-shadow:0 1px 2px rgba(10,40,76,.05),0 12px 32px -20px rgba(10,40,76,.30); } [data-theme="dark"]{ --bg:#0f1722; --bg-alt:#16202e; --surface:#16202e; --surface-2:#1b2738; --text:#ffffff; --heading:#ffffff; --muted:#ffffff; --border:#24344a; --primary:#5dade2; --primary-deep:#071e42; --accent:#5dade2; --accent-bright:#7cc2ec; --cta:#2cb56a; --cta-hover:#23a05c; --hero-1:#0a1622; --hero-2:#0f2138; --hero-3:#0b1826; --card-shadow:0 1px 2px rgba(0,0,0,.3),0 16px 36px -22px rgba(0,0,0,.6); } *{box-sizing:border-box} html{scroll-behavior:smooth} /* WP260629A: submenu anchor targets land below the sticky header (84px bar) */ [id]{scroll-margin-top:100px} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--text);font-family:'Rubik',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6} h1,h2,h3,h4{font-family:'Rubik',system-ui,sans-serif;color:var(--heading);line-height:1.12;margin:0;letter-spacing:-.02em} ::selection{background:var(--accent-bright);color:#071e42} #ewn-blog-track::-webkit-scrollbar{display:none} @media(max-width:760px){[data-about-grid]{grid-template-columns:1fr!important}[data-real-grid]{grid-template-columns:1fr!important}} @keyframes ewnFade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @keyframes ewnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes ewnSpin{to{transform:rotate(360deg)}} @media(max-width:560px){[data-hero-float]{display:none!important}} /* Align the Engitech header "Try EQQ Free" CTA to the mockup's green */ .menu .ewn-cta-btn > a, li.ewn-cta-btn > a { background: var(--cta) !important; } .menu .ewn-cta-btn > a:hover, li.ewn-cta-btn > a:hover { background: var(--cta-hover) !important; } /* Contact Form 7 — styled to the mockup design system. No self-background: the /contact/ page nests this inside a white .ewn-surface card, and --bg-alt == --surface in dark mode masked the seam there, but in light mode the two tones didn't match, splitting the card in half. Pages that want a boxed look (e.g. /eqq/order/) already give the wrapping section its own --bg-alt, so this rule painting it again was always redundant there too. */ .wpcf7 { padding:0 24px clamp(56px,7vw,84px); } .wpcf7 .wpcf7-form { max-width:680px; margin:0 auto; } /* /eqq/order/ embeds its CF7 form as a bare Elementor shortcode widget directly on the page's --bg-alt section (no white card wraps it, unlike /contact/ - the shortcode has to stand alone in its own block to render, see build-elementor-page.py). Its input fields use --surface-2, which is the exact same value as --bg-alt, so with no white backdrop the fields had ~0 contrast against the page. Give the shortcode wrapper itself the white-card treatment. Must be ":has(> .wpcf7)" (direct child), not ":has(.wpcf7)" - on /contact/ the mu-plugin's *entire* section (hero+form+sidebar) is also one Elementor shortcode widget, with .wpcf7 nested many levels deep inside it as a descendant; the non-child form matched that too and squeezed the whole two-column contact layout down to a single 720px card. */ .elementor-shortcode:has(> .wpcf7) { max-width:720px; margin:clamp(32px,4vw,56px) auto clamp(40px,6vw,64px); background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:clamp(32px,4vw,40px) clamp(24px,4vw,40px) clamp(24px,4vw,40px); box-shadow:var(--card-shadow); } .elementor-shortcode:has(> .wpcf7) > .wpcf7 { padding:0; } .wpcf7-form p { margin:0 0 12px; } .wpcf7-form label { display:block; font-size:13px; font-weight:600; color:var(--heading); } .wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form input[type=tel], .wpcf7-form input[type=url], .wpcf7-form input[type=number], .wpcf7-form textarea, .wpcf7-form select { width:100%; margin-top:5px; padding:10px 13px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font:inherit; font-size:14.5px; outline:none; transition:border-color .18s; } .wpcf7-form input:focus, .wpcf7-form textarea:focus { border-color:var(--accent); } .wpcf7-form textarea { resize:vertical; min-height:84px; } .wpcf7-form input[type=submit] { width:auto; margin-top:6px; background:var(--cta); color:#fff; font-weight:600; font-size:16px; padding:14px 30px; border:none; border-radius:11px; cursor:pointer; box-shadow:0 14px 30px -12px var(--cta); transition:transform .18s, background .18s; } .wpcf7-form input[type=submit]:hover { background:var(--cta-hover); transform:translateY(-2px); } /* Bottom CTA band sits alone in its widget with padding-top:0 — give it breathing room. Targets only the CTA section (its inner div carries the hero radial-gradient). */ section:has(> div[style*="radial-gradient"][style*="var(--hero-1)"]){padding-top:clamp(44px,6vw,80px)!important} /* Long-form content pages (About / Privacy / Terms) — original Ewarenow copy */ .ewn-prose{color:var(--text);font-size:18px;line-height:1.78} .ewn-prose > *:first-child{margin-top:0} .ewn-prose h2{font-size:clamp(21px,2.8vw,27px);color:var(--heading);margin:36px 0 12px} .ewn-prose h3,.ewn-prose h4{font-size:clamp(17px,2.1vw,20px);color:var(--heading);margin:28px 0 10px} .ewn-prose p{margin:0 0 16px} .ewn-prose ul,.ewn-prose ol{margin:0 0 18px;padding-left:22px} .ewn-prose li{margin:0 0 8px} .ewn-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .ewn-prose strong{color:var(--heading)} .ewn-prose em{color:var(--heading)} .ewn-prose hr{border:0;border-top:1px solid var(--border);margin:30px 0} .ewn-prose blockquote{margin:0 0 18px;padding:4px 0 4px 18px;border-left:3px solid var(--accent);color:var(--muted)} /* Compact variant for dense listings (e.g. the older-releases changelog list) */ .ewn-prose--compact{font-size:15px;line-height:1.65} .ewn-prose--compact h2{font-size:16px;margin:18px 0 8px} .ewn-prose--compact h3,.ewn-prose--compact h4{font-size:15px;margin:14px 0 6px} .ewn-prose--compact p{margin:0 0 10px} .ewn-prose--compact ul,.ewn-prose--compact ol{margin:0 0 10px;padding-left:20px} .ewn-prose--compact li{margin:0 0 5px} .ewn-prose-cta,.ewn-prose-cta:link,.ewn-prose-cta:visited{display:inline-flex;align-items:center;gap:8px;margin-top:6px;background:var(--cta);color:#fff!important;font-weight:600;padding:11px 22px;border-radius:10px;text-decoration:none!important;box-shadow:0 12px 26px -12px var(--cta);transition:transform .18s,background .18s} .ewn-prose-cta:hover{background:var(--cta-hover);transform:translateY(-2px)} /* "Want more information?" CTA panel on the content pages */ .ewn-prose .ewn-cta-box{margin:46px 0 6px;padding:clamp(30px,4.4vw,52px) clamp(24px,4vw,48px);border-radius:20px;text-align:center;background:radial-gradient(120% 140% at 90% 10%,var(--hero-3),var(--hero-2) 55%,var(--hero-1));box-shadow:var(--card-shadow);position:relative;overflow:hidden} .ewn-prose .ewn-cta-box::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(93,173,226,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(93,173,226,.06) 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:radial-gradient(70% 80% at 50% 0%,#000,transparent);mask-image:radial-gradient(70% 80% at 50% 0%,#000,transparent)} .ewn-prose .ewn-cta-box > *{position:relative} .ewn-prose .ewn-cta-box h2{color:#fff;margin:0 0 10px;font-size:clamp(22px,3vw,30px)} .ewn-prose .ewn-cta-box p{color:#bcd0ea;margin:0 auto 22px;max-width:54ch;font-size:clamp(16px,1.7vw,18px)} .ewn-prose .ewn-cta-box .ewn-prose-cta{margin-top:0} /* About page media: founder portrait, AMCHAM badge, network figure */ .ewn-prose .ewn-bio-photo{float:right;width:172px;max-width:42%;margin:2px 0 18px 28px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--card-shadow);padding:8px} .ewn-prose .ewn-amcham{margin:22px 0;display:flex;align-items:flex-start;flex-wrap:wrap;gap:16px;justify-content:flex-start} .ewn-prose .ewn-amcham > div{min-width:200px;max-width:300px;padding:18px 20px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2);box-shadow:var(--card-shadow)} .ewn-prose .ewn-amcham-logo{display:block;width:120px;height:auto;border-radius:12px;box-shadow:var(--card-shadow)} .ewn-prose .ewn-amcham .mn-widget-member-logo{display:none} .ewn-prose .ewn-figure{margin:28px 0 8px} .ewn-prose .ewn-figure img{display:block;width:100%;max-width:1000px;height:auto;margin:0 auto;border-radius:18px;border:1px solid var(--border);box-shadow:var(--card-shadow);background:#fff;padding:14px} .ewn-prose .ewn-figure figcaption{margin-top:13px;text-align:center;font-size:13.5px;color:var(--muted)} @media(max-width:600px){.ewn-prose .ewn-bio-photo{float:none;display:block;margin:0 auto 18px;max-width:62%}} /* Footer responsive grid (ported from the mockup Footer component) */ @media(max-width:860px){[data-foot-grid]{grid-template-columns:1fr 1fr 1fr!important}[data-foot-grid]>div:first-child{grid-column:1 / -1}[data-foot-grid]>div:first-child p{max-width:none!important}} @media(max-width:480px){[data-foot-grid]{grid-template-columns:1fr!important}} /* ===================== Header (mockup) ===================== */ .ewn-header{position:sticky;top:0;z-index:200;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)} /* WP260629A: bar + brand lockup enlarged for more presence per Doug's R07 menu-bar ask, dialed back from an initial 104/72/30 pass — that made the sticky header too heavy relative to the rest of the site (was originally 68px/40px/21px) */ .ewn-header__bar{max-width:1280px;margin:0 auto;padding:0 24px;height:84px;display:flex;align-items:center;gap:14px} .ewn-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0} .ewn-brand img{height:56px;width:auto;display:block} .ewn-brand__name{font-family:'Rubik',sans-serif;font-weight:700;font-size:24px;color:var(--heading);letter-spacing:-.03em} .ewn-nav{display:flex;gap:2px;margin-left:10px} .ewn-nav-item{position:relative;display:flex;align-items:center} /* WP260629A: menu items larger per Doug's R07 ask (was 16px/500). Base is semibold, not bold — full-bold on every item read as heavy; weight now correctly steps UP on the active item (was inverted: active 600 was lighter than inactive's earlier 700). R13: dialed back to 16px/8px-padding — the added "EQQ Services" top-level item (7 items total, several multi-word) was wrapping onto two lines at 18px/10px. */ .ewn-nav-link,.ewn-nav-link:link,.ewn-nav-link:visited{display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-size:16px;font-weight:600;color:var(--heading);padding:23px 8px;transition:color .18s;position:relative;white-space:nowrap} .ewn-nav-link:hover,.ewn-nav-link:focus,.ewn-nav-link.is-active{color:var(--accent)} .ewn-nav-link.is-active{font-weight:700} /* same visited-link guard for dropdown + mobile menu links */ .ewn-dd__inner a:visited{color:var(--text)} .ewn-mobile__top:visited{color:var(--heading)} .ewn-mobile__sub a:visited{color:var(--muted)} .ewn-nav-link > svg{transition:transform .22s ease} .ewn-nav-item.has-dd:hover .ewn-nav-link > svg,.ewn-nav-item.has-dd:focus-within .ewn-nav-link > svg{transform:rotate(180deg)} .ewn-nav-link.is-active::after{content:"";position:absolute;left:11px;right:11px;bottom:16px;height:2px;background:var(--accent);border-radius:2px} .ewn-dd{position:absolute;top:100%;left:0;padding-top:8px;z-index:60;opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .2s ease,transform .2s ease,visibility .2s} .ewn-nav-item.has-dd:hover .ewn-dd,.ewn-nav-item.has-dd:focus-within .ewn-dd{opacity:1;visibility:visible;transform:none} .ewn-dd__inner{min-width:228px;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--card-shadow);padding:8px;display:flex;flex-direction:column;gap:1px} .ewn-dd__inner a{padding:10px 13px;border-radius:9px;font-size:15px;color:var(--text);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s} .ewn-dd__inner a:hover{background:var(--surface-2);color:var(--accent)} .ewn-header__actions{margin-left:auto;display:flex;align-items:center;gap:11px} .ewn-cta-pill,.ewn-cta-pill:link,.ewn-cta-pill:visited{display:inline-flex;align-items:center;gap:7px;text-decoration:none;background:var(--cta);color:#fff;font-weight:600;font-size:15px;padding:10px 18px;border-radius:9px;box-shadow:0 8px 20px -10px var(--cta);transition:background .18s,transform .18s} .ewn-cta-pill:hover,.ewn-cta-pill:focus{background:var(--cta-hover);transform:translateY(-1px);color:#fff} #ewn-nav-toggle{display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);color:var(--heading);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0} /* Card grid: flex+wrap centers a short last row (e.g. 4 cards in a 3-up grid) automatically, at any breakpoint/column count - a CSS Grid track can't do this without knowing the exact column count per viewport. Each grid instance sets --card-min (matches the old grid-template-columns minmax basis) and --card-gap inline; max-width caps growth so a lone leftover card renders at roughly its full-row size instead of stretching edge to edge. */ .ewn-cardgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--card-gap,20px)} .ewn-cardgrid>*{flex:1 1 var(--card-min,280px);max-width:calc(var(--card-min,280px) * 1.35)} /* Fancy dark/light switch: sliding knob + sun<->moon crossfade (CSS-driven by html[data-theme]) */ #ewn-mode-toggle.ewn-toggle{position:static!important;top:auto!important;right:auto!important;width:auto;height:auto;padding:0;margin:0;border:0;background:none;box-shadow:none;cursor:pointer;line-height:0;display:inline-flex} /* WP260629A: Doug's R00/R07 "star/oval" note (his screenshots = this toggle) — stronger oval border (dark on light mode, light on dark mode) so the control reads clearly */ .ewn-toggle__track{position:relative;display:block;width:60px;height:30px;border-radius:999px;background:var(--surface-2);border:1px solid #8ba0b5;transition:background .35s,border-color .35s} #ewn-mode-toggle:hover .ewn-toggle__track{border-color:var(--accent)} #ewn-mode-toggle:focus-visible .ewn-toggle__track{outline:2px solid var(--accent);outline-offset:2px} .ewn-toggle__sun,.ewn-toggle__moon{position:absolute;top:50%;transform:translateY(-50%);width:17px;height:17px;z-index:2;transition:opacity .3s ease,color .3s ease} .ewn-toggle__sun{left:7px;color:#f5a800;opacity:1} /* WP260629A: brighter yellow sun per Doug */ .ewn-toggle__moon{right:7px;color:#8094ad;opacity:.45} .ewn-toggle__knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(10,40,76,.28);z-index:1;transition:transform .38s cubic-bezier(.34,1.56,.64,1),background .35s} html[data-theme="dark"] .ewn-toggle__track{background:var(--primary-deep);border-color:#8fa6c2} html[data-theme="dark"] .ewn-toggle__knob{transform:translateX(30px);background:#0e1726} html[data-theme="dark"] .ewn-toggle__sun{opacity:.4;color:#9fb3cf} html[data-theme="dark"] .ewn-toggle__moon{opacity:1;color:#cfe2f6} /* mobile menu */ .ewn-mobile{display:none;border-top:1px solid var(--border);padding:10px 18px 18px;max-height:78vh;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background-color:var(--surface);background-image:linear-gradient(var(--surface),var(--surface)),linear-gradient(var(--surface),var(--surface)),linear-gradient(to bottom,rgba(0,0,0,.16),rgba(0,0,0,0)),linear-gradient(to top,rgba(0,0,0,.16),rgba(0,0,0,0));background-repeat:no-repeat;background-size:100% 24px,100% 24px,100% 14px,100% 14px;background-position:0 0,0 100%,0 0,0 100%;background-attachment:local,local,scroll,scroll} .ewn-header.ewn-open .ewn-mobile{display:block} .ewn-mobile__top{display:block;text-decoration:none;font-size:16px;font-weight:600;color:var(--heading);padding:12px 6px;border-bottom:1px solid var(--border)} .ewn-mobile__sub{padding:4px 0 10px 16px;display:flex;flex-direction:column;border-bottom:1px solid var(--border)} .ewn-mobile__sub a{text-decoration:none;font-size:15px;color:var(--muted);padding:8px 6px} .ewn-mobile__cta{justify-content:center;margin-top:14px} /* R13: raised from 980px - the header's content (logo+nav+toggle+CTA pill) needs the full 1280px bar max-width with no slack, so 980-1279px was a broken zone where desktop nav showed but the CTA pill was clipped off-screen (found checking the tablet breakpoint: 1024px landscape iPad). */ @media(max-width:1300px){.ewn-nav{display:none}#ewn-nav-toggle{display:inline-flex}.ewn-header__actions .ewn-cta-pill{display:none}} /* WP260629A: scale the enlarged brand lockup back down on phones so it doesn't push the dark-mode toggle/hamburger past the viewport edge (bar/logo stay ~1in on desktop) */ @media(max-width:600px){ .ewn-header__bar{height:76px} .ewn-brand img{height:48px} .ewn-brand__name{font-size:20px} } /* CF7 two-column rows + required marker */ .wpcf7-form .ewn-frow{display:flex;flex-wrap:wrap;gap:0 16px;margin:0} .wpcf7-form .ewn-fcol{flex:1 1 200px;min-width:160px}.wpcf7-form .ewn-ffield,.wpcf7-form .ewn-fcol{margin:0 0 11px} .wpcf7-form .ewn-fsubmit{margin:0 0 24px} .ewn-req{color:var(--cta)} /* Section subheadings inside the order/contact form */ .wpcf7-form .ewn-fsection{font-family:'Rubik',sans-serif;font-size:15px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ewn-text)!important;margin:30px 0 14px;padding-bottom:7px;border-bottom:2px solid var(--ewn-accent)} .wpcf7-form .ewn-fsection:first-of-type{margin-top:0} /* Edition-conditional fields: hidden for the free Trial (toggled by main.js orderEdition) */ .wpcf7-form .eqq-collapsed{display:none!important} /* Selected edition card on the Order page (kept in sync with the dropdown + URL) */ .ewn-ed-card{transition:outline-color .2s,box-shadow .2s} .ewn-ed-card.is-selected{outline:3px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 6px rgba(93,173,226,.12),var(--card-shadow)} /* Contact page: two-column form + sidebar, checkbox, topic hint */ @media(max-width:860px){[data-contact-grid]{grid-template-columns:1fr!important}} .ewn-fhint{display:block;font-weight:400;font-size:13px;color:var(--muted);margin:4px 0 0} .wpcf7-form .ewn-fcheck{margin:0 0 16px} .wpcf7-form .ewn-fcheck .wpcf7-list-item{margin:0} .wpcf7-form .ewn-fcheck label{display:inline-flex;align-items:center;gap:9px;font-weight:500;color:var(--text);cursor:pointer} .wpcf7-form .ewn-fcheck input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);margin:0} #ewn-meeting[hidden]{display:none!important} .wpcf7-form .ewn-hidden{display:none!important} /* "Schedule a Meeting" — gradient accent button with hover lift + glow */ .ewn-meet-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%; background:linear-gradient(135deg,var(--accent),var(--accent-bright));color:#fff;font-weight:600;font-size:15px; padding:13px 22px;border:none;border-radius:11px;cursor:pointer;letter-spacing:.01em; box-shadow:0 12px 26px -12px var(--accent);position:relative;overflow:hidden; transition:transform .2s ease,box-shadow .2s ease,filter .2s ease} .ewn-meet-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s ease} .ewn-meet-btn:hover{transform:translateY(-2px);box-shadow:0 20px 36px -12px var(--accent);filter:brightness(1.05)} .ewn-meet-btn:hover::after{transform:translateX(120%)} .ewn-meet-btn:active{transform:translateY(0)} .ewn-meet-btn svg{transition:transform .2s ease} .ewn-meet-btn:hover svg{transform:scale(1.1)} .ewn-meet-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* Topic pills — CF7 checkboxes rendered as selectable chips (mirrors the original get-in-touch form). CF7 markup is with NO