/* ============================================================ ark-uniform.css — site-wide consistency + premium polish Loaded LAST in on every page so it harmonizes button behavior, focus states, and motion everywhere. Behavioral only — each button keeps its own brand colors. ============================================================ */ /* ---- Unified motion + interaction for every button ---- */ .btn-p, .btn-s, .btn-submit, .wo-submit, .nav-cta, .model-cta, .city-chip { cursor: pointer; transition: transform .28s cubic-bezier(.23, 1, .32, 1), box-shadow .28s ease, background-color .22s ease, border-color .22s ease, color .22s ease; } /* Consistent hover lift + depth — primary-weight buttons */ .btn-p:hover, .btn-submit:hover, .wo-submit:hover, .nav-cta:hover, .model-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(58, 139, 212, .55); } /* Secondary buttons lift the same amount, neutral shadow */ .btn-s:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .6); } /* Consistent press feedback for every button */ .btn-p:active, .btn-s:active, .btn-submit:active, .wo-submit:active, .nav-cta:active, .model-cta:active { transform: translateY(0); box-shadow: 0 4px 12px -8px rgba(58, 139, 212, .5); } /* Unified disabled / sending state (forms) */ .btn-submit:disabled, .wo-submit:disabled, .btn-p:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; } /* ---- Accessible, on-brand focus ring across all controls ---- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn-p:focus-visible, .btn-s:focus-visible, .btn-submit:focus-visible, .wo-submit:focus-visible, .nav-cta:focus-visible, .model-cta:focus-visible { outline: 2px solid var(--blue-lt, #3A8BD4); outline-offset: 3px; border-radius: 5px; } /* ---- Premium polish ---- */ .nav-links a, .footer-links a, .footer-email { transition: color .2s ease; } ::selection { background: rgba(58, 139, 212, .30); color: #fff; } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .btn-p, .btn-s, .btn-submit, .wo-submit, .nav-cta, .model-cta, .city-chip { transition: none; } .btn-p:hover, .btn-s:hover, .btn-submit:hover, .wo-submit:hover, .nav-cta:hover, .model-cta:hover { transform: none; } } /* ---- Mobile navigation: force-collapse into the hamburger ---- Loaded last with !important so the menu reliably hides behind the ☰ button on every browser — including iOS Safari, which mishandles the page's inline media query and leaves the links showing. */ /* Desktop nav phone number — readable text, not a button */ .nav-phone { font-family: 'Manrope', sans-serif; font-size: 0.9rem; font-weight: 500; color: var(--silver, #8A9BB0); text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; transition: color .2s; } .nav-phone:hover { color: var(--white, #EDF1F7); } @media (max-width: 860px) { nav .nav-links { display: none !important; } nav .nav-cta { display: none !important; } nav .nav-phone { display: none !important; } nav #nav-toggle:checked ~ .nav-links, nav #nav-toggle:checked ~ .nav-cta { display: flex !important; } nav .nav-burger { display: block !important; } } /* ============================================================ PREMIUM MOBILE NAVIGATION (ark-mobile-nav.js builds the markup) ------------------------------------------------------------ Desktop is untouched: every .amn-* piece is display:none by default and only switches on under the mobile media query (or the html.is-phone fallback for iOS Safari width mis-reports). The desktop horizontal nav bar is fully removed on mobile — replaced by a floating logo (top-left) + hamburger (top-right), a full-width dropdown, and a sticky Call Now bar. ============================================================ */ /* Each page's generic `nav { position: fixed; top:0 }` rule also catches the footer's