/* easy.EVplug — responsive hardening + the few components added during the static freeze. Layered ON TOP of the design's own breakpoints (960px / 560px); the team's homepage CSS lives inline in and is untouched. */ /* ---------- Universal safety: media never overflows its column ---------- */ img, svg, video, canvas { max-width: 100%; } img { height: auto; } /* ---------- No horizontal scroll on any device ---------- `clip` (not `hidden`) so the sticky nav keeps sticking. Catches hidden off-canvas overlays/tooltips; older browsers degrade to a harmless scrollbar. */ html, body { overflow-x: clip; } /* The fixed full-screen mobile menu is pinned to the viewport (inset:…0…0); its own 28px padding must sit INSIDE that box, not widen the page. */ .mobile-menu { box-sizing: border-box; } /* Hover info-tooltips are mouse-only; on touch they can't open yet still added ~240px of width. Cap them, and drop them entirely where there's no hover. */ .tip { max-width: min(240px, calc(100vw - 28px)); } @media (hover: none), (pointer: coarse) { .tip, .tip::after { display: none !important; } } /* ---------- Brand logo (canonical SVG mark swapped in for the raster) ---------- */ .logo-mark-img { display: inline-flex; align-items: center; justify-content: center; } .logo-mark-img img { width: 100%; height: 100%; object-fit: contain; } /* ---------- Contact CTA card (replaces the removed lead form) ---------- Left column of the LIGHT .contact section (the dark card is the aside on the right). White card + dark text, balancing the dark contact-side. */ .contact-cta { display: flex; flex-direction: column; gap: 16px; align-self: start; background: var(--paper, #fff); border: 1px solid var(--line, #E6EAE7); border-radius: var(--r-lg, 22px); padding: 30px; box-shadow: var(--shadow-md, 0 4px 14px rgba(20,30,25,.06)); } .contact-cta h3 { color: var(--charcoal, #2A3033); font-size: 22px; line-height: 1.25; margin: 0; } .contact-cta p { color: var(--charcoal-soft, #4a5258); font-size: 15px; line-height: 1.6; margin: 0; } .contact-cta-btn { width: 100%; padding: 16px 22px; justify-content: center; gap: 10px; } /* keep white text on the green primary CTA even where a page styles green (legal pages set .legal-form-wrap a { color: green }, which would otherwise win) */ .contact-cta .btn-primary { color: #fff; } .contact-cta .btn-secondary { background: #fff; color: var(--charcoal, #2A3033); border: 1px solid var(--line, #E6EAE7); } .contact-cta .btn-secondary:hover { border-color: var(--green, #22B14C); color: var(--green-700, #17833a); transform: translateY(-1px); } .contact-cta-note { color: var(--muted, #7c858b); font-size: 13px; } /* ---------- WCAG AA contrast on the green that carries white text / conveys info ---------- The bright brand green #22B14C can't hold white text at AA (2.8:1). Darken ONLY the interactive CTA fill + the launch-band link text to reach 4.5:1; the bright brand green stays for decorative accents (icons, ticks, the "easy.EVplug" dot, hero accent). */ .btn-primary { background: #00B050 !important; } /* EXACT logo green (ev-plug-mark-green.svg) */ .btn-primary:hover { background: #009a47 !important; } /* darker shade of the logo green */ .launch .btn { color: #136e2e !important; } /* green text on white launch button -> ~4.9:1 */ /* green TEXT on light backgrounds -> darker green (~5:1). Dark-section variants (.eyebrow-light, .btn-link-light) are excluded and keep their bright green. */ .eyebrow:not(.eyebrow-light) { color: #157a33 !important; } /* section eyebrows: 3.65 -> ~5:1 */ .btn-link:not(.btn-link-light) { color: #157a33 !important; } .step-num { color: #157a33 !important; } /* "Step one": 2.81 -> ~5:1 */ .footer-tag { color: #157a33 !important; } .badge-popular { background: #157a33 !important; } /* "Most popular": white text 2.81 -> 5.4:1 */ /* muted caption text -> darker gray (~4.6:1). Every --muted use is on a light bg (trust strip, pricing, ROI scale, hero badge label, compare tags, footer). */ :root { --muted: #6a7177; } /* ---------- Legal-page nav on phones ---------- Legal pages have no burger menu, so the logo + "Get a free survey" CTA collide below ~400px. Keep the brand glyph + the CTA; drop only the wordmark TEXT. Scoped via :has(.nav-cta) so the homepage nav (no .nav-cta) is untouched. */ @media (max-width: 560px) { .nav:has(.nav-cta) .wordmark { display: none; } .nav .nav-cta { padding: 10px 16px; font-size: 14px; } } /* ---------- Small-phone padding: no right-edge clipping down to 320px ---------- The design keeps desktop inner padding all the way down, so on narrow phones several components' right columns were being sheared (and hidden by overflow:clip). Tighten the global container + the dense components so nothing clips at 320px. */ @media (max-width: 560px) { .wrap { padding-left: 16px; padding-right: 16px; } .product-spec { padding: 16px 14px; } .roi-head, .roi-controls, .roi-output, .roi-foot { padding-left: 18px; padding-right: 18px; } .compare-head, .compare-feat, .compare-cell, .ocpp-spec-feat, .ocpp-spec-cell, .ocpp-spec-col-flag { padding-left: 10px; padding-right: 10px; } .contact-cta { padding: 22px; } /* hover tooltips are unusable on phones and add width — drop them on small screens */ .tip, .tip::after { display: none !important; } } /* Extra-small phones (<=400px, e.g. iPhone SE / small Android): tighten the dense multi-column components so their right edge never clips at 320px. */ @media (max-width: 400px) { .wrap { padding-left: 13px; padding-right: 13px; } .roi-head, .roi-controls, .roi-output, .roi-foot { padding-left: 13px; padding-right: 13px; } .product-spec { padding: 14px 10px; } .compare-head, .compare-feat, .compare-cell, .ocpp-spec-feat, .ocpp-spec-cell { padding-left: 7px; padding-right: 7px; font-size: 12px; } .ocpp-spec-col-flag { padding-left: 6px !important; padding-right: 6px !important; font-size: 10px !important; white-space: normal !important; letter-spacing: 0 !important; } .contact-cta { padding: 18px; } } /* ---- Official brand lockups (replace mark+wordmark) ---- */ .nav .brand-logo-name { height: 30px; width: auto; display: block; } .brand-logo-tagline { height: 92px; width: auto; display: block; } @media (max-width: 560px) { .nav .brand-logo-name { height: 26px; } .brand-logo-tagline { height: 80px; } } /* ---- Tajalli Tech parent-company logo in footer (uniform across all pages) ---- */ .footer-operated { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; } .footer-operated-by { font-size: 12px; color: var(--muted, #6a7177); } .tajalli-logo { height: 30px; width: auto; display: block; } /* ---- Footer legal strip: balanced full-width bar (better real-estate use) ---- */ .footer-legal-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px 32px; flex-wrap: wrap; } .footer-legal-strip .footer-operated { margin-bottom: 0; flex: 0 0 auto; } .footer-legal-meta { margin: 0; text-align: right; flex: 1 1 380px; min-width: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted, #6a7177); } .footer-legal-meta .fl-copy { color: var(--charcoal, #2A3033); font-weight: 600; } @media (max-width: 680px) { .footer-legal-strip { flex-direction: column; align-items: flex-start; gap: 12px; } .footer-legal-meta { text-align: left; } } /* ---- Header "Log in" app button (always visible, incl. mobile) ---- */ .btn-app { background: #fff; color: var(--charcoal, #2A3033); border: 1.5px solid var(--line, #E6EAE7); } .btn-app:hover { border-color: var(--green, #00B050); color: var(--green-700, #157a33); transform: translateY(-1px); } .nav .btn-app { display: inline-flex !important; } @media (max-width: 560px) { .nav .btn-app { padding: 9px 14px; font-size: 13px; } } /* ---- Footer 2-column legal block ---- */ .footer-legal-2col { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; } .footer-op-col { display: flex; flex-direction: column; gap: 7px; flex: 0 0 auto; } .footer-legal-col { flex: 1 1 340px; min-width: 0; } .footer-legal-col p { margin: 0 0 5px; font-size: 13px; color: var(--muted, #6a7177); line-height: 1.55; } .footer-legal-col a { color: var(--green-700, #157a33); } /* ---- Refund "at a glance" summary box ---- */ .refund-summary ul { margin: 8px 0 0; padding-left: 20px; } .refund-summary li { margin-bottom: 6px; } /* ---- FLAW-1: Tajalli logo aspect ratio (was stretched by flex-column align:stretch) ---- */ .footer-op-col { align-items: flex-start; } .tajalli-logo { object-fit: contain; max-width: 100%; } /* ---- FLAW-3: burger + mobile menu, shared so legal pages match the homepage nav ---- */ .nav-burger { display: none; appearance: none; border: 0; background: transparent; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; } .nav-burger:hover { background: rgba(0,0,0,.05); } .nav-burger span { display: block; width: 22px; height: 2px; background: var(--charcoal,#2A3033); border-radius: 2px; position: relative; transition: transform .25s ease, opacity .2s ease; } .nav-burger span::before, .nav-burger span::after { content:''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--charcoal,#2A3033); border-radius: 2px; transition: transform .25s ease, top .25s ease; } .nav-burger span::before { top: -7px; } .nav-burger span::after { top: 7px; } .nav-burger.open span { background: transparent; } .nav-burger.open span::before { top: 0; transform: rotate(45deg); } .nav-burger.open span::after { top: 0; transform: rotate(-45deg); } .mobile-menu { position: fixed; inset: 72px 0 0 0; z-index: 49; background: rgba(255,255,255,.98); backdrop-filter: blur(14px); padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 8px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .2s ease; border-top: 1px solid var(--line,#E6EAE7); box-sizing: border-box; } .mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .mobile-menu a { font-size: 18px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid var(--line,#E6EAE7); color: var(--charcoal,#2A3033); } .mobile-menu .btn { margin-top: 18px; width: 100%; padding: 16px 22px; font-size: 16px; } @media (max-width: 960px) { .nav .nav-links { display: none; } .nav .nav-burger { display: inline-flex; } .nav .btn-primary { display: none; } }